micro-sidebar 1.1.0__py3-none-any.whl → 1.2.1__py3-none-any.whl

{micro_sidebar-1.1.0.dist-info → micro_sidebar-1.2.1.dist-info}/METADATA

@@ -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.2.1.dist-info/RECORD

@@ -0,0 +1,13 @@
+sidebar/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+sidebar/apps.py,sha256=4UjKXHoBGKRLxpC9AY6eaq8YZx8unirUz_8u-IrlfVQ,145
+sidebar/urls.py,sha256=UL_9e1RLNMxZXkah65m7GRU1dbViZRGeNPBIiSZpOYg,142
+sidebar/views.py,sha256=MebyJ1ZiylSOPESXFkkQ8QTg-ClrkJn-oYLN6KrcgiM,418
+sidebar/migrations/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+sidebar/static/sidebar/sidebar.css,sha256=f6xLSC3JiZFABkxWlFesuzAZZtAT3WW1nZBFMDQNS6Y,5283
+sidebar/static/sidebar/sidebar.js,sha256=xDp038tlscz5KeTjBiEQTzZ2T7a8k4NY3rC6e9NvMsM,6314
+sidebar/templates/sidebar/main.html,sha256=m2b34IO-kG7fn5d9vnx9Sjwls2l9uBn2gDL3E5_Gj70,1912
+micro_sidebar-1.2.1.dist-info/LICENSE,sha256=Fco89ULLSSxKkC2KKnx57SaT0R7WOkZfuk8IYcGiN50,1063
+micro_sidebar-1.2.1.dist-info/METADATA,sha256=msQeEumoDwSbOS8n9pqkE36b9DnaD8IOzAiyBbQOZXw,4304
+micro_sidebar-1.2.1.dist-info/WHEEL,sha256=pkctZYzUS4AYVn6dJ-7367OJZivF2e8RA9b_ZBjif18,92
+micro_sidebar-1.2.1.dist-info/top_level.txt,sha256=ih69sjMhU1wOB9HzUV90yEY98aiPuGhzPBBBE-YtJ3w,8
+micro_sidebar-1.2.1.dist-info/RECORD,,

sidebar/static/sidebar/sidebar.css

@@ -1,17 +1,20 @@
-
 .sidebar {
     z-index: 900;
-    transition: width 0.15s ease-in-out;
-    background-color: white;
-    position: -webkit-sticky; /* For Safari */
+    transition: width 0.2s ease-in-out;
+    background: linear-gradient(180deg, #ffffff 10%, #f1f7fd 100%);
     position: sticky;
-    top: 0; /* Sticks the sidebar at the top of the parent container */
+    top: var(--header-height, 60px);
+    align-self: flex-start; /* Force to top of flex container */
     overflow-y: auto;
     overflow-x: hidden;
-    height: calc(100vh - 45px); /* Fallback/Base height for sticky behavior */
-    /* Custom Scrollbar for Webkit */
+    height: calc(100vh - var(--header-height, 60px));
+    border-left: 1px solid #f1f3f5;
     scrollbar-width: thin;
-    scrollbar-color: rgba(0,0,0,0.2) transparent;
+    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 {
@@ -26,18 +29,27 @@
 }
 
 .sidebar.collapsed {
-    width: 52px !important;
-}
-.sidebar.collapsed .list-group-item span {
-    display: none !important;
+    width: 65px !important;
 }
+
+/* Stable layout for icons - NO OVERRIDES for padding/gap here! */
+.sidebar.collapsed .list-group-item span,
 .sidebar.collapsed .accordion-button span {
-    display: none !important;
+    opacity: 0;
+    visibility: hidden;
+    width: 0;
+    display: inline-block; /* Keep it in flow but hidden */
 }
-.sidebar.collapsed .accordion-button::after {
-    background-image: none;
+
+.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;
@@ -52,12 +64,13 @@
 
     .sidebar {
         position: fixed;
-        top: 45px; /* Fallback, JS calculates exact height */
+        top: var(--header-height, 60px);
         right: 0;
         width: 250px;
         transition: width 0.15s ease-in-out;
-        height: calc(100vh - 45px); /* Fallback */
+        height: calc(100vh - var(--header-height, 60px));
         z-index: 1000;
+        --sidebar-item-px: 6px;
     }
     
     .sidebar.collapsed {
@@ -66,28 +79,128 @@
         position: fixed; 
     }
 }
+/* Sidebar Styling Redesign */
 .sidebar .list-group-item {
-    border: none !important;
-    font-size: 18px !important;
+    border: 1px solid transparent !important; /* Reserve space to prevent jumps */
+    font-size: 0.95rem !important;
     font-weight: 600 !important;
-    height: 60px !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;
-    padding: 12px;
-    align-items: center;
+}
+
+.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: 18px !important;
+    font-size: 0.95rem !important;
     font-weight: 600 !important;
-    border: none !important;
-    height: 60px !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;
-    padding: 12px;
-    align-items: center;
+    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: var(--body) !important;
+    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;
+}

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
         });
     });
 }

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.dist-info/RECORD

@@ -1,13 +0,0 @@
-sidebar/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-sidebar/apps.py,sha256=4UjKXHoBGKRLxpC9AY6eaq8YZx8unirUz_8u-IrlfVQ,145
-sidebar/urls.py,sha256=UL_9e1RLNMxZXkah65m7GRU1dbViZRGeNPBIiSZpOYg,142
-sidebar/views.py,sha256=MebyJ1ZiylSOPESXFkkQ8QTg-ClrkJn-oYLN6KrcgiM,418
-sidebar/migrations/__init__.py,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-sidebar/static/sidebar/sidebar.css,sha256=aEbc4yPFaQBpMoYnJi575u077pHzej7FLFP8kgRnfBk,2105
-sidebar/static/sidebar/sidebar.js,sha256=jLspMcoRDpsw_KpIegGwSL-FRi_uz_8pQ95zDXMnTZ0,6221
-sidebar/templates/sidebar/main.html,sha256=8dhxllfL40advQ6z2UlqH_wf3Nnf7ilexukoG7VQoek,1363
-micro_sidebar-1.1.0.dist-info/LICENSE,sha256=Fco89ULLSSxKkC2KKnx57SaT0R7WOkZfuk8IYcGiN50,1063
-micro_sidebar-1.1.0.dist-info/METADATA,sha256=nlAXd6VHbs4FwddvAZmSxP_0SP6JgACUygmByl3J_mw,3639
-micro_sidebar-1.1.0.dist-info/WHEEL,sha256=pkctZYzUS4AYVn6dJ-7367OJZivF2e8RA9b_ZBjif18,92
-micro_sidebar-1.1.0.dist-info/top_level.txt,sha256=ih69sjMhU1wOB9HzUV90yEY98aiPuGhzPBBBE-YtJ3w,8
-micro_sidebar-1.1.0.dist-info/RECORD,,