Use Labels to display galette modes in navigation

diff --git a/galette/templates/default/elements/modes.html.twig b/galette/templates/default/elements/modes.html.twig
index 4646440b8850a93736be371e43ddb50096a3847a..54c5efb562d582e53f41ad9a134f7e5e8e3bf2c7 100644 (file)
--- a/galette/templates/default/elements/modes.html.twig
+++ b/galette/templates/default/elements/modes.html.twig
@@ -1,11 +1,12 @@
 {% if login.isSuperAdmin() %}
-    <div class="ui small red inverted center aligned segment" title="{{ _T("You are actually logged-in as superadmin. Some functionnalities may not be available since this is *not* a regular member.") }}">
-        <i class="ui user shield icon"></i>
-        <strong>{{ _T("Superadmin") }}</strong>
-    </div>
+    <span class="tooltip ui red icon circular label" title="{{ _T("You are actually logged-in as superadmin. Some functionnalities may not be available since this is *not* a regular member.") }}">
+        <i class="shield icon"></i>
+        {{ _T("Superadmin") }}
+    </span>
 {% endif %}
 {% if constant('GALETTE_MODE') == 'DEMO' %}
-        <div class="ui small orange inverted center aligned segment" title="{{ _T("This application runs under DEMO mode, all features may not be available.") }}">
-            <strong>{{ _T("Demonstration") }}</strong>
-        </div>
+    <span class="tooltip ui orange icon circular label" title="{{ _T("This application runs under DEMO mode, all features may not be available.") }}">
+        <i class="gamepad icon"></i>
+        {{ _T("Demonstration") }}
+    </span>
 {% endif %}

diff --git a/galette/templates/default/elements/navigation/navigation_aside.html.twig b/galette/templates/default/elements/navigation/navigation_aside.html.twig
index 07cc7319fd7b9655478952dfebde095619e33d4c..5c23b732cc71ba882d6a4c2259326825307e2d0b 100644 (file)
--- a/galette/templates/default/elements/navigation/navigation_aside.html.twig
+++ b/galette/templates/default/elements/navigation/navigation_aside.html.twig
@@ -5,7 +5,9 @@
     } %}
 {% endif %}
 
-    <div class="ui basic center aligned segment">
+    {% include "elements/modes.html.twig" %}
+
+    <div class="ui basic center aligned fitted segment">
         <img src="{{ url_for('logo') }}" width="{{ logo.getOptimalWidth() }}" height="{{ logo.getOptimalHeight() }}" alt="{{ preferences.pref_nom }}" class="icon"/>
         <div class="ui block huge brand header">
             {{ preferences.pref_nom }}
@@ -13,8 +15,6 @@
         </div>
     </div>
 
-    {% include "elements/modes.html.twig" %}
-
     <div class="ui vertical accordion compact fluid menu">
         {% include "elements/navigation/navigation_items.html.twig" %}
     </div>

diff --git a/galette/templates/default/elements/navigation/navigation_sidebar.html.twig b/galette/templates/default/elements/navigation/navigation_sidebar.html.twig
index 33b6b613b096c32dde43b1f5c7987c65e285cf56..2dd30b23e41c16408268eca445cabe5ae0600c5e 100644 (file)
--- a/galette/templates/default/elements/navigation/navigation_sidebar.html.twig
+++ b/galette/templates/default/elements/navigation/navigation_sidebar.html.twig
@@ -20,14 +20,13 @@
             ui: "item"
     } %}
 {% else %}
-        <div class="item">
-            {% include "elements/modes.html.twig" %}
-        </div>
-
         {% include "elements/navigation/navigation_items.html.twig" %}
 
         {% include "elements/logout.html.twig" with {
                 ui: "item"
         } %}
 {% endif %}
+        <div class="ui basic center aligned segment">
+            {% include "elements/modes.html.twig" %}
+        </div>
     </div>

diff --git a/galette/templates/default/elements/navigation/navigation_topbar.html.twig b/galette/templates/default/elements/navigation/navigation_topbar.html.twig
index 2709df76a717350fe6a57b3d53890dbe1c61eb96..008673a2052cb41ce5c1c4428d736f8d17ebe57b 100644 (file)
--- a/galette/templates/default/elements/navigation/navigation_topbar.html.twig
+++ b/galette/templates/default/elements/navigation/navigation_topbar.html.twig
@@ -17,5 +17,9 @@
         {% include "elements/language.html.twig" with {
                 ui: "dropdown"
         } %}
+
+        <div class="item">
+            {% include "elements/modes.html.twig" %}
+        </div>
     </div>
 </header>

diff --git a/galette/templates/default/public_page.html.twig b/galette/templates/default/public_page.html.twig
index ce249e76641df1ea01bf7bc11a63bbe57dc186af..3321950ff085a21a5b60a08e8d45814a197a2000 100644 (file)
--- a/galette/templates/default/public_page.html.twig
+++ b/galette/templates/default/public_page.html.twig
@@ -13,17 +13,6 @@
                 {% include "elements/navigation/navigation_aside.html.twig" %}
 {% endif %}
                 <section{% if login.isLogged() %} class="content"{% endif %}>
-{% if constant('GALETTE_MODE') == 'DEMO' %}
-    {% if cur_route != "editMember" %}
-        {% if not login.isLogged() %}
-            {% if cur_route == ("addMember" or "login") or (cur_route == "publicList" and cur_subroute == ("list" or "trombi")) %}
-                    <div class="ui tiny orange message" title="{{ _T("This application runs under DEMO mode, all features may not be available.") }}">
-                        {{ _T("Demonstration") }}
-                    </div>
-            {% endif %}
-        {% endif %}
-    {% endif %}
-{% endif %}
 {% if not login.isLogged() %}
                     <div class="ui basic center aligned fitted segment">
                         <img src="{{ url_for('logo') }}" width="{{ logo.getOptimalWidth() }}" height="{{ logo.getOptimalHeight() }}" alt="{{ preferences.pref_nom }}" class="icon"/>

diff --git a/ui/js/common.js b/ui/js/common.js
index 478377d7d71bedf278c8514aba388454db6549c7..2950128b82afde5b64aefe5cc030d0911736b96a 100644 (file)
--- a/ui/js/common.js
+++ b/ui/js/common.js
@@ -120,7 +120,7 @@ $(function() {
         $checkbox        = $('.ui.checkbox, .ui.radio.checkbox'),
         $tabulation      = $('.ui.tabbed .item'),
         $popup           = $('.no-touch a[title]'),
-        $tooltipPopup    = $('i.tooltip'),
+        $tooltipPopup    = $('i.tooltip, span.tooltip'),
         $menuPopupRight  = $('.no-touch .ui.vertical.accordion.menu a[title]'),
         $menuPopupBottom = $('.no-touch .ui.top.fixed.menu a.item[title]'),
         $menuPopupLeft   = $('.no-touch .ui.dropdown.right-aligned a[title]')