From f3a2ac1ad2aca221043580e347e2845440276423 Mon Sep 17 00:00:00 2001
From: Guillaume AGNIERAY <dev@agnieray.net>
Date: Mon, 15 Apr 2024 23:13:24 +0200
Subject: [PATCH] Inverted pointing menu on documents public list

fixes #1820
---
 .../pages/documents_public_list.html.twig     | 48 ++++++++++---------
 .../galette/collections/menu.overrides        | 15 ++++--
 2 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/galette/templates/default/pages/documents_public_list.html.twig b/galette/templates/default/pages/documents_public_list.html.twig
index 58490cd79..8034ac4ec 100644
--- a/galette/templates/default/pages/documents_public_list.html.twig
+++ b/galette/templates/default/pages/documents_public_list.html.twig
@@ -33,8 +33,8 @@
         </div>
     {% else %}
         <div class="ui stackable grid">
-            <div class="four wide left attached column">
-                <div class="ui stackable vertical fluid tabular menu tabbed">
+            <div class="four wide column">
+                <div class="ui vertical inverted pointing fluid menu tabbed">
         {% for type, documents in typed_documents %}
                     <a class="{% if loop.index == 1 %}active {% endif %}item" data-tab="{{ _self.getSlug(type) }}">
                         {{ _T(type) }}
@@ -43,35 +43,37 @@
         {% endfor %}
                 </div>
             </div>
-            <div class="twelve wide stretched right attached column">
+            <div class="twelve wide column">
         {% for type, documents in typed_documents %}
-                <div class="ui seamless right attached tab segment{% if loop.index == 1 %} active{% endif %}" data-tab="{{ _self.getSlug(type) }}">
+                <div class="ui tab{% if loop.index == 1 %} active{% endif %}" data-tab="{{ _self.getSlug(type) }}">
+                    <div class="ui segment">
+                        <div class="ui divided relaxed list">
             {% for document in documents %}
-                    <div class="ui relaxed divided list">
-                        <div class="item">
-                            <div class="ui tiny image">
-                                <i class="large file middle aligned icon"></i>
-                            </div>
-                            <div class="content">
-                                <a class="ui small header" href="{{ url_for('getDocumentFile', {'id': document.getID()}) }}">
-                                    {{ document.getDocumentFilename() }}
-                                </a>
-                                <div class="description">
-                                    {% if document.getComment %}{{ document.getComment()|raw }}{% endif %}
+                            <div class="item">
+                                <div class="ui tiny image">
+                                    <i class="large file middle aligned icon"></i>
                                 </div>
-                                <div class="extra">
-                                    <div class="ui right floated meta">
-                                        <span class="date ui small text">
-                                            <i class="clock outline icon"></i>
-                                            {{ document.getCreationDate() }}
-                                        </span>
-                                        <div class="ui label">{{ document.getPermissionName() }}</div>
+                                <div class="content">
+                                    <a class="ui small header" href="{{ url_for('getDocumentFile', {'id': document.getID()}) }}">
+                                        {{ document.getDocumentFilename() }}
+                                    </a>
+                                    <div class="description">
+                                        {% if document.getComment %}{{ document.getComment()|raw }}{% endif %}
+                                    </div>
+                                    <div class="extra">
+                                        <div class="ui right floated meta">
+                                            <span class="date ui small text">
+                                                <i class="clock outline icon"></i>
+                                                {{ document.getCreationDate() }}
+                                            </span>
+                                            <div class="ui label">{{ document.getPermissionName() }}</div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
+            {% endfor %}
                         </div>
                     </div>
-            {% endfor %}
                 </div>
         {% endfor %}
             </div>
diff --git a/ui/semantic/galette/collections/menu.overrides b/ui/semantic/galette/collections/menu.overrides
index 5a4894e23..b995814b8 100644
--- a/ui/semantic/galette/collections/menu.overrides
+++ b/ui/semantic/galette/collections/menu.overrides
@@ -29,22 +29,22 @@
       Vertical
   ---------------*/
 
-  .ui.vertical.menu:not(.tabular) {
+  .ui.vertical.menu:not(.pointing) {
     display: block;
     flex-direction: column;
     background: @verticalBackground;
     box-shadow: @verticalBoxShadow;
   }
-  .ui.vertical.menu:not(.tabular) {
+  .ui.vertical.menu:not(.pointing) {
     border: @border;
   }
-  .ui.vertical.menu:not(.tabular) div.item .ui.button {
+  .ui.vertical.menu:not(.pointing) div.item .ui.button {
     width: 100%;
     border: @border;
     margin: 0 0 .4rem 0;
     box-shadow: none;
   }
-  .ui.vertical.menu:not(.tabular) div.item .item.button::before {
+  .ui.vertical.menu:not(.pointing) div.item .item.button::before {
     content: none;
   }
   .ui.vertical.accordion.menu {
@@ -55,6 +55,13 @@
       }
     }
   }
+  .ui.vertical.inverted.pointing.menu {
+    .item:not(.active, :hover) {
+      .small.disabled.text {
+        color: @midWhite;
+      }
+    }
+  }
 }
 
 /* --------------
-- 
2.39.2