arctic_admin 3.0.0 → 3.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: a7cfc06e17629bbafe98f4b1c994d3f81ea2ce41
-  data.tar.gz: 6bb0720dd1bbe4096ebb7e1cecdff72312f9afab
+SHA256:
+  metadata.gz: f6941e04a5fe35cb8dfb68e36db36ab2099a29c556b2bfb439442c87387c6827
+  data.tar.gz: d6723be6be3dbbf41c762bf864408a902c989229ad6ea527a6619094b4f04d28
 SHA512:
-  metadata.gz: 415e20f92ee1bcacc8d322c96cbb8b06ce204c316320fa4a2980aa2c661ee9c890e2f63c9b9f46d2c62488395e377b1dc47f8f977fb8eeaf7c6b084722b5d61a
-  data.tar.gz: 9c20857840ef64b120cb688d68eda5a7da221e9ebbc5e2c874b37f7de80d823c89002dd2241020b95d8c47a5a408be6711a9de49aa8fa7243ff2531b6c73b579
+  metadata.gz: 3f4305722258dc1735b389db444cb32cf987818b6ee9e110353b814a4245a2930ac234c714f147dd4dab4fc73734e0f6e69bcff4c3c4b892bd165afbf07be1f9
+  data.tar.gz: 25ea935c291845e8d52ec6e34689785ca1e13866e6b4a4994ac68129bda1b9311ea47f1f46a628ef2305ad6f5ee6b928d4bda40494d1461476a6d965a382f3db

data/Readme.md

@@ -1,6 +1,8 @@
 # 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)
+[![Gem Version](https://img.shields.io/npm/v/arctic_admin.svg)](https://www.npmjs.com/package/arctic_admin)
+[![Gem Downloads](https://img.shields.io/npm/dt/arctic_admin.svg)](https://www.npmjs.com/package/arctic_admin)
 
 Simple theme for ActiveAdmin :ok_hand:
 
@@ -12,6 +14,8 @@ Simple theme for ActiveAdmin :ok_hand:
 
 ## Installation
 
+>**⚠️ If you are using webpacker (Standard with Rails 6) look below**
+
 - Add this to your Gemfile:
 
 ```ruby
@@ -73,19 +77,52 @@ In your `active_admin.js`, include the js file:
 
 :exclamation:  **Remove the line `//= require active_admin/base`**
 
-### Customization
+## Use with webpacker
 
-For this, you need to use sass to custom the theme.
+### 1 - Preparation
 
-You can even change basic color of the theme by placing some other variables:
+Install the needed assets with npm or yarn:
 
-If you use the [SCSS](http://sass-lang.com/documentation/file.SASS_REFERENCE.html), add this to your
-`active_admin.scss` file:
+```
+yarn add arctic_admin @fortawesome/fontawesome-free
+```
+
+
+### 2 - CSS
+
+In your `app/javascript/stylesheets/active_admin.scss`, add the line:
+
+```scss
+@import '~arctic_admin/src/scss/main';
+```
+
+Remove:
+
+```scss
+@import "~@activeadmin/activeadmin/src/scss/mixins";
+@import "~@activeadmin/activeadmin/src/scss/base";
+```
+
+### 3 - JS
+
+Search for `app/javascript/packs/active_admin.js` in your rails project and add the following lines:  
+
+```js
+import "@fortawesome/fontawesome-free/css/all.css";
+import 'arctic_admin'
+```
+
+
+### Customization
+
+For this, you need to use SASS to customize the theming.
+
+Right now you can change the primary color of the theme by placing the following variable in your `active_admin.scss` file:
 
 ```scss
 $primary-color: #2dbb43;
 
-@import "arctic_admin/base";
+@import "~arctic_admin/src/scss/main";
 ```
 
 If you use the
@@ -95,7 +132,7 @@ add this to your `active_admin.sass` file:
 ```sass
 $primary-color: #2dbb43
 
-@import arctic_admin/base
+@import ~arctic_admin/src/scss/main
 ```
 
 Then restart your webserver if it was previously running.

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

@@ -1,77 +1,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require active_admin/base
-
-$(function() {
-  $(document).on('click touchstart', '#sidebar', function(e) {
-    var position = $(this).position();
-    var width = $(this).width();
-    var target = e.target;
-    if ((e.pageX < position.left) && (target.tagName != 'SELECT') && (target.tagName != 'OPTION')) {
-      if ($(this).css('right') == '0px') {
-        $(this).css('position', 'fixed');
-        $(this).animate({
-          right: "-="+width
-        }, 600, function() {
-          $(this).removeAttr('style');
-          animationFilterDone = true;
-        });
-      } else {
-        $(this).animate({
-          right: "+="+width
-        }, 600, function() {
-          $(this).css('position', 'absolute');
-          animationFilterDone = true;
-        });
-      }
-    }
-  });
-
-  var animationDone = true;
-  $(document).on('click touchstart', '#utility_nav', function(e) {
-    var position = $(this).position();
-    var tabs = $('#tabs');
-    var width = Math.round(tabs[0].getBoundingClientRect().width);
-
-    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;
-          });
-        }
-      }
-    }
-  });
-
-  $(document).on('click touchstart', 'body', function(e) {
-    var tabs = $('#tabs');
-    var width = Math.round(tabs[0].getBoundingClientRect().width);
-    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;
-          });
-        }
-      }
-    }
-  });
-
-  $(document).on('click', '#tabs .has_nested', function(e) {
-    e.stopPropagation();
-    $(this).toggleClass('open');
-  });
-});
+//= require ./main

data/app/assets/javascripts/arctic_admin/main.js

@@ -0,0 +1,99 @@
+$(function () {
+  var animationFilterDone = true
+  $(document).on('click touchstart', '#sidebar', function (e) {
+    if (animationFilterDone == true) {
+      var position = $(this).position()
+      var width = $(this).width()
+      var target = e.target
+      if (
+        e.pageX < position.left &&
+        target.tagName != 'SELECT' &&
+        target.tagName != 'OPTION'
+      ) {
+        if ($(this).css('right') == '0px') {
+          $(this).css('position', 'fixed')
+          $(this).animate(
+            {
+              right: '-=' + width
+            },
+            600,
+            function () {
+              $(this).removeAttr('style')
+              animationFilterDone = true
+            }
+          )
+        } else {
+          $(this).animate(
+            {
+              right: '+=' + width
+            },
+            600,
+            function () {
+              $(this).css('position', 'absolute')
+              animationFilterDone = true
+            }
+          )
+        }
+      }
+    }
+  })
+
+  var animationDone = true
+  $(document).on('click touchstart', '#utility_nav', function (e) {
+    var position = $(this).position()
+    var tabs = $('#tabs')    
+    var width = (tabs.length==0)? 0 : Math.round(tabs[0].getBoundingClientRect().width)    
+    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
+            }
+          )
+        }
+      }
+    }
+  })
+
+  $(document).on('click touchstart', 'body', function (e) {
+    var tabs = $('#tabs')
+    var width = (tabs.length==0)? 0 : Math.round(tabs[0].getBoundingClientRect().width)
+    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
+            }
+          )
+        }
+      }
+    }
+  })
+
+  $(document).on('click', '#tabs .has_nested', function (e) {
+    e.stopPropagation()
+    $(this).toggleClass('open')
+  })
+})

data/app/assets/stylesheets/arctic_admin/_common.scss

@@ -2,6 +2,11 @@ code {
   display: block;
   background-color: #272822;
   padding: 5px;
-  margin: 10px 0;
   color: white;
 }
+
+hr {
+  border: 1px solid $border-color;
+  color: $primary-color;
+  margin: 10px auto 25px auto;
+}

data/app/assets/stylesheets/arctic_admin/_main.scss

@@ -0,0 +1,54 @@
+@import 'reset';
+
+@import './variables/variables';
+
+@import './mixins/mixins';
+
+@import 'common';
+@import 'buttons';
+@import 'grid';
+
+@import './components/columns';
+@import './components/comments';
+@import './components/date_picker';
+@import './components/dialogs';
+@import './components/flash';
+@import './components/form';
+@import './components/inputs';
+@import './components/pagination';
+@import './components/panel_contents';
+@import './components/select2';
+@import './components/status_tag';
+@import './components/tables';
+@import './components/tabs';
+
+@import './layouts/filter';
+@import './layouts/footer';
+@import './layouts/header';
+@import './layouts/main_content';
+@import './layouts/sidebar';
+@import './layouts/wrapper';
+
+@import './pages/form';
+@import './pages/index';
+@import './pages/login';
+@import './pages/show';
+body {
+  font-family: $font-family-body;
+  background-color: $body-background;
+  color: $text-color;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+}
+
+a {
+  color: $primary-color;
+  text-decoration: none;
+}

data/app/assets/stylesheets/arctic_admin/components/_date_picker.scss

@@ -35,4 +35,4 @@
       text-align: center;
     }
   }
-}
+}

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

@@ -40,7 +40,7 @@
     
     .inline-hints {
       margin: 5px 0 20px 25%;
-      font-size: 14px;
+      font-size: $font-size;
       font-style: italic;
     }
 
@@ -48,7 +48,7 @@
       color: $error;
       margin-top: 5px;
       margin-bottom: 20px;
-      font-size: 14px;
+      font-size: $font-size;
     }
 
     label.error {

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

@@ -8,9 +8,9 @@ input[type="number"], textarea {
 
   display: block;
   width: 100%;
-  height: 36px;
+  height: $input-height;
   padding: 6px 12px;
-  font-size: 14px;
+  font-size: $font-size;
   line-height: 1.57142857;
   color: $text-color;
   background-color: #fff;
@@ -88,7 +88,7 @@ select {
   border: 1px solid $border-color;
   outline: 0;
   border-radius: $border-radius;
-  font-size: 14px;
+  font-size: $font-size;
   color: #5a5a5a;
   @include transition(border-color ease-in-out .15s);
 

data/app/assets/stylesheets/arctic_admin/components/_select2.scss

@@ -0,0 +1,50 @@
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+  line-height: $input-height; 
+  color: $text-color; 
+  font-size: $font-size;
+}
+
+.select2-container .select2-selection--single{ 
+  height: $input-height;
+  outline: 0;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow{ 
+  height: $input-height;
+}
+
+.select2-container--default .select2-selection--single { 
+  border-color: $border-color;
+}
+
+.select2-container .select2-selection--single .select2-selection__rendered{ 
+  padding-left: 12px;
+}
+
+.select2-dropdown{
+  border-color: $border-color; 
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected]{
+  background-color: $primary_color;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field{
+  border-color: $border-color;
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+  background_color: $body-background;
+}
+
+.select2-search--dropdown .select2-search__field{
+  padding-left: 12px;
+}
+
+.select2-results{
+  font-size: $font-size;
+}
+
+.select2-results__option{
+  padding-left: 12px;
+}

data/app/assets/stylesheets/arctic_admin/components/_status_tag.scss

@@ -6,12 +6,12 @@
   padding: 3px 5px 2px 5px;
   font-size: 0.8em;
   border-radius: $border-radius;
-}
 
-.status_tag.ok, .status_tag.published, .status_tag.complete, .status_tag.completed, .status_tag.green {
-  background-color: $status-tag-background-valid-color;
-}
+  &.ok, &.published, &.complete, &.completed, &.green, &.yes {
+    background-color: $status-tag-background-valid-color;
+  }
 
-.status_tag.cancel, .status_tag.red {
-  background-color: $status-tag-background-error-color;
-}
+  &.cancel, &.red, &.no {
+    background-color: $status-tag-background-error-color;
+  }
+}

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

@@ -46,7 +46,7 @@ tbody tr {
   }
 
   th {
-    font-size: 14px;
+    font-size: $font-size;
   }
 
   td {

data/app/assets/stylesheets/arctic_admin/components/_tabs.scss

@@ -2,11 +2,11 @@
   border: 1px solid $border-color;
 
   .nav {
-    text-align: center;
     border-bottom: 1px solid $border-color;
     
     li {
       display: inline-block;
+      text-align: center;
       @include outline();
 
       a {

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

@@ -22,7 +22,7 @@
     }
 
     .input {
-      margin-bottom: 15px;
+      margin-bottom: 10px;
 
       input, select {
         height: 30px;

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

@@ -14,11 +14,11 @@ body.active_admin.logged_in {
   }
 
   #active_admin_content {
-    padding: 30px 0;
+    padding: 20px 0;
     @include clear-fix();
 
     @media screen and (min-width: $lg-width) {
-      padding: 30px 25px;
+      padding: 20px 25px;
     }
   }
 }

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

@@ -23,7 +23,7 @@
 
   li {
     width: 100%;
-    font-size: 14px;
+    font-size: $font-size;
     line-height: 38px;
     cursor: pointer;
 
@@ -95,7 +95,7 @@
           }
         }
 
-        ul {
+        & > ul {
           display: block;
         }
       }

data/app/assets/stylesheets/arctic_admin/mixins/_prefix_mixins.scss

@@ -58,6 +58,6 @@
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font: 900 normal normal 14px/1 'Font Awesome 5 Free';
+  font: 900 normal normal 14px/1 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
   content: $code-icon;
 }

data/app/assets/stylesheets/arctic_admin/pages/_form.scss

@@ -17,7 +17,7 @@ body.logged_in {
         margin: auto 0;
         padding-top: 8px;
         text-align: right;
-        font-size: 14px;
+        font-size: $font-size;
 
         @media screen and (min-width: $sm-width) {
           padding-bottom: 0;
@@ -85,7 +85,7 @@ body.logged_in {
         }
 
         label {
-          font-size: 14px;
+          font-size: $font-size;
           cursor: pointer;
           padding: 5px 5px 5px 0;
         }

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

@@ -6,7 +6,7 @@ body.index {
 
   .table_tools {
     margin-bottom: 20px;
-    font-size: 14px;
+    font-size: $font-size;
 
     &:after {
       content: '';
@@ -39,6 +39,10 @@ body.index {
       position: absolute;
       z-index: 1;
     }
+
+    .indexes.table_tools_segmented_control {
+      text-align: right;
+    }
   }
 
   .paginated_collection_contents {
@@ -47,7 +51,7 @@ body.index {
   }
 
   #index_footer {
-    font-size: 14px;
+    font-size: $font-size;
   }
 
   .sortable {
@@ -62,7 +66,7 @@ body.index {
       @include transform(translateY(-50%));
 
       @media screen and (min-width: $md-width) {
-        font-size: 14px/1;
+        font-size: $font-size/1;
       }
     }
 
@@ -76,16 +80,23 @@ body.index {
   }
 
   .table_actions {
+    margin-bottom: -4px;
+
     .member_link {
       @include primary-button($primary-color, white);
-      padding: 2px 9px;
+      padding: 4px 8px;
       margin-right: 4px;
+      margin-bottom: 4px;
     }
   }
-  
+
   .scopes {
     .scope {
       @include group-button($primary-color);
+
+      a {
+        margin-right: .25rem;
+      }
     }
   }
 
@@ -113,4 +124,4 @@ body.index {
       padding: 15px 10px;
     }
   }
-}
+}

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

@@ -6,4 +6,7 @@ $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-screen-filter-width: calc(100% - 270px) !default;
+
+$font-size: 14px !default;
+$input-height: 36px !default;

data/lib/arctic_admin/version.rb

@@ -1,3 +1,3 @@
 module ArcticAdmin
-  VERSION = "3.0.0"
+  VERSION = "3.3.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: arctic_admin
 version: !ruby/object:Gem::Version
-  version: 3.0.0
+  version: 3.3.0
 platform: ruby
 authors:
 - Clément Prod'homme
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-05-01 00:00:00.000000000 Z
+date: 2020-12-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -42,16 +42,22 @@ dependencies:
   name: activeadmin
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.1.0
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '3.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 1.1.0
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
@@ -72,14 +78,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 5.6.1
+        version: '5.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 5.6.1
+        version: '5.0'
 description: A responsive theme for Active Admin
 email: 
 executables: []
@@ -105,11 +111,13 @@ files:
 - app/assets/fonts/Lato-Regular.woff
 - app/assets/fonts/Lato-Regular.woff2
 - app/assets/javascripts/arctic_admin/base.js
+- app/assets/javascripts/arctic_admin/main.js
 - app/assets/stylesheets/arctic_admin/_base.scss
 - app/assets/stylesheets/arctic_admin/_buttons.scss
 - app/assets/stylesheets/arctic_admin/_common.scss
 - app/assets/stylesheets/arctic_admin/_fonts.scss
 - app/assets/stylesheets/arctic_admin/_grid.scss
+- app/assets/stylesheets/arctic_admin/_main.scss
 - app/assets/stylesheets/arctic_admin/_reset.scss
 - app/assets/stylesheets/arctic_admin/components/_columns.scss
 - app/assets/stylesheets/arctic_admin/components/_comments.scss
@@ -120,6 +128,7 @@ files:
 - app/assets/stylesheets/arctic_admin/components/_inputs.scss
 - app/assets/stylesheets/arctic_admin/components/_pagination.scss
 - app/assets/stylesheets/arctic_admin/components/_panel_contents.scss
+- app/assets/stylesheets/arctic_admin/components/_select2.scss
 - app/assets/stylesheets/arctic_admin/components/_status_tag.scss
 - app/assets/stylesheets/arctic_admin/components/_tables.scss
 - app/assets/stylesheets/arctic_admin/components/_tabs.scss
@@ -144,7 +153,7 @@ files:
 - app/assets/stylesheets/arctic_admin/variables/_variables.scss
 - lib/arctic_admin.rb
 - lib/arctic_admin/version.rb
-homepage: https://github.com/cle61/arctic_admin
+homepage: https://github.com/cprodhomme/arctic_admin
 licenses:
 - MIT
 metadata: {}
@@ -163,8 +172,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.8
+rubygems_version: 3.0.3
 signing_key: 
 specification_version: 4
 summary: Arctic Admin theme for ActiveAdmin