active_admin_prism 0.1.2 → 0.1.3
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 +4 -4
- data/CHANGELOG.md +87 -0
- data/INTEGRATION.md +127 -13
- data/README.md +2 -0
- data/app/assets/javascripts/active_admin_prism/prism.js +1 -1
- data/app/assets/stylesheets/active_admin_prism/prism.css +1 -1
- data/app/views/layouts/active_admin_logged_out.html.erb +76 -0
- data/js-src/prism.js +113 -6
- data/lib/active_admin/views/active_filters_bar.rb +94 -0
- data/lib/active_admin/views/flash_messages.rb +40 -22
- data/lib/active_admin/views/prism_sidebar.rb +35 -3
- data/lib/active_admin_prism/configuration.rb +40 -0
- data/lib/active_admin_prism/version.rb +1 -1
- data/lib/active_admin_prism.rb +1 -0
- data/lib/prism_icons.rb +26 -1
- data/scss-src/_base.scss +161 -24
- data/scss-src/_forms.scss +15 -0
- data/scss-src/_login.scss +5 -4
- data/scss-src/_panels.scss +161 -0
- data/scss-src/_select2.scss +29 -12
- data/scss-src/_sidebar.scss +145 -4
- data/scss-src/_variables.scss +3 -0
- metadata +5 -6
data/scss-src/_sidebar.scss
CHANGED
|
@@ -29,6 +29,30 @@ body:not(.logged_out).index #wrapper {
|
|
|
29
29
|
grid-template-rows: auto auto auto 1fr auto;
|
|
30
30
|
min-height: 100vh;
|
|
31
31
|
width: 100%;
|
|
32
|
+
// Animates the reflow when ActiveAdminPrism.configuration#sidebar_collapsible's
|
|
33
|
+
// toggle fires (see "body.prism-sidebar-collapsed" below) — a no-op the
|
|
34
|
+
// rest of the time. Grid track sizes are animatable in every currently
|
|
35
|
+
// supported browser; where they aren't, this simply snaps instead of
|
|
36
|
+
// sliding, same graceful-degradation as the collapsible Filters panel's
|
|
37
|
+
// own reflow (scss-src/_panels.scss).
|
|
38
|
+
transition: grid-template-columns 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Desktop sidebar rail-collapse (ActiveAdminPrism::Configuration
|
|
42
|
+
// #sidebar_collapsible, toggled by .prism-sidebar-collapse-toggle — see
|
|
43
|
+
// js-src/prism.js). Explicitly scoped to desktop widths (matching the
|
|
44
|
+
// "max-width: 900px" mobile breakpoint below): below that width the
|
|
45
|
+
// sidebar is already off-canvas (slid fully off-screen via `transform`,
|
|
46
|
+
// full width once opened) — .prism-sidebar-collapsed can still be present
|
|
47
|
+
// on <body> there (nothing clears it on resize), so without this guard a
|
|
48
|
+
// visitor who'd collapsed the rail on desktop and then opened the mobile
|
|
49
|
+
// off-canvas menu would get it stuck at rail width instead of a normal,
|
|
50
|
+
// readable full-width drawer.
|
|
51
|
+
@media (min-width: 901px) {
|
|
52
|
+
body.prism-sidebar-collapsed:not(.logged_out) #wrapper,
|
|
53
|
+
body.prism-sidebar-collapsed:not(.logged_out).index #wrapper {
|
|
54
|
+
grid-template-columns: $prism-sidebar-collapsed-width 1fr;
|
|
55
|
+
}
|
|
32
56
|
}
|
|
33
57
|
|
|
34
58
|
#header.prism-sidebar {
|
|
@@ -59,6 +83,7 @@ body:not(.logged_out).index #wrapper {
|
|
|
59
83
|
max-height: 100vh;
|
|
60
84
|
overflow: hidden;
|
|
61
85
|
z-index: 100;
|
|
86
|
+
transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
62
87
|
|
|
63
88
|
// Reset the inherited primary-gradient/text-shadow look from AA's default
|
|
64
89
|
// #header rule — this component owns its own visual language.
|
|
@@ -124,6 +149,9 @@ body:not(.prism-sidebar-footer-disabled) #footer {
|
|
|
124
149
|
|
|
125
150
|
.prism-sidebar-brand {
|
|
126
151
|
flex: 0 0 auto;
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
gap: 12px;
|
|
127
155
|
padding: 20px 24px;
|
|
128
156
|
border-bottom: 1px solid $prism-border-color;
|
|
129
157
|
|
|
@@ -133,6 +161,8 @@ body:not(.prism-sidebar-footer-disabled) #footer {
|
|
|
133
161
|
font-size: 1.15em;
|
|
134
162
|
font-weight: 700;
|
|
135
163
|
color: $prism-text-heading;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
white-space: nowrap;
|
|
136
166
|
|
|
137
167
|
a {
|
|
138
168
|
color: inherit;
|
|
@@ -141,6 +171,32 @@ body:not(.prism-sidebar-footer-disabled) #footer {
|
|
|
141
171
|
}
|
|
142
172
|
}
|
|
143
173
|
|
|
174
|
+
// Hamburger icon button, top of the sidebar (ActiveAdminPrism::Configuration
|
|
175
|
+
// #sidebar_collapsible) — see prism_sidebar.rb#render_collapse_toggle.
|
|
176
|
+
.prism-sidebar-collapse-toggle {
|
|
177
|
+
flex: 0 0 auto;
|
|
178
|
+
display: flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
justify-content: center;
|
|
181
|
+
width: 32px;
|
|
182
|
+
height: 32px;
|
|
183
|
+
margin: -6px 0;
|
|
184
|
+
border-radius: $prism-radius-sm;
|
|
185
|
+
color: $prism-text-muted;
|
|
186
|
+
cursor: pointer;
|
|
187
|
+
user-select: none;
|
|
188
|
+
transition: background $prism-transition-fast, color $prism-transition-fast;
|
|
189
|
+
|
|
190
|
+
&:hover {
|
|
191
|
+
background: $prism-bg-page;
|
|
192
|
+
color: $prism-text-heading;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.prism-sidebar-collapse-icon {
|
|
197
|
+
flex: 0 0 auto;
|
|
198
|
+
}
|
|
199
|
+
|
|
144
200
|
// "Languages" dropdown (ActiveAdminPrismTheme::Configuration
|
|
145
201
|
// #language_switcher/#languages) — sits between the brand and the Pages
|
|
146
202
|
// nav list. Positioned relative so .prism-lang-menu (an absolutely
|
|
@@ -519,6 +575,84 @@ body:not(.prism-sidebar-footer-disabled) #footer {
|
|
|
519
575
|
font-weight: 700;
|
|
520
576
|
line-height: 20px;
|
|
521
577
|
}
|
|
578
|
+
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
// Collapsed rail state: shrink the sidebar itself (the #wrapper grid
|
|
582
|
+
// track already narrowed above) and hide every label/text element,
|
|
583
|
+
// leaving just the icon column. Every item keeps its native `title`
|
|
584
|
+
// attribute (see prism_sidebar.rb's render_leaf/render_group_toggle) as
|
|
585
|
+
// the only way left to identify it by hovering. Scoped to desktop widths —
|
|
586
|
+
// see the comment on the #wrapper override above for why this can't apply
|
|
587
|
+
// unconditionally.
|
|
588
|
+
@media (min-width: 901px) {
|
|
589
|
+
body.prism-sidebar-collapsed #header.prism-sidebar {
|
|
590
|
+
width: $prism-sidebar-collapsed-width;
|
|
591
|
+
|
|
592
|
+
.prism-sidebar-brand {
|
|
593
|
+
padding: 20px 0;
|
|
594
|
+
justify-content: center;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.prism-sidebar-brand #site_title,
|
|
598
|
+
.prism-sidebar-lang,
|
|
599
|
+
.prism-sidebar-search,
|
|
600
|
+
.prism-nav-section-label,
|
|
601
|
+
.prism-nav-label,
|
|
602
|
+
.prism-lang-current,
|
|
603
|
+
.prism-sidebar-lang .prism-chevron,
|
|
604
|
+
.prism-nav-item .prism-chevron,
|
|
605
|
+
.prism-sidebar-footer {
|
|
606
|
+
display: none;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
// !important: `.prism-nav-item.open > .prism-nav-submenu { display:
|
|
610
|
+
// block; }` above (b=4 classes) is otherwise MORE specific than even
|
|
611
|
+
// this rule's `body.prism-sidebar-collapsed #header.prism-sidebar
|
|
612
|
+
// .prism-nav-submenu` (b=3 classes plus the body type selector, which
|
|
613
|
+
// only breaks a tie and doesn't offset a class-count deficit) — a
|
|
614
|
+
// group left open before collapsing would keep rendering its full
|
|
615
|
+
// submenu (every child's icon *and* label) spilling out past the 76px
|
|
616
|
+
// rail instead of collapsing down to just the parent's own icon.
|
|
617
|
+
.prism-nav-submenu {
|
|
618
|
+
display: none !important;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.prism-sidebar-scroll {
|
|
622
|
+
padding: 20px 8px;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.prism-nav-item {
|
|
626
|
+
> .prism-nav-link,
|
|
627
|
+
> .prism-nav-group-toggle {
|
|
628
|
+
justify-content: center;
|
|
629
|
+
padding: 9px;
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
// A menu item registered with no `icon:` (see [Sidebar navigation:
|
|
633
|
+
// icons & badges] in INTEGRATION.md) renders only its now-hidden
|
|
634
|
+
// .prism-nav-label — nothing at all while collapsed, which for an
|
|
635
|
+
// `.active` item is an empty color-highlighted box with no visible
|
|
636
|
+
// content to anchor it, and for any other item is a totally blank
|
|
637
|
+
// row indistinguishable from dead space. A small dot keeps every
|
|
638
|
+
// row visually non-empty without requiring every host to assign an
|
|
639
|
+
// icon to every single item just to look right once collapsed.
|
|
640
|
+
> .prism-nav-link:not(:has(.prism-nav-icon))::after,
|
|
641
|
+
> .prism-nav-group-toggle:not(:has(.prism-nav-icon))::after {
|
|
642
|
+
content: "";
|
|
643
|
+
width: 6px;
|
|
644
|
+
height: 6px;
|
|
645
|
+
border-radius: 50%;
|
|
646
|
+
background: currentColor;
|
|
647
|
+
opacity: 0.6;
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
.prism-sidebar-utility {
|
|
652
|
+
padding-left: 8px;
|
|
653
|
+
padding-right: 8px;
|
|
654
|
+
}
|
|
655
|
+
}
|
|
522
656
|
}
|
|
523
657
|
|
|
524
658
|
.prism-sidebar-mobile-toggle {
|
|
@@ -550,13 +684,20 @@ body:not(.prism-sidebar-footer-disabled) #footer {
|
|
|
550
684
|
grid-template-columns: 1fr;
|
|
551
685
|
}
|
|
552
686
|
|
|
687
|
+
// "left" (not "transform: translateX(...)") is what actually slides this
|
|
688
|
+
// panel off/on screen — deliberately. A `transform` on this element
|
|
689
|
+
// would make IT the containing block for any `position: fixed`
|
|
690
|
+
// descendant (CSS Positioned Layout spec), which is exactly what
|
|
691
|
+
// .prism-sidebar-mobile-toggle above is: it'd slide off-screen right
|
|
692
|
+
// along with the (intentionally hidden) sidebar instead of staying
|
|
693
|
+
// fixed to the viewport corner where a visitor could actually reach it
|
|
694
|
+
// to open the menu back up. `left` carries no such side effect.
|
|
553
695
|
#header.prism-sidebar {
|
|
554
696
|
position: fixed;
|
|
555
|
-
left:
|
|
697
|
+
left: -#{$prism-sidebar-width};
|
|
556
698
|
top: 0;
|
|
557
699
|
bottom: 0;
|
|
558
|
-
|
|
559
|
-
transition: transform $prism-transition-fast;
|
|
700
|
+
transition: left $prism-transition-fast;
|
|
560
701
|
box-shadow: $prism-shadow-popover;
|
|
561
702
|
}
|
|
562
703
|
|
|
@@ -568,6 +709,6 @@ body:not(.prism-sidebar-footer-disabled) #footer {
|
|
|
568
709
|
}
|
|
569
710
|
|
|
570
711
|
body.prism-sidebar-open #header.prism-sidebar {
|
|
571
|
-
|
|
712
|
+
left: 0;
|
|
572
713
|
}
|
|
573
714
|
}
|
data/scss-src/_variables.scss
CHANGED
|
@@ -12,7 +12,9 @@ $prism-color-success-light: #e8f9ee !default;
|
|
|
12
12
|
$prism-color-danger: #ef4444 !default;
|
|
13
13
|
$prism-color-danger-light: #fdecec !default;
|
|
14
14
|
$prism-color-warning: #f59e0b !default;
|
|
15
|
+
$prism-color-warning-light: #fef3e2 !default;
|
|
15
16
|
$prism-color-info: #3b82f6 !default;
|
|
17
|
+
$prism-color-info-light: #eaf2fe !default;
|
|
16
18
|
|
|
17
19
|
$prism-bg-page: #f4f5f7 !default;
|
|
18
20
|
$prism-bg-card: #ffffff !default;
|
|
@@ -27,6 +29,7 @@ $prism-border-color: #e6e8ec !default;
|
|
|
27
29
|
$prism-border-color-strong: #d6d9e0 !default;
|
|
28
30
|
|
|
29
31
|
$prism-sidebar-width: 264px !default;
|
|
32
|
+
$prism-sidebar-collapsed-width: 76px !default;
|
|
30
33
|
$prism-radius: 10px !default;
|
|
31
34
|
$prism-radius-sm: 6px !default;
|
|
32
35
|
$prism-radius-pill: 999px !default;
|
metadata
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: active_admin_prism
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ram Laxman Yadav
|
|
8
|
-
autorequire:
|
|
9
8
|
bindir: bin
|
|
10
9
|
cert_chain: []
|
|
11
|
-
date:
|
|
10
|
+
date: 1980-01-02 00:00:00.000000000 Z
|
|
12
11
|
dependencies:
|
|
13
12
|
- !ruby/object:Gem::Dependency
|
|
14
13
|
name: activeadmin
|
|
@@ -101,7 +100,9 @@ files:
|
|
|
101
100
|
- app/views/active_admin/devise/sessions/new.html.erb
|
|
102
101
|
- app/views/active_admin/devise/shared/_brand.html.erb
|
|
103
102
|
- app/views/active_admin/devise/unlocks/new.html.erb
|
|
103
|
+
- app/views/layouts/active_admin_logged_out.html.erb
|
|
104
104
|
- js-src/prism.js
|
|
105
|
+
- lib/active_admin/views/active_filters_bar.rb
|
|
105
106
|
- lib/active_admin/views/filters_sidebar.rb
|
|
106
107
|
- lib/active_admin/views/flash_messages.rb
|
|
107
108
|
- lib/active_admin/views/index_table_actions.rb
|
|
@@ -139,7 +140,6 @@ metadata:
|
|
|
139
140
|
homepage_uri: https://github.com/ramlaxmanyadav/active_admin_prism
|
|
140
141
|
source_code_uri: https://github.com/ramlaxmanyadav/active_admin_prism
|
|
141
142
|
changelog_uri: https://github.com/ramlaxmanyadav/active_admin_prism/blob/main/CHANGELOG.md
|
|
142
|
-
post_install_message:
|
|
143
143
|
rdoc_options: []
|
|
144
144
|
require_paths:
|
|
145
145
|
- lib
|
|
@@ -154,8 +154,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
154
154
|
- !ruby/object:Gem::Version
|
|
155
155
|
version: '0'
|
|
156
156
|
requirements: []
|
|
157
|
-
rubygems_version: 3.
|
|
158
|
-
signing_key:
|
|
157
|
+
rubygems_version: 3.6.9
|
|
159
158
|
specification_version: 4
|
|
160
159
|
summary: 'Prism: a plug-and-play sidebar theme for ActiveAdmin'
|
|
161
160
|
test_files: []
|