css: fix timeslider toolbar on mobile when multiple authors are displayed (#3933)

src/static/css/timeslider.css

@@ -142,4 +142,12 @@
   .timeslider-title {
     font-size: 1.5rem !important;
   }
+  .timeslider-title-container {
+    width: 100%;
+  }
+  .authors-label { display: none; }
+  #authorsList {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }

src/static/skins/colibris/timeslider.css

@@ -70,6 +70,8 @@
 .timeslider #authorsList .author {
   padding: 2px 5px;
   border-radius: 3px;
+  margin-right: 4px;
+  margin-bottom: 4px;
 }
 
 .timeslider-title {
@@ -79,3 +81,18 @@
   margin-top: 6px;
   font-size: .9em;
 }
+
+@media (max-width: 720px) {
+
+  #slider-btn-container {
+    margin-top: 0;
+    margin-right: 5px;
+  }
+  #slider-btn-container #playpause_button_icon {
+    width: 30px;
+    height: 30px;
+  }
+  #slider-btn-container #playpause_button_icon:before {
+    font-size: 18px;
+  }
+}

src/templates/timeslider.html

@@ -68,7 +68,7 @@
           <span id="revision_date"></span>
         </h1>
         <p class="timeslider-subtitle">
-          <span data-l10n-id="timeslider.toolbar.authors"></span>
+          <span class="authors-label" data-l10n-id="timeslider.toolbar.authors"></span>
           <span id="authorsList" data-l10n-id="timeslider.toolbar.authorsList"></span>
         </p>
       </div>