smaller tab buttons for small screens (gorhill#1890 (comment))

sirrobert · Mar 20, 2017 · b19dfb2 · b19dfb2
1 parent 2dcf7b7
commit b19dfb2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
@@ -41,7 +41,7 @@ html, body {
     cursor: pointer;
     display: inline-block;
     font-size: 110%;
-    margin: 0;
+    margin: 0 1px 0 0;
     padding: 4px;
     position: relative;
     text-decoration: none;
@@ -70,15 +70,18 @@ iframe {
         position: relative;
         }
     #dashboard-nav-widgets {
-        padding: 0;
+        padding: 1px 0 0 0;
+        white-space: normal;
         }
     [data-i18n="extName"] {
         display: none;
         }
     .tabButton {
         border-radius: 0;
-        border-top: 0;
-        display: block;
+        display: inline-block;
+        font-size: 100%;
+        margin-bottom: 1px;
+        top: 0;
         }
     .tabButton.selected {
         border-bottom: 1px solid #ccc;

diff --git a/src/dashboard.html b/src/dashboard.html
@@ -12,13 +12,13 @@
 <body>
 <div id="dashboard-nav">
     <div id="dashboard-nav-widgets">
-        <span data-i18n="extName"></span>
-        <a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a>
-        <a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a>
-        <a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a>
-        <a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a>
-        <a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a>
-        <a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
+        <span data-i18n="extName"></span><!--
+     --><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!--
+     --><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!--
+     --><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!--
+     --><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!--
+     --><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!--
+     --><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
     </div>
 </div>