From d3d8cca9475043de412a7568ce3c0cd065db0955 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Sat, 4 Apr 2020 12:05:52 +0200
Subject: [PATCH] mobile: timeslider and small adjustements

---
 src/static/css/pad/gritter.css |  1 -
 src/static/css/pad/toolbar.css |  9 ++++++++-
 src/static/css/timeslider.css  | 20 +++++++++++++++++---
 src/templates/timeslider.html  |  3 ++-
 4 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/static/css/pad/gritter.css b/src/static/css/pad/gritter.css
index 1cafe41ff..921a28ca7 100644
--- a/src/static/css/pad/gritter.css
+++ b/src/static/css/pad/gritter.css
@@ -11,7 +11,6 @@
   position: relative;
   max-width: 400px;
   min-width: 0;
-  width: 100%;
   margin: 0 auto;
   display: flex;
 }
diff --git a/src/static/css/pad/toolbar.css b/src/static/css/pad/toolbar.css
index b98b58a47..81eb6d504 100644
--- a/src/static/css/pad/toolbar.css
+++ b/src/static/css/pad/toolbar.css
@@ -11,6 +11,7 @@
   list-style: none;
   z-index: 2;
   overflow: hidden;
+  margin: 0;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -146,7 +147,7 @@
     width: 5px;
   }
   /* menu_right act like a new toolbar on the bottom of the screen */
-  .toolbar ul.menu_right, .timeslider-bar .editbarright {
+  .toolbar .menu_right {
     position: fixed;
     bottom: 0;
     right: 0;
@@ -155,6 +156,12 @@
     background-color: #f4f4f4;
     padding: 0 5px 5px 5px;
   }
+  .toolbar ul.menu_right > li {
+    margin-right: 8px;
+  }
+  .toolbar ul.menu_right > li.separator {
+    display: none;
+  }
   .toolbar ul.menu_right > li a {
     border: none;
     background-color: transparent;
diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css
index 288513c18..65cf603aa 100644
--- a/src/static/css/timeslider.css
+++ b/src/static/css/timeslider.css
@@ -1,5 +1,6 @@
 #editbar {
   padding: 10px;
+  display: block;
 }
 
 .timeslider-bar {
@@ -12,15 +13,15 @@
 .timeslider-title-container {
   flex: 1 auto;
 }
+.timeslider-title {
+  font-size: 1.5rem;
+}
 .timeslider-subtitle {
   margin-top: 10px;
 }
 
 /* RIGHT TOOLBAR (export, settings, back to pad) */
 
-.editbarright ul li {
-  margin-top: 0;
-}
 .editbarright ul li a {
   background-color: transparent;
   border: none;
@@ -113,6 +114,9 @@
 
 /* PAD CONTENT */
 
+#editorcontainerbox {
+  overflow-y: auto;
+}
 #outerdocbody {
   display: block;
 }
@@ -120,4 +124,14 @@
 #innerdocbody {
   white-space: normal;
   word-break: break-word;
+}
+
+@media (max-width: 720px) {
+  #timeslider-slider #timer { display: none; }
+
+  .editbarright [data-key="timeslider_returnToPad"] {
+    position: absolute;
+    right: 10px;
+    top: 0;
+  }
 }
\ No newline at end of file
diff --git a/src/templates/timeslider.html b/src/templates/timeslider.html
index 50fc56b74..b0d5e8b45 100644
--- a/src/templates/timeslider.html
+++ b/src/templates/timeslider.html
@@ -32,6 +32,7 @@
   <meta charset="utf-8">
   <meta name="robots" content="noindex, nofollow">
   <meta name="referrer" content="no-referrer">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
   <link rel="shortcut icon" href="<%=settings.faviconTimeslider%>">
   <% e.begin_block("timesliderStyles"); %>
   <link rel="stylesheet" href="../../static/css/pad.css">
@@ -72,7 +73,7 @@
         </p>
       </div>
 
-      <div class="editbarright">
+      <div class="editbarright menu_right">
         <% e.begin_block("timesliderEditbarRight"); %>
         <ul>
           <%- toolbar.menu(settings.toolbar.timeslider, true, 'timeslider-right', 'timeslider') %>