activeadmin 0.2.2 → 0.3.0

data/app/assets/javascripts/active_admin/base.js

@@ -0,0 +1,12 @@
+//= require "active_admin/vendor"
+
+/* Active Admin JS */
+
+$(function(){
+  $(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});
+
+  $(".clear_filters_btn").click(function(){
+    window.location.search = "";
+    return false;
+  });
+});

data/{lib/active_admin/stylesheets/active_admin.scss → app/assets/stylesheets/active_admin/_base.css.scss}

@@ -1,7 +1,5 @@
 /* Active Admin CSS */
 
-// Bring in all the shared goodness
-@import "active_admin/mixins/all";
 
 // Reset Away!
 @include global-reset;
@@ -10,8 +8,9 @@
 @import "active_admin/typography";
 @import "active_admin/header";
 @import "active_admin/forms";
-@import "active_admin/comments";
-@import "active_admin/flash_messages";
+@import "active_admin/components/comments";
+@import "active_admin/components/flash_messages";
+@import "active_admin/components/date_picker";
 
 body {
   font-family: Helvetica, Arial, sans-serif;
@@ -73,8 +72,8 @@ body {
 
   #sidebar { 
     float: left; 
-    width: 270px; 
-    margin-left: -270px; 
+    width: $sidebar-width; 
+    margin-left: -$sidebar-width;
   }
 }
 
@@ -103,7 +102,7 @@ td, p {
   span.icon { margin: 0 3px; }
 }
 
-a.view_link, a.edit_link, a.delete_link {
+a.member_link {
   margin-right: 7px;
   white-space: nowrap;
 }
@@ -133,8 +132,42 @@ a.button, input[type=submit] { @include dark-button; }
 // Helper class to apply to elements to make them sections
 .section, .panel{ @include section; }
 
+// ----------------------------------- Blank Slate
+
+.blank_slate_container {
+  clear: both;
+  text-align: center;
+  
+  .blank_slate {
+    @include rounded;
+    -webkit-font-smoothing: antialiased;
+    border: 1px dashed #DADADA;
+    color: #AAA;
+    display: inline-block;
+    font-size: 1.2em;
+    font-weight: bold;
+    padding: 14px 25px;
+    text-align: center;
+    
+    small {
+      display: block;
+      font-size: 0.9em;
+      font-weight: normal;
+    }
+  }
+}
+
+.admin_dashboard .blank_slate_container .blank_slate {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.with_sidebar .blank_slate_container .blank_slate {
+  margin-top: 80px;
+}
+
 // ----------------------------------- Tables 
-table {
+table.index_table {
   width: 100%;
   margin-bottom: 10px;
   border: 0;
@@ -154,7 +187,7 @@ table {
     }
 
     &.sortable a {
-      background: url('/images/active_admin/orderable.png') no-repeat 0 4px; padding-left: 13px;
+      background: url(active_admin_image_path('orderable.png')) no-repeat 0 4px; padding-left: 13px;
     }
 
     &.sorted-asc a { background-position: 0 -27px; }
@@ -204,8 +237,9 @@ table {
   b { color: #5c6469; }
 }
 
-// -------------------------------------- Index Footer (Under Table) 
-#index_footer { padding-top: 5px; text-align: right; font-size: 0.85em; }
+.paginated_collection_contents { 
+  clear: both;
+}
 
 .pagination { 
   display: inline; 
@@ -213,15 +247,19 @@ table {
   margin-left: 10px; 
 
   a { @include light-button; }
-  em { @include default-button; }
-  a, em { 
+  span.page.current { @include default-button; }
+  a, span.page.current { 
     @include rounded(0px);
     margin-right: 4px; 
     padding: 2px 5px;
   }
-  .previous_page, .next_page { display:none; }
+  span.page.current { padding-left: 7px; }
 }
 
+// -------------------------------------- Index Footer (Under Table) 
+#index_footer { padding-top: 5px; text-align: right; font-size: 0.85em; }
+
+
 
 .index_content { clear: both; }
 
@@ -229,41 +267,6 @@ table {
 table.index_grid td { border: none; background: none; padding: 0 20px 20px 0; margin: 0;}
 
 
-// -------------------------------------- Filter Forms 
-form {
-  .buttons { 
-    margin-top: 15px; 
-    input[type=submit] { margin-right: 10px; }
-  }
-  .filter_form_field {
-    margin-bottom: 10px; 
-    clear: both;
-
-
-    label {
-      display: block;
-      text-transform: uppercase;
-      color: $section-header-text-color;
-      font-size: 0.9em;
-      font-weight: bold;
-    }
-    .datepicker { width: 80px; }
-    &.filter_numeric { input[type=text] { width: 80px; margin-left: 5px; } }
-    &.filter_check_boxes {
-      label { margin-bottom: 3px; }
-      .check_boxes_wrapper label { 
-        font-weight: normal; 
-        margin-bottom: 3px;
-        text-transform: none;
-        font-size: 1.0em;
-        input { vertical-align: baseline; }
-      }
-    }
-  }
-  a.clear_filters_btn { @include light-button; }
-}
-
-
 // -------------------------------------- Logged Out 
 body.logged_out {
   background: #e8e9ea;
@@ -286,14 +289,6 @@ body.logged_out {
     margin: -13px -30px 20px -30px;
   }
 
-  .flash { 
-    @include no-shadow;
-    @include text-shadow(#fff);
-    padding: 0; 
-    color: #666;
-    background: none;
-  }
-
   #login {
     /* Login Form */
     form {
@@ -316,28 +311,6 @@ body.logged_out {
 
 }
 
-// -------------------------------------- Date Picker 
-.ui-datepicker {
-  @include primary-gradient;
-  padding: 5px 5px 0 5px;
-  color: #fff;
-  display: none;
-  a { 
-    color: #fff;
-    text-decoration: none;
-    &:hover {
-      cursor: pointer;
-    }
-    &.ui-datepicker-prev { float: left; }
-    &.ui-datepicker-next { float: right; }
-  }
-  .ui-datepicker-title { text-align: center; display: block;}
-  table {
-    td, th { padding: 1px 3px; }
-    td { border: none; }
-  }
-}
-
 // -------------------------------------- Dashboard 
 table.dashboard {
   width: 100%; 
@@ -357,7 +330,7 @@ table.dashboard {
   }
   th {
     @include no-shadow;
-    background: none;
+    @include no-gradient;
     width: 150px;
     font-size: 0.9em;
     padding-left: 0;
@@ -387,8 +360,11 @@ table.dashboard {
   padding: 3px 5px 2px 5px;
   font-size: 0.8em;
 
-  &.published, &.complete, &.completed, &.green { background: #8daa92; }
-  &.error, &.errored, &.red { background: #d45f53;}
+  &.ok, &.published, &.complete, &.completed, &.green { background: #8daa92; }
+  &.warn, &.warning, &.orange { background: #e29b20; }
+  &.error, &.errored, &.red { background: #d45f53; }
+
+
 }
 
 

data/{lib/active_admin/stylesheets/active_admin/_forms.scss → app/assets/stylesheets/active_admin/_forms.css.scss}

@@ -77,9 +77,11 @@ form {
   input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], textarea {
     width: 76%;
     border: 1px solid #c9d0d6;
+    @include rounded;
     font-size: 0.95em;
+    font-family: Helvetica, Arial, sans-serif;
     outline: none;
-    padding: 8px 10px;
+    padding: 8px $text-input-horizontal-padding 7px;
     
     &:focus {
       border: 1px solid #99a2aa;
@@ -139,11 +141,12 @@ form {
     /* Errors */
     p.inline-errors { 
       text-transform:capitalize;
-      color:#cc0000; 
-      margin:0.5em 0 0 20%; 
+      color: $error-color;
+      font-weight: bold;
+      margin:0.3em 0 0 20%; 
     }
     ul.errors { 
-      color:#cc0000; 
+      color: $error-color;
       margin:0.5em 0 0 20%; 
       list-style:square; 
       li { padding:0; border:none; display:list-item; }
@@ -151,13 +154,20 @@ form {
 
     &.error {
       input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], textarea {
-        border: 1px solid #cc0000;
+        border: 1px solid $error-color;
       }
     }
   }
 
   /* Buttons */
+  
   input[type=submit] { @include dark-button; }
+  
+  .buttons { 
+    margin-top: 15px; 
+    input[type=submit] { margin-right: 10px; }
+  }
+  
   fieldset.buttons li { 
     float:left; 
     padding-right:0.5em;
@@ -166,3 +176,82 @@ form {
   }
 
 }
+
+// -------------------------------------- Sidebar Forms 
+
+$sidebar-inner-content-width: $sidebar-width - ($section-padding * 2);
+
+.sidebar_section { 
+
+  label {
+    display: block;
+    text-transform: uppercase;
+    color: $section-header-text-color;
+    font-size: 0.9em;
+    font-weight: bold;
+  }
+
+  select {
+    width: $sidebar-inner-content-width;
+  }
+  
+  input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel], textarea {
+    width: $sidebar-inner-content-width - ($text-input-horizontal-padding * 2);
+  }
+
+}
+
+// -------------------------------------- Filter Forms
+
+$filter-field-seperator-width: 12px;
+
+$side-by-side-filter-input-width: ($sidebar-inner-content-width / 2) - ($text-input-horizontal-padding * 2) - $filter-field-seperator-width;
+$side-by-side-filter-select-width: ($sidebar-inner-content-width / 2) - $filter-field-seperator-width;
+
+$date-range-filter-input-right-padding: 27px;
+$date-range-filter-input-horizontal-padding: $date-range-filter-input-right-padding + $text-input-horizontal-padding;
+$date-range-filter-input-width: ($sidebar-inner-content-width / 2) - $filter-field-seperator-width - $date-range-filter-input-horizontal-padding;
+
+form.filter_form {
+  .filter_form_field {
+    margin-bottom: 10px; 
+    clear: both;
+    
+    &.filter_numeric {
+      input[type=text] {
+        margin-left: $filter-field-seperator-width + 4;
+        width: $side-by-side-filter-input-width;
+      }
+      select {
+        width: $side-by-side-filter-select-width;
+      }
+    }
+    
+    &.filter_check_boxes {
+      label { margin-bottom: 3px; }
+      .check_boxes_wrapper label { 
+        font-weight: normal; 
+        margin-bottom: 3px;
+        text-transform: none;
+        font-size: 1.0em;
+        input { vertical-align: baseline; }
+      }
+    }
+
+    &.filter_date_range {
+      .seperator {
+        display: inline-block;
+        text-align: center;
+        width: $filter-field-seperator-width;
+      }
+    
+      input[type=text] {
+        background: #fff url(active_admin_image_path('datepicker/datepicker-input-icon.png')) no-repeat 100% 7px;
+        padding-right: $date-range-filter-input-right-padding;
+        width: $date-range-filter-input-width;
+      }
+    }
+  }
+  a.clear_filters_btn { @include light-button; }
+}
+

data/{lib/active_admin/stylesheets/active_admin/_header.scss → app/assets/stylesheets/active_admin/_header.css.scss}

@@ -3,14 +3,15 @@
   @include primary-gradient;
   @include shadow;
   @include text-shadow(#000);
+  overflow: visible;
   padding: 9px $horizontal-page-margin;
-  position: relative;
   z-index: 900;
 
   h1 { 
-    display: inline; 
+    display: inline-block; 
     color: #cdcdcd;
     margin-right: 20px; 
+    margin-bottom: 0px;
     font-size: 1.3em; 
     font-weight: normal; 
   }
@@ -20,13 +21,12 @@
   ul#tabs {
     margin: 0; 
     padding: 0; 
-    display: inline; 
+    display: inline-block; 
     height: 100%;
 
-    li { 
-      display: inline; 
+    & > li { 
+      display: inline-block; 
       margin-right: 4px; 
-      padding: 9px 0; 
       font-size: 1.0em; 
       position: relative; 
 
@@ -43,12 +43,13 @@
       }
 
       &.has_nested > a { 
-        background: url('/images/active_admin/nested_menu_arrow.gif') no-repeat 89% 50%; 
+        background: url(active_admin_image_path('nested_menu_arrow.gif')) no-repeat 89% 50%; 
         padding-right: 20px; 
+        z-index: 1050;
       }
 
       &.has_nested.current > a { 
-        background: $current-menu-item-background url('/images/active_admin/nested_menu_arrow_dark.gif') no-repeat 89% 50%; 
+        background: $current-menu-item-background url(active_admin_image_path('nested_menu_arrow_dark.gif')) no-repeat 89% 50%; 
         padding-right: 20px; 
       }
 
@@ -59,9 +60,8 @@
 
       &.has_nested:hover > a { 
         @include rounded-top(10px);
-        z-index: 800;
         border-bottom: 5px solid $hover-menu-item-background;
-        background: $hover-menu-item-background url('/images/active_admin/nested_menu_arrow_dark.gif') no-repeat 89% 50%;
+        background: $hover-menu-item-background url(active_admin_image_path('nested_menu_arrow_dark.gif')) no-repeat 89% 50%;
       }
 
 
@@ -74,10 +74,12 @@
         @include shadow(0, 1px, 3px, #444);
         position: absolute; 
         width: 175px; 
-        margin-top: 4px;
+        margin-top: 5px;
         float: left;
         display: none; 
         padding: 3px 0px 5px 0;
+        list-style: none;
+        z-index: 1010;
 
         li { 
           margin: 0px;