Update settings to re-use admin layout, one big navigation tree, improve settings forms

4 files changed, 99 insertions, 35 deletions

diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss
index b7d903ddf..f29090f1a 100644
--- a/app/assets/stylesheets/about.scss
+++ b/app/assets/stylesheets/about.scss
@@ -12,7 +12,7 @@
   }
 
   h1 {
-    font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font: 46px/52px 'Roboto', sans-serif;
     font-weight: 600;
     margin-bottom: 20px;
     color: $color4;
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 8d01ac4c4..8de42d680 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -1,16 +1,20 @@
 .admin-wrapper {
-  width: 100%;
+  display: flex;
+  justify-content: center;
   height: 100%;
-  position: fixed;
-  background: darken($color1, 2%);
-  overflow-y: scroll;
+
+  .sidebar-wrapper {
+    flex: 1;
+    height: 100%;
+    background: $color1;
+    display: flex;
+    justify-content: flex-end;
+  }
 
   .sidebar {
     width: 240px;
-    position: fixed;
-    left: 0;
     height: 100%;
-    background: $color1;
+    padding: 20px 0;
 
     .logo {
       display: block;
@@ -21,6 +25,8 @@
 
     ul {
       list-style: none;
+      border-radius: 4px 0 0 4px;
+      overflow: hidden;
 
       a {
         display: block;
@@ -28,6 +34,7 @@
         color: rgba($color5, 0.7);
         text-decoration: none;
         transition: all 200ms linear;
+        border-radius: 4px 0 0 4px;
 
         i.fa {
           margin-right: 5px;
@@ -40,27 +47,72 @@
         }
 
         &.selected {
-          color: $color5;
-          background-color: $color4;
+          background: darken($color1, 2%);
+          border-radius: 4px 0 0 0;
+        }
+      }
+
+      ul {
+        background: darken($color1, 4%);
+        border-radius: 0 0 0 4px;
+
+        a {
+          border: 0;
 
-          &:hover {
-            background-color: lighten($color4, 5%);
+          &.selected {
+            color: $color5;
+            background-color: $color4;
+            border-bottom: 0;
+            border-radius: 0;
+
+            &:hover {
+              background-color: lighten($color4, 5%);
+            }
           }
         }
       }
     }
   }
 
+  .content-wrapper {
+    flex: 2;
+  }
+
   .content {
-    margin-left: 240px;
-    padding: 15px;
+    max-width: 700px;
+    padding: 20px 15px;
+    padding-top: 60px;
+    padding-left: 25px;
+
+    h2 {
+      color: $color2;
+      font-size: 24px;
+      line-height: 28px;
+      font-weight: 400;
+      margin-bottom: 40px;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 18px;
+      color: $color2;
+      margin-bottom: 20px;
+
+      strong {
+        color: $color5;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .simple_form {
+    max-width: 400px;
   }
 }
 
 .filters {
   display: flex;
   margin-bottom: 20px;
-  padding-left: 8px;
 
   .filter-subset {
     flex: 0 0 auto;
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 0bdff6186..c4c876e30 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -115,6 +115,7 @@ body {
     width: 100%;
     height: 100%;
     padding: 0;
+    background: $color1;
   }
 
   &.embed {
@@ -129,6 +130,14 @@ body {
     }
   }
 
+  &.admin {
+    background: darken($color1, 4%);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+  }
+
   @media screen and (max-width: 360px) {
     padding-bottom: 0;
   }
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index 560388f8f..a97a767e0 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -7,18 +7,6 @@ code {
   max-width: 400px;
   padding: 20px;
   margin: 0 auto;
-
-  p {
-    font-size: 14px;
-    line-height: 18px;
-    color: $color2;
-    margin-bottom: 20px;
-
-    strong {
-      color: $color5;
-      font-weight: 500;
-    }
-  }
 }
 
 .simple_form {
@@ -28,28 +16,35 @@ code {
 
   .hint {
     display: block;
-    color: rgba($color5, 0.8);
+    color: $color3;
     font-size: 12px;
+    margin-top: 4px;
+  }
+
+  .label_input {
+    display: flex;
+
+    label {
+      flex: 0 0 auto;
+      width: 100px;
+    }
+
+    input {
+      flex: 1 1 auto;
+    }
   }
 
   .input.file, .input.select {
     padding: 15px 0;
     margin-bottom: 0;
-    display: flex;
 
     label {
       font-family: inherit;
       font-size: 16px;
       color: $color5;
-      width: 100px;
       display: block;
-      flex: 0 0 auto;
       padding-top: 5px;
     }
-
-    input[type=file], select {
-      flex: 1 1 auto;
-    }
   }
 
   .fields-group {
@@ -64,6 +59,7 @@ code {
       font-size: 14px;
       color: white;
       display: block;
+      width: auto;
     }
 
     label.checkbox {
@@ -80,6 +76,7 @@ code {
 
     .hint {
       padding-left: 25px;
+      margin-left: 0;
     }
   }
 
@@ -116,13 +113,19 @@ code {
   }
 
   .input.field_with_errors {
+    label {
+      color: $color6;
+    }
+
     input[type=text], input[type=email], input[type=password] {
       border-bottom-color: $color6;
     }
 
     .error {
+      display: block;
       font-weight: 500;
       color: $color6;
+      margin-top: 4px;
     }
   }