activeadmin_blaze_theme 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c1e07a23326bae2c890babd6ed66ec30ab050dd6
-  data.tar.gz: 9df83b2cbf76a1e394be94dfc3b69c1443bda872
+  metadata.gz: 2f0e29972847ff9e930543c5d1e478ddaeeb04f8
+  data.tar.gz: 437f97aa3a05465316be0392794e24031faf4936
 SHA512:
-  metadata.gz: 5774f12c38c765b6fa8fa8b9128fb1dd84cdccd2489b150fd4a8afa27ce77fbc0e2ff3a5276763ff6f642f1e5451ca8dc5f2d46e8c0024ee2b691512c817a591
-  data.tar.gz: 4859b2fe77e16f47c8ee94472fa34c872e610e8c175d42d97e6f62fd8b016498159129eb8de9b0d6ae940b7036617e51f119af5ee15f1f7e1c9eb44f44e16add
+  metadata.gz: 6c52edfb877579a8cf9a12d9c670729e4d610173acff8340f3e0ce056734f492c584aa5c6989b53481506f01c078e8873d37de22aae9586dc1343c400eb7ba20
+  data.tar.gz: 4d35b6143888bb954f682f0d1a33f72f77ed8286ec4299dd3deda28a42af261cff44e9630b8503b2a14bb917835d39fb80fba34578ce219fbef1a0909b643694

data/README.md

@@ -6,7 +6,7 @@ Features:
 
 - CSS only theme with clean UI
 - compact nested forms
-- [customizable](#customize): colors, sidebar position, compact title bar, scroll on cells
+- [customizable](#customize): colors, sidebar position, scroll on cells
 - custom boolean input: [toggle](#toggle)
 - Blaze CSS [widgets](#blaze-widgets)
 
@@ -27,31 +27,35 @@ Features:
 - To change colors add before your ActiveAdmin styles (_app/assets/stylesheets/active_admin.scss_):
 
 ```css
-/* blaze colors */
+// blaze colors
 $color-brand: #2C3E50;
 $color-info: #4dabf5;
 $color-warning: #ff9800;
 $color-success: #4caf50;
 $color-error: #f44336;
-/* main variables */
-$bg-form1: #f4f4f4;                // bg 1st level forms
-$bg-form2: darken($bg-form1, 3%);  // bg 2nd level forms (nested)
-$bg-form3: darken($bg-form1, 6%);  // bg 3rd level forms (nested)
-$bg-form4: darken($bg-form1, 9%);  // bg 4th level forms (nested)
-$bg-form-sub-headings: #d4d4d4;    // bg nested forms title
-$bg-header: $color-brand;          // bg header bar
-$bg-inputs: #fff;                  // bg forms inputs
-$bg-menu-active: #7b929e;          // bg menu item current / hover
-$fg-box-title: #fff;
-$fg-button-link: #fff;
-$fg-menu-items: #f8f8f8;
-$fg-table-borders: #e4e4e4;
-$fg-table-link: #eee;
-/* other variables */
-$form-padding: 10px;
-$inputs-spacing: 10px;
-$height-inputs: 28px;
-$text-shadow: #000;
+// main variables
+$bg-footer: #dfdfdf !default;               // bg footer bar
+$bg-form1: #f4f4f4 !default;                // bg 1st level forms
+$bg-form2: darken($bg-form1, 3%) !default;  // bg 2nd level forms (nested)
+$bg-form3: darken($bg-form1, 6%) !default;  // bg 3rd level forms (nested)
+$bg-form4: darken($bg-form1, 9%) !default;  // bg 4th level forms (nested)
+$bg-form-sub-headings: lighten( $color-brand, 64% ) !default;  // bg nested forms title
+$bg-header: $color-brand !default;          // bg header bar
+$bg-inputs: #fff !default;                  // bg forms inputs
+$bg-menu-active: #7b929e !default;          // bg menu item current / hover
+$bg-sidebar: #efefef;                       // bg sidebar
+$fg-box-title: #fff !default;
+$fg-button-link: #fff !default;
+$fg-menu-items: #f8f8f8 !default;
+$fg-table-borders: #e4e4e4 !default;
+$fg-table-link: #eee !default;
+// other variables
+$form-padding: 10px !default;
+$inputs-spacing: 10px !default;
+$height-inputs: 26px !default;
+$height-topbar: 40px !default;
+$height-titlebar: 38px !default;
+$text-shadow: #000 !default;
 ```
 
 - To move sidebar on the left add to your ActiveAdmin styles (after blaze theme import):
@@ -65,11 +69,6 @@ $text-shadow: #000;
 - More options:
 
 ```css
-// compact title bar
-#title_bar {
-  @extend .compact_titlebar;
-}
-
 // scrollable table cells
 .index_content table {
   @extend .scoll_cells;
@@ -120,10 +119,14 @@ Index:
 
 ![index](screenshot1.jpg)
 
-Edit (with `$form-padding: 2px;`):
+Edit:
 
 ![edit](screenshot2.jpg)
 
+Show - sidebar on the left:
+
+![edit](screenshot3.jpg)
+
 ## Contributors
 
 - [Mattia Roccoberton](http://blocknot.es) - creator, maintainer

data/app/assets/stylesheets/activeadmin_blaze_theme/theme.scss

@@ -2,6 +2,7 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto');
 
 // main variables
+$bg-footer: #dfdfdf !default;             // bg footer bar
 $bg-form1: #f4f4f4 !default;              // bg 1st level forms
 $bg-form2: darken($bg-form1, 3%) !default;  // bg 2nd level forms (nested)
 $bg-form3: darken($bg-form1, 6%) !default;  // bg 3rd level forms (nested)
@@ -10,6 +11,7 @@ $bg-form-sub-headings: lighten( $color-brand, 64% ) !default;  // bg nested form
 $bg-header: $color-brand !default;          // bg header bar
 $bg-inputs: #fff !default;                // bg forms inputs
 $bg-menu-active: #7b929e !default;        // bg menu item current / hover
+$bg-sidebar: #efefef;                     // bg sidebar
 $fg-box-title: #fff !default;
 $fg-button-link: #fff !default;
 $fg-menu-items: #f8f8f8 !default;
@@ -20,11 +22,15 @@ $fg-table-link: #eee !default;
 $form-padding: 10px !default;
 $inputs-spacing: 10px !default;
 $height-inputs: 26px !default;
+$height-topbar: 40px !default;
+$height-titlebar: 38px !default;
 $text-shadow: #000 !default;
 
 // active_admin theme styles
 body.active_admin {
   font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  min-height: 100vh;
 
   // generics
   .button-base {
@@ -106,6 +112,9 @@ body.active_admin {
     fieldset.actions li.cancel a:hover {
       background-image: none;
     }
+    > .actions {
+      margin: 5px 0 0 0;
+    }
 
     // submits
     input[type='submit'] {
@@ -281,8 +290,7 @@ body.active_admin {
           @extend .c-card__item;
           // @extend .c-card__item--info;
           background: $bg-form-sub-headings;
-          margin-bottom: 0;
-          padding-left: 10px;
+          padding: 10px;
         }
         .inputs {
           padding: $form-padding;
@@ -323,16 +331,24 @@ body.active_admin {
     }
     .site_title {
       color: $fg-menu-items;
+      padding-top: 0;
+      padding-bottom: 0;
       img {
-        max-height: 36px;
+        max-height: $height-topbar;
         max-width: 250px;
-        top: -1px;
+        // top: -1px;
         vertical-align: middle;
       }
     }
     ul.tabs {
+      li {
+        height: $height-topbar;
+        line-height: $height-topbar;
+      }
       li > a {
         color: $fg-menu-items;
+        height: $height-topbar;
+        line-height: $height-topbar;
       }
       li:hover, li.current {
         background: $bg-menu-active;
@@ -403,6 +419,14 @@ body.active_admin {
       &.current:hover {
         background-image: none;
       }
+      &.gap {
+        border: 0 none;
+      }
+      &.gap:hover {
+        background-color: transparent;
+        color: initial;
+        cursor: default;
+      }
     }
   }
 
@@ -441,12 +465,16 @@ body.active_admin {
 
   // sidebars
   #sidebar {
-    background: #efefef;
+    background: $bg-sidebar;
+    min-height: calc(100vh - #{$height-topbar + $height-titlebar + 2 + 40});
     padding: 0 15px;
     .sidebar_section {
       margin-bottom: 20px;
     }
   }
+  #active_admin_content > #sidebar, #active_admin_content > #main_content_wrapper {
+    float: none;
+  }
   .sidebar_section {
     @extend .c-card;
     @extend .u-high;
@@ -564,6 +592,18 @@ body.active_admin {
   #title_bar {
     background-image: none;
     box-shadow: none;
+    padding-top: 0;
+    padding-bottom: 0;
+    .breadcrumb {
+      float: left;
+      font-size: 1em;
+      line-height: initial;
+      margin: 0;
+      padding: 0;
+      > a, > a:link, > a:visited, > a:active {
+        opacity: 0.7;
+      }
+    }
     .action_items span.action_item {
       > a,
       > .dropdown_menu > a {
@@ -578,11 +618,24 @@ body.active_admin {
         @extend .c-button--error;
       }
     }
+    #page_title {
+      display: inline-block;
+      float: left;
+      font-size: 1em;
+      // font-size: 2em;
+      line-height: initial;
+      margin-left: 5px;
+    }
+    #titlebar_left, #titlebar_right {
+      height: $height-titlebar;
+    }
   }
 
   // main content
   #main_content {
-    padding: 30px 0 15px 20px;
+    margin: 0;
+    padding: 25px 20px;
+    width: calc(100% - 270px);
     > .panel {
       @extend .c-card;
       @extend .u-high;
@@ -606,6 +659,7 @@ body.active_admin {
 
   // admin content
   #active_admin_content {
+    display: flex;
     padding: 0;
   }
 
@@ -620,8 +674,11 @@ body.active_admin {
 
   // footer
   #footer {
-    // bottom: 0;
-    // position: absolute;
+    bottom: 0;
+    position: absolute;
+    background-color: $bg-footer;
+    line-height: 20px;
+    padding: 10px;
     text-align: center;
     width: 100%;
     > p {
@@ -631,6 +688,11 @@ body.active_admin {
   }
 
   // misc
+  .download_links > a {
+    @extend .c-button;
+    @extend .c-button--info;
+    @extend .u-small;
+  }
   .ui-datepicker {
     > .ui-datepicker-header {
       border-bottom: 0 none;
@@ -658,40 +720,18 @@ body.active_admin {
 
   // optional customizations
   .compact_titlebar {
-    padding-top: 0;
-    padding-bottom: 0;
-    .breadcrumb {
-      float: left;
-      font-size: 1em;
-      line-height: initial;
-      margin: 0;
-      padding: 0;
-      > a, > a:link, > a:visited, > a:active {
-        opacity: 0.5;
-      }
-    }
-    #page_title {
-      display: inline-block;
-      float: left;
-      font-size: 1em;
-      // font-size: 2em;
-      line-height: initial;
-      margin-left: 5px;
-    }
-    #titlebar_left, #titlebar_right {
-      height: 36px;
-    }
+    white-space: initial;
   }
   .sidebar_left {
     #main_content_wrapper {
-      float: right;
-      width: calc( 100% - 300px );
+      order: 2;
+      width: calc( 100% - 270px );
       #main_content {
-        margin-right: 0;
-        padding: 35px 30px 35px 0;
+        width: 100%;
       }
     }
     #sidebar {
+      order: 1;
       margin-left: 0;
     }
   }
@@ -703,6 +743,11 @@ body.active_admin {
   }
 
   #active_admin_content.without_sidebar #main_content_wrapper #main_content {
-    padding: 20px 15px;
+    width: 100%;
+  }
+  #wrapper {
+    min-height: 100vh;
+    padding-bottom: 40px;  // footer height
+    position: relative;
   }
 }

data/lib/activeadmin_blaze_theme/version.rb

@@ -1,3 +1,3 @@
 module ActiveAdminBlazeTheme
-  VERSION = '0.3.0'
+  VERSION = '0.4.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_blaze_theme
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Mattia Roccoberton
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-01 00:00:00.000000000 Z
+date: 2017-06-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activeadmin
@@ -104,6 +104,7 @@ files:
 - lib/formtastic/inputs/blaze_toggle_input.rb
 - screenshot1.jpg
 - screenshot2.jpg
+- screenshot3.jpg
 homepage: https://github.com/blocknotes/activeadmin_blaze_theme
 licenses:
 - MIT