satis 2.1.24 → 2.1.26

Sign up to get free protection for your applications and to get access to all the features.
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