tramway 2.2.1.2 → 2.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5670858da2e5f32d172839aa1eba099ffbe6ee7f1e6328617505a6197e392be0
-  data.tar.gz: e1d7a062034a04a5e5a75872face08f9ad81699a4ee7f1b083175b6b0a304d90
+  metadata.gz: 897fd2c8d74063ed2391181aeafcdb3f29d18e481ea46b1b84257e3f2c33ae0f
+  data.tar.gz: 79215f222735fb92152edcf3cad1c2c1bc8c054e06b01946fec0ced0db37a125
 SHA512:
-  metadata.gz: 47301ea8acad479649b1a90c87f765561e52636f26b09c4345d140c41f11959253e7c1856726011c56cded1f817daf97952ea0c9003b54e7fb6a5873957f947c
-  data.tar.gz: 58f548a6cdc3099096102fbaaed6222cae1c128ad4ea5c646e026f281fa306b2c86f40bc3a9eb63b1c8036f86a66b29dd652e5461db1a1a9526e0f2d3faa4b10
+  metadata.gz: 88a72fde1376d90b5d68ffcd607211ce16904a6aaeb5f36bf20494a5ac7333f9680a392e3a4b55fa5c08bd26f59d6fb59c6dda781db2ddf959ae3513419399ac
+  data.tar.gz: 4ce99218a5791fc49176974f1dcc6464e752e1bfe8d69f60333926b3ed3c64736b838ea28d0e277f87bb3199753ce39e2e2c4936a054da4ba3a29fe779aa96fe

data/README.md

@@ -985,7 +985,7 @@ Tramway provides `tramway_form_for` helper that renders Tailwind-styled forms by
 
 will render [this](https://play.tailwindcss.com/xho3LfjKkK)
 
-Use `size:` to control the form sizing (`:small`, `:middle`, or `:large`). The default is `:middle`, and all fields rendered
+Use `size:` to control the form sizing (`:small`, `:medium`, or `:large`). The default is `:medium`, and all fields rendered
 within the form will use the same size value.
 
 ```erb

data/app/components/tailwinds/button_component.rb

@@ -8,7 +8,7 @@ module Tailwinds
     option :path, optional: true, default: -> { '#' }
     option :color, optional: true
     option :type, optional: true
-    option :size, default: -> { :middle }
+    option :size, default: -> { :medium }
     option :method, optional: true, default: -> { :get }
     option :link, optional: true, default: -> { false }
     option :options, optional: true, default: -> { {} }
@@ -17,7 +17,7 @@ module Tailwinds
     def size_classes
       {
         small: 'text-sm py-1 px-2 rounded',
-        middle: 'py-2 px-4 h-10',
+        medium: 'py-2 px-4 h-10',
         large: 'text-xl px-5 py-3 h-12'
       }[size]
     end

data/app/components/tailwinds/navbar_component.html.haml

@@ -1,7 +1,11 @@
 %nav{ class: navbar_classes }
-  .flex.justify-between.w-full
+  .flex.md:justify-between.w-full.items-center.relative
+    .block.sm:hidden.border.border-white.px-2.rounded
+      %button#mobile-menu-button{ class: mobile_button_classes }
+        ☰
+
     - if @title[:text].present? || @left_items.present?
-      .flex.items-center
+      .flex.items-center.absolute.transform{ class: 'left-1/2 -translate-x-1/2' }
         - if @title[:text].present?
           = link_to @title[:link] do
             .text-xl{ class: title_classes }
@@ -11,10 +15,6 @@
             - @left_items.each do |item|
               = item
 
-    .block.sm:hidden
-      %button#mobile-menu-button{ class: mobile_button_classes }
-        ☰
-
   - if @right_items.present?
     %ul.items-center.space-x-4.hidden.md:flex
       - @right_items.each do |item|
@@ -22,17 +22,56 @@
 
 #mobile-menu{ class: mobile_menu_classes }
   - if @left_items.present?
-    %ul.flex.flex-col.space-y-2
+    %ul.flex.flex-col.space-y-3.text-2xl.font-bold
       - @left_items.each do |item|
         = item
 
   - if @right_items.present?
-    %ul.flex.flex-col.space-y-2
+    %ul.flex.flex-col.space-y-3.text-2xl.font-bold
       - @right_items.each do |item|
         = item
 
+  %span.absolute.top-4.right-6.text-4xl.cursor-pointer.text-white#mobile-menu-close-button
+    ⨯
+
 :javascript
-  document.getElementById('mobile-menu-button').addEventListener('click', function() {
-    var menu = document.getElementById('mobile-menu');
-    menu.classList.toggle('hidden');
-  });
+  (() => {
+    const button = document.getElementById('mobile-menu-button');
+    const closeButton = document.getElementById('mobile-menu-close-button');
+    const menu = document.getElementById('mobile-menu');
+    const root = document.documentElement;
+
+    if (!button || !closeButton || !menu) {
+      return;
+    }
+
+    if (button.dataset.navbarBound === 'true') {
+      return;
+    }
+
+    button.dataset.navbarBound = 'true';
+
+    const toggleMenu = () => {
+      const isHiddenNow = menu.classList.contains('hidden');
+
+      if (isHiddenNow) {
+        menu.classList.remove('hidden');
+        requestAnimationFrame(() => {
+          menu.classList.remove('-translate-x-full');
+          root.classList.add('overflow-hidden');
+        });
+      } else {
+        menu.classList.add('-translate-x-full');
+        root.classList.remove('overflow-hidden');
+
+        menu.addEventListener(
+          'transitionend',
+          () => menu.classList.add('hidden'),
+          { once: true }
+        );
+      }
+    };
+
+    button.addEventListener('click', toggleMenu);
+    closeButton.addEventListener('click', toggleMenu);
+  })();

data/app/components/tailwinds/navbar_component.rb

@@ -29,7 +29,8 @@ module Tailwinds
 
     def mobile_menu_classes
       theme_classes(
-        classic: 'hidden flex-col sm:hidden bg-gray-900 shadow-inner'
+        classic: "hidden inset-0 flex-col bg-gray-900 shadow-inner h-screen fixed z-50 w-screen transition-transform \
+                  transform -translate-x-full duration-300 ease-in-out"
       )
     end
   end

data/app/components/tailwinds/title_component.rb

@@ -7,7 +7,7 @@ module Tailwinds
 
     def title_classes
       theme_classes(
-        classic: 'font-semibold text-4xl text-gray-100'
+        classic: 'font-semibold text-2xl md:text-4xl text-gray-100'
       )
     end
   end

data/config/tailwind.config.js

@@ -4,6 +4,21 @@ module.exports = {
     'ml-4',
     'text-white',
     'md:flex',
+    'transform',
+    'left-1/2',
+    '-translate-x-1/2',
+    'border-white',
+    'h-screen',
+    'w-screen',
+    'z-50',
+    'inset-0',
+    'top-4',
+    'right-6',
+    'text-4xl',
+    'transition-transform',
+    '-translate-x-full',
+    'duration-300',
+    'space-y-3',
     
     // === Custom table layout utilities ===
     'div-table',
@@ -15,10 +30,12 @@ module.exports = {
     'first:block',
     'rounded-t-xl',
 
+    // === Title Component ===
+    'md:text-4xl',
+
     // === Visibility and typography helpers ===
     'hidden',
     'text-xl',
-    'text-4xl',
     'font-bold',
 
     // === Grid templates used for configurable layouts ===

data/lib/tramway/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Tramway
-  VERSION = '2.2.1.2'
+  VERSION = '2.2.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: tramway
 version: !ruby/object:Gem::Version
-  version: 2.2.1.2
+  version: 2.2.2
 platform: ruby
 authors:
 - kalashnikovisme