micro-sidebar 1.1.0__tar.gz → 1.2.1__tar.gz

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: micro_sidebar
-Version: 1.1.0
+Version: 1.2.1
 Summary: A Reusable RTL Django Sidebar App
 Home-page: https://github.com/debeski/micro-sidebar
 Author: DeBeski
@@ -112,3 +112,5 @@ While it may theoretically work in LTR environments if standard Bootstrap files
 | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
 | **v1.0.2** | Improved documentation clarity and added usage instructions. |
 | **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
+| **v1.2.0** | **New Theme Implementation:** Redesigned UI with rounded pill-shaped items, tactile micro-animations, and a refined color palette. Improved responsiveness with dynamic top-offset calculations and inline FOUC fixes for small screens. Fixed tooltip stickiness bug. |
+| **v1.2.1** | **Positioning Fix:** Added `align-self: flex-start` to resolve 60px vertical offset in flex containers. Removed legacy `sidebar-top-offset` CSS variable and JS calculations. Added `box-shadow: none` and `outline: none` to accordion buttons to remove focus ring. Fixed page flickering on wider screens by constraining sidebar height with `calc(100vh - header-height)`. |

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/README.md

@@ -85,4 +85,6 @@ While it may theoretically work in LTR environments if standard Bootstrap files
 | **v1.0.0** | Initial Release. |
 | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
 | **v1.0.2** | Improved documentation clarity and added usage instructions. |
-| **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
+| **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
+| **v1.2.0** | **New Theme Implementation:** Redesigned UI with rounded pill-shaped items, tactile micro-animations, and a refined color palette. Improved responsiveness with dynamic top-offset calculations and inline FOUC fixes for small screens. Fixed tooltip stickiness bug. |
+| **v1.2.1** | **Positioning Fix:** Added `align-self: flex-start` to resolve 60px vertical offset in flex containers. Removed legacy `sidebar-top-offset` CSS variable and JS calculations. Added `box-shadow: none` and `outline: none` to accordion buttons to remove focus ring. Fixed page flickering on wider screens by constraining sidebar height with `calc(100vh - header-height)`. |

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/micro_sidebar.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: micro-sidebar
-Version: 1.1.0
+Version: 1.2.1
 Summary: A Reusable RTL Django Sidebar App
 Home-page: https://github.com/debeski/micro-sidebar
 Author: DeBeski
@@ -112,3 +112,5 @@ While it may theoretically work in LTR environments if standard Bootstrap files
 | **v1.0.1** | Fixed titlebar positioning bug causing overlap/gaps. |
 | **v1.0.2** | Improved documentation clarity and added usage instructions. |
 | **v1.1.0** | Renamed `content.html` to `main.html` for clarity. Refactored to use `{% block items %}` for easier extension. |
+| **v1.2.0** | **New Theme Implementation:** Redesigned UI with rounded pill-shaped items, tactile micro-animations, and a refined color palette. Improved responsiveness with dynamic top-offset calculations and inline FOUC fixes for small screens. Fixed tooltip stickiness bug. |
+| **v1.2.1** | **Positioning Fix:** Added `align-self: flex-start` to resolve 60px vertical offset in flex containers. Removed legacy `sidebar-top-offset` CSS variable and JS calculations. Added `box-shadow: none` and `outline: none` to accordion buttons to remove focus ring. Fixed page flickering on wider screens by constraining sidebar height with `calc(100vh - header-height)`. |

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "micro_sidebar"
-version = "1.1.0"
+version = "1.2.1"
 description = "A Reusable RTL Django Sidebar App"
 readme = "README.md"
 requires-python = ">=3.9"

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="micro_sidebar",
-    version="1.1.0",
+    version="1.2.1",
     author="DeBeski",
     author_email="debeski1@gmail.com",
     description="A Reusable RTL Django Sidebar App",

micro_sidebar-1.2.1/sidebar/static/sidebar/sidebar.css

@@ -0,0 +1,206 @@
+.sidebar {
+    z-index: 900;
+    transition: width 0.2s ease-in-out;
+    background: linear-gradient(180deg, #ffffff 10%, #f1f7fd 100%);
+    position: sticky;
+    top: var(--header-height, 60px);
+    align-self: flex-start; /* Force to top of flex container */
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: calc(100vh - var(--header-height, 60px));
+    border-left: 1px solid #f1f3f5;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.1) transparent;
+    
+    /* Variables for stable positioning */
+    --sidebar-item-px: 12.5px;
+    --sidebar-icon-width: 40px;
+}
+
+.sidebar::-webkit-scrollbar {
+    width: 6px;
+}
+.sidebar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.sidebar::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.2);
+    border-radius: 20px;
+}
+
+.sidebar.collapsed {
+    width: 65px !important;
+}
+
+/* Stable layout for icons - NO OVERRIDES for padding/gap here! */
+.sidebar.collapsed .list-group-item span,
+.sidebar.collapsed .accordion-button span {
+    opacity: 0;
+    visibility: hidden;
+    width: 0;
+    display: inline-block; /* Keep it in flow but hidden */
+}
+
+.sidebar .list-group-item span,
+.sidebar .accordion-button span {
+    transition: opacity 0.2s ease, visibility 0.2s;
+    white-space: nowrap;
+}
+
+.sidebar.collapsed .accordion-button::after {
+    display: none !important;
+}
+
+.sidebar-ghost {
+    display: none;
+    width: 52px;
+    flex-shrink: 0;
+}
+
+@media (max-width: 1100px) {
+    .sidebar-ghost {
+        display: block;
+    }
+
+    .sidebar {
+        position: fixed;
+        top: var(--header-height, 60px);
+        right: 0;
+        width: 250px;
+        transition: width 0.15s ease-in-out;
+        height: calc(100vh - var(--header-height, 60px));
+        z-index: 1000;
+        --sidebar-item-px: 6px;
+    }
+    
+    .sidebar.collapsed {
+        width: 52px !important;
+        right: 0; 
+        position: fixed; 
+    }
+}
+/* Sidebar Styling Redesign */
+.sidebar .list-group-item {
+    border: 1px solid transparent !important; /* Reserve space to prevent jumps */
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    color: #5a6474; /* Softer text color */
+    margin: 4px 0;
+    border-radius: 12px !important; /* Rounded pill shape */
+    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 12px var(--sidebar-item-px);
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.sidebar .list-group-item:hover {
+    background-color: transparent !important;
+    color: var(--primal) !important;
+    transform: translateX(-4px); /* Tactile slide for RTL */
+}
+
+.sidebar .list-group-item.active {
+    border: 1px solid transparent !important; /* Keep the 1px reserve */
+    background-color: rgba(35, 99, 195, 0.05) !important; /* Lighter soft blue */
+    color: var(--primal) !important;
+    font-weight: 700 !important;
+    box-shadow: 0 4px 12px rgba(35, 99, 195, 0.08) !important;
+}
+
+.sidebar .list-group-item i,
+.sidebar .accordion-button i {
+    width: var(--sidebar-icon-width);
+    display: flex;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 1.25rem;
+    transition: transform 0.2s ease, color 0.2s;
+    color: #8c98a4; /* Muted icon color by default */
+}
+
+.sidebar .list-group-item:hover i,
+.sidebar .list-group-item.active i,
+.sidebar .accordion-button:hover i, 
+.sidebar .accordion-button:not(.collapsed) i {
+    transform: scale(1.1);
+    color: var(--primal); /* Active/Hover icon color */
+}
+
+.sidebar .accordion-button {
+    font-size: 0.95rem !important;
+    font-weight: 600 !important;
+    color: #5a6474;
+    background-color: transparent !important;
+    border: 1px solid transparent !important; /* Reserve space here too */
+    border-radius: 12px !important;
+    margin: 4px 0;
+    padding: 12px var(--sidebar-item-px);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+.sidebar .accordion-button:focus {
+    box-shadow: none !important;
+    outline: none !important;
+}
+
+.sidebar .accordion-button:not(.collapsed) {
+    background-color: rgba(35, 99, 195, 0.04) !important; /* Very subtle open state */
+    color: var(--primal) !important;
+    font-weight: 700 !important;
+}
+
+.sidebar .accordion-button:hover {
+    color: var(--primal) !important;
+    background-color: transparent !important;
+    transform: translateX(-4px);
+}
+
+.sidebar .accordion-item {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.sidebar .accordion-body {
+    background-color: transparent !important;
+    border: none !important;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+
+.sidebar-toggle {
+    background-color: transparent;
+    color: #2c3e50;
+    border: none;
+    transition: background-color 0.3s, transform 0.1s;
+    min-width: 5vh;
+    min-height: 5vh;
+    font-size: 1.5rem;
+}
+
+.sidebar-toggle:hover {
+    background-color: #f8f9fa;
+    color: #0d6efd;
+}
+
+.sidebar-toggle:active {
+    transform: scale(0.95);
+}
+
+.tooltip-custom .tooltip-inner {
+    font-size: 1.2rem;
+    background-color: var(--title);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 5px;
+}

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/sidebar/static/sidebar/sidebar.js

@@ -21,24 +21,11 @@ document.addEventListener("DOMContentLoaded", function () {
     // Function to handle sidebar collapsing based on window size
     function adjustSidebarForWindowSize() {
         const screenWidth = window.innerWidth;
-        const titlebar = document.querySelector('.titlebar');
-        const titlebarHeight = titlebar ? titlebar.offsetHeight : 0;
 
         if (screenWidth < 1100) {
             // Always collapse sidebar on small screens
             sidebar.classList.add("collapsed");
             initializeTooltips();
-
-            // Dynamic positioning to anchor to titlebar
-            // Dynamic positioning to anchor to titlebar
-            if (titlebarHeight > 0) {
-                 sidebar.style.top = titlebarHeight + 'px';
-                 sidebar.style.height = (window.innerHeight - titlebarHeight) + 'px';
-            } else {
-                 // Failsafe: Stick to top if no titlebar
-                 sidebar.style.top = '0px';
-                 sidebar.style.height = '100vh';
-            }
         } else {
             // Reset styles for large screens to let CSS take over (sticky)
             sidebar.style.top = '';
@@ -99,6 +86,20 @@ document.addEventListener("DOMContentLoaded", function () {
             setTimeout(triggerAutoscale, 250);
         });
     }
+
+    // Proactively hide tooltips when any sidebar click occurs
+    // This fixes the "sticking to top of screen" glitch during transitions
+    sidebar.addEventListener("click", function (event) {
+        // Find all tooltips in the sidebar and dispose them immediately
+        // This ensures they are completely removed from the DOM before any transition
+        const sidebarItems = sidebar.querySelectorAll(".list-group-item, .accordion-button");
+        sidebarItems.forEach(item => {
+            if (item._tooltip) {
+                item._tooltip.dispose();
+                delete item._tooltip;
+            }
+        });
+    });
 });
 
 // Close sidebar when clicking outside (only for small screens)
@@ -138,7 +139,8 @@ function initializeTooltips() {
         item._tooltip = new bootstrap.Tooltip(item, {
             title: item.querySelector("span").textContent,
             placement: "right",
-            customClass: "tooltip-custom"
+            customClass: "tooltip-custom",
+            trigger: 'hover' // Explicitly disable click/focus triggers
         });
     });
 }

{micro_sidebar-1.1.0 → micro_sidebar-1.2.1}/sidebar/templates/sidebar/main.html

@@ -9,6 +9,19 @@
      id="sidebar" 
      data-toggle-url="{% url 'toggle_sidebar' %}"
      data-session-collapsed="{{ request.session.sidebarCollapsed|yesno:'true,false' }}">
+    <script>
+        // Immediate FOUC fix for small screens
+        (function() {
+            var screenWidth = window.innerWidth;
+            var sidebar = document.currentScript.parentElement;
+            if (screenWidth < 1100) {
+                sidebar.classList.add('collapsed');
+                // Temporarily disable transition to avoid "sliding shut" flicker on load
+                sidebar.style.transition = 'none';
+                setTimeout(function() { sidebar.style.transition = ''; }, 100);
+            }
+        })();
+    </script>
     <div class="list-group flex-shrink-0">
         {% block items %}
         

micro_sidebar-1.1.0/sidebar/static/sidebar/sidebar.css

@@ -1,93 +0,0 @@
-
-.sidebar {
-    z-index: 900;
-    transition: width 0.15s ease-in-out;
-    background-color: white;
-    position: -webkit-sticky; /* For Safari */
-    position: sticky;
-    top: 0; /* Sticks the sidebar at the top of the parent container */
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: calc(100vh - 45px); /* Fallback/Base height for sticky behavior */
-    /* Custom Scrollbar for Webkit */
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0,0,0,0.2) transparent;
-}
-
-.sidebar::-webkit-scrollbar {
-    width: 6px;
-}
-.sidebar::-webkit-scrollbar-track {
-    background: transparent;
-}
-.sidebar::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,0.2);
-    border-radius: 20px;
-}
-
-.sidebar.collapsed {
-    width: 52px !important;
-}
-.sidebar.collapsed .list-group-item span {
-    display: none !important;
-}
-.sidebar.collapsed .accordion-button span {
-    display: none !important;
-}
-.sidebar.collapsed .accordion-button::after {
-    background-image: none;
-}
-
-
-.sidebar-ghost {
-    display: none;
-    width: 52px;
-    flex-shrink: 0;
-}
-
-@media (max-width: 1100px) {
-    .sidebar-ghost {
-        display: block;
-    }
-
-    .sidebar {
-        position: fixed;
-        top: 45px; /* Fallback, JS calculates exact height */
-        right: 0;
-        width: 250px;
-        transition: width 0.15s ease-in-out;
-        height: calc(100vh - 45px); /* Fallback */
-        z-index: 1000;
-    }
-    
-    .sidebar.collapsed {
-        width: 52px !important;
-        right: 0; 
-        position: fixed; 
-    }
-}
-.sidebar .list-group-item {
-    border: none !important;
-    font-size: 18px !important;
-    font-weight: 600 !important;
-    height: 60px !important;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 12px;
-    align-items: center;
-}
-
-.sidebar .accordion-button {
-    font-size: 18px !important;
-    font-weight: 600 !important;
-    border: none !important;
-    height: 60px !important;
-    white-space: nowrap;
-    overflow: hidden;
-    padding: 12px;
-    align-items: center;
-}
-
-.sidebar .accordion-button:not(.collapsed) {
-    background-color: var(--body) !important;
-}