satis 2.1.28 → 2.1.30

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/components/satis/dropdown/component.css +6 -6
  3. data/app/components/satis/page/component.css +33 -12
  4. data/app/components/satis/page/component.html.slim +7 -32
  5. data/app/components/satis/sidebar/component.css +15 -26
  6. data/app/components/satis/sidebar/component.html.slim +2 -0
  7. data/app/components/satis/sidebar/component_controller.js +41 -0
  8. data/app/components/satis/sidebar_menu_item/component.css +28 -16
  9. data/app/javascript/satis/controllers/index.js +3 -0
  10. data/lib/satis/version.rb +1 -1
  11. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b59e1d63bb796965a6fa1a5c5b15fea4736f5b3c6f5a9b64fae463a15a132f30
4
- data.tar.gz: e1614cd0f71eea8a0a6dbad386b17253b601fd386d8cbc42739c65c507264001
3
+ metadata.gz: 0f766f9331ff2093e4f979b4e205a1d3ff7130d98dbeb1ca28d2ae5ce6441180
4
+ data.tar.gz: 934786903c2609fa87de04ea04f3515635cbb63d168bd1f28a55546914ffaf7b
5
5
  SHA512:
6
- metadata.gz: 22f9b908ac49cc92d1131c87458ad191df8dffa903dfdf6ffd313387f807407e0c7678917646399aaf942d3844d0af4eae7cd554e2c4bb533227500f3fb66e8a
7
- data.tar.gz: c9d57aaad815d1d98e0f34004ba0bd58cee7d64cb77d2e85e5a8045bd4bda651022a186300d7a067518e4e203b8dff3625d26eb0f3da381f16423c963907198c
6
+ metadata.gz: 7da5e56fe5d7498cd9b7704986f50bd6334984f41fd5ca6e18ded90a3c65f06f3da0177f05f1a2488008746b2e61ab2ca405dd6c83d61d184a5c5d1c1f31f7c7
7
+ data.tar.gz: f9d16ab31bcc4937efd4d19e7c0caef55264fd9f32b163549d49c0ab76a3cae7bae530cb41d86591d417ee3d2dbe27ca5ff713cf21133468e231aec635aeaab1
data/app/components/satis/dropdown/component.css CHANGED
@@ -24,15 +24,15 @@
24
24
  }
25
25
 
26
26
  .topbar .satis-dropdown .sts-dropdown{
27
- @apply bg-gray-50 rounded-lg shadow dark:bg-gray-900;
27
+ @apply bg-white dark:bg-gray-900 outline dark:outline-none outline-gray-200 outline-1 rounded-md shadow-none shadow-md;
28
28
  }
29
29
 
30
30
  .page_body .satis-dropdown .sts-dropdown{
31
- @apply bg-white dark:bg-gray-900 outline dark:outline-none outline-gray-300 outline-1 shadow-none;
31
+ @apply bg-white dark:bg-gray-900 outline dark:outline-none outline-gray-300 outline-1 rounded-md shadow-none;
32
32
  }
33
33
 
34
34
  .page_body .satis-dropdown .sts-dropdown-results{
35
- overflow-y: scroll;
35
+ ;
36
36
  @apply bg-white divide-gray-900 divide-opacity-25 shadow-gray-300 shadow-lg text-gray-900 text-opacity-75 dark:bg-gray-900 dark:shadow-gray-700 dark:shadow-lg dark:bg-opacity-75 dark:divide-gray-50 dark:divide-opacity-25 dark:text-gray-300;
37
37
  }
38
38
 
@@ -53,12 +53,12 @@
53
53
  }
54
54
 
55
55
  .topbar .satis-dropdown .sts-dropdown-results{
56
- overflow-y: scroll;
57
- @apply bg-gray-50 divide-gray-900 divide-opacity-25 shadow-gray-300 shadow-lg text-gray-900 text-opacity-75 dark:bg-gray-900 dark:shadow-gray-700 dark:shadow-lg dark:bg-opacity-75 dark:divide-gray-50 dark:divide-opacity-25 dark:text-gray-300;
56
+ ;
57
+ @apply bg-white divide-gray-900 divide-opacity-25 shadow-gray-300 shadow-lg text-gray-900 text-opacity-75 dark:bg-gray-900 dark:shadow-gray-700 dark:shadow-lg dark:bg-opacity-75 dark:divide-gray-50 dark:divide-opacity-25 dark:text-gray-300;
58
58
  }
59
59
 
60
60
  .topbar .satis-dropdown .sts-dropdown .sts-dropdown-input{
61
- @apply bg-gray-50 dark:bg-gray-900 dark:divide-gray-100;
61
+ @apply bg-white dark:bg-gray-900 dark:divide-gray-100;
62
62
  }
63
63
 
64
64
  .topbar .satis-dropdown .sts-dropdown-results-items{
data/app/components/satis/page/component.css CHANGED
@@ -1,5 +1,11 @@
1
+ .h-screen.flex {
2
+ max-width: 100%;
3
+ max-height: 100%;
4
+ height: 100vh;
5
+ overflow: hidden;
6
+ }
7
+
1
8
  .page_bg {
2
- display: flex;
3
9
  flex-direction: column;
4
10
  width: 0;
5
11
  flex-grow: 1;
@@ -8,24 +14,42 @@
8
14
  background-color: #f3f3f4;
9
15
  }
10
16
 
11
- .topbar .arrow {
12
- opacity: 0.5;
17
+ .arrow {
18
+ opacity: 0.5;
13
19
  display: block;
14
20
  width: 70px;
15
21
  margin-top: 20px;
16
- margin-left: 20px;
22
+ margin-left: 220px;
23
+ transition: 0.3s ease;
24
+ transition-delay: 0.1s;
25
+ }
26
+
27
+ .sidebar.close .arrow{
28
+ margin-left: 15px;
29
+ }
30
+
31
+ .topbar .account-icon {
32
+ display: none;
33
+ }
34
+
35
+ .topbar.close .account-icon {
36
+ display:block;
37
+ }
38
+
39
+ .sidebar .fa-solid.arrow-left-to-bracket{
40
+ display: block;
17
41
  }
18
42
 
19
- .topbar .arrow:hover {
43
+ .arrow:hover {
20
44
  color: #555555;
21
45
  cursor: pointer;
22
46
  }
23
47
 
24
- .dark .topbar .arrow:hover {
48
+ .dark .arrow:hover {
25
49
  color: #c0c0c0;
26
50
  }
27
51
 
28
- .dark .topbar .arrow {
52
+ .dark .arrow {
29
53
  color: #ffffff;
30
54
  opacity: 1;
31
55
  margin-top: 20px;
@@ -37,23 +61,20 @@
37
61
 
38
62
  .page_body {
39
63
  margin-left: 260px;
40
- overflow-y: scroll;
41
64
  max-width: 87%;
42
- position: relative;
43
65
  transition: 0.3s ease;
44
66
  transition-delay: 0.1s;
45
67
  }
46
68
  .page_bg .page_body.close {
47
69
  margin-left: 60px;
48
70
  z-index: 1;
49
- position: relative;
50
- overflow: visible;
71
+
51
72
  }
52
73
 
53
74
  .page_bg .page_body.close .flex-1{
54
75
  z-index: 1;
55
76
  position: relative;
56
- overflow: visible;
77
+
57
78
  }
58
79
 
59
80
  .dark .page_body {
data/app/components/satis/page/component.html.slim CHANGED
@@ -10,8 +10,12 @@ html lang="en"
10
10
  / TOPBAR
11
11
  .page_bg
12
12
  .topbar
13
- .arrow
14
- .fa-solid.fa-bars
13
+ .account-icon
14
+ - if Current.account.logo.attached?
15
+ = image_tag url_for(Current.account.logo.variant(resize_to_limit: [nil, 25]).processed)
16
+ - else
17
+ .h-8.w-auto
18
+ = Current.account.name
15
19
  / NAVBAR
16
20
  .flex-1.px-4.flex.justify-between
17
21
  = navbar
@@ -21,36 +25,7 @@ html lang="en"
21
25
 
22
26
  / BODY
23
27
  .page_body
24
- main.flex-1.relative.overflow-y-auto.overflow-x-auto.focus:outline-none
28
+ main.flex-1.relative.focus:outline-none
25
29
  .mt-4
26
30
  .max-w.mx-auto.px-4.sm:px-4.md:px-4
27
31
  = body
28
-
29
-
30
- / Minimize Sidebar
31
- javascript:
32
- document.addEventListener("DOMContentLoaded", () => {
33
- let sidebar_collapse = document.querySelector(".sidebar");
34
- let topbar = document.querySelector(".topbar");
35
- let page_body = document.querySelector(".page_body");
36
- let sidebarBtn = document.querySelector(".arrow");
37
-
38
- // Check stored state and apply it
39
- const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
40
- if (isClosed) {
41
- sidebar_collapse.classList.add("close");
42
- topbar.classList.add("close");
43
- page_body.classList.add("close");
44
- }
45
-
46
- sidebarBtn.addEventListener("click", () => {
47
- sidebar_collapse.classList.toggle("close");
48
- topbar.classList.toggle("close");
49
- page_body.classList.toggle("close");
50
-
51
- // Save the current state to sessionStorage
52
- const currentState = sidebar_collapse.classList.contains("close");
53
- sessionStorage.setItem('sidebarClosed', currentState);
54
- });
55
- });
56
-
data/app/components/satis/sidebar/component.css CHANGED
@@ -1,41 +1,35 @@
1
- .sidebar {
1
+ .h-screen.flex .sidebar {
2
2
  height: 100%;
3
3
  width: 260px;
4
4
  z-index: 1000;
5
5
  position: absolute;
6
6
  background: #ffffff;
7
7
  overflow: visible;
8
- scrollbar-width: none;
9
8
  overflow-y: scroll;
10
- transition: 0.3s ease;
11
- transition-delay: 0.1s;
9
+ scrollbar-width: none;
12
10
  }
13
11
 
14
12
  .h-screen.flex .page_bg .sidebar.close{
15
13
  z-index: 1000;
16
14
  position: absolute;
17
- overflow: visible;
15
+ margin-top: 4rem;
18
16
  }
19
17
 
20
18
  .h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item{
21
19
  z-index: 1001;
22
20
  position: relative;
23
- overflow: visible;
21
+
24
22
  }
25
23
 
26
24
 
27
25
  .page_bg .sidebar.close {
28
26
  position: absolute;
29
- overflow: visible;
30
27
  top: 0;
31
28
  left: 0;
32
29
  height: 100%;
33
30
  width: 60px;
34
31
  z-index: 1000;
35
- overflow-y: scroll;
36
32
  scrollbar-width: none;
37
- transition: 0.3s ease;
38
- transition-delay: 0.1s;
39
33
  }
40
34
 
41
35
  .sidebar::-webkit-scrollbar {
@@ -49,29 +43,22 @@
49
43
  height: 4rem;
50
44
  max-width: 87%;
51
45
  margin-left: 260px;
52
- transition: 0.3s ease;
53
- transition-delay: 0.1s;
54
46
  background: white;
55
47
  z-index: 2;
56
48
  }
57
49
 
58
- .page_bg .topbar.close {
59
- max-width: 97%;
60
- margin-left: 60px;
61
- transition: 0.3s ease;
62
- transition-delay: 0.1s;
50
+ .h-screen.flex .page_bg .topbar.close {
51
+ max-width: 100%;
52
+ margin-left: 0px;
63
53
  }
64
54
 
65
55
  .page_body.close {
66
56
  margin-left: 50px;
67
57
  max-width: 97%;
68
- transition: 0.3s ease;
69
- transition-delay: 0.1s;
70
58
  }
71
59
 
72
60
 
73
61
  .account-icon {
74
- opacity: 0.25;
75
62
  border-radius: 25px;
76
63
  padding: 20px;
77
64
  }
@@ -85,12 +72,16 @@
85
72
  opacity: 0;
86
73
  }
87
74
 
88
- .sidebar.close .sts-sidebar-menu-item{
89
- margin-left: 2px;
75
+ .sidebar.close .icon-link {
76
+ margin-top: -40px;
77
+ transition: 0.3s ease;
78
+ transition-delay: 0.1s;
90
79
  }
91
80
 
92
81
 
93
-
82
+ .sidebar.close .sts-sidebar-menu-item{
83
+ margin-left: 2px;
84
+ }
94
85
 
95
86
  .sidebar .boxture-logo {
96
87
  height: 52px;
@@ -123,10 +114,8 @@
123
114
  display: none;
124
115
  }
125
116
 
126
- .dark .sidebar {
117
+ .dark .h-screen.flex .sidebar {
127
118
  background: #222836;
128
- transition: 0.3s ease;
129
- transition-delay: 0.1s;
130
119
  }
131
120
 
132
121
  .dark .sidebar .logo_name {
data/app/components/satis/sidebar/component.html.slim CHANGED
@@ -3,6 +3,8 @@
3
3
  .icon-link
4
4
  - @menu.items.each do |item|
5
5
  = render Satis::SidebarMenuItem::Component.new(item: item, menu_options: menu_options)
6
+ .arrow
7
+ .fa-solid.fa-arrow-right-to-bracket
6
8
  = footer
7
9
 
8
10
 
data/app/components/satis/sidebar/component_controller.js ADDED
@@ -0,0 +1,41 @@
1
+ import ApplicationController from "satis/controllers/application_controller"
2
+ import { debounce } from "satis/utils"
3
+
4
+ export default class SidebarComponentController extends ApplicationController {
5
+ connect() {
6
+ super.connect();
7
+ this.initializeSidebar();
8
+ }
9
+
10
+ initializeSidebar() {
11
+ let sidebar_collapse = document.querySelector(".sidebar");
12
+ let topbar = document.querySelector(".topbar");
13
+ let page_body = document.querySelector(".page_body");
14
+ let sidebarBtn = document.querySelector(".arrow");
15
+
16
+ // Check stored state and apply it
17
+ const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
18
+ if (isClosed) {
19
+ sidebar_collapse.classList.add("close");
20
+ topbar.classList.add("close");
21
+ page_body.classList.add("close");
22
+ }
23
+
24
+
25
+ sidebarBtn.addEventListener("click", () => {
26
+ const isClosed = sidebar_collapse.classList.toggle("close");
27
+ topbar.classList.toggle("close");
28
+ page_body.classList.toggle("close");
29
+
30
+ // Save the current state to sessionStorage
31
+ sessionStorage.setItem('sidebarClosed', isClosed);
32
+ });
33
+ }
34
+ }
35
+
36
+ // Ensure the function runs on every Turbo page load
37
+ document.addEventListener("turbo:load", () => {
38
+ const controller = new SidebarComponentController();
39
+ controller.initializeSidebar();
40
+ });
41
+
data/app/components/satis/sidebar_menu_item/component.css CHANGED
@@ -17,13 +17,13 @@
17
17
  @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500
18
18
  }
19
19
  &__icon {
20
- @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-100 group-hover:text-gray-500;
20
+ @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200 group-hover:text-gray-500;
21
21
  }
22
22
  &__no-icon {
23
23
  @apply mr-3 flex-shrink-0 h-6;
24
24
  }
25
25
  &__label {
26
- @apply flex-1 text-gray-700;
26
+ @apply flex-1 text-gray-700 dark:text-gray-300;
27
27
  }
28
28
  &__menu-icon {
29
29
  @apply text-gray-300 ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150;
@@ -33,6 +33,7 @@
33
33
 
34
34
  .page_bg .sidebar.close .sts-sidebar-menu-item__menu-icon {
35
35
  display: none;
36
+ margin-left: 2px;
36
37
  }
37
38
 
38
39
  .page_bg .sidebar.close .sts-sidebar-menu-item__label {
@@ -43,46 +44,57 @@
43
44
  display: none;
44
45
  visibility: hidden;
45
46
  opacity: 0;
46
- transition: visibility 0s linear 1s, opacity 1s linear; /* Ensures it stays visible for 1 second after mouse leaves */
47
47
  }
48
48
 
49
- .page_bg .sidebar.close .sts-sidebar-menu-item:hover .sts-sidebar-menu-item__label {
50
- display: flex;
51
- overflow: visible;
49
+ .page_bg .sidebar.close .sts-sidebar-menu-item:hover:not(:has([data-satis-sidebar-menu-item-target="submenu"])) .sts-sidebar-menu-item__label {
50
+ @apply dark:bg-gray-900;
51
+ display: block;
52
+ background: white;
53
+ padding: 10px;
54
+
52
55
  }
53
56
 
54
- .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
55
- @apply bg-white dark:bg-gray-900 py-0 px-0;
57
+ .h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
58
+ @apply rounded-md bg-white dark:bg-gray-900 py-0 px-0;
56
59
  display: block;
57
60
  visibility: visible;
58
61
  opacity: 1;
59
- position: absolute;
62
+ position: fixed;
60
63
  overflow-y: scroll;
61
64
  padding-right: 20px;
62
65
  margin-left: 35px;
63
66
  margin-top: -60px;
64
67
  z-index: 1000;
65
- overflow: visible;
66
- box-shadow: -0.5px 0px 3px 0.3px #aaaaaa;
67
- transition: visibility 0s linear 0s, opacity 0.5s linear;
68
68
  }
69
69
 
70
70
  .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover .sts-sidebar-menu-item__label {
71
+ background: none;
71
72
  overflow: visible;
72
73
  z-index: 1000;
74
+ padding: 0px;
73
75
  }
74
76
 
75
- .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
77
+ .h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item:last-child:hover > [data-satis-sidebar-menu-item-target="submenu"] {
78
+ margin-top: -275px;
79
+ }
80
+
81
+ .h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
76
82
  z-index: 1005;
77
83
  margin-left: 123px;
78
84
  overflow-y: scroll;
79
85
  }
80
86
 
81
- .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
87
+ .h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
88
+ display: block;
89
+ visibility: visible;
90
+ opacity: 1;
82
91
  position: relative;
83
- z-index: 1006;
84
- margin-left: 123px;
92
+ overflow: visible;
85
93
  overflow-y: scroll;
94
+ padding-right: 20px;
95
+ margin-left: 35px;
96
+ margin-top: -60px;
97
+ z-index: 1020;
86
98
  }
87
99
 
88
100
  .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"]::-webkit-scrollbar {
data/app/javascript/satis/controllers/index.js CHANGED
@@ -24,6 +24,9 @@ application.register("satis-menu", MenuComponentController);
24
24
  import PageComponentController from "satis/components/page/component_controller";
25
25
  application.register("satis-page", PageComponentController);
26
26
 
27
+ import SidebarComponentController from "satis/components/sidebar/component_controller";
28
+ application.register("satis-sidebar", SidebarComponentController);
29
+
27
30
  import SidebarMenuComponentController from "satis/components/sidebar_menu/component_controller";
28
31
  application.register("satis-sidebar-menu", SidebarMenuComponentController);
29
32
 
data/lib/satis/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Satis
2
- VERSION = "2.1.28"
2
+ VERSION = "2.1.30"
3
3
  end
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.28
4
+ version: 2.1.30
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-07-03 00:00:00.000000000 Z
11
+ date: 2024-07-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: browser
@@ -824,6 +824,7 @@ files:
824
824
  - app/components/satis/sidebar/component.css
825
825
  - app/components/satis/sidebar/component.html.slim
826
826
  - app/components/satis/sidebar/component.rb
827
+ - app/components/satis/sidebar/component_controller.js
827
828
  - app/components/satis/sidebar_menu/component.css
828
829
  - app/components/satis/sidebar_menu/component.html.slim
829
830
  - app/components/satis/sidebar_menu/component.rb