Étape 4: Add double accordion for portrait mobile and fix breakpoints (≤900px landscape for drawer)

Author: ocots

applications/index.md

@@ -6,7 +6,7 @@ custom_css:
   - /assets/css/contributors.css
   - /assets/css/applications.css
 custom_js:
-  - /assets/js/applications.js?v=9
+  - /assets/js/applications.js?v=14
 ---
 
 <div class="contributors-page">
@@ -30,10 +30,19 @@ custom_js:
 <div class="filter-sidebar-inner">
 <div class="sidebar-header">
 <h3><i class="fa-solid fa-filter"></i> Filters</h3>
+<div class="sidebar-header-actions">
+<!-- Portrait collapse button (hidden by default) -->
+<button class="portrait-collapse-btn" id="portrait-collapse-btn" style="display: none;">
+<i class="fa-solid fa-chevron-down"></i>
+</button>
 <button class="filter-reset hidden" id="filter-reset">
 <i class="fa-solid fa-rotate-left"></i> Clear all
 </button>
 </div>
+</div>
+
+<!-- Collapsible content wrapper (level 1) -->
+<div class="portrait-content-wrapper" id="portrait-content-wrapper">
 
 <div class="filter-counter-box">
 <span class="filter-counter" id="filter-counter">{{ app_count }} application{% if app_count != 1 %}s{% endif %}</span>
@@ -44,13 +53,13 @@ custom_js:
 <input type="text" id="search-input" placeholder="Search applications..." />
 </div>
 
-<!-- Toggle button for mobile portrait (hidden by default) -->
+<!-- Toggle button for mobile portrait tags (level 2) -->
 <button class="mobile-filter-toggle" id="mobile-filter-toggle" style="display: none;">
 <span>Show filter tags</span>
 <i class="fa-solid fa-chevron-down"></i>
 </button>
 
-<!-- Collapsible tags container -->
+<!-- Collapsible tags container (level 2) -->
 <div class="filter-tags-wrapper" id="filter-tags-wrapper">
 
 <div class="filter-tags-section">
@@ -78,6 +87,8 @@ custom_js:
 <div class="filter-bar" id="filter-bar-techniques"></div>
 </div>
 
+</div>
+
 </div>
 </div>
 </aside>

assets/css/applications.css

@@ -125,17 +125,81 @@
         min-height: 44px;
     }
 
+    /* Portrait double accordion */
+    .sidebar-header-actions {
+        display: flex;
+        flex-direction: row-reverse;
+        gap: 0.5rem;
+        align-items: center;
+        flex: 1;
+    }
+
+    .portrait-collapse-btn {
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        background: var(--color-canvas-default, #ffffff);
+        border: 1px solid var(--color-border-default, #e1e4e8);
+        border-radius: 6px;
+        cursor: pointer;
+        color: var(--color-text-secondary, #586069);
+        transition: all 0.15s ease;
+        margin-left: auto;
+        order: -1;
+    }
+
+    .portrait-collapse-btn:hover {
+        background: var(--color-canvas-subtle, #f6f8fa);
+    }
+
+    .portrait-collapse-btn i {
+        transition: transform 0.3s ease;
+    }
+
+    .portrait-collapse-btn.expanded i {
+        transform: rotate(180deg);
+    }
+
+    /* Level 1 wrapper - collapsed by default */
+    .portrait-content-wrapper {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease-in-out;
+    }
+
+    .portrait-content-wrapper.expanded {
+        max-height: 3000px;
+    }
+
     /* Card optimizations for portrait mobile */
-    .apps-main {
-        padding: 1rem;
+    .container {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
     }
 
-    .apps-main .contributors-header h1 {
-        font-size: 1.75rem;
+    .contributors-page {
+        padding: 0 !important;
+    }
+
+    .contributors-section {
+        max-width: 100% !important;
+        padding: 0 !important;
+    }
+
+    .apps-main {
+        padding: 1rem;
+        max-width: 100% !important;
     }
 
     .apps-main .contributors-header {
         margin-bottom: 1rem;
+        padding: 0;
+    }
+
+    .apps-main .contributors-header h1 {
+        font-size: 1.75rem;
     }
 
     .view-toggle-bar {
@@ -152,13 +216,13 @@
     }
 
     .app-avatar-text {
-        font-size: 1.25rem;
-        padding: 0.4rem 0.6rem;
-        width: 100px;
+        font-size: 1rem;
+        padding: 0.3rem 0.5rem;
+        width: 75px;
     }
 
     .app-title {
-        font-size: 1rem;
+        font-size: 0.95rem;
     }
 
     .app-body {
@@ -173,10 +237,34 @@
         font-size: 0.65rem;
         padding: 0.2rem 0.5rem;
     }
+
+    /* Detailed view overrides for portrait mobile */
+    .app-grid:not(.compact) .app-avatar-text {
+        width: 75px !important;
+        font-size: 1rem;
+    }
+
+    /* Compact view overrides for portrait mobile */
+    .app-grid.compact .app-avatar-text {
+        width: 75px !important;
+        font-size: 0.9rem;
+    }
+
+    .app-grid.compact .app-title {
+        font-size: 0.85rem;
+    }
 }
 
-/* Landscape mode ONLY - drawer sidebar (small screens only) */
-@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
+/* Landscape mode - drawer sidebar (≤768px in landscape OR small height) */
+@media (max-width: 900px) and (orientation: landscape) {
+    /* Change layout to 1 column since sidebar is fixed */
+    .apps-layout {
+        grid-template-columns: 1fr;
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+    }
+
     /* Show and configure overlay - behind sidebar but above content */
     .landscape-overlay {
         display: block;
@@ -228,7 +316,7 @@
         display: flex !important;
         position: fixed;
         left: 10px;
-        top: 10px;
+        top: 70px;
         z-index: 1001;
         width: 48px;
         height: 48px;
@@ -242,6 +330,15 @@
         color: var(--color-text-secondary, #586069);
         transition: all 0.15s ease;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+    }
+
+    .landscape-hamburger.hidden {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
     }
 
     .landscape-hamburger:hover {
@@ -308,24 +405,6 @@
     }
 }
 
-@media (max-width: 968px) and (min-width: 481px) {
-    .apps-layout {
-        grid-template-columns: 1fr;
-        margin-left: 0;
-        margin-right: 0;
-        width: 100%;
-    }
-    .filter-sidebar {
-        border-right: none;
-        border-bottom: 1px solid var(--color-border-default, #e1e4e8);
-    }
-    .filter-sidebar-inner {
-        position: relative !important;
-        top: 0 !important;
-        max-height: none !important;
-    }
-}
-
 .sidebar-header {
     display: flex;
     justify-content: space-between;

assets/js/applications.js

@@ -35,7 +35,29 @@
   btnDetailed.addEventListener('click', function() { setView('detailed'); });
   btnCompact.addEventListener('click', function() { setView('compact'); });
 
-  // ÉTAPE 1: Mobile portrait filter toggle
+  // ÉTAPE 4: Portrait double accordion - Level 1 (main content)
+  var portraitCollapseBtn = document.getElementById('portrait-collapse-btn');
+  var portraitContentWrapper = document.getElementById('portrait-content-wrapper');
+  var PORTRAIT_CONTENT_KEY = 'portrait-content-expanded';
+
+  if (portraitCollapseBtn && portraitContentWrapper) {
+    // Load saved state (default: collapsed)
+    var contentState = localStorage.getItem(PORTRAIT_CONTENT_KEY);
+    if (contentState === 'true') {
+      portraitContentWrapper.classList.add('expanded');
+      portraitCollapseBtn.classList.add('expanded');
+    }
+
+    // Toggle on click
+    portraitCollapseBtn.addEventListener('click', function() {
+      portraitContentWrapper.classList.toggle('expanded');
+      portraitCollapseBtn.classList.toggle('expanded');
+      var isExpanded = portraitContentWrapper.classList.contains('expanded');
+      localStorage.setItem(PORTRAIT_CONTENT_KEY, isExpanded);
+    });
+  }
+
+  // ÉTAPE 1: Mobile portrait filter toggle - Level 2 (tags)
   var mobileFilterToggle = document.getElementById('mobile-filter-toggle');
   var filterTagsWrapper = document.getElementById('filter-tags-wrapper');
   var MOBILE_FILTERS_KEY = 'mobile-filters-expanded';
@@ -71,15 +93,18 @@
     if (drawerState === 'false') {
       filterSidebar.classList.add('closed');
       landscapeOverlay.classList.remove('visible');
+      landscapeHamburger.classList.remove('hidden');
     } else {
-      // Default: drawer open, show overlay
+      // Default: drawer open, show overlay, hide hamburger
       landscapeOverlay.classList.add('visible');
+      landscapeHamburger.classList.add('hidden');
     }
 
     // Toggle drawer
     function toggleDrawer() {
       filterSidebar.classList.toggle('closed');
       landscapeOverlay.classList.toggle('visible');
+      landscapeHamburger.classList.toggle('hidden');
       var isOpen = !filterSidebar.classList.contains('closed');
       localStorage.setItem(LANDSCAPE_DRAWER_KEY, isOpen);
     }