arctic_admin 3.3.0 → 4.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f6941e04a5fe35cb8dfb68e36db36ab2099a29c556b2bfb439442c87387c6827
-  data.tar.gz: d6723be6be3dbbf41c762bf864408a902c989229ad6ea527a6619094b4f04d28
+  metadata.gz: 4f527d7e2caa4c8209125ef8b4e0819d9dfac5056622e62fbb78f2bfc7950028
+  data.tar.gz: c137632694ed36dc983279e9e161b2415d4100b7c6daef0bcc8353f7d7514a4f
 SHA512:
-  metadata.gz: 3f4305722258dc1735b389db444cb32cf987818b6ee9e110353b814a4245a2930ac234c714f147dd4dab4fc73734e0f6e69bcff4c3c4b892bd165afbf07be1f9
-  data.tar.gz: 25ea935c291845e8d52ec6e34689785ca1e13866e6b4a4994ac68129bda1b9311ea47f1f46a628ef2305ad6f5ee6b928d4bda40494d1461476a6d965a382f3db
+  metadata.gz: 81d7c39c6fc5201af8f6543dc8033d642782489bcca767a6da9ab1badc108f546e34d9260750e1c4d46bc67dc938c84e393b4b930f1ba00915a7d49654c061a9
+  data.tar.gz: ab34c1df077f84627182680c0686986204c0636ea4d0e668ea9921c17136088b652933e388b90c504081be9b35e642ae72057362ac1a93a43d724cd3b82c9cb1

data/{Readme.md → README.md}

@@ -14,7 +14,7 @@ Simple theme for ActiveAdmin :ok_hand:
 
 ## Installation
 
->**⚠️ If you are using webpacker (Standard with Rails 6) look below**
+### For Sprockets users
 
 - Add this to your Gemfile:
 
@@ -32,9 +32,17 @@ config.meta_tags = meta_tags_options
 config.meta_tags_for_logged_out_pages = meta_tags_options
 ```
 
-## Usage
+### For webpacker / jsbundling-rails or other JS-based asset solutions
 
-### CSS
+Install the needed assets with npm or yarn:
+
+```bash
+yarn add arctic_admin @fortawesome/fontawesome-free
+```
+
+## Use with Sprockets
+
+### 1a - CSS
 
 In your `active_admin.css`, include the css file:
 
@@ -48,7 +56,7 @@ In your `active_admin.css`, include the css file:
 
 Then restart your webserver if it was previously running.
 
-### Sass Support
+### 1b - Sass Support
 
 :exclamation: **Remove the line `@import "active_admin/base"`**
 
@@ -67,7 +75,7 @@ add this to your `active_admin.sass` file:
 @import arctic_admin/base
 ```
 
-### JS
+### 2 - JS
 
 In your `active_admin.js`, include the js file:
 
@@ -79,16 +87,7 @@ In your `active_admin.js`, include the js file:
 
 ## Use with webpacker
 
-### 1 - Preparation
-
-Install the needed assets with npm or yarn:
-
-```
-yarn add arctic_admin @fortawesome/fontawesome-free
-```
-
-
-### 2 - CSS
+### 1 - CSS
 
 In your `app/javascript/stylesheets/active_admin.scss`, add the line:
 
@@ -103,7 +102,7 @@ Remove:
 @import "~@activeadmin/activeadmin/src/scss/base";
 ```
 
-### 3 - JS
+### 2 - JS
 
 Search for `app/javascript/packs/active_admin.js` in your rails project and add the following lines:  
 

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

@@ -1,4 +1,2 @@
-//= require jquery
-//= require jquery_ujs
 //= require active_admin/base
 //= require ./main

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

@@ -1,99 +1,52 @@
-$(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
-            }
-          )
-        }
+document.addEventListener('DOMContentLoaded', () => {
+
+  // right filter sidebar
+  const sidebar = document.querySelector('#sidebar')
+  if (sidebar) {
+    sidebar.addEventListener('click', event => {
+      const insideSection = document.querySelector('#filters_sidebar_section')
+      if (!(event.target === insideSection || insideSection.contains(event.target)) && event.target.className != "select2-selection__choice__remove") {
+        sidebar.classList.toggle('sidebar_open')
       }
+    })
+  }
+
+  const menuButton = document.querySelector('#utility_nav')
+  const menu = document.querySelector('#tabs')
+
+  // toggle menu sidebar with the menu button
+  menuButton.addEventListener('click', event => {
+    const currentUser = document.querySelector('#current_user')
+    const logout = document.querySelector('#logout')
+    const forbiddenLinks = event.target === logout ||
+        logout.contains(event.target) ||
+        event.target === currentUser ||
+        currentUser.contains(event.target)
+    if (!forbiddenLinks) {
+      menu.classList.toggle('tabs_open')
     }
   })
 
-  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
-            }
-          )
-        }
-      }
+  // close left menu sidebar on any click outside
+  document.body.addEventListener('click', event => {
+    const forbiddenLinks = event.target === menu ||
+        menu.contains(event.target) ||
+        event.target === menuButton ||
+        menuButton.contains(event.target)
+    if (menu.classList.contains('tabs_open') && !forbiddenLinks) {
+      menu.classList.remove('tabs_open')
     }
   })
 
-  $(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
-            }
-          )
-        }
-      }
+  // toggle of nested menu items
+  const nestedMenuItems = document.querySelectorAll('#tabs .has_nested')
+  nestedMenuItems.forEach(
+    (nestedMenuItem) => {
+      nestedMenuItem.addEventListener('click', (e) => {
+        e.stopPropagation()
+        nestedMenuItem.classList.toggle('open')
+      })
     }
-  })
+  )
 
-  $(document).on('click', '#tabs .has_nested', function (e) {
-    e.stopPropagation()
-    $(this).toggleClass('open')
-  })
 })

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

@@ -62,7 +62,7 @@ input[type="checkbox"] {
 
   &:checked {
     border-color: $primary-color;
-    background-color: $primary-color;
+    background-color: $primary-color !important;
   }
 }
 

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

@@ -34,7 +34,7 @@
 }
 
 .select2-container--default .select2-results__option[aria-selected=true]{
-  background_color: $body-background;
+  background-color: $body-background;
 }
 
 .select2-search--dropdown .select2-search__field{
@@ -47,4 +47,4 @@
 
 .select2-results__option{
   padding-left: 12px;
-}
+}

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

@@ -39,12 +39,6 @@ thead th {
 }
 
 tbody tr {
-  border: 1px solid $border-color;
-
-  &:hover {
-    background-color: rgba(228, 234, 236, 0.3);
-  }
-
   th {
     font-size: $font-size;
   }
@@ -64,3 +58,14 @@ tbody tr {
     }
   }
 }
+
+// style only for table
+.index_as_table {
+  tbody tr {
+    border: 1px solid $border-color;
+
+    &:hover {
+      background-color: rgba(228, 234, 236, 0.3);
+    }
+  }
+}

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

@@ -49,6 +49,11 @@
     .filter_date_range input {
       width: 45%;
       display: inline-block;
+
+      // consistent look of all filters
+      &:nth-child(2) {
+        float: right;
+      }
     }
 
     input[type="submit"] {
@@ -56,9 +61,21 @@
       line-height: 31px;
       margin-right: 10px;
     }
+
+    &.panel {
+      position: relative;
+    }
   }
 
   #search-status-_sidebar_section {
     font-size: 14px;
   }
-}
+
+  // 'Filter' and 'Clear Filters' buttons
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 1rem;
+  }
+}

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

@@ -8,6 +8,12 @@
   z-index: 1;
   overflow: auto;
   left: - $header-width;
+  transition: .5s;
+  transition-timing-function: ease-in-out;
+
+  &.tabs_open {
+    left: 0;
+  }
 
   @media screen and (min-width: $sm-width) {
     top: 60px;

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

@@ -37,6 +37,7 @@
   background-color: #fff;
   color: $color;
   border: 1px solid $color;
+  padding: 4px 8px;
   @include button();
 
   &:hover {
@@ -117,4 +118,4 @@
 
 @mixin little-button() {
   padding: 6px 12px;
-}
+}

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 body.index {
 
   .resource_selection_toggle_cell, .resource_selection_cell {
@@ -41,7 +43,19 @@ body.index {
     }
 
     .indexes.table_tools_segmented_control {
-      text-align: right;
+      display: flex;
+      justify-content: right;
+
+      a {
+        @include secondary-button($primary-color);
+      }
+
+      .index {
+        margin-right: 4px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
     }
   }
 
@@ -66,7 +80,7 @@ body.index {
       @include transform(translateY(-50%));
 
       @media screen and (min-width: $md-width) {
-        font-size: $font-size/1;
+        // font-size: math.div($font-size, 1px);
       }
     }
 
@@ -102,8 +116,14 @@ body.index {
 
   #sidebar {
     position: fixed;
+    transition: .5s;
+    transition-timing-function: ease-in-out;
     right: - $filter-width;
 
+    &.sidebar_open {
+      right: 0;
+    }
+
     @media screen and (min-width: $x-lg-width) {
       right: - $lg-filter-width;
     }

data/lib/arctic_admin/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: arctic_admin
 version: !ruby/object:Gem::Version
-  version: 3.3.0
+  version: 4.1.0
 platform: ruby
 authors:
 - Clément Prod'homme
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-12-07 00:00:00.000000000 Z
+date: 2023-03-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -58,20 +58,6 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '3.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-sass
   requirement: !ruby/object:Gem::Requirement
@@ -93,7 +79,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - LICENCE.txt
-- Readme.md
+- README.md
 - app/assets/fonts/Lato-Bold.eot
 - app/assets/fonts/Lato-Bold.ttf
 - app/assets/fonts/Lato-Bold.woff
@@ -172,7 +158,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.3.26
 signing_key: 
 specification_version: 4
 summary: Arctic Admin theme for ActiveAdmin