satis 2.1.17 → 2.1.18

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38a8a727484917e2fca379c9414a04c438b8946561976de364b87a8894789954
-  data.tar.gz: 1712c400b552134b9846e3e5fe52fd4254fb0e1dbbf0bd45b5a6511d910dbd6c
+  metadata.gz: 613f26a7bf0330e8720ad7b3fcf1a2cd89140f64ba2dbc36e489e7519bc79f63
+  data.tar.gz: ad451e1bc4d50a4917606f06aa9013552ddc0b9d41b12a55651bdfd4ddb21d16
 SHA512:
-  metadata.gz: 7ac08a0d6f0323d19a089e6f6a7f119f27e23748e7a33e609cdcd55d76fc22b73e0be3e8a216000d03f9f0186f77fbc4a9f2eb021b93388fc563d311772077f1
-  data.tar.gz: 5da554227b1c71487ae8bab3e8918693f51c879487ee928a9d933f6c1cb03d1ddc60acff59ec68671ab8759be52a44331dc60d8f1f5373f196a8626fa37a1f8f
+  metadata.gz: f414ed1d5eb94293ba5a7531863f16359f30f8274f8c3fadfd076d78d3ed0f55471fc29b3ffb9813c690082f10a0e872ba1d7ff4f089a9ec38f635397de2233c
+  data.tar.gz: 6f750a7bcd9cc8419caf5c039c804bd577fdc187a273d383f7b75fd14ca0fd705353ad47fdc762803842413f2eefeb742dd8bd7ab62c5641ac93f4d25a96f94b

data/app/assets/stylesheets/satis/application.css

@@ -10,10 +10,13 @@
 @import '../../../components/satis/input_array/component.css';
 @import '../../../components/satis/map/component.css';
 @import '../../../components/satis/menu/component.css';
+@import '../../../components/satis/page/component.css';
+@import '../../../components/satis/sidebar/component.css';
 @import '../../../components/satis/sidebar_menu/component.css';
 @import '../../../components/satis/sidebar_menu_item/component.css';
 @import '../../../components/satis/tabs/component.css';
 
+
 @import 'components/diffy.css';
 @import 'components/form.css';
 @import "components/trix.css";
@@ -38,6 +41,7 @@ a[class=""] {
     .mac-only {
         display: inline-block;
     }
+
     .pc-only {
         display: none;
     }
@@ -47,6 +51,7 @@ a[class=""] {
     .pc-only {
         display: inline-block;
     }
+
     .mac-only {
         display: none;
     }
@@ -54,7 +59,7 @@ a[class=""] {
 
 /* For the draggable controller */
 .draggable:hover {
-   cursor: pointer;
+    cursor: pointer;
 }
 
 
@@ -62,7 +67,8 @@ a[class=""] {
     ul {
         list-style: square !important;
     }
+
     ol {
         list-style: decimal !important;
     }
-}
+}

data/app/components/satis/page/component.css

@@ -0,0 +1,34 @@
+.page_bg {
+    background: #f3f3f3;
+}
+
+.arrow {
+    opacity: 50%;
+    display: block;
+    width: 70px;
+    margin-left: 20px;
+    margin-top: 20px;
+}
+
+.dark .arrow {
+  color: #ffffff;
+  margin-left: 20px;
+  margin-top: 3px;
+}
+
+.dark .page_bg {
+    background: rgb(17, 24, 39);
+}
+
+.page_body {
+    margin-left: 260px;
+    overflow-y: scroll;
+    max-width: 87%;
+    background: #f3f3f3;
+    transition: 0.3s ease;
+    transition-delay: 0.1s;
+}
+
+.dark .page_body {
+    background: rgb(17, 24, 39);
+}

data/app/components/satis/page/component.html.slim

@@ -1,63 +1,55 @@
 doctype html
 html lang="en"
+  meta name="viewport" content="width=device-width, initial-scale=1.0"
+
   head
     = head
   body
     = turbo_frame_tag "dialog"
-    .h-screen.flex.overflow-hidden.bg-gray-100.dark:bg-gray-600 data-controller="satis-page"
-      / Off-canvas menu for mobile, show/hide based on off-canvas menu state.
-      .fixed.inset-0.flex.z-40.md:hidden.hidden aria-modal="true" role="dialog" data-satis-page-target="dialog"
-
-        .fixed.inset-0.bg-gray-600.bg-opacity-75.hidden aria-hidden="true" data-satis-page-target="overlay"
-
-        .relative.flex-1.flex.flex-col.max-w-xs.w-full.pt-5.pb-4.bg-white.transform.hidden data-satis-page-target="offCanvasMenu"
-
-          .absolute.top-0.right-0.-mr-12.pt-2.hidden data-satis-page-target="closeButton"
-            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"
-              span.sr-only Close sidebar
-              i.fal.fa-2x.fa-xmark.text-white aria-hidden="true"
-          = sidebar_mobile
-
-        .flex-shrink-0.w-14 aria-hidden="true"
-          / Dummy element to force sidebar to shrink to fit close icon
-
-      - unless Satis.config.full_width_topbar
-        / SIDEBAR - for desktop
-        .hidden.md:flex.md:flex-shrink-0
-          .flex.flex-col.w-64
-            /! Sidebar component, swap this element with another sidebar if you like
-
-            .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
-              = sidebar
-
+    .h-screen.flex.overflow-hidden data-controller="satis-page"
       / TOPBAR
-      .flex.flex-col.w-0.flex-1.overflow-hidden
-        .relative.z-10.flex-shrink-0.flex.h-16.bg-white.shadow.dark:bg-gray-900.dark:bg-opacity-75.dark:py-4.bg-opacity-75
-          button.px-4.border-r.border-gray-200.text-gray-500.focus:outline-none.focus:ring-2.focus:ring-inset.focus:ring-primary-500.md:hidden data-action="satis-page#open"
-            span.sr-only Open sidebar
-            i.fal.fa-2x.fa-bars
-
+      .flex.flex-col.w-0.flex-1.overflow-hidden.page_bg
+        .relative.z-10.flex-shrink-0.flex.topbar.h-16.bg-white.shadow.dark:py-4
+          .arrow
+            .fa-solid.fa-bars
+          / NAVBAR
           .flex-1.px-4.flex.justify-between
             = navbar
 
-        - if Satis.config.full_width_topbar
-          .flex.flex-row
-
-            / SIDEBAR - for desktop
-            .hidden.md:flex.md:flex-shrink-0
-              .flex.flex-col.w-64
-                /! Sidebar component, swap this element with another sidebar if you like
-
-                .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
-                  = sidebar
-
-            main.flex-1.relative.overflow-y-auto.focus:outline-none.dark:bg-gray-900
-              .mt-4
-                .max-w.mx-auto.px-4.sm:px-4.md:px-4
-                  = body
-        - else
-          main.flex-1.relative.overflow-y-auto.focus:outline-none.dark:bg-gray-900
+        / SIDEBAR
+        .flex.flex-row
+          == sidebar
+        / BODY
+        .page_body
+          main.flex-1.relative.overflow-y-auto.focus:outline-none
             .mt-4
               .max-w.mx-auto.px-4.sm:px-4.md:px-4
                 = body
 
+/ Minimize Sidebar
+javascript:
+  document.addEventListener("DOMContentLoaded", () => {
+    let sidebar_collapse = document.querySelector(".sidebar");
+    let topbar = document.querySelector(".topbar");
+    let page_body = document.querySelector(".page_body");
+    let sidebarBtn = document.querySelector(".arrow");
+
+    // Check stored state and apply it
+    const isClosed = sessionStorage.getItem('sidebarClosed') === 'true';
+    if (isClosed) {
+      sidebar_collapse.classList.add("close");
+      topbar.classList.add("close");
+      page_body.classList.add("close");
+    }
+
+    sidebarBtn.addEventListener("click", () => {
+      sidebar_collapse.classList.toggle("close");
+      topbar.classList.toggle("close");
+      page_body.classList.toggle("close");
+
+      // Save the current state to sessionStorage
+      const currentState = sidebar_collapse.classList.contains("close");
+      sessionStorage.setItem('sidebarClosed', currentState);
+    });
+  });
+

data/app/components/satis/sidebar/component.css

@@ -0,0 +1,132 @@
+.sidebar {
+  padding: 10;
+  height: 100%;
+  width: 260px;
+  box-shadow: 1cm;
+  background: #ffffff;
+  overflow-y: scroll;
+  -ms-overflow-style: none; 
+  scrollbar-width: none;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+  @apply fixed top-0 left-0;
+}
+
+.sidebar.close {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 50px;
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+}
+
+.sidebar::-webkit-scrollbar { 
+  display: none;
+}
+
+.sidebar.close .sts-sidebar-menu-item__link {
+  text-indent:-9999px;
+}
+
+.topbar {
+  max-width: 87%;
+  margin-left: 258px;
+  background: #fcf9f9;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+}
+
+.topbar.close {
+  max-width: 97%;
+  margin-left: 50px;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+}
+
+
+
+.page_body.close {
+  margin-left: 50px;
+  max-width: 97%;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+}
+
+.account-icon {
+  opacity: 25%;
+  border-radius: 25px;
+  padding: 20px;
+}
+
+.sidebar.close .account-icon {
+  opacity: 0;
+}
+
+.sidebar .icon-link {
+  font-size: 30px;
+  color: #fff;
+}
+
+.dark .sidebar .sts-sidebar-menu-item__link.active {
+  color: #FFFFFF;
+}
+
+.sidebar .sts-sidebar-menu-item__link.active {
+  color: #2c2c2c;
+}
+
+.sidebar .sts-sidebar-menu-item__link {
+  color: #8c8c8c;
+}
+
+.dark .sidebar .sts-sidebar-menu-item__link{
+  color: #acacac;
+}
+
+.sidebar .boxture-logo {
+  height: 52px;
+  width: 52px;
+  opacity: 50%;
+  object-fit: cover;
+  border-radius: 16px;
+  font-size: 30px;
+  color: #fff;
+  margin-top: 80px;
+  mix-blend-mode: multiply;
+}
+
+.sidebar.close .profile-logo {
+  display: none;
+}
+
+
+
+.sidebar .logo_name {
+  font-size: 10px;
+  opacity: 50%;
+  text-align: center;
+  display: block;
+}
+
+.sidebar.close .logo_name {
+  display: none;
+}
+
+.dark .sidebar {
+  background: #222836;
+  transition: 0.3s ease;
+  transition-delay: 0.1s;
+}
+
+.dark .sidebar .logo_name {
+  color: #edecec;
+}
+
+.dark .topbar {
+  background: #222836;
+}

data/app/components/satis/sidebar/component.html.slim

@@ -0,0 +1,15 @@
+.hidden:md
+.sidebar
+  = header
+  .icon-link
+    - @menu.items.each do |item|
+      = render Satis::SidebarMenuItem::Component.new(item: item, menu_options: menu_options)
+  = footer
+
+
+
+  
+
+
+
+

data/app/components/satis/sidebar/component.rb

@@ -0,0 +1,17 @@
+# app/components/satis/sidebar/component.rb
+module Satis
+  module Sidebar
+    class Component < Satis::ApplicationComponent
+      attr_reader :menu, :menu_options
+
+      renders_one :header
+      renders_one :footer
+      renders_many :items
+
+      def initialize(menu)
+        super
+        @menu = menu
+      end
+    end
+  end
+end

data/app/components/satis/sidebar_menu/component.html.slim

@@ -1,2 +1 @@
-nav.sidebar.flex-1.px-2.space-y-1 aria-label="Sidebar"
-  = render(Satis::SidebarMenuItem::Component.with_collection(@menu.items, menu_options: menu_options))
+= render(Satis::SidebarMenuItem::Component.with_collection(@menu.items, menu_options: menu_options))

data/app/components/satis/sidebar_menu_item/component.css

@@ -1,13 +1,13 @@
 .sts-sidebar-menu-item {
-  @apply pt-1;
-
-  & a.focus {
-    background: rgba(1, 1, 1, 0.1);
-
-    .dark & {
-      background: rgba(255, 255, 255, 0.3);
+    @apply pt-1;
+  
+    & a.focus {
+      background: rgba(1, 1, 1, 0.1);
+  
+      .dark & {
+        background: rgba(255, 255, 255, 0.3);
+      }
     }
-  }
 
   &.active > [data-satis-sidebar-menu-item-target="link"] [data-satis-sidebar-menu-item-target="indicator"] {
     @apply rotate-90;

data/app/components/satis/sidebar_menu_item/component_controller.js

@@ -29,7 +29,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
 
   open(event) {
     if (this.hasSubmenuTarget) {
-      const sidebar = this.element.closest('nav.sidebar')
+      const sidebar = this.element.closest('.sidebar')
       sidebar.dispatchEvent(new CustomEvent('sts-sidebar-menu-item:open', { detail: { element: this.element } }))
 
       if (!this.isSubmenuVisible) {
@@ -43,6 +43,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
         event.preventDefault()
       }
     }
+    event.stopPropagation();
   }
 
   openListener(event) {
@@ -74,7 +75,7 @@ export default class SidebarMenuItemComponentController extends ApplicationContr
 
   updateFocus(scroll = false) {
     if (!this.hasLink) return
-    const focusedItem =  this.element.closest('nav.sidebar').querySelector('a.focus')
+    const focusedItem =  this.element.closest('.sidebar').querySelector('a.focus')
     const linkInUrl = this.linkInUrl()
     if (linkInUrl && (!focusedItem || linkInUrl > this.linkInUrl(focusedItem))) {
       focusedItem?.classList.toggle("focus", false)

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.17"
+  VERSION = "2.1.18"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.17
+  version: 2.1.18
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-24 00:00:00.000000000 Z
+date: 2024-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -808,11 +808,15 @@ files:
 - app/components/satis/menu/component_controller.js
 - app/components/satis/menu_item/component.html.slim
 - app/components/satis/menu_item/component.rb
+- app/components/satis/page/component.css
 - app/components/satis/page/component.html.slim
 - app/components/satis/page/component.rb
 - app/components/satis/page/component_controller.js
 - app/components/satis/progress_bar/component.html.slim
 - app/components/satis/progress_bar/component.rb
+- app/components/satis/sidebar/component.css
+- app/components/satis/sidebar/component.html.slim
+- app/components/satis/sidebar/component.rb
 - app/components/satis/sidebar_menu/component.css
 - app/components/satis/sidebar_menu/component.html.slim
 - app/components/satis/sidebar_menu/component.rb