arctic_admin 4.0.1.alpha → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2ac5204d1d381efd50fab0fd34bfbe1ea01ac93f99498695e6792223b17fe72e
4
- data.tar.gz: 66c5c5b151dd6592c35059a0b029923cd108a1f9630d03b8220a84dda91486e2
3
+ metadata.gz: 5edc77b2c25b4c31c13b48a8bd6eab2fd1f2b9bfe3fa3ae2c914534f2409a1f7
4
+ data.tar.gz: 86e14e3185de43e6983181345b087416cbc7afecc60d9e9fa04656ca7e5a60f4
5
5
  SHA512:
6
- metadata.gz: 9e588e7530142d7dd7d81bb2049e8a6ac5519545578184c4a2d595a8c0505462b8a2dd65f355af9cc5c748a780e95fd0f6b4c63b25bb3ad2069aa06feecad7e5
7
- data.tar.gz: 76540e14071b7f9a75739aee25e1a9665b98ea549a79689346f53b1d73634a3414f9c696dffc06095dba55614f6627bc54cdafa06b59a329a3ce667d2aa77ff0
6
+ metadata.gz: c802778aa37818feb8cba35f5f4af403bf81c23a842622d41d1a013980d9c917b03b9f2262e232284c4c92b30631f0fa6f06696bc5ccedd2bd501114e1ce56c6
7
+ data.tar.gz: 9bab20d82fd85e20c64ae0689f3fbcf55d5004bc48bf38abaab49a9d31950cf1f5fe3a0c393a32c0fde2d542ad1f5bed5c3e8da99947fc75ff7040c468871c0b
@@ -14,7 +14,7 @@ Simple theme for ActiveAdmin :ok_hand:
14
14
 
15
15
  ## Installation
16
16
 
17
- >**⚠️ If you are using webpacker (Standard with Rails 6) look below**
17
+ ### For Sprockets users
18
18
 
19
19
  - Add this to your Gemfile:
20
20
 
@@ -32,9 +32,17 @@ config.meta_tags = meta_tags_options
32
32
  config.meta_tags_for_logged_out_pages = meta_tags_options
33
33
  ```
34
34
 
35
- ## Usage
35
+ ### For webpacker / jsbundling-rails or other JS-based asset solutions
36
36
 
37
- ### CSS
37
+ Install the needed assets with npm or yarn:
38
+
39
+ ```bash
40
+ yarn add arctic_admin @fortawesome/fontawesome-free
41
+ ```
42
+
43
+ ## Use with Sprockets
44
+
45
+ ### 1a - CSS
38
46
 
39
47
  In your `active_admin.css`, include the css file:
40
48
 
@@ -48,7 +56,7 @@ In your `active_admin.css`, include the css file:
48
56
 
49
57
  Then restart your webserver if it was previously running.
50
58
 
51
- ### Sass Support
59
+ ### 1b - Sass Support
52
60
 
53
61
  :exclamation: **Remove the line `@import "active_admin/base"`**
54
62
 
@@ -67,7 +75,7 @@ add this to your `active_admin.sass` file:
67
75
  @import arctic_admin/base
68
76
  ```
69
77
 
70
- ### JS
78
+ ### 2 - JS
71
79
 
72
80
  In your `active_admin.js`, include the js file:
73
81
 
@@ -79,16 +87,7 @@ In your `active_admin.js`, include the js file:
79
87
 
80
88
  ## Use with webpacker
81
89
 
82
- ### 1 - Preparation
83
-
84
- Install the needed assets with npm or yarn:
85
-
86
- ```
87
- yarn add arctic_admin @fortawesome/fontawesome-free
88
- ```
89
-
90
-
91
- ### 2 - CSS
90
+ ### 1 - CSS
92
91
 
93
92
  In your `app/javascript/stylesheets/active_admin.scss`, add the line:
94
93
 
@@ -103,7 +102,7 @@ Remove:
103
102
  @import "~@activeadmin/activeadmin/src/scss/base";
104
103
  ```
105
104
 
106
- ### 3 - JS
105
+ ### 2 - JS
107
106
 
108
107
  Search for `app/javascript/packs/active_admin.js` in your rails project and add the following lines:
109
108
 
@@ -1,46 +1,68 @@
1
- document.addEventListener('DOMContentLoaded', () => {
2
-
3
- // right filter sidebar
4
- const sidebar = document.querySelector('#sidebar')
5
- if (sidebar) {
6
- sidebar.addEventListener('click', event => {
7
- const insideSection = document.querySelector('#filters_sidebar_section')
8
- if (!(event.target === insideSection || insideSection.contains(event.target))) {
9
- sidebar.classList.toggle('sidebar_open')
10
- }
11
- })
1
+ // right filter sidebar toggle
2
+ function sidebar() {
3
+ return document.querySelector('#sidebar')
4
+ }
5
+ function sidebarToggle(event) {
6
+ const insideSection = document.querySelector('#filters_sidebar_section')
7
+
8
+ if (!(event.target === insideSection || insideSection.contains(event.target)) && event.target.className != "select2-selection__choice__remove") {
9
+ sidebar().classList.toggle('sidebar_open')
12
10
  }
11
+ }
13
12
 
14
- const menuButton = document.querySelector('#utility_nav')
15
- const menu = document.querySelector('#tabs')
16
-
17
- // toggle menu sidebar with the menu button
18
- menuButton.addEventListener('click', event => {
19
- const currentUser = document.querySelector('#current_user')
20
- const logout = document.querySelector('#logout')
21
- const forbiddenLinks = event.target === logout ||
22
- logout.contains(event.target) ||
23
- event.target === currentUser ||
24
- currentUser.contains(event.target)
25
- if (!forbiddenLinks) {
26
- menu.classList.toggle('tabs_open')
27
- }
28
- })
29
-
30
- // close left menu sidebar on any click outside
31
- document.body.addEventListener('click', event => {
32
- const forbiddenLinks = event.target === menu ||
33
- menu.contains(event.target) ||
34
- event.target === menuButton ||
35
- menuButton.contains(event.target)
36
- if (menu.classList.contains('tabs_open') && !forbiddenLinks) {
37
- menu.classList.remove('tabs_open')
38
- }
39
- })
13
+ // left menu sidebar toggle with menu button
14
+ function menuButton() {
15
+ return document.querySelector('#utility_nav')
16
+ }
17
+ function menu() {
18
+ return document.querySelector('#tabs')
19
+ }
20
+ function menuToggle(event) {
21
+ const currentUser = document.querySelector('#current_user')
22
+ const logout = document.querySelector('#logout')
23
+ const forbiddenLinks = event.target === logout ||
24
+ logout.contains(event.target) ||
25
+ event.target === currentUser ||
26
+ currentUser.contains(event.target)
27
+ if (!forbiddenLinks) {
28
+ menu().classList.toggle('tabs_open')
29
+ }
30
+ }
31
+
32
+ // left menu sidebar close on any click outside
33
+ function menuClose(event) {
34
+ const forbiddenLinks = event.target === menu ||
35
+ menu().contains(event.target) ||
36
+ event.target === menuButton() ||
37
+ menuButton().contains(event.target)
38
+ if (menu().classList.contains('tabs_open') && !forbiddenLinks) {
39
+ menu().classList.remove('tabs_open')
40
+ }
41
+ }
42
+
43
+ // nested menu items toggle
44
+ function nestedMenuItems() {
45
+ return document.querySelectorAll('#tabs .has_nested')
46
+ }
47
+
48
+ // add event listeners
49
+ function addListeners() {
50
+
51
+ // right filter sidebar toggle
52
+ if (sidebar()) {
53
+ sidebar().addEventListener('click', sidebarToggle)
54
+ }
55
+
56
+ // left menu sidebar toggle with menu button
57
+ if (menuButton()) {
58
+ menuButton().addEventListener('click', menuToggle)
59
+ }
60
+
61
+ // left menu sidebar close on any click outside
62
+ document.body.addEventListener('click', menuClose)
40
63
 
41
- // toggle of nested menu items
42
- const nestedMenuItems = document.querySelectorAll('#tabs .has_nested')
43
- nestedMenuItems.forEach(
64
+ // nested menu items toggle
65
+ nestedMenuItems().forEach(
44
66
  (nestedMenuItem) => {
45
67
  nestedMenuItem.addEventListener('click', (e) => {
46
68
  e.stopPropagation()
@@ -48,5 +70,36 @@ document.addEventListener('DOMContentLoaded', () => {
48
70
  })
49
71
  }
50
72
  )
73
+ }
74
+
75
+ // remove all previous eventListeners
76
+ function removeListeners() {
77
+
78
+ // right filter sidebar toggle
79
+ if (sidebar()) {
80
+ sidebar().removeEventListener('click', sidebarToggle)
81
+ }
82
+
83
+ // left menu sidebar toggle with menu button
84
+ menuButton().removeEventListener('click', menuToggle)
85
+
86
+ // left menu sidebar close on any click outside
87
+ document.body.removeEventListener('click', menuClose)
88
+
89
+ // nested menu items toggle
90
+ nestedMenuItems().forEach(
91
+ (nestedMenuItem) => {
92
+ nestedMenuItem.removeEventListener('click', (e) => {
93
+ e.stopPropagation()
94
+ nestedMenuItem.classList.toggle('open')
95
+ })
96
+ }
97
+ )
98
+ }
99
+
100
+ document.addEventListener('DOMContentLoaded', addListeners)
51
101
 
102
+ document.addEventListener('turbolinks:load', () => {
103
+ removeListeners()
104
+ addListeners()
52
105
  })
@@ -1,4 +1,3 @@
1
- @import "font-awesome-sprockets";
2
1
  @import "font-awesome";
3
2
 
4
3
  @import "reset";
@@ -62,7 +62,7 @@ input[type="checkbox"] {
62
62
 
63
63
  &:checked {
64
64
  border-color: $primary-color;
65
- background-color: $primary-color;
65
+ background-color: $primary-color !important;
66
66
  }
67
67
  }
68
68
 
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .select2-container--default .select2-results__option[aria-selected=true]{
37
- background_color: $body-background;
37
+ background-color: $body-background;
38
38
  }
39
39
 
40
40
  .select2-search--dropdown .select2-search__field{
@@ -47,4 +47,4 @@
47
47
 
48
48
  .select2-results__option{
49
49
  padding-left: 12px;
50
- }
50
+ }
@@ -39,12 +39,6 @@ thead th {
39
39
  }
40
40
 
41
41
  tbody tr {
42
- border: 1px solid $border-color;
43
-
44
- &:hover {
45
- background-color: rgba(228, 234, 236, 0.3);
46
- }
47
-
48
42
  th {
49
43
  font-size: $font-size;
50
44
  }
@@ -64,3 +58,14 @@ tbody tr {
64
58
  }
65
59
  }
66
60
  }
61
+
62
+ // style only for table
63
+ .index_as_table {
64
+ tbody tr {
65
+ border: 1px solid $border-color;
66
+
67
+ &:hover {
68
+ background-color: rgba(228, 234, 236, 0.3);
69
+ }
70
+ }
71
+ }
@@ -0,0 +1,74 @@
1
+ $toggle-width: 40px !default;
2
+ $toggle-height: 20px !default;
3
+ $toggle-offset: 3px !default;
4
+
5
+ $toggle-outer-default: #ddd !default;
6
+ $toggle-outer-active: $primary-color !default;
7
+ $toggle-inner-default: #fff !default;
8
+ $toggle-inner-active: #fff !default;
9
+
10
+ $toggle-transition: 200ms ease-out !default;
11
+
12
+ .toggle-bool-switches-container {
13
+
14
+ text-align: left;
15
+
16
+ .toggle-bool-switch {
17
+ // reset style
18
+ background-image: none;
19
+ box-shadow: none;
20
+ //
21
+
22
+ cursor: pointer;
23
+
24
+ position: relative;
25
+ display: inline-flex;
26
+ align-items: center;
27
+ width: var(--toggle-width);
28
+ height: var(--toggle-height);
29
+ background-color: var(--toggle-outer-default);
30
+ border-radius: 100vw;
31
+ cursor: pointer;
32
+ transition: var(--toggle-transition);
33
+
34
+ &::before {
35
+ // reset style
36
+ height: auto;
37
+ width: auto;
38
+ background-image: none;
39
+ //
40
+
41
+
42
+ content: "";
43
+ position: absolute;
44
+ top: var(--toggle-offset);
45
+ left: var(--toggle-offset);
46
+ bottom: var(--toggle-offset);
47
+
48
+ aspect-ratio: 1 / 1;
49
+
50
+ background-color: var(--toggle-inner-default);
51
+ border-radius: 50%;
52
+ box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
53
+ transition: var(--toggle-transition);
54
+ }
55
+
56
+ &.on {
57
+ // reset style
58
+ background-image: none;
59
+ //
60
+ background: $primary-color;
61
+
62
+ &::before {
63
+ // reset style
64
+ left: var(--toggle-offset);
65
+ //
66
+
67
+ background-color: var(--toggle-inner-active);
68
+ transform: translateX(
69
+ calc(var(--toggle-width) - var(--toggle-height))
70
+ );
71
+ }
72
+ }
73
+ }
74
+ }
@@ -69,7 +69,7 @@ body.active_admin.logged_in {
69
69
  border-bottom: 1px solid $header-border-color;
70
70
 
71
71
  &:before {
72
- @include icon("\f0c9");
72
+ @include icon($icon-menu);
73
73
 
74
74
  display: inline;
75
75
  visibility: visible;
@@ -125,7 +125,7 @@ body.active_admin.logged_in {
125
125
  display: inline-block;
126
126
 
127
127
  &:before {
128
- @include icon("\f007");
128
+ @include icon($icon-user);
129
129
 
130
130
  display: inline;
131
131
  visibility: visible;
@@ -164,7 +164,7 @@ body.active_admin.logged_in {
164
164
  display: block;
165
165
 
166
166
  &:before {
167
- @include icon("\f2f5");
167
+ @include icon($icon-logout);
168
168
 
169
169
  display: inline;
170
170
  visibility: visible;
@@ -56,7 +56,7 @@
56
56
  position: relative;
57
57
 
58
58
  &:after {
59
- @include icon("\f0d7");
59
+ @include icon($icon-down);
60
60
  display: inline;
61
61
  position: absolute;
62
62
  top: 50%;
@@ -97,7 +97,7 @@
97
97
  position: relative;
98
98
 
99
99
  &:after {
100
- @include icon("\f0d8");
100
+ @include icon($icon-up);
101
101
  }
102
102
  }
103
103
 
@@ -37,6 +37,7 @@
37
37
  background-color: #fff;
38
38
  color: $color;
39
39
  border: 1px solid $color;
40
+ padding: 4px 8px;
40
41
  @include button();
41
42
 
42
43
  &:hover {
@@ -56,7 +57,7 @@
56
57
  position: relative;
57
58
 
58
59
  &:after {
59
- @include icon("\f0dd");
60
+ @include icon($icon-sort-down);
60
61
  position: absolute;
61
62
  right: 8px;
62
63
  }
@@ -117,4 +118,4 @@
117
118
 
118
119
  @mixin little-button() {
119
120
  padding: 6px 12px;
120
- }
121
+ }
@@ -58,6 +58,6 @@
58
58
  text-rendering: auto;
59
59
  -webkit-font-smoothing: antialiased;
60
60
  -moz-osx-font-smoothing: grayscale;
61
- font: 900 normal normal 14px/1 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
61
+ font: 900 normal normal 14px/1 $font-icon;
62
62
  content: $code-icon;
63
63
  }
@@ -1,3 +1,5 @@
1
+ @use "sass:math";
2
+
1
3
  body.index {
2
4
 
3
5
  .resource_selection_toggle_cell, .resource_selection_cell {
@@ -41,7 +43,19 @@ body.index {
41
43
  }
42
44
 
43
45
  .indexes.table_tools_segmented_control {
44
- text-align: right;
46
+ display: flex;
47
+ justify-content: right;
48
+
49
+ a {
50
+ @include secondary-button($primary-color);
51
+ }
52
+
53
+ .index {
54
+ margin-right: 4px;
55
+ &:last-child {
56
+ margin-right: 0;
57
+ }
58
+ }
45
59
  }
46
60
  }
47
61
 
@@ -58,7 +72,7 @@ body.index {
58
72
  position: relative;
59
73
 
60
74
  &:after {
61
- @include icon("\f0dc");
75
+ @include icon($icon-sort);
62
76
  font-size: 12px;
63
77
  position: absolute;
64
78
  top: 50%;
@@ -66,7 +80,7 @@ body.index {
66
80
  @include transform(translateY(-50%));
67
81
 
68
82
  @media screen and (min-width: $md-width) {
69
- font-size: $font-size/1;
83
+ // font-size: math.div($font-size, 1px);
70
84
  }
71
85
  }
72
86
 
@@ -125,7 +139,7 @@ body.index {
125
139
  @include box-shadow(-1px 0 4px 0 rgba(0,0,0,.04));
126
140
  border-top-left-radius: $border-radius;
127
141
  border-bottom-left-radius: $border-radius;
128
- @include icon("\f0b0");
142
+ @include icon($icon-filter);
129
143
  font-size: 20px;
130
144
  padding: 15px 10px;
131
145
  }
@@ -19,8 +19,7 @@ $status-tag-background-color: #cacaca !default;
19
19
  $status-tag-background-valid-color: $success !default;
20
20
  $status-tag-background-error-color: $error !default;
21
21
 
22
- $border-color: #e4eaec;
23
-
22
+ $border-color: #e4eaec !default;
24
23
 
25
24
  // body
26
25
  $body-background: #eee !default;
@@ -46,4 +45,4 @@ $text-color-important: #526069 !default;
46
45
 
47
46
  $box-shadow: 0 0 4px 0 rgba(0,0,0,0.1) !default;
48
47
 
49
- $primary-color: $blue !default;
48
+ $primary-color: $blue !default;
@@ -0,0 +1,17 @@
1
+ // you can customise any icons
2
+ // you need to use unicode of the icon font
3
+ // the unicode of fontawesome can be found here : https://fontawesome.com/
4
+
5
+ $font-icon: 'Font Awesome 6 Free', 'Font Awesome 6 Pro' !default;
6
+
7
+ $icon-user: "\f007" !default;
8
+ $icon-logout: "\f2f5" !default;
9
+
10
+ $icon-menu: "\f0c9" !default;
11
+
12
+ $icon-down: "\f0d7" !default;
13
+ $icon-up: "\f0d8" !default;
14
+
15
+ $icon-sort: "\f0dc" !default;
16
+ $icon-sort-down: "\f0dd" !default;
17
+ $icon-filter: "\f0b0" !default;
@@ -1,6 +1,7 @@
1
1
  @import "colors";
2
2
  @import "size";
3
+ @import "icons";
3
4
  @import "media_queries";
4
5
 
5
6
  $border-radius: 3px !default;
6
- $font-family-body: "LatoWeb", Arial, sans-serif !default;
7
+ $font-family-body: "LatoWeb", Arial, sans-serif !default;
@@ -1,3 +1,3 @@
1
1
  module ArcticAdmin
2
- VERSION = "4.0.1.alpha"
2
+ VERSION = "4.2.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: arctic_admin
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.0.1.alpha
4
+ version: 4.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Clément Prod'homme
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-07 00:00:00.000000000 Z
11
+ date: 2023-04-13 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -64,14 +64,14 @@ dependencies:
64
64
  requirements:
65
65
  - - "~>"
66
66
  - !ruby/object:Gem::Version
67
- version: '5.0'
67
+ version: '6.0'
68
68
  type: :runtime
69
69
  prerelease: false
70
70
  version_requirements: !ruby/object:Gem::Requirement
71
71
  requirements:
72
72
  - - "~>"
73
73
  - !ruby/object:Gem::Version
74
- version: '5.0'
74
+ version: '6.0'
75
75
  description: A responsive theme for Active Admin
76
76
  email:
77
77
  executables: []
@@ -79,7 +79,7 @@ extensions: []
79
79
  extra_rdoc_files: []
80
80
  files:
81
81
  - LICENCE.txt
82
- - Readme.md
82
+ - README.md
83
83
  - app/assets/fonts/Lato-Bold.eot
84
84
  - app/assets/fonts/Lato-Bold.ttf
85
85
  - app/assets/fonts/Lato-Bold.woff
@@ -118,6 +118,7 @@ files:
118
118
  - app/assets/stylesheets/arctic_admin/components/_status_tag.scss
119
119
  - app/assets/stylesheets/arctic_admin/components/_tables.scss
120
120
  - app/assets/stylesheets/arctic_admin/components/_tabs.scss
121
+ - app/assets/stylesheets/arctic_admin/components/_toggle.scss
121
122
  - app/assets/stylesheets/arctic_admin/layouts/_filter.scss
122
123
  - app/assets/stylesheets/arctic_admin/layouts/_footer.scss
123
124
  - app/assets/stylesheets/arctic_admin/layouts/_header.scss
@@ -134,6 +135,7 @@ files:
134
135
  - app/assets/stylesheets/arctic_admin/pages/_login.scss
135
136
  - app/assets/stylesheets/arctic_admin/pages/_show.scss
136
137
  - app/assets/stylesheets/arctic_admin/variables/_colors.scss
138
+ - app/assets/stylesheets/arctic_admin/variables/_icons.scss
137
139
  - app/assets/stylesheets/arctic_admin/variables/_media_queries.scss
138
140
  - app/assets/stylesheets/arctic_admin/variables/_size.scss
139
141
  - app/assets/stylesheets/arctic_admin/variables/_variables.scss
@@ -142,7 +144,9 @@ files:
142
144
  homepage: https://github.com/cprodhomme/arctic_admin
143
145
  licenses:
144
146
  - MIT
145
- metadata: {}
147
+ metadata:
148
+ source_code_uri: https://github.com/cprodhomme/arctic_admin
149
+ changelog_uri: https://github.com/cprodhomme/arctic_admin/releases
146
150
  post_install_message:
147
151
  rdoc_options: []
148
152
  require_paths:
@@ -154,11 +158,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
154
158
  version: '0'
155
159
  required_rubygems_version: !ruby/object:Gem::Requirement
156
160
  requirements:
157
- - - ">"
161
+ - - ">="
158
162
  - !ruby/object:Gem::Version
159
- version: 1.3.1
163
+ version: '0'
160
164
  requirements: []
161
- rubygems_version: 3.0.3
165
+ rubygems_version: 3.3.26
162
166
  signing_key:
163
167
  specification_version: 4
164
168
  summary: Arctic Admin theme for ActiveAdmin