arctic_admin 1.0.2 → 1.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a7556d7d07c6da2a0aaf74fc020a474f5d680185
-  data.tar.gz: 12696bb07cf918b119f1016b8be1b24f84477195
+  metadata.gz: 7f5eacb97b471ea9c85336afa632436a9b902c06
+  data.tar.gz: cf47a195b96a39f1919cf4044529089a2daa9670
 SHA512:
-  metadata.gz: 14194cd90497049914039c0b3ce6c0e9d063e21f4744b198bc82f00712f59ad92d237457cb61048b556b9f4a8ca5ff625cb5b0203a66e95610b4bf7607359ee3
-  data.tar.gz: 94af66bf32597ed86e24ade0474dfbf64444b8c9f4f3c2696e7b223317b922ced0653e42111608916d5b7c5c0789124c63a64bc33d817701b5958d08496b1ac8
+  metadata.gz: 3b74787fd0ec6ba8b54583817d62d43bd43793eb99b65b64d5088a47efb2efad98ede47c37b6a7d40d314dbf14acc96644df2b85a03ba5f9628cc0dc3f08245e
+  data.tar.gz: 700e2b5aa26c70b761a879c03cca6dea963fc9113446d84d6e301f48eb7c7604b9b8f003a6d239f80ecd47dc2fad5a8ea336c1cf85520ab898b454cf270ee39c

data/.gitignore

@@ -0,0 +1,9 @@
+*.gem
+.bundle
+Gemfile.lock
+gemfiles/*.lock
+pkg/*
+vendor/ruby
+gemfiles/vendor/ruby
+.rbenv-version
+.sass-cache

data/README.md

@@ -1,9 +1,15 @@
 # ArcticAdmin
+[![Gem Version](https://img.shields.io/gem/v/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
+
 Simple theme for ActiveAdmin
 
+Complete demo here : https://arctic-admin.herokuapp.com/
+
+admin user : admin@example.com / password
+
 ## Installation
 
-add the following line to your application's Gemfile:
+add the following lines to your application's Gemfile:
 ```
 gem 'font-awesome-rails'
 gem 'arctic_admin'
@@ -68,4 +74,4 @@ $primary-color: #2dbb43;
 2. Create your feature branch (`git checkout -b my-new-feature`)
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
-5. Create new Pull Request
+5. Create new Pull Request

data/app/assets/stylesheets/_base.scss

@@ -13,8 +13,9 @@
 @import "components/form";
 
 @import "layouts/header";
-@import "layouts/main_content";
 @import "layouts/sidebar";
+@import "layouts/main_content";
+@import "layouts/filter";
 @import "layouts/footer";
 
 @import "pages/login";

data/app/assets/stylesheets/_variables.scss

@@ -1,10 +1,22 @@
+// COLOR
 $red: #b34247;
 $green: #2dbb43;
 $blue: #4bacfe;
 
+$error: #f96868;
+$warning: #f2a654;
+$success: #46be8a;
+$info: #57c7d4;
+
 $body-background: #eee !default;
+
 $header-border-color: #e6e6e6 !default;
-$left-menu-background: #f5f5f5 !default;
+$header-background: #fff !default;
+
+$sidebar-border-color: $header-border-color !default;
+$sidebar-border-color: #e6e6e6;
+
+$sidebar-background: #f5f5f5 !default;
 
 $left-menu-item-hover-background: #f0f0f0 !default;
 $left-menu-item-nested-hover-background: #e7e7e7 !default;
@@ -12,10 +24,11 @@ $left-menu-item-nested-hover-background: #e7e7e7 !default;
 $text-color: #5a5a5a !default;
 $text-color-important: #526069 !default;
 
+$primary-color: $blue !default;
+
+// SIZE
 $header-width: 200px !default;
 $screen-header-width: calc(100% - 200px) !default;
 
 $sidebar-width: 230px !default;
 $screen-sidebar-width: calc(100% - 230px) !default;
-
-$primary-color: $blue !default;

data/app/assets/stylesheets/components/_flash.scss

@@ -6,22 +6,22 @@
   color: #fff;
 }
 
-.flash_alert {
-  background-color: #f96868;
+.flash_alert, .flash_error {
+  background-color: $error;
   color: #fff;
 }
 
 .flash_warning {
-  background-color: #f2a654;
+  background-color: $warning;
   color: #fff;
 }
 
 .flash_notice {
-  background-color: #46be8a;
+  background-color: $success;
   color: #fff;
 }
 
 .flash_info {
-  background-color: #57c7d4;
+  background-color: $info;
   color: #fff;
 }

data/app/assets/stylesheets/components/_form.scss

@@ -11,6 +11,20 @@
   .formtastic {
     legend {
       margin-bottom: 20px;
+      font-weight: bold;
+    }
+
+    .field_with_errors {
+      input {
+        border-color: $error;
+      }
+    }
+
+    .inline-errors {
+      color: $error;
+      margin-top: 5px;
+      margin-bottom: 20px;
+      font-size: 14px;
     }
 
     .actions {

data/app/assets/stylesheets/layouts/_filter.scss

@@ -0,0 +1,60 @@
+#sidebar {
+  width: $sidebar-width;
+  background-color: #fff;
+  border-radius: 3px;
+  box-shadow: 0 0 4px 0 rgba(0,0,0,.04);
+  margin-bottom: 30px;
+
+  .sidebar_section {
+    padding: 15px 20px;
+
+    h3 {
+      margin: 0 0 10px 0;
+    }
+
+    .label {
+      display: block;
+      text-align: left;
+    }
+
+    .input {
+      margin-bottom: 15px;
+
+      input, select {
+        height: 30px;
+        padding: 3px 5px;
+        font-size: 12px;
+      }
+    }
+
+    .select_and_search {
+      input, select {
+        width: 45%;
+        display: inline-block;  
+      }
+
+      input {
+        float: right;
+      }
+    }
+
+    .filter_select select {
+      width: 100%;
+    }
+
+    .filter_date_range input {
+      width: 45%;
+      display: inline-block;
+    }
+
+    input[type="submit"] {
+      width: auto;
+      line-height: 31px;
+      margin-right: 10px;
+    }
+  }
+
+  #search-status-_sidebar_section {
+    font-size: 14px;
+  }
+}

data/app/assets/stylesheets/layouts/_header.scss

@@ -16,7 +16,7 @@
     position: fixed;
     top: 0;
     left: 0;
-    background-color: #fff;
+    background-color: $header-background;
     border-bottom: 1px solid $header-border-color;
     font-size: 20px;
     text-align: center;
@@ -24,64 +24,6 @@
     line-height: 60px;
   }
 
-  #tabs {
-    width: $header-width;
-    height: calc(100% - 60px);
-    position: fixed;
-    top: 60px;
-    left: 0;
-    background-color: $left-menu-background;
-    border-right: 1px solid $header-border-color;
-
-    li {
-      width: 100%;
-      font-size: 14px;
-      line-height: 38px;
-      cursor: pointer;
-
-      a {
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-        color: $text-color;
-        padding: 0 20px;
-
-        &:hover {
-          background-color: $left-menu-item-hover-background;
-        }
-      }
-
-      &.current {
-        a {
-          color: $primary-color;
-        }
-      }
-
-      &.has_nested {
-        ul {
-          border-top: 1px solid $header-border-color;
-          border-bottom: 1px solid $header-border-color;
-          background-color: $body-background;
-          padding: 10px 0;
-          cursor: auto;
-
-          a {
-            padding: 0px 15px 0px 40px;
-            color: $text-color;
-
-            &:hover {
-              background-color: $left-menu-item-nested-hover-background;
-            }
-          }
-
-          .current a {
-            color: $primary-color;
-          }
-        }
-      }
-    }
-  }
-
   #utility_nav {
     height: 60px;
     position: fixed;
@@ -95,7 +37,7 @@
       @include transition-button();
 
       &:hover {
-        background-color: $left-menu-background;
+        background-color: $sidebar-background;
       }
 
       &:active {
@@ -127,11 +69,6 @@
           font-size: 20px;
         }
       }
-      // a {
-      //   color: $text-color;
-      //   padding: 20px 10px;
-      //   display: inline-block;
-      // }
     }
 
     #logout {
@@ -166,7 +103,7 @@
 #title_bar {
   height: 60px;
   width: $screen-header-width;
-  background-color: #fff;
+  background-color: $header-background;
   position: fixed;
   top: 0;
   left: $header-width;
@@ -178,6 +115,10 @@
     padding-top: 6px;
     display: inline-block;
     float: left;
+
+    h2:nth-child(1) {
+      line-height: 48px;
+    }
   }
 
   #titlebar_right {
@@ -192,7 +133,11 @@
       float: left;
 
       &:hover {
-        background-color: $left-menu-background;
+        background-color: $sidebar-background;
+      }
+
+      &:active {
+        background-color: $left-menu-item-hover-background;
       }
     }
   }

data/app/assets/stylesheets/layouts/_sidebar.scss

@@ -1,60 +1,58 @@
-#sidebar {
-  width: $sidebar-width;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 0 0 4px 0 rgba(0,0,0,.04);
-  margin-bottom: 30px;
-
-  .sidebar_section {
-    padding: 15px 20px;
-
-    h3 {
-      margin: 0 0 10px 0;
-    }
-
-    .label {
-      display: block;
-      text-align: left;
-    }
+.header #tabs {
+  width: $header-width;
+  height: calc(100% - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  background-color: $sidebar-background;
+  border-right: 1px solid $sidebar-border-color;
+  z-index: 1;
+
+  li {
+    width: 100%;
+    font-size: 14px;
+    line-height: 38px;
+    cursor: pointer;
 
-    .input {
-      margin-bottom: 15px;
+    a {
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      color: $text-color;
+      padding: 0 20px;
 
-      input, select {
-        height: 30px;
-        padding: 3px 5px;
-        font-size: 12px;
+      &:hover {
+        background-color: $left-menu-item-hover-background;
       }
     }
 
-    .select_and_search {
-      input, select {
-        width: 45%;
-        display: inline-block;  
-      }
-
-      input {
-        float: right;
+    &.current {
+      a {
+        color: $primary-color;
       }
     }
 
-    .filter_select select {
-      width: 100%;
-    }
-
-    .filter_date_range input {
-      width: 45%;
-      display: inline-block;
-    }
-
-    input[type="submit"] {
-      width: auto;
-      line-height: 31px;
-      margin-right: 10px;
+    &.has_nested {
+      ul {
+        border-top: 1px solid $sidebar-border-color;
+        border-bottom: 1px solid $sidebar-border-color;
+        background-color: $body-background;
+        padding: 10px 0;
+        cursor: auto;
+
+        a {
+          padding: 0px 15px 0px 40px;
+          color: $text-color;
+
+          &:hover {
+            background-color: $left-menu-item-nested-hover-background;
+          }
+        }
+
+        .current a {
+          color: $primary-color;
+        }
+      }
     }
   }
-
-  #search-status-_sidebar_section {
-    font-size: 14px;
-  }
 }

data/app/assets/stylesheets/pages/_edit.scss

@@ -1,16 +1,20 @@
-body.edit {
+body.new, body.edit, body.create, body.update {
   .input {
     .label {
-      min-width: 25%;
+      width: 25%;
       float: left;
-      text-align: right;
+      text-align: left;
       padding-right: 20px;
-      padding-top: 6px;
+      margin: auto 0;
     }
 
     input {
       width: 50%;
     }
+
+    .inline-errors {
+      padding-left: 25%;
+    }
   }
 
   .actions {

data/app/assets/stylesheets/pages/_index.scss

@@ -77,7 +77,7 @@ body.index {
   }
 
   #sidebar {
-    position: absolute;
+    position: fixed;
     right: - $sidebar-width;
 
     &:before {

data/app/assets/stylesheets/pages/_login.scss

@@ -1,13 +1,24 @@
+body.logged_out {
+  .flash {
+    position: fixed;
+  }
+
+  #active_admin_content {
+    height: 100vh;
+    width: 100%;
+    display: inline-flex;
+  }
+}
+
 #login {  
   width: 400px;
-  max-width: 100%;
+  max-width: 95%;
   margin: auto;
   background-color: white;
   border-top: 3px solid $primary-color;
   box-shadow: 0 0 4px 0 rgba(0,0,0,.04);
   border-radius: 3px;
   padding: 30px;
-  margin-top: 100px;
 
   color: $text-color;
 
@@ -27,7 +38,7 @@
   }
 
   .input_action {
-    width: 50%;
+    min-width: 50%;
   }
 
   input[type="submit"] {

data/app/views/layouts/active_admin_logged_out.html.erb

@@ -0,0 +1,42 @@
+<%# NB: This is a copy of ActiveAdmin's layout, but with the meta viewport tag included %>
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+
+  <title><%= [@page_title, render_or_call_method_or_proc_on(self, ActiveAdmin.application.site_title)].compact.join(" | ") %></title>
+
+  <% ActiveAdmin.application.stylesheets.each do |style, options| %>
+    <%= stylesheet_link_tag style, options %>
+  <% end %>
+  <% ActiveAdmin.application.javascripts.each do |path| %>
+    <%= javascript_include_tag path %>
+  <% end %>
+
+  <%= favicon_link_tag ActiveAdmin.application.favicon if ActiveAdmin.application.favicon %>
+
+  <% ActiveAdmin.application.meta_tags_for_logged_out_pages.each do |name, content| %>
+    <%= tag(:meta, name: name, content: content) %>
+  <% end %>
+
+  <%= csrf_meta_tag %>
+
+  <meta name='viewport' content='width=device-width, initial-scale=1'>
+</head>
+<body class="active_admin logged_out <%= controller.action_name %>">
+<div id="wrapper">
+
+  <div id="content_wrapper">
+    <% flash_messages.each do |type, message| %>
+      <%= content_tag :div, message, class: "flash flash_#{type}" %>
+    <% end %>
+    <div id="active_admin_content">
+      <%= yield %>
+    </div>
+  </div>
+  <div id="footer">
+    <%= yield :footer %>
+  </div>
+</div>
+</body>
+</html>

data/arctic_admin.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name        = 'arctic_admin'
-  s.version     = '1.0.2'
+  s.version     = '1.0.3'
   s.date        = '2017-02-05'
   s.summary     = "Arctic Admin theme for ActiveAdmin"
   s.description = "A simple theme for Active Admin"

data/lib/arctic_admin.rb

@@ -1,3 +1,5 @@
+require 'arctic_admin/active_admin/views/pages/bases'
+
 module ArcticAdmin
   module Rails
     class Engine < ::Rails::Engine

data/lib/arctic_admin/active_admin/views/pages/bases.rb

@@ -0,0 +1,16 @@
+module ActiveAdmin
+  module Views
+    module Pages
+      class Base < Arbre::HTML::Document
+        alias_method :_build_active_admin_head, :build_active_admin_head
+        def build_active_admin_head
+          _build_active_admin_head
+
+          within @head do
+            meta name: 'viewport', content: 'width=device-width, initial-scale=1'
+          end
+        end
+      end
+    end
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: arctic_admin
 version: !ruby/object:Gem::Version
-  version: 1.0.2
+  version: 1.0.3
 platform: ruby
 authors:
 - Clément Prod'homme
@@ -137,6 +137,7 @@ files:
 - app/assets/stylesheets/components/_panel_contents.scss
 - app/assets/stylesheets/components/_status_tag.scss
 - app/assets/stylesheets/components/_tables.scss
+- app/assets/stylesheets/layouts/_filter.scss
 - app/assets/stylesheets/layouts/_footer.scss
 - app/assets/stylesheets/layouts/_header.scss
 - app/assets/stylesheets/layouts/_main_content.scss
@@ -148,8 +149,7 @@ files:
 - app/assets/stylesheets/pages/_index.scss
 - app/assets/stylesheets/pages/_login.scss
 - app/assets/stylesheets/pages/_show.scss
-- arctic_admin-1.0.0.gem
-- arctic_admin-1.0.1.gem
+- app/views/layouts/active_admin_logged_out.html.erb
 - arctic_admin.gemspec
 - doc/.DS_Store
 - doc/dashboard.png
@@ -157,6 +157,7 @@ files:
 - doc/login.png
 - doc/show.png
 - lib/arctic_admin.rb
+- lib/arctic_admin/active_admin/views/pages/bases.rb
 homepage: https://github.com/cle61/arctic_admin
 licenses:
 - MIT