UI tweaks

assets/javascripts/templates/pages/offline_tmpl.coffee

@@ -52,7 +52,7 @@ app.templates.offlineDoc = (doc, status) ->
   html = """
     <tr data-slug="#{doc.slug}"#{if outdated then ' class="_highlight"' else ''}>
       <td class="_docs-name _icon-#{doc.icon}">#{doc.fullName}</td>
-      <td class="_docs-size">#{Math.ceil(doc.db_size / 100000) / 10} MB</td>
+      <td class="_docs-size">#{Math.ceil(doc.db_size / 100000) / 10}&nbsp;<small>MB</small></td>
   """
 
   html += if !(status and status.installed)

assets/stylesheets/components/_content.scss

@@ -38,17 +38,12 @@
     margin-top: $headerHeight;
   }
 
-  &:after { // padding bottom
-    content: '';
-    display: block;
-    margin-bottom: 1.25rem;
-  }
-
   &::-webkit-scrollbar { -webkit-appearance: none; }
   &::-webkit-scrollbar:vertical { width: 14px; }
   &::-webkit-scrollbar:horizontal { height: 14px }
   &::-webkit-scrollbar-button { display: none; }
-  &::-webkit-scrollbar-track { background: $contentBackground; }
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-corner { background: $contentBackground; }
   &::-webkit-scrollbar-thumb {
     min-height: 2rem;
     background: $scrollbarColor;
@@ -56,6 +51,7 @@
     border: 5px solid $contentBackground;
     border-radius: 10px;
 
+    &:hover,
     &:active {
       background-color: $scrollbarColorHover;
       border-width: 4px;
@@ -229,8 +225,6 @@
 
 ._credits {
   width: 100%;
-
-  td:first-child, td:last-child { white-space: nowrap; }
 }
 
 //
@@ -244,7 +238,6 @@
 
   th, td {
     width: 1%;
-    white-space: nowrap;
 
     &:first-child { width: auto; }
     &:last-child { width: 12rem; }
@@ -259,7 +252,11 @@
   @extend %doc-icon;
 }
 
-._docs-size { text-align: right; }
+._docs-size {
+  text-align: right;
+
+  > small { color: $textColorLight; }
+}
 
 ._docs-tools {
   overflow: hidden;

assets/stylesheets/components/_header.scss

@@ -146,7 +146,7 @@
   &:before {
     position: absolute;
     z-index: 1;
-    top: 1rem;
+    top: calc(1rem - 1px);
     left: 1rem;
     opacity: .4;
     pointer-events: none;

assets/stylesheets/components/_mobile.scss

@@ -42,6 +42,7 @@
   ._settings { position: static; }
   ._settings ._sidebar { padding-bottom: $headerHeight; }
   ._settings-tabs { display: block; }
+  ._header ._settings-btn { width: auto; }
 
   // Header
 

assets/stylesheets/components/_settings.scss

@@ -22,6 +22,10 @@
   }
 }
 
+//
+// Settings page
+//
+
 ._settings-fieldset {
   display: flex;
   margin: 1.5rem 0;
@@ -68,12 +72,13 @@
   vertical-align: top;
   margin-left: .375rem;
 
-  &[data-behavior=reset] {
+  &[data-behavior="reset"] { color: $textColorRed; }
-    font-size: .75rem;
-    color: $textColorRed;
-  }
 }
 
+//
+// Footer
+//
+
 ._footer {
   position: absolute;
   z-index: $headerZ;
@@ -92,6 +97,7 @@
 
 ._settings-btn {
   display: block;
+  width: 100%;
   height: 100%;
   line-height: 1.5rem;
   padding: 0 .75rem;
@@ -113,8 +119,6 @@
   }
 }
 
-._save-btn { width: 100%; }
-
 //
 // Header tabs
 //

assets/stylesheets/components/_sidebar.scss

@@ -27,6 +27,7 @@
     border: 3px solid $contentBackground;
     border-radius: 5px;
 
+    &:hover,
     &:active {
       background-color: $scrollbarColorHover;
       border-width: 2px;

assets/stylesheets/global/_base.scss

@@ -126,6 +126,7 @@ th, td {
   padding-bottom: -webkit-calc(.3em + 1px);
   padding-bottom:         calc(.3em + 1px);
   text-align: left;
+  white-space: normal !important;
 }
 
 th {

assets/stylesheets/pages/_support_tables.scss

@@ -30,7 +30,6 @@
 
     td {
       padding: .125rem .25rem;
-      white-space: nowrap;
       cursor: default;
     }
 

assets/stylesheets/pages/_yii.scss

@@ -9,6 +9,4 @@
     float: right;
     color: $textColorLight;
   }
-
-  .param-type-col { white-space: nowrap; }
 }

views/app.erb

@@ -44,13 +44,12 @@
         <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></svg> Back
       </button>
       <nav class="_settings-tabs">
-        <a class="_settings-tab active" data-tab="doc-picker" hidden>Docs</a>
+        <a class="_settings-tab active" data-tab="doc-picker" hidden>Docs</a><a class="_settings-tab" data-tab="settings" hidden>Settings</a>
-        <a class="_settings-tab" data-tab="settings" hidden>Settings</a>
       </nav>
     </div>
     <div class="_sidebar"></div>
     <div class="_footer">
-      <button type="submit" class="_settings-btn _save-btn">
+      <button type="submit" class="_settings-btn">
         <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></svg> Save
       </button>
     </div>