arctic_admin 1.0.4 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: cc7382812a5001ef59eb179f64ea47ca82d39b2b
-  data.tar.gz: 5d1e23fe7dae71ec20b426f64d9e938fd1afd094
+  metadata.gz: 8dd901088a309ae82fb4edad8792fa1934f1062d
+  data.tar.gz: 913f8e49c869c63bfedefbc2b0d1b7a39f69fede
 SHA512:
-  metadata.gz: d509ef3c0e178bb1837c0709358e92827590a368b8490a9466e936c89083dbf622f64665988035255d83a231f75a163bea1d5ac1167f10d5b7ede079a12a1b1d
-  data.tar.gz: e3412df9b5579fda6a935257288c0f4f3152fb2343951895c8dd619304a962f5b535d2d72d1258008d670b8900bd79693451f565cf76c245fe7f50458d9b4280
+  metadata.gz: 63b9f81506283b5f7e30c1545e3982d24e3d69dc1a27adb72a9e552d623591c50f6a6e142fbd4bbf9d7ebb1ed7ecf1e67daebf14e9dc917ab8ac930b2f0fa250
+  data.tar.gz: a8b44c29ac5abdf90dff16691c34ef416f14e7cff790a001d9e3b4d99d922894ac91b0284a5e1053e0eab121d344009d85fee9aaa4d86d28ee6a0bd831143297

data/Readme.md

@@ -0,0 +1,96 @@
+# ArcticAdmin
+[![Gem Version](https://img.shields.io/gem/v/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
+[![Gem Downloads](https://img.shields.io/gem/dt/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
+[![Dependency Status](https://gemnasium.com/badges/github.com/cle61/arctic_admin.svg)](https://gemnasium.com/github.com/cle61/arctic_admin)
+
+Simple theme for ActiveAdmin
+
+Complete demo here : https://arctic-admin.herokuapp.com/
+
+admin user : admin@example.com / password
+
+![Screenshot](doc/index.png)
+
+## Installation
+
+Add this to your Gemfile:
+
+```ruby
+gem 'arctic_admin'
+```
+
+and run `bundle install`.
+
+## Usage
+
+### CSS
+
+In your `active_admin.css`, include the css file:
+
+```css
+/*
+ *= require arctic_admin
+ */
+```
+Then restart your webserver if it was previously running.
+
+### Sass Support
+
+If you prefer [SCSS](http://sass-lang.com/documentation/file.SASS_REFERENCE.html), add this to your
+`active_admin.css.scss` file:
+
+```scss
+@import "arctic_admin";
+```
+
+If you use the
+[Sass indented syntax](http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html),
+add this to your `active_admin.css.sass` file:
+
+```sass
+@import arctic_admin
+```
+
+### JS
+
+In your `active_admin.js`, include the js file:
+
+```js
+//= require active_admin/base
+//= require arctic_admin
+```
+
+### Customization
+
+For this, you need to use sass to custom the theme.
+
+You can even change basic color of the theme by placing some other variables:
+
+If you use the [SCSS](http://sass-lang.com/documentation/file.SASS_REFERENCE.html), add this to your
+`active_admin.css.scss` file:
+
+```scss
+$primary-color: #2dbb43;
+
+@import "arctic_admin";
+```
+
+If you use the
+[Sass indented syntax](http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html),
+add this to your `active_admin.css.sass` file:
+
+```sass
+$primary-color: #2dbb43
+
+@import arctic_admin
+```
+
+Then restart your webserver if it was previously running.
+
+## Contributing
+
+1. Fork it ( https://github.com/cle61/arctic_admin/fork )
+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

data/app/assets/javascripts/arctic_admin.js

@@ -1,3 +1,6 @@
+//= require jquery
+//= require jquery_ujs
+
 $(function() {
   $('#sidebar').click(function (e) {
     var position = $(this).position();
@@ -6,13 +9,63 @@ $(function() {
       if ($(this).css('right') == '0px') {
         $(this).animate({
           right: "-="+width
-        }, 600, function() {});
+        }, 600, function() {
+          animationFilterDone = true;
+        });
       } else {
         $(this).animate({
           right: "+="+width
-        }, 600, function() {});
+        }, 600, function() {
+          animationFilterDone = true;
+        });
       }
     }
   });
 
+  var animationDone = true;
+  $('#title_bar').click(function (e) {
+    if ($(window).width() < 960) {
+      var position = $(this).position();
+      var tabs = $('#tabs');
+      var width = tabs.width() + 1;
+
+      if (e.pageX < (position.left + 40)) {
+        if(animationDone == true) {
+          animationDone = false;
+          if (tabs.css('left') == '0px') {
+            tabs.animate({
+              left: "-="+width
+            }, 400, function() {
+              animationDone = true;
+            });
+          } else {
+            tabs.animate({
+              left: "+="+width
+            }, 400, function() {
+              animationDone = true;
+            });
+          }
+        }
+      }
+    }
+  });
+
+  $('body').click(function (e) {
+    if ($(window).width() < 960) {
+      var tabs = $('#tabs');
+      var width = tabs.width() + 1;
+      if (tabs.css('left') == '0px') {
+        if (e.pageX > width && e.pageY > 60) {
+          if(animationDone == true) {
+            animationDone = false;
+            tabs.animate({
+              left: "-="+width
+            }, 400, function() {
+              animationDone = true;
+            });
+          }
+        }
+      }
+    }
+  });
 });

data/app/assets/stylesheets/_base.scss

@@ -1,6 +1,6 @@
 @import "reset";
 @import "fonts";
-@import "variables";
+@import "variables/variables";
 
 @import "mixins/mixins";
 
@@ -27,6 +27,8 @@ body {
   font-family: "LatoWeb";
   background-color: $body-background;
   color: $text-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 a {

data/app/assets/stylesheets/_reset.scss

@@ -11,6 +11,7 @@ html {
 html, body {
   padding: 0;
   margin: 0;
+  min-height: 100vh;
 }
 
 fieldset {

data/app/assets/stylesheets/arctic_admin.scss

@@ -1 +1,2 @@
+@import "font-awesome";
 @import "base";

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

@@ -45,6 +45,7 @@ input[type="text"], input[type="email"], input[type="password"], input[type="num
 }
 
 input[type="submit"] {
+  -webkit-appearance: none;
   @include primary-button($primary-color, white);
   width: 100%;
   padding: 0 12px;
@@ -55,6 +56,34 @@ input[type="submit"] {
   cursor: pointer;
 }
 
+select {
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #e4eaec;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+  -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+  -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+
+  &:focus {
+    border-color: #62a8ea;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    outline: 0;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    -webkit-transition: -webkit-box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+    -o-transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+    transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
+  }
+
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset;
+  }
+}
+
 textarea {
   height: 80px;
   padding: 5px 10px;

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

@@ -11,11 +11,19 @@ thead th {
     font-weight: normal;
     width: 100%;
     display: inline-block;
-    padding: 8px 20px 8px 8px;
+    padding: 4px 20px 4px 4px;
+
+    @media screen and (min-width: $md-width) {
+      padding: 8px 20px 8px 8px;
+    }
   }
 
   &.col-selectable {
-    padding-left: 8px;
+    padding-left: 4px;
+
+    @media screen and (min-width: $md-width) {
+      padding-left: 8px;
+    }
   }
 }
 
@@ -33,7 +41,7 @@ tbody tr {
   }
 
   td {
-    padding: 8px;
+    padding: 4px;
     line-height: 1.57142857;
     vertical-align: top;
     border-top: 1px solid #e4eaec;
@@ -43,5 +51,9 @@ tbody tr {
     &.col-actions {
       padding: 6px 8px;
     }
+
+    @media screen and (min-width: $md-width) {
+      padding: 8px;
+    }
   }
 }

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

@@ -1,15 +1,21 @@
 .admin_namespace {
-  padding-left: $header-width;
   padding-top: 60px;
 
+  @media screen and (min-width: $md-width) {
+    padding-left: $header-width;
+  }
+
   @media screen and (min-width: $lg-width) {
     padding-left: $lg-header-width;
   }
 
   #active_admin_content {
-    padding: 30px 25px;
-    
+    padding: 30px 0;
     @include clear-fix();
+
+    @media screen and (min-width: $md-width) {
+      padding: 30px 25px;
+    }
   }
 }
 
@@ -116,9 +122,36 @@
   top: 0;
   left: $header-width;
   border-bottom: 1px solid $header-border-color;
-  padding: 0 20px;
   z-index: 2;
 
+  @media screen and (min-width: $sm-width) {
+    padding: 0 20px 0 50px;
+
+    &:before {
+      @include icon("\f0c9");
+
+      display: inline;
+      visibility: visible;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      left: 0;
+      color: $text-color;
+      padding: 20px 0;
+      text-align: center;
+      width: 40px;
+      font-size: 20px;
+    }
+  }
+
+  @media screen and (min-width: $md-width) {
+    padding: 0 20px;
+
+    &:before {
+      display: none;
+    }
+  }
+
   @media screen and (min-width: $lg-width) {
     width: $lg-screen-header-width;
     left: $lg-header-width;

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

@@ -8,14 +8,20 @@
 #active_admin_content.with_sidebar #main_content_wrapper {
   width: 100%;
 
-  #main_content {
-    margin-right: 20px;
+  @media screen and (min-width: $md-width) {
+    #main_content {
+      margin-right: 20px;
+    }
   }
 }
 
 #main_content {
   background-color: #fff;
-  padding: 20px;
-  border-radius: 3px;
   box-shadow: 0 0 4px 0 rgba(0,0,0,.04);
+  padding: 10px 5px;
+
+  @media screen and (min-width: $md-width) {
+    padding: 20px;
+    border-radius: 3px;
+  }
 }

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

@@ -3,11 +3,18 @@
   height: calc(100% - 60px);
   position: fixed;
   top: 60px;
-  left: 0;
   background-color: $sidebar-background;
   border-right: 1px solid $sidebar-border-color;
   z-index: 1;
 
+  @media screen and (min-width: $sm-width) {
+    left: - $header-width;
+  }
+
+  @media screen and (min-width: $md-width) {
+    left: 0px;
+  }
+
   @media screen and (min-width: $lg-width) {
     width: $lg-header-width;
   }

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

@@ -41,10 +41,15 @@ body.index {
 
     &:after {
       @include icon("\f0dc");
+      font-size: 12px;
       position: absolute;
       top: 50%;
       right: 5px;
       @include transform(translateY(-50%));
+
+      @media screen and (min-width: $md-width) {
+        font-size: 14px/1;
+      }
     }
 
     &.sorted-desc:after {

data/app/assets/stylesheets/{_variables.scss → variables/_colors.scss}

@@ -1,7 +1,8 @@
 // BASIC COLOR
-$red: #b34247;
-$green: #2dbb43;
+$red: #B02B2C;
+$green: #00897B;
 $blue: #4bacfe;
+$black: #36393D;
 
 $error: #f96868;
 $warning: #f2a654;
@@ -30,17 +31,4 @@ $sidebar-nested-item-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;
-$lg-header-width: 250px !default;
-$lg-screen-header-width: calc(100% - 250px) !default;
-
-$filter-width: 230px !default;
-$screen-filter-width: calc(100% - 230px) !default;
-$lg-filter-width: 270px !default;
-$lg-screen-filter-width: calc(100% - 270px) !default;
-
-$lg-width: 1300px;
+$primary-color: $green !default;

data/app/assets/stylesheets/variables/_media_queries.scss

@@ -0,0 +1,3 @@
+$sm-width: 768px;
+$md-width: 960px;
+$lg-width: 1300px;

data/app/assets/stylesheets/variables/_size.scss

@@ -0,0 +1,9 @@
+$header-width: 200px !default;
+$screen-header-width: calc(100% - 200px) !default;
+$lg-header-width: 250px !default;
+$lg-screen-header-width: calc(100% - 250px) !default;
+
+$filter-width: 230px !default;
+$screen-filter-width: calc(100% - 230px) !default;
+$lg-filter-width: 270px !default;
+$lg-screen-filter-width: calc(100% - 270px) !default;

data/app/assets/stylesheets/variables/_variables.scss

@@ -0,0 +1,3 @@
+@import "colors";
+@import "size";
+@import "media_queries";

data/lib/arctic_admin.rb

@@ -1,3 +1,4 @@
+require 'font-awesome-rails'
 require 'arctic_admin/active_admin/views/pages/bases'
 
 module ArcticAdmin

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: arctic_admin
 version: !ruby/object:Gem::Version
-  version: 1.0.4
+  version: 1.1.0
 platform: ruby
 authors:
 - Clément Prod'homme
@@ -38,17 +38,42 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: font-awesome-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: A simple theme for Active Admin
 email: 
 executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".gitignore"
-- Gemfile
 - LICENCE.txt
-- README.md
-- app/assets/.DS_Store
+- Readme.md
 - app/assets/fonts/Lato-Black.eot
 - app/assets/fonts/Lato-Black.ttf
 - app/assets/fonts/Lato-Black.woff
@@ -121,14 +146,10 @@ files:
 - app/assets/fonts/Lato-ThinItalic.ttf
 - app/assets/fonts/Lato-ThinItalic.woff
 - app/assets/fonts/Lato-ThinItalic.woff2
-- app/assets/images/.keep
-- app/assets/javascripts/.DS_Store
 - app/assets/javascripts/arctic_admin.js
-- app/assets/stylesheets/.DS_Store
 - app/assets/stylesheets/_base.scss
 - app/assets/stylesheets/_fonts.scss
 - app/assets/stylesheets/_reset.scss
-- app/assets/stylesheets/_variables.scss
 - app/assets/stylesheets/arctic_admin.scss
 - app/assets/stylesheets/components/_date_picker.scss
 - app/assets/stylesheets/components/_flash.scss
@@ -149,13 +170,11 @@ files:
 - app/assets/stylesheets/pages/_index.scss
 - app/assets/stylesheets/pages/_login.scss
 - app/assets/stylesheets/pages/_show.scss
+- app/assets/stylesheets/variables/_colors.scss
+- app/assets/stylesheets/variables/_media_queries.scss
+- app/assets/stylesheets/variables/_size.scss
+- app/assets/stylesheets/variables/_variables.scss
 - app/views/layouts/active_admin_logged_out.html.erb
-- arctic_admin.gemspec
-- doc/.DS_Store
-- doc/dashboard.png
-- doc/index.png
-- 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

data/.gitignore

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

data/Gemfile

@@ -1 +0,0 @@
-source 'https://rubygems.org'

data/README.md

@@ -1,77 +0,0 @@
-# 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 lines to your application's Gemfile:
-```
-gem 'font-awesome-rails'
-gem 'arctic_admin'
-```
-
-## Screens
-
-<table>
-  <tr>
-    <td>
-      <a href="./doc/login.png"><img src="./doc/login.png"></a>
-    </td>
-    <td>
-      <a href="./doc/dashboard.png"><img src="./doc/dashboard.png"></a>
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="./doc/index.png"><img src="./doc/index.png"></a>
-    </td>
-    <td>
-      <a href="./doc/show.png"><img src="./doc/show.png"></a>
-    </td>
-  </tr>
-</table>
-
-## Usage
-
-include arctic admin css
-
-```
-# active_admin.css.scss
-
-@import "font-awesome";
-@import "arctic_admin";
-```
-
-include arctic admin js
-
-```
-# active_admin.js
-
-//= require jquery
-//= require jquery_ujs
-//= require active_admin/base
-//= require arctic_admin
-```
-
-You can even change basic color of the theme by placing some other variables:
-
-```
-# active_admin.css.scss
-
-$primary-color: #2dbb43;
-
-@import "arctic_admin";
-```
-
-## Contributing
-
-1. Fork it ( https://github.com/cle61/arctic_admin/fork )
-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

data/arctic_admin.gemspec

@@ -1,14 +0,0 @@
-Gem::Specification.new do |s|
-  s.name        = 'arctic_admin'
-  s.version     = '1.0.4'
-  s.date        = '2017-02-05'
-  s.summary     = "Arctic Admin theme for ActiveAdmin"
-  s.description = "A simple theme for Active Admin"
-  s.authors     = ["Clément Prod'homme"]
-  s.files       = `git ls-files -z`.split("\x0")
-  s.homepage    = 'https://github.com/cle61/arctic_admin'
-  s.license     = 'MIT'
-  s.require_paths = ["lib"]
-  s.add_development_dependency "bundler", "~> 1.5"
-  s.add_development_dependency "rake"
-end