satis 2.1.17 → 2.1.18
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/satis/application.css +8 -2
- data/app/components/satis/page/component.css +34 -0
- data/app/components/satis/page/component.html.slim +41 -49
- data/app/components/satis/sidebar/component.css +132 -0
- data/app/components/satis/sidebar/component.html.slim +15 -0
- data/app/components/satis/sidebar/component.rb +17 -0
- data/app/components/satis/sidebar_menu/component.html.slim +1 -2
- data/app/components/satis/sidebar_menu_item/component.css +8 -8
- data/app/components/satis/sidebar_menu_item/component_controller.js +3 -2
- data/lib/satis/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 613f26a7bf0330e8720ad7b3fcf1a2cd89140f64ba2dbc36e489e7519bc79f63
|
4
|
+
data.tar.gz: ad451e1bc4d50a4917606f06aa9013552ddc0b9d41b12a55651bdfd4ddb21d16
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f414ed1d5eb94293ba5a7531863f16359f30f8274f8c3fadfd076d78d3ed0f55471fc29b3ffb9813c690082f10a0e872ba1d7ff4f089a9ec38f635397de2233c
|
7
|
+
data.tar.gz: 6f750a7bcd9cc8419caf5c039c804bd577fdc187a273d383f7b75fd14ca0fd705353ad47fdc762803842413f2eefeb742dd8bd7ab62c5641ac93f4d25a96f94b
|
@@ -10,10 +10,13 @@
|
|
10
10
|
@import '../../../components/satis/input_array/component.css';
|
11
11
|
@import '../../../components/satis/map/component.css';
|
12
12
|
@import '../../../components/satis/menu/component.css';
|
13
|
+
@import '../../../components/satis/page/component.css';
|
14
|
+
@import '../../../components/satis/sidebar/component.css';
|
13
15
|
@import '../../../components/satis/sidebar_menu/component.css';
|
14
16
|
@import '../../../components/satis/sidebar_menu_item/component.css';
|
15
17
|
@import '../../../components/satis/tabs/component.css';
|
16
18
|
|
19
|
+
|
17
20
|
@import 'components/diffy.css';
|
18
21
|
@import 'components/form.css';
|
19
22
|
@import "components/trix.css";
|
@@ -38,6 +41,7 @@ a[class=""] {
|
|
38
41
|
.mac-only {
|
39
42
|
display: inline-block;
|
40
43
|
}
|
44
|
+
|
41
45
|
.pc-only {
|
42
46
|
display: none;
|
43
47
|
}
|
@@ -47,6 +51,7 @@ a[class=""] {
|
|
47
51
|
.pc-only {
|
48
52
|
display: inline-block;
|
49
53
|
}
|
54
|
+
|
50
55
|
.mac-only {
|
51
56
|
display: none;
|
52
57
|
}
|
@@ -54,7 +59,7 @@ a[class=""] {
|
|
54
59
|
|
55
60
|
/* For the draggable controller */
|
56
61
|
.draggable:hover {
|
57
|
-
|
62
|
+
cursor: pointer;
|
58
63
|
}
|
59
64
|
|
60
65
|
|
@@ -62,7 +67,8 @@ a[class=""] {
|
|
62
67
|
ul {
|
63
68
|
list-style: square !important;
|
64
69
|
}
|
70
|
+
|
65
71
|
ol {
|
66
72
|
list-style: decimal !important;
|
67
73
|
}
|
68
|
-
}
|
74
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
.page_bg {
|
2
|
+
background: #f3f3f3;
|
3
|
+
}
|
4
|
+
|
5
|
+
.arrow {
|
6
|
+
opacity: 50%;
|
7
|
+
display: block;
|
8
|
+
width: 70px;
|
9
|
+
margin-left: 20px;
|
10
|
+
margin-top: 20px;
|
11
|
+
}
|
12
|
+
|
13
|
+
.dark .arrow {
|
14
|
+
color: #ffffff;
|
15
|
+
margin-left: 20px;
|
16
|
+
margin-top: 3px;
|
17
|
+
}
|
18
|
+
|
19
|
+
.dark .page_bg {
|
20
|
+
background: rgb(17, 24, 39);
|
21
|
+
}
|
22
|
+
|
23
|
+
.page_body {
|
24
|
+
margin-left: 260px;
|
25
|
+
overflow-y: scroll;
|
26
|
+
max-width: 87%;
|
27
|
+
background: #f3f3f3;
|
28
|
+
transition: 0.3s ease;
|
29
|
+
transition-delay: 0.1s;
|
30
|
+
}
|
31
|
+
|
32
|
+
.dark .page_body {
|
33
|
+
background: rgb(17, 24, 39);
|
34
|
+
}
|
@@ -1,63 +1,55 @@
|
|
1
1
|
doctype html
|
2
2
|
html lang="en"
|
3
|
+
meta name="viewport" content="width=device-width, initial-scale=1.0"
|
4
|
+
|
3
5
|
head
|
4
6
|
= head
|
5
7
|
body
|
6
8
|
= turbo_frame_tag "dialog"
|
7
|
-
.h-screen.flex.overflow-hidden
|
8
|
-
/ Off-canvas menu for mobile, show/hide based on off-canvas menu state.
|
9
|
-
.fixed.inset-0.flex.z-40.md:hidden.hidden aria-modal="true" role="dialog" data-satis-page-target="dialog"
|
10
|
-
|
11
|
-
.fixed.inset-0.bg-gray-600.bg-opacity-75.hidden aria-hidden="true" data-satis-page-target="overlay"
|
12
|
-
|
13
|
-
.relative.flex-1.flex.flex-col.max-w-xs.w-full.pt-5.pb-4.bg-white.transform.hidden data-satis-page-target="offCanvasMenu"
|
14
|
-
|
15
|
-
.absolute.top-0.right-0.-mr-12.pt-2.hidden data-satis-page-target="closeButton"
|
16
|
-
button.ml-1.flex.items-center.justify-center.h-10.w-10.rounded-full.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-white data-action="click->satis-dialog#close"
|
17
|
-
span.sr-only Close sidebar
|
18
|
-
i.fal.fa-2x.fa-xmark.text-white aria-hidden="true"
|
19
|
-
= sidebar_mobile
|
20
|
-
|
21
|
-
.flex-shrink-0.w-14 aria-hidden="true"
|
22
|
-
/ Dummy element to force sidebar to shrink to fit close icon
|
23
|
-
|
24
|
-
- unless Satis.config.full_width_topbar
|
25
|
-
/ SIDEBAR - for desktop
|
26
|
-
.hidden.md:flex.md:flex-shrink-0
|
27
|
-
.flex.flex-col.w-64
|
28
|
-
/! Sidebar component, swap this element with another sidebar if you like
|
29
|
-
|
30
|
-
.flex.flex-col.flex-grow.border-r.border-gray-200.pt-5.pb-4.bg-white.overflow-y-auto.dark:bg-gray-900.dark:border-gray-900.dark:border-opacity-75.dark:bg-opacity-75.dark:px-4.drop-shadow-xl.bg-opacity-75
|
31
|
-
= sidebar
|
32
|
-
|
9
|
+
.h-screen.flex.overflow-hidden data-controller="satis-page"
|
33
10
|
/ TOPBAR
|
34
|
-
.flex.flex-col.w-0.flex-1.overflow-hidden
|
35
|
-
.relative.z-10.flex-shrink-0.flex.h-16.bg-white.shadow.dark:
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
11
|
+
.flex.flex-col.w-0.flex-1.overflow-hidden.page_bg
|
12
|
+
.relative.z-10.flex-shrink-0.flex.topbar.h-16.bg-white.shadow.dark:py-4
|
13
|
+
.arrow
|
14
|
+
.fa-solid.fa-bars
|
15
|
+
/ NAVBAR
|
40
16
|
.flex-1.px-4.flex.justify-between
|
41
17
|
= navbar
|
42
18
|
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
/! Sidebar component, swap this element with another sidebar if you like
|
50
|
-
|
51
|
-
.flex.flex-col.flex-grow.border-r.border-gray-200.pt-5.pb-4.bg-white.overflow-y-auto.dark:bg-gray-900.dark:border-gray-900.dark:border-opacity-75.dark:bg-opacity-75.dark:px-4.drop-shadow-xl.bg-opacity-75
|
52
|
-
= sidebar
|
53
|
-
|
54
|
-
main.flex-1.relative.overflow-y-auto.focus:outline-none.dark:bg-gray-900
|
55
|
-
.mt-4
|
56
|
-
.max-w.mx-auto.px-4.sm:px-4.md:px-4
|
57
|
-
= body
|
58
|
-
- else
|
59
|
-
main.flex-1.relative.overflow-y-auto.focus:outline-none.dark:bg-gray-900
|
19
|
+
/ SIDEBAR
|
20
|
+
.flex.flex-row
|
21
|
+
== sidebar
|
22
|
+
/ BODY
|
23
|
+
.page_body
|
24
|
+
main.flex-1.relative.overflow-y-auto.focus:outline-none
|
60
25
|
.mt-4
|
61
26
|
.max-w.mx-auto.px-4.sm:px-4.md:px-4
|
62
27
|
= body
|
63
28
|
|
29
|
+
/ Minimize Sidebar
|
30
|
+
javascript:
|
31
|
+
document.addEventListener("DOMContentLoaded", () => {
|
32
|
+
let sidebar_collapse = document.querySelector(".sidebar");
|
33
|
+
let topbar = document.querySelector(".topbar");
|
34
|
+
let page_body = document.querySelector(".page_body");
|
35
|
+
let sidebarBtn = document.querySelector(".arrow");
|
36
|
+
|
37
|
+
// Check stored state and apply it
|
38
|
+
const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
|
39
|
+
if (isClosed) {
|
40
|
+
sidebar_collapse.classList.add("close");
|
41
|
+
topbar.classList.add("close");
|
42
|
+
page_body.classList.add("close");
|
43
|
+
}
|
44
|
+
|
45
|
+
sidebarBtn.addEventListener("click", () => {
|
46
|
+
sidebar_collapse.classList.toggle("close");
|
47
|
+
topbar.classList.toggle("close");
|
48
|
+
page_body.classList.toggle("close");
|
49
|
+
|
50
|
+
// Save the current state to sessionStorage
|
51
|
+
const currentState = sidebar_collapse.classList.contains("close");
|
52
|
+
sessionStorage.setItem('sidebarClosed', currentState);
|
53
|
+
});
|
54
|
+
});
|
55
|
+
|
@@ -0,0 +1,132 @@
|
|
1
|
+
.sidebar {
|
2
|
+
padding: 10;
|
3
|
+
height: 100%;
|
4
|
+
width: 260px;
|
5
|
+
box-shadow: 1cm;
|
6
|
+
background: #ffffff;
|
7
|
+
overflow-y: scroll;
|
8
|
+
-ms-overflow-style: none;
|
9
|
+
scrollbar-width: none;
|
10
|
+
transition: 0.3s ease;
|
11
|
+
transition-delay: 0.1s;
|
12
|
+
@apply fixed top-0 left-0;
|
13
|
+
}
|
14
|
+
|
15
|
+
.sidebar.close {
|
16
|
+
position: fixed;
|
17
|
+
top: 0;
|
18
|
+
left: 0;
|
19
|
+
height: 100%;
|
20
|
+
width: 50px;
|
21
|
+
overflow-y: scroll;
|
22
|
+
-ms-overflow-style: none;
|
23
|
+
scrollbar-width: none;
|
24
|
+
transition: 0.3s ease;
|
25
|
+
transition-delay: 0.1s;
|
26
|
+
}
|
27
|
+
|
28
|
+
.sidebar::-webkit-scrollbar {
|
29
|
+
display: none;
|
30
|
+
}
|
31
|
+
|
32
|
+
.sidebar.close .sts-sidebar-menu-item__link {
|
33
|
+
text-indent:-9999px;
|
34
|
+
}
|
35
|
+
|
36
|
+
.topbar {
|
37
|
+
max-width: 87%;
|
38
|
+
margin-left: 258px;
|
39
|
+
background: #fcf9f9;
|
40
|
+
transition: 0.3s ease;
|
41
|
+
transition-delay: 0.1s;
|
42
|
+
}
|
43
|
+
|
44
|
+
.topbar.close {
|
45
|
+
max-width: 97%;
|
46
|
+
margin-left: 50px;
|
47
|
+
transition: 0.3s ease;
|
48
|
+
transition-delay: 0.1s;
|
49
|
+
}
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
.page_body.close {
|
54
|
+
margin-left: 50px;
|
55
|
+
max-width: 97%;
|
56
|
+
transition: 0.3s ease;
|
57
|
+
transition-delay: 0.1s;
|
58
|
+
}
|
59
|
+
|
60
|
+
.account-icon {
|
61
|
+
opacity: 25%;
|
62
|
+
border-radius: 25px;
|
63
|
+
padding: 20px;
|
64
|
+
}
|
65
|
+
|
66
|
+
.sidebar.close .account-icon {
|
67
|
+
opacity: 0;
|
68
|
+
}
|
69
|
+
|
70
|
+
.sidebar .icon-link {
|
71
|
+
font-size: 30px;
|
72
|
+
color: #fff;
|
73
|
+
}
|
74
|
+
|
75
|
+
.dark .sidebar .sts-sidebar-menu-item__link.active {
|
76
|
+
color: #FFFFFF;
|
77
|
+
}
|
78
|
+
|
79
|
+
.sidebar .sts-sidebar-menu-item__link.active {
|
80
|
+
color: #2c2c2c;
|
81
|
+
}
|
82
|
+
|
83
|
+
.sidebar .sts-sidebar-menu-item__link {
|
84
|
+
color: #8c8c8c;
|
85
|
+
}
|
86
|
+
|
87
|
+
.dark .sidebar .sts-sidebar-menu-item__link{
|
88
|
+
color: #acacac;
|
89
|
+
}
|
90
|
+
|
91
|
+
.sidebar .boxture-logo {
|
92
|
+
height: 52px;
|
93
|
+
width: 52px;
|
94
|
+
opacity: 50%;
|
95
|
+
object-fit: cover;
|
96
|
+
border-radius: 16px;
|
97
|
+
font-size: 30px;
|
98
|
+
color: #fff;
|
99
|
+
margin-top: 80px;
|
100
|
+
mix-blend-mode: multiply;
|
101
|
+
}
|
102
|
+
|
103
|
+
.sidebar.close .profile-logo {
|
104
|
+
display: none;
|
105
|
+
}
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
.sidebar .logo_name {
|
110
|
+
font-size: 10px;
|
111
|
+
opacity: 50%;
|
112
|
+
text-align: center;
|
113
|
+
display: block;
|
114
|
+
}
|
115
|
+
|
116
|
+
.sidebar.close .logo_name {
|
117
|
+
display: none;
|
118
|
+
}
|
119
|
+
|
120
|
+
.dark .sidebar {
|
121
|
+
background: #222836;
|
122
|
+
transition: 0.3s ease;
|
123
|
+
transition-delay: 0.1s;
|
124
|
+
}
|
125
|
+
|
126
|
+
.dark .sidebar .logo_name {
|
127
|
+
color: #edecec;
|
128
|
+
}
|
129
|
+
|
130
|
+
.dark .topbar {
|
131
|
+
background: #222836;
|
132
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
# app/components/satis/sidebar/component.rb
|
2
|
+
module Satis
|
3
|
+
module Sidebar
|
4
|
+
class Component < Satis::ApplicationComponent
|
5
|
+
attr_reader :menu, :menu_options
|
6
|
+
|
7
|
+
renders_one :header
|
8
|
+
renders_one :footer
|
9
|
+
renders_many :items
|
10
|
+
|
11
|
+
def initialize(menu)
|
12
|
+
super
|
13
|
+
@menu = menu
|
14
|
+
end
|
15
|
+
end
|
16
|
+
end
|
17
|
+
end
|
@@ -1,2 +1 @@
|
|
1
|
-
|
2
|
-
= render(Satis::SidebarMenuItem::Component.with_collection(@menu.items, menu_options: menu_options))
|
1
|
+
= render(Satis::SidebarMenuItem::Component.with_collection(@menu.items, menu_options: menu_options))
|
@@ -1,13 +1,13 @@
|
|
1
1
|
.sts-sidebar-menu-item {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
2
|
+
@apply pt-1;
|
3
|
+
|
4
|
+
& a.focus {
|
5
|
+
background: rgba(1, 1, 1, 0.1);
|
6
|
+
|
7
|
+
.dark & {
|
8
|
+
background: rgba(255, 255, 255, 0.3);
|
9
|
+
}
|
9
10
|
}
|
10
|
-
}
|
11
11
|
|
12
12
|
&.active > [data-satis-sidebar-menu-item-target="link"] [data-satis-sidebar-menu-item-target="indicator"] {
|
13
13
|
@apply rotate-90;
|
@@ -29,7 +29,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
|
|
29
29
|
|
30
30
|
open(event) {
|
31
31
|
if (this.hasSubmenuTarget) {
|
32
|
-
const sidebar = this.element.closest('
|
32
|
+
const sidebar = this.element.closest('.sidebar')
|
33
33
|
sidebar.dispatchEvent(new CustomEvent('sts-sidebar-menu-item:open', { detail: { element: this.element } }))
|
34
34
|
|
35
35
|
if (!this.isSubmenuVisible) {
|
@@ -43,6 +43,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
|
|
43
43
|
event.preventDefault()
|
44
44
|
}
|
45
45
|
}
|
46
|
+
event.stopPropagation();
|
46
47
|
}
|
47
48
|
|
48
49
|
openListener(event) {
|
@@ -74,7 +75,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
|
|
74
75
|
|
75
76
|
updateFocus(scroll = false) {
|
76
77
|
if (!this.hasLink) return
|
77
|
-
const focusedItem = this.element.closest('
|
78
|
+
const focusedItem = this.element.closest('.sidebar').querySelector('a.focus')
|
78
79
|
const linkInUrl = this.linkInUrl()
|
79
80
|
if (linkInUrl && (!focusedItem || linkInUrl > this.linkInUrl(focusedItem))) {
|
80
81
|
focusedItem?.classList.toggle("focus", false)
|
data/lib/satis/version.rb
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: satis
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.1.
|
4
|
+
version: 2.1.18
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Tom de Grunt
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2024-
|
11
|
+
date: 2024-06-12 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: browser
|
@@ -808,11 +808,15 @@ files:
|
|
808
808
|
- app/components/satis/menu/component_controller.js
|
809
809
|
- app/components/satis/menu_item/component.html.slim
|
810
810
|
- app/components/satis/menu_item/component.rb
|
811
|
+
- app/components/satis/page/component.css
|
811
812
|
- app/components/satis/page/component.html.slim
|
812
813
|
- app/components/satis/page/component.rb
|
813
814
|
- app/components/satis/page/component_controller.js
|
814
815
|
- app/components/satis/progress_bar/component.html.slim
|
815
816
|
- app/components/satis/progress_bar/component.rb
|
817
|
+
- app/components/satis/sidebar/component.css
|
818
|
+
- app/components/satis/sidebar/component.html.slim
|
819
|
+
- app/components/satis/sidebar/component.rb
|
816
820
|
- app/components/satis/sidebar_menu/component.css
|
817
821
|
- app/components/satis/sidebar_menu/component.html.slim
|
818
822
|
- app/components/satis/sidebar_menu/component.rb
|