satis 2.1.24 → 2.1.26

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: fa17009ee16f3b8bc1630825c3b680946fad239bbf4056943d73dbeaf3b0b525
4
- data.tar.gz: 67bf959d9e6105818c1485d96ae01b0e5c7537b9f8c25d31ae87d38f274a4a10
3
+ metadata.gz: 8f8f339fde4f3df1a30f222dd6241d44686a70f2fd12405ebfae3a8097755626
4
+ data.tar.gz: 63e6bf82b02feff16583074efb7b0c954ecc8ac0e5407e57856cd04333ba3e1c
5
5
  SHA512:
6
- metadata.gz: 357a1dd5792d12d4fb0f3796abc62f33e53a152f1905c7868fda95e3ae298a3fc401be53203b2d730a6561ebf085e974f7e206ec6105b7cd2fb0f18300ef144c
7
- data.tar.gz: '08715ed0839005b0a1a1770639acd0a0a17636255549c95c9fc32cdc6d1606a1ea5b75586a866000b50fc5782595a5eed4628523fa4f68af51f6b6cb53bc6883'
6
+ metadata.gz: ec19723f6e4e952c7770355704015cac5eaad854ff634e5462aee2cb69972de4f65746c437fe00bfddb0542d8fd39bfa2e2af664f26b83d53f6767e7d27eaabe
7
+ data.tar.gz: db3adf6852e21b32bbbb47f6cb0581910972f090fad5f49790db2783010d0e80011dff9cdb3d697b5637d2780efd3e7b5b18e0f887da90f69207c9cbfad5e359
@@ -23,10 +23,27 @@
23
23
  }
24
24
  }
25
25
 
26
- .satis-dropdown .topbar-dropdown{
26
+ .topbar .satis-dropdown .sts-dropdown{
27
27
  @apply bg-gray-50 rounded-lg shadow dark:bg-gray-900;
28
28
  }
29
29
 
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;
32
+ }
33
+
34
+ .page_body .satis-dropdown .sts-dropdown-results{
35
+ overflow-y: scroll;
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
+ }
38
+
39
+ .page_body .satis-dropdown .sts-dropdown .sts-dropdown-input{
40
+ @apply bg-white dark:bg-gray-900 dark:divide-gray-100;
41
+ }
42
+
43
+ .page_body .satis-dropdown .sts-dropdown-results-items{
44
+ @apply dark:border-gray-700 border-b divide-gray-200 divide-opacity-25 hover:bg-gray-200 hover:shadow dark:hover:text-white dark:bg-opacity-75 dark:hover:bg-gray-800 dark:bg-gray-900 dark:divide-gray-100 dark:divide-opacity-5;
45
+ }
46
+
30
47
  .changelog-menu{
31
48
  @apply dark:bg-gray-900 dark:border-gray-100 dark:shadow-gray-800 divide-y divide-gray-100 dark:divide-gray-800 right-0 z-10 mx-1 w-1/3 rounded-md bg-white text-gray-500 dark:text-gray-100 shadow-lg ring-1 ring-black ring-opacity-5 overflow-y-auto max-h-screen;
32
49
  }
@@ -35,16 +52,16 @@
35
52
  @apply py-1 hover:bg-gray-50 divide-gray-900 dark:divide-gray-500 dark:hover:bg-gray-700 cursor-pointer;
36
53
  }
37
54
 
38
- .satis-dropdown .topbar-dropdown-results{
55
+ .topbar .satis-dropdown .sts-dropdown-results{
39
56
  overflow-y: scroll;
40
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;
41
58
  }
42
59
 
43
- .satis-dropdown .topbar-dropdown .topbar-dropdown-input{
60
+ .topbar .satis-dropdown .sts-dropdown .sts-dropdown-input{
44
61
  @apply bg-gray-50 dark:bg-gray-900 dark:divide-gray-100;
45
62
  }
46
63
 
47
- .satis-dropdown .topbar-dropdown-results-items{
64
+ .topbar .satis-dropdown .sts-dropdown-results-items{
48
65
  @apply dark:border-gray-700 border-b divide-gray-200 divide-opacity-25 hover:bg-gray-200 hover:shadow dark:hover:text-white dark:bg-opacity-75 dark:hover:bg-gray-800 dark:bg-gray-900 dark:divide-gray-100 dark:divide-opacity-5;
49
66
  }
50
67
 
@@ -8,11 +8,11 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
8
8
  .flex.flex-col
9
9
  div.hidden.py-1 data-satis-dropdown-target="pills"
10
10
  .flex.flex-col.items-center
11
- .w-full.topbar-dropdown
11
+ .w-full.sts-dropdown
12
12
  .h-12.p-1.flex.rounded
13
13
  .flex.flex-auto.flex-wrap
14
14
  / Input where you can search
15
- input.p-1.px-2.appearance-none.outline-none.w-full.topbar-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
15
+ input.p-1.px-2.appearance-none.outline-none.w-full.sts-dropdown-input.text-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
16
16
  div
17
17
  / Reset button
18
18
  - unless @reset_button == false
@@ -28,7 +28,7 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
28
28
  template data-satis-dropdown-target="selectedItemsTemplate"
29
29
 
30
30
  / Container for results
31
- .hidden.container.topbar-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
31
+ .hidden.container.sts-dropdown-results.shadow.dark:text-gray-300.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
32
32
  .flex.flex-col.w-full data-satis-dropdown-target="items"
33
33
  - options[:collection]&.each do |item|
34
34
  - data_attrs = item.try(:third) ? item.third : {}
@@ -36,8 +36,8 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
36
36
  - if custom_item_html?
37
37
  = item_html(item)
38
38
  - else
39
- .cursor-pointer.w-full.topbar-dropdown-results-items
40
- .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2
39
+ .cursor-pointer.w-full.sts-dropdown-results-items
40
+ .flex.w-full.items-center.p-2.pl-2
41
41
  .w-full.items-center.flex
42
42
  .mx-2.-mt-1
43
43
  span = item.send(text_method)
@@ -891,9 +891,9 @@ export default class DropdownComponentController extends ApplicationController {
891
891
  const elements = this.selectedItemsTemplateTarget.content.querySelectorAll(`[data-satis-dropdown-item-text*="${trimmedValue}"]`);
892
892
  const selected = Array.from(elements).find(element => element.getAttribute('data-satis-dropdown-item-text').trim() === trimmedValue);
893
893
  if (!selected && this.searchInputTarget.value.length > 0 && !this.freeTextValue) {
894
- this.searchInputTarget.closest(".bg-white").classList.toggle("warning", true)
894
+ this.searchInputTarget.closest(".sts-dropdown").classList.toggle("warning", true)
895
895
  } else {
896
- this.searchInputTarget.closest(".bg-white").classList.toggle("warning", false)
896
+ this.searchInputTarget.closest(".sts-dropdown").classList.toggle("warning", false)
897
897
  }
898
898
  }
899
899
 
@@ -1,34 +1,63 @@
1
1
  .page_bg {
2
- background: #f3f3f3;
3
- }
2
+ display: flex;
3
+ flex-direction: column;
4
+ width: 0;
5
+ flex-grow: 1;
6
+ z-index: 1;
7
+ position: relative;
8
+ }
4
9
 
5
- .arrow {
6
- opacity: 50%;
10
+ .topbar .arrow {
11
+ opacity: 0.5;
7
12
  display: block;
8
13
  width: 70px;
9
- margin-left: 20px;
10
14
  margin-top: 20px;
11
- }
15
+ margin-left: 20px;
16
+ }
12
17
 
13
- .dark .arrow {
14
- color: #ffffff;
15
- margin-left: 20px;
16
- margin-top: 3px;
17
- }
18
+ .topbar .arrow:hover {
19
+ color: #555555;
20
+ cursor: pointer;
21
+ }
18
22
 
19
- .dark .page_bg {
23
+ .dark .topbar .arrow:hover {
24
+ color: #c0c0c0;
25
+ }
26
+
27
+ .dark .topbar .arrow {
28
+ color: #ffffff;
29
+ opacity: 1;
30
+ margin-top: 20px;
31
+ }
32
+
33
+ .dark .page_bg {
20
34
  background: rgb(17, 24, 39);
21
- }
22
-
23
- .page_body {
35
+ }
36
+
37
+ .page_body {
24
38
  margin-left: 260px;
25
39
  overflow-y: scroll;
26
40
  max-width: 87%;
27
- background: #f3f3f3;
41
+ position: relative;
28
42
  transition: 0.3s ease;
29
43
  transition-delay: 0.1s;
30
- }
44
+ }
45
+ .page_bg .page_body.close {
46
+ margin-left: 60px;
47
+ z-index: 1;
48
+ position: relative;
49
+ overflow: visible;
50
+ }
31
51
 
32
- .dark .page_body {
52
+ .page_bg .page_body.close .flex-1{
53
+ z-index: 1;
54
+ position: relative;
55
+ overflow: visible;
56
+ }
57
+
58
+ .dark .page_body {
33
59
  background: rgb(17, 24, 39);
34
- }
60
+ }
61
+
62
+
63
+
@@ -6,10 +6,10 @@ html lang="en"
6
6
  = head
7
7
  body
8
8
  = turbo_frame_tag "dialog"
9
- .h-screen.flex.overflow-hidden data-controller="satis-page"
9
+ .h-screen.flex data-controller="satis-page"
10
10
  / TOPBAR
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
11
+ .page_bg
12
+ .topbar
13
13
  .arrow
14
14
  .fa-solid.fa-bars
15
15
  / NAVBAR
@@ -17,15 +17,16 @@ html lang="en"
17
17
  = navbar
18
18
 
19
19
  / SIDEBAR
20
- .flex.flex-row
21
- == sidebar
20
+ == sidebar
21
+
22
22
  / BODY
23
23
  .page_body
24
- main.flex-1.relative.overflow-y-auto.focus:outline-none
24
+ main.flex-1.relative.overflow-y-auto.overflow-x-auto.focus:outline-none
25
25
  .mt-4
26
26
  .max-w.mx-auto.px-4.sm:px-4.md:px-4
27
27
  = body
28
28
 
29
+
29
30
  / Minimize Sidebar
30
31
  javascript:
31
32
  document.addEventListener("DOMContentLoaded", () => {
@@ -1,55 +1,68 @@
1
1
  .sidebar {
2
- padding: 10;
2
+ padding: 10px;
3
3
  height: 100%;
4
4
  width: 260px;
5
- box-shadow: 1cm;
5
+ z-index: 1000;
6
+ position: absolute;
6
7
  background: #ffffff;
7
- overflow-y: scroll;
8
- -ms-overflow-style: none;
8
+ overflow: visible;
9
9
  scrollbar-width: none;
10
+ overflow-y: scroll;
10
11
  transition: 0.3s ease;
11
12
  transition-delay: 0.1s;
12
- @apply fixed top-0 left-0;
13
13
  }
14
14
 
15
- .sidebar.close {
16
- position: fixed;
15
+ .h-screen.flex .page_bg .sidebar.close{
16
+ z-index: 1000;
17
+ position: absolute;
18
+ overflow: visible;
19
+ }
20
+
21
+ .h-screen.flex .page_bg .sidebar.close .sts-sidebar-menu-item{
22
+ z-index: 1001;
23
+ position: relative;
24
+ overflow: visible;
25
+ }
26
+
27
+
28
+ .page_bg .sidebar.close {
29
+ position: absolute;
30
+ overflow: visible;
17
31
  top: 0;
18
32
  left: 0;
19
33
  height: 100%;
20
- width: 50px;
34
+ width: 60px;
35
+ z-index: 1000;
21
36
  overflow-y: scroll;
22
- -ms-overflow-style: none;
23
37
  scrollbar-width: none;
24
38
  transition: 0.3s ease;
25
39
  transition-delay: 0.1s;
26
40
  }
27
41
 
28
- .sidebar::-webkit-scrollbar {
42
+ .sidebar::-webkit-scrollbar {
29
43
  display: none;
30
44
  }
31
45
 
32
- .sidebar.close .sts-sidebar-menu-item__link {
33
- text-indent:-9999px;
34
- }
35
46
 
36
- .topbar {
47
+ .page_bg .topbar {
48
+ flex-shrink: 0;
49
+ display: flex;
50
+ height: 4rem;
37
51
  max-width: 87%;
38
- margin-left: 258px;
39
- background: #fcf9f9;
52
+ margin-left: 260px;
40
53
  transition: 0.3s ease;
41
54
  transition-delay: 0.1s;
55
+ background: white;
56
+ z-index: 2;
42
57
  }
43
58
 
44
- .topbar.close {
59
+ .page_bg .topbar.close {
45
60
  max-width: 97%;
46
- margin-left: 50px;
61
+ margin-left: 60px;
47
62
  transition: 0.3s ease;
48
63
  transition-delay: 0.1s;
49
64
  }
50
65
 
51
-
52
-
53
66
  .page_body.close {
54
67
  margin-left: 50px;
55
68
  max-width: 97%;
@@ -57,8 +70,9 @@
57
70
  transition-delay: 0.1s;
58
71
  }
59
72
 
73
+
60
74
  .account-icon {
61
- opacity: 25%;
75
+ opacity: 0.25;
62
76
  border-radius: 25px;
63
77
  padding: 20px;
64
78
  }
@@ -67,31 +81,22 @@
67
81
  opacity: 0;
68
82
  }
69
83
 
70
- .sidebar .icon-link {
71
- font-size: 30px;
72
- color: #fff;
73
- }
74
84
 
75
- .dark .sidebar .sts-sidebar-menu-item__link.active {
76
- color: #FFFFFF;
85
+ .sidebar.close .boxture-logo {
86
+ opacity: 0;
77
87
  }
78
88
 
79
- .sidebar .sts-sidebar-menu-item__link.active {
80
- color: #2c2c2c;
89
+ .sidebar.close .sts-sidebar-menu-item{
90
+ margin-left: 2px;
81
91
  }
82
92
 
83
- .sidebar .sts-sidebar-menu-item__link {
84
- color: #8c8c8c;
85
- }
86
93
 
87
- .dark .sidebar .sts-sidebar-menu-item__link{
88
- color: #acacac;
89
- }
94
+
90
95
 
91
96
  .sidebar .boxture-logo {
92
97
  height: 52px;
93
98
  width: 52px;
94
- opacity: 50%;
99
+ opacity: 0.5;
95
100
  object-fit: cover;
96
101
  border-radius: 16px;
97
102
  font-size: 30px;
@@ -100,23 +105,21 @@
100
105
  mix-blend-mode: multiply;
101
106
  }
102
107
 
108
+ .dark .sidebar .boxture-logo {
109
+ mix-blend-mode: normal;
110
+ }
111
+
103
112
  .sidebar.close .profile-logo {
104
113
  display: none;
105
114
  }
106
115
 
107
-
108
-
109
116
  .sidebar .logo_name {
110
117
  font-size: 10px;
111
- opacity: 50%;
118
+ opacity: 0.5;
112
119
  text-align: center;
113
120
  display: block;
114
121
  }
115
122
 
116
- .sidebar.close .logo_name {
117
- display: none;
118
- }
119
-
120
123
  .dark .sidebar {
121
124
  background: #222836;
122
125
  transition: 0.3s ease;
@@ -129,4 +132,4 @@
129
132
 
130
133
  .dark .topbar {
131
134
  background: #222836;
132
- }
135
+ }
@@ -1,4 +1,3 @@
1
- .hidden:md
2
1
  .sidebar
3
2
  = header
4
3
  .icon-link
@@ -1,6 +1,5 @@
1
1
  .sts-sidebar-menu-item {
2
2
  @apply pt-1;
3
-
4
3
  & a.focus {
5
4
  background: rgba(1, 1, 1, 0.1);
6
5
 
@@ -13,11 +12,12 @@
13
12
  @apply rotate-90;
14
13
  }
15
14
 
15
+
16
16
  &__link {
17
- @apply text-gray-600 dark:text-gray-300 hover:bg-gray-50 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
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 group-hover:text-gray-500;
20
+ @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-100 group-hover:text-gray-500;
21
21
  }
22
22
  &__no-icon {
23
23
  @apply mr-3 flex-shrink-0 h-6;
@@ -29,3 +29,37 @@
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;
30
30
  }
31
31
  }
32
+
33
+
34
+ .page_bg .sidebar.close .sts-sidebar-menu-item__menu-icon {
35
+ display: none;
36
+ }
37
+
38
+ .page_bg .sidebar.close .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"] {
39
+ display: none;
40
+ visibility: hidden;
41
+ opacity: 0;
42
+ transition: visibility 0s linear 1s, opacity 1s linear; /* Ensures it stays visible for 1 second after mouse leaves */
43
+ }
44
+
45
+ .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] {
46
+ @apply rounded-md bg-white dark:bg-gray-900;
47
+ display: block;
48
+ visibility: visible;
49
+ opacity: 1;
50
+ position: absolute;
51
+ margin-left: 35px;
52
+ overflow-y: scroll;
53
+ margin-top: -60px;
54
+ padding-right: 10px;
55
+ padding-top: 10px;
56
+ padding-bottom: 10px;
57
+ z-index: 1000;
58
+ overflow: visible;
59
+ box-shadow: -0.5px 0px 3px 0.3px #aaaaaa;
60
+ transition: visibility 0s linear 0s, opacity 0.5s linear;
61
+ }
62
+
63
+ .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"]::-webkit-scrollbar {
64
+ display: none;
65
+ }
data/lib/satis/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Satis
2
- VERSION = "2.1.24"
2
+ VERSION = "2.1.26"
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.24
4
+ version: 2.1.26
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-06-28 00:00:00.000000000 Z
11
+ date: 2024-07-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: browser