arctic_admin 3.2.0 → 4.0.1.alpha

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: 9f5074801c0b9ddc106606dc2bfb9e610bce3a10aa5747e822b8a57a930c02d4
4
- data.tar.gz: d0806ddce3b8749f58da6d6d8b51c3f101c01a6cad3fdfe5a3c37348c6a42dbe
3
+ metadata.gz: 2ac5204d1d381efd50fab0fd34bfbe1ea01ac93f99498695e6792223b17fe72e
4
+ data.tar.gz: 66c5c5b151dd6592c35059a0b029923cd108a1f9630d03b8220a84dda91486e2
5
5
  SHA512:
6
- metadata.gz: 68ca26ea8c935566e61e189f2d0fca659726796e5cce3e2ff79e557c82daa97be2e6b5b26f6f7e67f5a5741bbd50bd5fce5f534c56c889eca7e54fb84b949848
7
- data.tar.gz: 8bcb63884a690b7949c2330e98b66fea5434561bd70801d1cc8fedc8dc943679a9167fe169200727afca4ba413cec2a43dfa1694f940a0bb7cc808024b1da233
6
+ metadata.gz: 9e588e7530142d7dd7d81bb2049e8a6ac5519545578184c4a2d595a8c0505462b8a2dd65f355af9cc5c748a780e95fd0f6b4c63b25bb3ad2069aa06feecad7e5
7
+ data.tar.gz: 76540e14071b7f9a75739aee25e1a9665b98ea549a79689346f53b1d73634a3414f9c696dffc06095dba55614f6627bc54cdafa06b59a329a3ce667d2aa77ff0
data/Readme.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # ArcticAdmin
2
2
  [![Gem Version](https://img.shields.io/gem/v/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
3
3
  [![Gem Downloads](https://img.shields.io/gem/dt/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
4
+ [![Gem Version](https://img.shields.io/npm/v/arctic_admin.svg)](https://www.npmjs.com/package/arctic_admin)
5
+ [![Gem Downloads](https://img.shields.io/npm/dt/arctic_admin.svg)](https://www.npmjs.com/package/arctic_admin)
4
6
 
5
7
  Simple theme for ActiveAdmin :ok_hand:
6
8
 
@@ -12,6 +14,8 @@ Simple theme for ActiveAdmin :ok_hand:
12
14
 
13
15
  ## Installation
14
16
 
17
+ >**⚠️ If you are using webpacker (Standard with Rails 6) look below**
18
+
15
19
  - Add this to your Gemfile:
16
20
 
17
21
  ```ruby
@@ -73,19 +77,52 @@ In your `active_admin.js`, include the js file:
73
77
 
74
78
  :exclamation: **Remove the line `//= require active_admin/base`**
75
79
 
76
- ### Customization
80
+ ## Use with webpacker
77
81
 
78
- For this, you need to use sass to custom the theme.
82
+ ### 1 - Preparation
79
83
 
80
- You can even change basic color of the theme by placing some other variables:
84
+ Install the needed assets with npm or yarn:
81
85
 
82
- If you use the [SCSS](http://sass-lang.com/documentation/file.SASS_REFERENCE.html), add this to your
83
- `active_admin.scss` file:
86
+ ```
87
+ yarn add arctic_admin @fortawesome/fontawesome-free
88
+ ```
89
+
90
+
91
+ ### 2 - CSS
92
+
93
+ In your `app/javascript/stylesheets/active_admin.scss`, add the line:
94
+
95
+ ```scss
96
+ @import '~arctic_admin/src/scss/main';
97
+ ```
98
+
99
+ Remove:
100
+
101
+ ```scss
102
+ @import "~@activeadmin/activeadmin/src/scss/mixins";
103
+ @import "~@activeadmin/activeadmin/src/scss/base";
104
+ ```
105
+
106
+ ### 3 - JS
107
+
108
+ Search for `app/javascript/packs/active_admin.js` in your rails project and add the following lines:
109
+
110
+ ```js
111
+ import "@fortawesome/fontawesome-free/css/all.css";
112
+ import 'arctic_admin'
113
+ ```
114
+
115
+
116
+ ### Customization
117
+
118
+ For this, you need to use SASS to customize the theming.
119
+
120
+ Right now you can change the primary color of the theme by placing the following variable in your `active_admin.scss` file:
84
121
 
85
122
  ```scss
86
123
  $primary-color: #2dbb43;
87
124
 
88
- @import "arctic_admin/base";
125
+ @import "~arctic_admin/src/scss/main";
89
126
  ```
90
127
 
91
128
  If you use the
@@ -95,7 +132,7 @@ add this to your `active_admin.sass` file:
95
132
  ```sass
96
133
  $primary-color: #2dbb43
97
134
 
98
- @import arctic_admin/base
135
+ @import ~arctic_admin/src/scss/main
99
136
  ```
100
137
 
101
138
  Then restart your webserver if it was previously running.
@@ -1,80 +1,2 @@
1
- //= require jquery
2
- //= require jquery_ujs
3
1
  //= require active_admin/base
4
-
5
- $(function() {
6
- var animationFilterDone = true;
7
- $(document).on('click touchstart', '#sidebar', function(e) {
8
- if(animationFilterDone == true) {
9
- var position = $(this).position();
10
- var width = $(this).width();
11
- var target = e.target;
12
- if ((e.pageX < position.left) && (target.tagName != 'SELECT') && (target.tagName != 'OPTION')) {
13
- if ($(this).css('right') == '0px') {
14
- $(this).css('position', 'fixed');
15
- $(this).animate({
16
- right: "-="+width
17
- }, 600, function() {
18
- $(this).removeAttr('style');
19
- animationFilterDone = true;
20
- });
21
- } else {
22
- $(this).animate({
23
- right: "+="+width
24
- }, 600, function() {
25
- $(this).css('position', 'absolute');
26
- animationFilterDone = true;
27
- });
28
- }
29
- }
30
- }
31
- });
32
-
33
- var animationDone = true;
34
- $(document).on('click touchstart', '#utility_nav', function(e) {
35
- var position = $(this).position();
36
- var tabs = $('#tabs');
37
- var width = Math.round(tabs[0].getBoundingClientRect().width);
38
-
39
- if (e.pageX < (position.left + 40)) {
40
- if(animationDone == true) {
41
- animationDone = false;
42
- if (tabs.css('left') == '0px') {
43
- tabs.animate({
44
- left: "-="+width
45
- }, 400, function() {
46
- animationDone = true;
47
- });
48
- } else {
49
- tabs.animate({
50
- left: "+="+width
51
- }, 400, function() {
52
- animationDone = true;
53
- });
54
- }
55
- }
56
- }
57
- });
58
-
59
- $(document).on('click touchstart', 'body', function(e) {
60
- var tabs = $('#tabs');
61
- var width = Math.round(tabs[0].getBoundingClientRect().width);
62
- if (tabs.css('left') == '0px') {
63
- if (e.pageX > width && e.pageY > 60) {
64
- if(animationDone == true) {
65
- animationDone = false;
66
- tabs.animate({
67
- left: "-="+width
68
- }, 400, function() {
69
- animationDone = true;
70
- });
71
- }
72
- }
73
- }
74
- });
75
-
76
- $(document).on('click', '#tabs .has_nested', function(e) {
77
- e.stopPropagation();
78
- $(this).toggleClass('open');
79
- });
80
- });
2
+ //= require ./main
@@ -0,0 +1,52 @@
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
+ })
12
+ }
13
+
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
+ })
40
+
41
+ // toggle of nested menu items
42
+ const nestedMenuItems = document.querySelectorAll('#tabs .has_nested')
43
+ nestedMenuItems.forEach(
44
+ (nestedMenuItem) => {
45
+ nestedMenuItem.addEventListener('click', (e) => {
46
+ e.stopPropagation()
47
+ nestedMenuItem.classList.toggle('open')
48
+ })
49
+ }
50
+ )
51
+
52
+ })
@@ -0,0 +1,54 @@
1
+ @import 'reset';
2
+
3
+ @import './variables/variables';
4
+
5
+ @import './mixins/mixins';
6
+
7
+ @import 'common';
8
+ @import 'buttons';
9
+ @import 'grid';
10
+
11
+ @import './components/columns';
12
+ @import './components/comments';
13
+ @import './components/date_picker';
14
+ @import './components/dialogs';
15
+ @import './components/flash';
16
+ @import './components/form';
17
+ @import './components/inputs';
18
+ @import './components/pagination';
19
+ @import './components/panel_contents';
20
+ @import './components/select2';
21
+ @import './components/status_tag';
22
+ @import './components/tables';
23
+ @import './components/tabs';
24
+
25
+ @import './layouts/filter';
26
+ @import './layouts/footer';
27
+ @import './layouts/header';
28
+ @import './layouts/main_content';
29
+ @import './layouts/sidebar';
30
+ @import './layouts/wrapper';
31
+
32
+ @import './pages/form';
33
+ @import './pages/index';
34
+ @import './pages/login';
35
+ @import './pages/show';
36
+ body {
37
+ font-family: $font-family-body;
38
+ background-color: $body-background;
39
+ color: $text-color;
40
+ }
41
+
42
+ h1,
43
+ h2,
44
+ h3,
45
+ h4,
46
+ h5,
47
+ h6 {
48
+ margin-top: 0;
49
+ }
50
+
51
+ a {
52
+ color: $primary-color;
53
+ text-decoration: none;
54
+ }
@@ -49,6 +49,11 @@
49
49
  .filter_date_range input {
50
50
  width: 45%;
51
51
  display: inline-block;
52
+
53
+ // consistent look of all filters
54
+ &:nth-child(2) {
55
+ float: right;
56
+ }
52
57
  }
53
58
 
54
59
  input[type="submit"] {
@@ -56,9 +61,21 @@
56
61
  line-height: 31px;
57
62
  margin-right: 10px;
58
63
  }
64
+
65
+ &.panel {
66
+ position: relative;
67
+ }
59
68
  }
60
69
 
61
70
  #search-status-_sidebar_section {
62
71
  font-size: 14px;
63
72
  }
64
- }
73
+
74
+ // 'Filter' and 'Clear Filters' buttons
75
+ .buttons {
76
+ display: flex;
77
+ justify-content: space-between;
78
+ align-items: center;
79
+ margin-top: 1rem;
80
+ }
81
+ }
@@ -8,6 +8,12 @@
8
8
  z-index: 1;
9
9
  overflow: auto;
10
10
  left: - $header-width;
11
+ transition: .5s;
12
+ transition-timing-function: ease-in-out;
13
+
14
+ &.tabs_open {
15
+ left: 0;
16
+ }
11
17
 
12
18
  @media screen and (min-width: $sm-width) {
13
19
  top: 60px;
@@ -95,7 +101,7 @@
95
101
  }
96
102
  }
97
103
 
98
- ul {
104
+ & > ul {
99
105
  display: block;
100
106
  }
101
107
  }
@@ -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';
61
+ font: 900 normal normal 14px/1 'Font Awesome 5 Free', 'Font Awesome 5 Pro';
62
62
  content: $code-icon;
63
63
  }
@@ -39,6 +39,10 @@ body.index {
39
39
  position: absolute;
40
40
  z-index: 1;
41
41
  }
42
+
43
+ .indexes.table_tools_segmented_control {
44
+ text-align: right;
45
+ }
42
46
  }
43
47
 
44
48
  .paginated_collection_contents {
@@ -89,13 +93,23 @@ body.index {
89
93
  .scopes {
90
94
  .scope {
91
95
  @include group-button($primary-color);
96
+
97
+ a {
98
+ margin-right: .25rem;
99
+ }
92
100
  }
93
101
  }
94
102
 
95
103
  #sidebar {
96
104
  position: fixed;
105
+ transition: .5s;
106
+ transition-timing-function: ease-in-out;
97
107
  right: - $filter-width;
98
108
 
109
+ &.sidebar_open {
110
+ right: 0;
111
+ }
112
+
99
113
  @media screen and (min-width: $x-lg-width) {
100
114
  right: - $lg-filter-width;
101
115
  }
@@ -1,3 +1,3 @@
1
1
  module ArcticAdmin
2
- VERSION = "3.2.0"
2
+ VERSION = "4.0.1.alpha"
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: 3.2.0
4
+ version: 4.0.1.alpha
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-04-09 00:00:00.000000000 Z
11
+ date: 2020-12-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -58,20 +58,6 @@ dependencies:
58
58
  - - "<"
59
59
  - !ruby/object:Gem::Version
60
60
  version: '3.0'
61
- - !ruby/object:Gem::Dependency
62
- name: jquery-rails
63
- requirement: !ruby/object:Gem::Requirement
64
- requirements:
65
- - - ">="
66
- - !ruby/object:Gem::Version
67
- version: '0'
68
- type: :runtime
69
- prerelease: false
70
- version_requirements: !ruby/object:Gem::Requirement
71
- requirements:
72
- - - ">="
73
- - !ruby/object:Gem::Version
74
- version: '0'
75
61
  - !ruby/object:Gem::Dependency
76
62
  name: font-awesome-sass
77
63
  requirement: !ruby/object:Gem::Requirement
@@ -111,11 +97,13 @@ files:
111
97
  - app/assets/fonts/Lato-Regular.woff
112
98
  - app/assets/fonts/Lato-Regular.woff2
113
99
  - app/assets/javascripts/arctic_admin/base.js
100
+ - app/assets/javascripts/arctic_admin/main.js
114
101
  - app/assets/stylesheets/arctic_admin/_base.scss
115
102
  - app/assets/stylesheets/arctic_admin/_buttons.scss
116
103
  - app/assets/stylesheets/arctic_admin/_common.scss
117
104
  - app/assets/stylesheets/arctic_admin/_fonts.scss
118
105
  - app/assets/stylesheets/arctic_admin/_grid.scss
106
+ - app/assets/stylesheets/arctic_admin/_main.scss
119
107
  - app/assets/stylesheets/arctic_admin/_reset.scss
120
108
  - app/assets/stylesheets/arctic_admin/components/_columns.scss
121
109
  - app/assets/stylesheets/arctic_admin/components/_comments.scss
@@ -166,9 +154,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
166
154
  version: '0'
167
155
  required_rubygems_version: !ruby/object:Gem::Requirement
168
156
  requirements:
169
- - - ">="
157
+ - - ">"
170
158
  - !ruby/object:Gem::Version
171
- version: '0'
159
+ version: 1.3.1
172
160
  requirements: []
173
161
  rubygems_version: 3.0.3
174
162
  signing_key: