Improve listings headers display on mobile

diff --git a/galette/templates/default/elements/edit_dynamic_fields.html.twig b/galette/templates/default/elements/edit_dynamic_fields.html.twig
index a003663f68cd4df79401fdec25cdccb3d0a2ae65..abfbe4d2e79cc1aa12c8e1a9bda876d4e422e0a8 100644 (file)
--- a/galette/templates/default/elements/edit_dynamic_fields.html.twig
+++ b/galette/templates/default/elements/edit_dynamic_fields.html.twig
@@ -22,11 +22,11 @@
             <tbody>
 {% for field in fields_list %}
                 <tr>
-                    <td>{{ field.getIndex() }}</td>
-                    <td class="left">{{ field.getName()|escape }}</td>
-                    <td class="left">{{ field.getPermName() }}</td>
-                    <td class="left">{{ field.getTypeName() }}</td>
-                    <td>
+                    <td data-scope="id">{{ field.getIndex() }}</td>
+                    <td class="left" data-scope="row">{{ field.getName()|escape }}</td>
+                    <td class="left" data-col-label="{{ _T("Permissions") }}">{{ field.getPermName() }}</td>
+                    <td class="left" data-col-label="{{ _T("Type") }}">{{ field.getTypeName() }}</td>
+                    <td data-col-label="{{ _T("Required") }}">
     {% if field.getType != 0 %}
         {% if field.isRequired() %}{{ _T("Yes") }}{% else %}{{ _T("No") }}{% endif %}
     {% endif %}

diff --git a/galette/templates/default/elements/edit_entitleds.html.twig b/galette/templates/default/elements/edit_entitleds.html.twig
index 4374e4ca3da82c8a89e74ebef7fb358ea7f5919c..7d05d59cabe7d1016b0606689a588e65c8f5050e 100644 (file)
--- a/galette/templates/default/elements/edit_entitleds.html.twig
+++ b/galette/templates/default/elements/edit_entitleds.html.twig
@@ -31,13 +31,13 @@
 {% endif %}
                         </span>
                     </td>
-                    <td class="left" data-title="{{ _T("Name") }}">
+                    <td class="left" data-col-label="{{ _T("Name") }}">
                         <div class="required field">
                             <label for="name" class="visually-hidden">{{ _T("Name") }}</label>
                             <input size="40" type="text" name="{{ fields.libelle }}" required="required"/>
                         </div>
                     </td>
-                    <td class="left" data-title="{% if class == 'ContributionsTypes' %}{{ _T("Extends membership?") }}{% else %}{{ _T("Priority") }}{% endif %}">
+                    <td class="left" data-col-label="{% if class == 'ContributionsTypes' %}{{ _T("Extends membership?") }}{% else %}{{ _T("Priority") }}{% endif %}">
 {% if class == 'ContributionsTypes' %}
                         <select name="{{ fields.third }}" class="ui dropdown nochosen">
                             <option value="0" selected="selected">{{ _T("No") }}</option>
@@ -68,7 +68,7 @@
                             </a>
                         </span>
                     </td>
-                    <td class="left" data-title="{{ _T("Name") }}">
+                    <td class="left" data-col-label="{{ _T("Name") }}">
                         {% if class == 'Status' %}
                             {% if entry.extra < 30 %}
                                 <span>
@@ -81,7 +81,7 @@
                         {% endif %}
                         {{ entry.name|escape }}
                     </td>
-                    <td data-title="{% if class == 'ContributionsTypes' %}{{ _T("Extends membership?") }}{% else %}{{ _T("Priority") }}{% endif %}">
+                    <td data-col-label="{% if class == 'ContributionsTypes' %}{{ _T("Extends membership?") }}{% else %}{{ _T("Priority") }}{% endif %}">
     {% if class == 'ContributionsTypes' %}
         {% if entry.extra == 1 %}
                             {{ _T("Yes") }}

diff --git a/galette/templates/default/pages/configuration_core_fields.html.twig b/galette/templates/default/pages/configuration_core_fields.html.twig
index d606b6dfac66e186c829a5fc279774538e7ab840..f149b376e5e9ca5d7a076fbd68edcc993ac643ed 100644 (file)
--- a/galette/templates/default/pages/configuration_core_fields.html.twig
+++ b/galette/templates/default/pages/configuration_core_fields.html.twig
@@ -19,7 +19,7 @@
             </div>
             <div class="content">
                 <div class="ui basic fitted segment">
-                    <div class="ui three column stackable grid">
+                    <div class="ui three column stackable grid core-fields-properties">
                         <div class="middle aligned row">
                             <div class="column">
                                 <span class="ui fluid label">{{ _T("Field name") }}</span>
@@ -39,11 +39,11 @@
         {% if (preferences.pref_show_id or field.field_id != 'id_adh') and field.field_id != 'parent_id' %}
             {% set fid = field.field_id %}
                     <li class="ui segment">
-                        <div class="ui three column stackable grid">
+                        <div class="ui three column stackable grid core-fields-listing">
                             <div class="middle aligned row">
                                 <div class="column">
                                     <i class="jsonly displaynone arrows alternate icon" aria-hidden="true"></i>
-                                    <span data-title="{{ _T("Field name") }}" class="fieldname">
+                                    <span data-prop-label="{{ _T("Field name") }}" class="fieldname">
                                         <input type="hidden" name="fields[]" value="{{ fid }}"/>
                                         <input type="hidden" name="{{ fid }}_category" value="{{ category.id_field_category }}"/>
                                         <input type="hidden" name="{{ fid }}_label" value="{{ field.label }}"/>
@@ -51,7 +51,7 @@
                                     </span>
                                 </div>
                                 <div class="column">
-                                    <span data-title="{{ _T("Required") }}" class="yesno" title="{% if fid in non_required %}{{ _T("Field '%field' cannot be set as required.")|replace({'%field': field.label}) }}{% else %}{{ _T("Mark '%field' as (not) required")|replace({'%field': field.label}) }}{% endif %}">
+                                    <span data-prop-label="{{ _T("Required") }}" class="yesno" title="{% if fid in non_required %}{{ _T("Field '%field' cannot be set as required.")|replace({'%field': field.label}) }}{% else %}{{ _T("Mark '%field' as (not) required")|replace({'%field': field.label}) }}{% endif %}">
                                         <label for="{{ fid }}_required_yes">{{ _T("Yes") }}</label>
                                         <input type="radio" name="{{ fid }}_required" id="{{ fid }}_required_yes" value="1"{% if field.required %} checked="checked"{% endif %}{% if fid in non_required %} disabled="disabled"{% endif %}/>
                                         <label for="{{ fid }}_required_no">{{ _T("No") }}</label>
@@ -59,7 +59,7 @@
                                     </span>
                                 </div>
                                 <div class="column">
-                                    <span data-title="{{ _T("Permissions") }}" class="access" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
+                                    <span data-prop-label="{{ _T("Permissions") }}" class="access" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
                                         <select name="{{ fid }}_visible" id="{{ fid }}_visible" class="ui dropdown nochosen">
                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::NOBODY') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::NOBODY') %} selected="selected"{% endif %}>{{ _T("Inaccessible") }}</option>
                                             <option value="{{ constant('Galette\\Entity\\FieldsConfig::ADMIN') }}"{% if field.visible == constant('Galette\\Entity\\FieldsConfig::ADMIN') %} selected="selected"{% endif %}>{{ _T("Administrator") }}</option>

diff --git a/galette/templates/default/pages/configuration_core_lists.html.twig b/galette/templates/default/pages/configuration_core_lists.html.twig
index 35fc28998942dc6196bd583b4479414e17909d3e..46dafc63473e121e14e514669f1ca33ea53b208c 100644 (file)
--- a/galette/templates/default/pages/configuration_core_lists.html.twig
+++ b/galette/templates/default/pages/configuration_core_lists.html.twig
@@ -14,7 +14,7 @@
                 </div>
                 <div class="jsonly disabled ui bottom attached accordion-styled segment">
                     <div class="ui basic fitted segment">
-                        <div class="ui two column stackable grid">
+                        <div class="ui two column stackable grid core-lists-properties">
                             <div class="middle aligned row">
                                 <div class="column">
                                     <span class="ui fluid label">{{ _T("Field name") }}</span>
@@ -29,17 +29,17 @@
     {% for col, field in listed_fields %}
             {% set fid = field.field_id %}
                         <li class="{% if fid == 'id_adh' or fid == 'list_adh_name' %}nosort ui-state-disabled {% endif %}ui segment">
-                            <div class="ui two column stackable grid">
+                            <div class="ui two column stackable grid core-lists-listing">
                                 <div class="middle aligned row">
                                     <div class="column">
                                         <i class="arrows alternate icon" aria-hidden="true"></i>
-                                        <span data-title="{{ _T("Field name") }}">
+                                        <span data-prop-label="{{ _T("Field name") }}">
                                             <input type="hidden" name="fields[]" value="{{ fid }}"/>
                                             {{ field.label }}
                                         </span>
                                     </div>
                                     <div class="column">
-                                        <span data-title="{{ _T("Permissions") }}" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
+                                        <span data-prop-label="{{ _T("Permissions") }}" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
                     {% if field.visible == constant('Galette\\Entity\\FieldsConfig::NOBODY') %}{{ _T("Inaccessible") }}{% endif %}
                     {% if field.visible == constant('Galette\\Entity\\FieldsConfig::ADMIN') %}{{ _T("Administrator") }}{% endif %}
                     {% if field.visible == constant('Galette\\Entity\\FieldsConfig::STAFF') %}{{ _T("Staff member") }}{% endif %}
@@ -61,7 +61,7 @@
                 </div>
                 <div class="jsonly disabled ui bottom attached accordion-styled segment">
                     <div class="ui basic fitted segment">
-                        <div class="ui two column stackable grid">
+                        <div class="ui two column stackable grid core-lists-properties">
                             <div class="middle aligned row">
                                 <div class="column">
                                     <span class="ui fluid label">{{ _T("Field name") }}</span>
@@ -76,17 +76,17 @@
     {% for col, field in remaining_fields %}
             {% set fid = field.field_id %}
                         <li class="ui segment">
-                            <div class="ui two column stackable grid">
+                            <div class="ui two column stackable grid core-lists-listing">
                                 <div class="middle aligned row">
                                     <div class="column">
                                         <i class="arrows alternate icon" aria-hidden="true"></i>
-                                        <span data-title="{{ _T("Field name") }}">
+                                        <span data-prop-label="{{ _T("Field name") }}">
                                             <input type="hidden" name="rfields[]" value="{{ fid }}"/>
                                             {{ field.label }}
                                         </span>
                                     </div>
                                     <div class="column">
-                                        <span data-title="{{ _T("Permissions") }}" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
+                                        <span data-prop-label="{{ _T("Permissions") }}" title="{{ _T("Change '%field' permissions")|replace({'%field': field.label}) }}">
                     {% if field.visible == constant('Galette\\Entity\\FieldsConfig::NOBODY') %}{{ _T("Inaccessible") }}{% endif %}
                     {% if field.visible == constant('Galette\\Entity\\FieldsConfig::ADMIN') %}{{ _T("Administrator") }}{% endif %}
                     {% if field.visible == constant('Galette\\Entity\\FieldsConfig::STAFF') %}{{ _T("Staff member") }}{% endif %}

diff --git a/galette/templates/default/pages/configuration_payment_types.html.twig b/galette/templates/default/pages/configuration_payment_types.html.twig
index a6ffcded4964470676c9212c5f1fec24fc716053..6def752bf040ed71f3db672d3ee75a5d45d40f24 100644 (file)
--- a/galette/templates/default/pages/configuration_payment_types.html.twig
+++ b/galette/templates/default/pages/configuration_payment_types.html.twig
@@ -18,7 +18,7 @@
                                     {{ _T("Add payment type") }}
                                 </span>
                             </td>
-                            <td class="left" data-title="{{ _T("Label") }}">
+                            <td class="left" data-col-label="{{ _T("Label") }}">
                                 <div class="required field">
                                     <label for="name" class="visually-hidden">{{ _T("Name") }}</label>
                                     <input size="20" type="text" name="name" required="required"/>
@@ -48,7 +48,7 @@
                                     </a>
                                 </span>
                             </td>
-                            <td class="left" data-title="{{ _T("Name") }}">{{ ptype.getName() }}</td>
+                            <td class="left" data-col-label="{{ _T("Name") }}">{{ ptype.getName() }}</td>
                             <td class="center actions_row">
                                 <a
                                     href="{{ url_for('editPaymentType', {'id': ptype.__get('id')}) }}"

diff --git a/galette/templates/default/pages/configuration_titles.html.twig b/galette/templates/default/pages/configuration_titles.html.twig
index 0aeeabf469384e4138d61ba509c9b17bd4432a83..5593ef42eb62918eaf4a5faf7cd47e702180024e 100644 (file)
--- a/galette/templates/default/pages/configuration_titles.html.twig
+++ b/galette/templates/default/pages/configuration_titles.html.twig
@@ -19,13 +19,13 @@
                                 {{ _T("Add title") }}
                             </span>
                         </td>
-                        <td class="left" data-title="{{ _T("Short form") }}">
+                        <td class="left" data-col-label="{{ _T("Short form") }}">
                             <div class="required field">
                                 <label for="short_label" class="visually-hidden">{{ _T("Short form") }}</label>
                                 <input size="20" type="text" name="short_label" required="required"/>
                             </div>
                         </td>
-                        <td class="left" data-title="{{ _T("Long form") }}">
+                        <td class="left" data-col-label="{{ _T("Long form") }}">
                             <div class="required field">
                                 <label for="long_label" class="visually-hidden">{{ _T("Long form") }}</label>
                                 <input size="20" type="text" name="long_label" required="required"/>
@@ -55,8 +55,8 @@
                                 </a>
                             </span>
                         </td>
-                        <td class="left" data-title="{{ _T("Short form") }}">{{ title.short|escape }}</td>
-                        <td class="left" data-title="{{ _T("Long form") }}">{{ title.long|escape }}</td>
+                        <td class="left" data-col-label="{{ _T("Short form") }}">{{ title.short|escape }}</td>
+                        <td class="left" data-col-label="{{ _T("Long form") }}">{{ title.long|escape }}</td>
                         <td class="center actions_row">
                             <a
                                 href="{{ url_for('editTitle', {'id': title.id}) }}"

diff --git a/galette/templates/default/pages/contributions_list.html.twig b/galette/templates/default/pages/contributions_list.html.twig
index f8e0022359f7d66362f33fb3d17c7eeb64e19bbd..312528bef670e438f74c80165139131e9b4722ec 100644 (file)
--- a/galette/templates/default/pages/contributions_list.html.twig
+++ b/galette/templates/default/pages/contributions_list.html.twig
@@ -266,11 +266,11 @@
                     <i class="ui icon">&nbsp;</i>
                 {% endif %}
             </td>
-            <td data-title="{{ _T("Date") }}">{{ contribution.date }}</td>
-            <td data-title="{{ _T("Begin") }}">{{ contribution.begin_date }}</td>
-            <td data-title="{{ _T("End") }}">{{ contribution.end_date }}</td>
+            <td data-col-label="{{ _T("Date") }}">{{ contribution.date }}</td>
+            <td data-col-label="{{ _T("Begin") }}">{{ contribution.begin_date }}</td>
+            <td data-col-label="{{ _T("End") }}">{{ contribution.end_date }}</td>
             {% if ((login.isAdmin() or login.isStaff()) and member is not defined) or pmember is defined %}
-                <td data-title="{{ _T("Member") }}">
+                <td data-col-label="{{ _T("Member") }}">
                     {% if member is defined %}
                         {% set mname = member.sname %}
                     {% else %}
@@ -293,10 +293,10 @@
                     </a>
                 </td>
             {% endif %}
-            <td data-title="{{ _T("Type") }}">{{ contribution.type.libelle }}</td>
-            <td data-title="{{ _T("Amount") }}">{{ contribution.amount }}</td>
-            <td data-title="{{ _T("Payment type") }}">{{ contribution.spayment_type }}</td>
-            <td data-title="{{ _T("Duration") }}">{{ contribution.duration }}</td>
+            <td data-col-label="{{ _T("Type") }}">{{ contribution.type.libelle }}</td>
+            <td data-col-label="{{ _T("Amount") }}">{{ contribution.amount }}</td>
+            <td data-col-label="{{ _T("Payment type") }}">{{ contribution.spayment_type }}</td>
+            <td data-col-label="{{ _T("Duration") }}">{{ contribution.duration }}</td>
             {% if mode != 'ajax' %}
                 <td class="actions_row center">
                     <a

diff --git a/galette/templates/default/pages/export.html.twig b/galette/templates/default/pages/export.html.twig
index f9bd0f4567bacc4d1b858aa72d031ab210bc450e..1188b0ad19044487418a578d3edc7118cabc7893 100644 (file)
--- a/galette/templates/default/pages/export.html.twig
+++ b/galette/templates/default/pages/export.html.twig
@@ -53,10 +53,10 @@
                                     <td data-scope="row">
                                         <a href="{{ url_for("getCsv", {"type": "export", "file": export.name}) }}">{{ export.name }}</a>
                                     </td>
-                                    <td data-title="{{ _T('Date') }}">
+                                    <td data-col-label="{{ _T('Date') }}">
                                         {{ export.date }}
                                     </td>
-                                    <td data-title="{{ _T('Size') }}">
+                                    <td data-col-label="{{ _T('Size') }}">
                                         {{ export.size }}
                                     </td>
                                     <td class="actions_row">
@@ -85,7 +85,7 @@
                     <div class="active content field">
 {% if parameted|length > 0 %}
                         <p>{{ _T('Which parameted export(s) do you want to run?') }}</p>
-                        <table class="listing ui celled striped table">
+                        <table class="ui celled striped table">
                             <thead>
                                 <tr>
                                     <th class="small_head"/>
@@ -96,13 +96,13 @@
                             <tbody>
     {% for param in parameted %}
                                 <tr>
-                                    <td data-scope="id">
+                                    <td class="collapsing" data-scope="id">
                                         <input type="checkbox" name="export_parameted[]" id="{{ param.id }}" value="{{ param.id }}"/>
                                     </td>
                                     <td data-scope="row">
                                         <label for="{{ param.id }}">{{ param.name }}</label>
                                     </td>
-                                    <td data-title="{{ _T('Description') }}">
+                                    <td data-col-label="{{ _T('Description') }}">
                                         <label for="{{ param.id }}">{{ param.description }}</label>
                                     </td>
                                 </tr>
@@ -123,7 +123,7 @@
                     </div>
                     <div class="active content field">
                         <p>{{ _T('Additionnaly, which table(s) do you want to export?') }}</p>
-                        <table class="listing same ui celled striped table">
+                        <table class="same ui celled striped table">
                             <thead>
                                 <tr>
                                     <th class="small_head"/>
@@ -133,7 +133,7 @@
                             <tbody>
     {% for table in tables_list %}
                                 <tr>
-                                    <td>
+                                    <td class="collapsing">
                                         <input type="checkbox" name="export_tables[]" id="{{ table }}" value="{{ table }}"/>
                                     </td>
                                     <td class="left">

diff --git a/galette/templates/default/pages/history.html.twig b/galette/templates/default/pages/history.html.twig
index 282c49070d990adde1255a5c8d87874eb84072af..6a486f5a71542c4d764f6b02a51286752e322b7d 100644 (file)
--- a/galette/templates/default/pages/history.html.twig
+++ b/galette/templates/default/pages/history.html.twig
@@ -116,11 +116,11 @@
                         {{ _T("History entry %id")|replace({"%id": loop.index}) }}
                     </span>
             </td>
-            <td class="" data-title="{{ _T("Date") }}">{{ log.date_log|date(_T("Y-m-d H:i:s")) }}</td>
-            <td class="" data-title="{{ _T("IP") }}">{{ log.ip_log }}</td>
-            <td data-title="{{ _T("User") }}">{{ log.adh_log }}</td>
-            <td data-title="{{ _T("Action") }}">{{ log.action_log|escape }}</td>
-            <td data-title="{{ _T("Description") }}">
+            <td data-col-label="{{ _T("Date") }}">{{ log.date_log|date(_T("Y-m-d H:i:s")) }}</td>
+            <td data-col-label="{{ _T("IP") }}">{{ log.ip_log }}</td>
+            <td data-col-label="{{ _T("User") }}">{{ log.adh_log }}</td>
+            <td data-col-label="{{ _T("Action") }}">{{ log.action_log|escape }}</td>
+            <td data-col-label="{{ _T("Description") }}">
                 {{ log.text_log|escape }}
             {% if log.sql_log %}
                     <div class="tooltip title" title="{{ _T("Show associated query") }}">

diff --git a/galette/templates/default/pages/import.html.twig b/galette/templates/default/pages/import.html.twig
index 887e5e3887edb00a727c3a20328ee1e43186b099..7db1e7dd04674d69dc85e47209de3c7b78360959 100644 (file)
--- a/galette/templates/default/pages/import.html.twig
+++ b/galette/templates/default/pages/import.html.twig
@@ -33,10 +33,10 @@
                                             <input type="radio" name="import_file" id="file{{ loop.index }}" value="{{ import.name }}"{% if import_file is defined and import_file == import.name %} checked="checked"{% endif %}/>
                                             <label for="file{{ loop.index }}">{{ import.name }}</label> (<a href="{{ url_for("getCsv", {"type": "import", "file": import.name}) }}">{{ _T('see') }}</a>)
                                         </td>
-                                        <td data-title="{{ _T('Date') }}">
+                                        <td data-col-label="{{ _T('Date') }}">
                                             {{ import.date }}
                                         </td>
-                                        <td data-title="{{ _T('Size') }}">
+                                        <td data-col-label="{{ _T('Size') }}">
                                             {{ import.size }}
                                         </td>
                                         <td class="actions_row">

diff --git a/galette/templates/default/pages/mailings_list.html.twig b/galette/templates/default/pages/mailings_list.html.twig
index 9df15c997bca0e91d3a36c35889a588d23201d2f..e7a40be8518d3263adef2f302c0ca859ddb91fe3 100644 (file)
--- a/galette/templates/default/pages/mailings_list.html.twig
+++ b/galette/templates/default/pages/mailings_list.html.twig
@@ -132,12 +132,12 @@
                             {{ _T('Mailing entry %id')|replace({'%id': log.mailing_id}) }}
                         </span>
             </td>
-            <td class="" data-title="{{ _T('Date') }}">{{ log.mailing_date|date(date_format) }}</td>
-            <td data-title="{{ _T('Sender') }}">{% if log.mailing_sender == 0 %}{{ _T('Superadmin') }}{% else %}{{ log.mailing_sender_name }}{% endif %}</td>
-            <td data-title="{{ _T('Recipients') }}">{{ log.mailing_recipients|length }}</td>
-            <td data-title="{{ _T('Subject') }}">{{ log.mailing_subject }}</td>
-            <td class="center" data-title="{{ _T('Attachments') }}">{{ log.attachments }}</td>
-            <td class="center{% if log.mailing_sent == 1 %} use{% endif %}" data-title="{{ _T('Sent') }}">
+            <td data-col-label="{{ _T('Date') }}">{{ log.mailing_date|date(date_format) }}</td>
+            <td data-col-label="{{ _T('Sender') }}">{% if log.mailing_sender == 0 %}{{ _T('Superadmin') }}{% else %}{{ log.mailing_sender_name }}{% endif %}</td>
+            <td data-col-label="{{ _T('Recipients') }}">{{ log.mailing_recipients|length }}</td>
+            <td data-col-label="{{ _T('Subject') }}">{{ log.mailing_subject }}</td>
+            <td class="center" data-col-label="{{ _T('Attachments') }}">{{ log.attachments }}</td>
+            <td class="center{% if log.mailing_sent == 1 %} use{% endif %}" data-col-label="{{ _T('Sent') }}">
                 {% if log.mailing_sent == 1 %}
                     <i class="ui thumbs up green icon" aria-hidden="true"></i>
                 {% else %}

diff --git a/galette/templates/default/pages/members_list.html.twig b/galette/templates/default/pages/members_list.html.twig
index 9a12fabf40ecc46ca4948e0302c26d7e83878784..8ff9fcd79b44e820e87d6a07e18b2b505192dcee 100644 (file)
--- a/galette/templates/default/pages/members_list.html.twig
+++ b/galette/templates/default/pages/members_list.html.twig
@@ -394,7 +394,7 @@
                 {% set value = value|e('html') %}
             {% endif %}
 
-                        <td data-title="{{ column.label }}">
+                        <td data-col-label="{{ column.label }}">
             {# Display column.
                 A check is done here to adapt display, this is may not the best way to go
                 but for now, that works as expected.

diff --git a/galette/templates/default/pages/members_public_list.html.twig b/galette/templates/default/pages/members_public_list.html.twig
index 721c9355ccfd571bc1a99c0634c862df6ae3d9f4..b32ba3b368645f46ddf7a319bd7fb168464cfda8 100644 (file)
--- a/galette/templates/default/pages/members_public_list.html.twig
+++ b/galette/templates/default/pages/members_public_list.html.twig
@@ -83,11 +83,11 @@
                     {{ member.sfullname }}
                 {% endif %}
             </td>
-            <td class="{{ rclass }}" data-title="{{ _T('Nickname') }}">{{ member.nickname|escape }}</td>
+            <td class="{{ rclass }}" data-col-label="{{ _T('Nickname') }}">{{ member.nickname|escape }}</td>
             {% if login.isLogged() %}
-                <td class="{{ rclass }}" data-title="{{ _T('Email') }}"><a href="mailto:{{ member.email }}">{{ member.email }}</a></td>
+                <td class="{{ rclass }}" data-col-label="{{ _T('Email') }}"><a href="mailto:{{ member.email }}">{{ member.email }}</a></td>
             {% endif %}
-            <td class="{{ rclass }}" data-title="{{ _T('Information') }}">{{ member.others_infos }}</td>
+            <td class="{{ rclass }}" data-col-label="{{ _T('Information') }}">{{ member.others_infos }}</td>
         </tr>
     {% else %}
         <tr>

diff --git a/galette/templates/default/pages/plugins.html.twig b/galette/templates/default/pages/plugins.html.twig
index 0ee61e6c1fff790aaadc12a78fcd8ad75eda6c5a..b99677f9cdc6daf553f1bc24ef2f02e428096c32 100644 (file)
--- a/galette/templates/default/pages/plugins.html.twig
+++ b/galette/templates/default/pages/plugins.html.twig
@@ -20,10 +20,10 @@
 {% for name, plugin in plugins_list %}
             <tr class="{% if loop.index0 % 2 == 0 %}even{% else %}odd{% endif %}">
                 <td data-scope="row"><a href="{{ url_for(plugin.route ~ "Info", {"plugin": name}) }}" class="info-plugin">{{ plugin.name }} ({{ name }})</a></td>
-                <td data-title="{{ _T('Description') }}">{{ plugin.desc }}</td>
-                <td data-title="{{ _T('Author') }}">{{ plugin.author }}</td>
-                <td data-title="{{ _T('Version') }}">{{ plugin.version }}</td>
-                <td data-title="{{ _T('Release date') }}">{{ plugin.date }}</td>
+                <td data-col-label="{{ _T('Description') }}">{{ plugin.desc }}</td>
+                <td data-col-label="{{ _T('Author') }}">{{ plugin.author }}</td>
+                <td data-col-label="{{ _T('Version') }}">{{ plugin.version }}</td>
+                <td data-col-label="{{ _T('Release date') }}">{{ plugin.date }}</td>
                 <td class="actions_row">
                     <a
                         href="{{ url_for("pluginsActivation", {"action": "deactivate", "module_id": name}) }}"
@@ -64,7 +64,7 @@
 {% for name, plugin in plugins_disabled_list %}
             <tr>
                 <td data-scope="row">{{ name }}</td>
-                <td data-title="{{ _T('Cause') }}" colspan="4">
+                <td data-col-label="{{ _T('Cause') }}" colspan="4">
                     {% if plugin.cause == constant('Galette\\Core\\Plugins::DISABLED_MISS') %}
                         {{ _T('A required file is missing') }}
                     {% elseif plugin.cause == constant('Galette\\Core\\Plugins::DISABLED_COMPAT') %}

diff --git a/galette/templates/default/pages/saved_searches_list.html.twig b/galette/templates/default/pages/saved_searches_list.html.twig
index ed35b9ae12178bc075275f1613cbeae3ce82f516..b6e2b9b1533ec83fca18d2f5bdb9d4aee522382a 100644 (file)
--- a/galette/templates/default/pages/saved_searches_list.html.twig
+++ b/galette/templates/default/pages/saved_searches_list.html.twig
@@ -27,9 +27,9 @@
                     {{ loop.index1 }}
                 {% endif %}
             </td>
-            <td class="left" data-title="{{ _T("Creation date") }}">{{ search.creation_date }}</td>
-            <td class="left" data-title="{{ _T("Name") }}">{{ search.name|default("-") }}</td>
-            <td class="left" data-title="{{ _T("Search parameters") }}">
+            <td class="left" data-col-label="{{ _T("Creation date") }}">{{ search.creation_date }}</td>
+            <td class="left" data-col-label="{{ _T("Name") }}">{{ search.name|default("-") }}</td>
+            <td class="left" data-col-label="{{ _T("Search parameters") }}">
                 <details class="ui basic styled accordion">
                     <summary class="title">
                         <i class="info circle primary icon" aria-hidden="true"></i> {{ _T("Show parameters") }}

diff --git a/galette/templates/default/pages/transactions_list.html.twig b/galette/templates/default/pages/transactions_list.html.twig
index 57bcc3cbd843535b2ccf44433258babfe693c688..0f5e6c75d4bd531ce8d77ac7568f3b9066dd8554 100644 (file)
--- a/galette/templates/default/pages/transactions_list.html.twig
+++ b/galette/templates/default/pages/transactions_list.html.twig
@@ -158,9 +158,9 @@
                             </a>
                         </span>
             </td>
-            <td data-title="{{ _T("Date") }}">{{ transaction.date }}</td>
+            <td data-col-label="{{ _T("Date") }}">{{ transaction.date }}</td>
         {% if ((login.isAdmin() or login.isStaff()) and member is not defined) or pmember is defined %}
-            <td data-title="{{ _T("Member") }}">
+            <td data-col-label="{{ _T("Member") }}">
             {% if filters.filtre_cotis_adh == "" or filters.filtre_cotis_adh == null %}
                 <a
                     href="{{ url_for("contributions", {"type": "transactions", "option": "member", "value": mid}) }}"
@@ -177,10 +177,10 @@
                 </a>
             </td>
         {% endif %}
-            <td data-title="{{ _T("Description") }}">{{ transaction.description|escape }}</td>
-            <td class="actions_row data-title="{{ _T("Amount") }}">{{ transaction.amount }}</td>
+            <td data-col-label="{{ _T("Description") }}">{{ transaction.description|escape }}</td>
+            <td data-col-label="{{ _T("Amount") }}">{{ transaction.amount }}</td>
         {% if login.isAdmin() or login.isStaff() %}
-            <td class="center">
+            <td class="center actions_row">
                 <a
                     href="{{ url_for("editTransaction", {"id": transaction.id}) }}"
                     class="action"

diff --git a/ui/semantic/galette/collections/table.overrides b/ui/semantic/galette/collections/table.overrides
index 9c28e30dd68720b919b3a18f03419758900f7064..64754286df0e9bc08b6455546ee1992c79ce99bf 100644 (file)
--- a/ui/semantic/galette/collections/table.overrides
+++ b/ui/semantic/galette/collections/table.overrides
@@ -32,6 +32,31 @@ td.emptylist {
     font-style: italic;
 }
 @media only screen and (max-width: @largestMobileScreen) {
+    table.ui.table.listing:not(.unstackable) {
+        & > thead {
+            display: none !important;
+        }
+        & td {
+            &[data-scope="id"] {
+                float: left;
+            }
+            &[data-scope="row"] {
+                font-weight: bold;
+                input[type="checkbox"] {
+                    float: right;
+                }
+            }
+            &[data-col-label]::before {
+                display: inline-block;
+                content: attr(data-col-label);
+                width: 10em;
+                font-weight: bold;
+            }
+            &.actions_row {
+                text-align: center;
+            }
+        }
+    }
     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr:hover,
     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr:hover > td {
         background: @activeLineBackgroundColor !important;

diff --git a/ui/semantic/galette/globals/site.overrides b/ui/semantic/galette/globals/site.overrides
index 6131cbbcc0cfa7e493bc124325a05db7cc10950f..b04af28fc9e3a2c949bf0222135b0f835dedd11f 100644 (file)
--- a/ui/semantic/galette/globals/site.overrides
+++ b/ui/semantic/galette/globals/site.overrides
@@ -223,6 +223,40 @@ body:not(.loggedin) main.pusher.dimmed.closing ~ footer.page-footer {
   html.public_page .ui.ui.ui.container:not(.fluid) {
     width: 100%;
   }
+  .core-lists-properties,
+  .core-fields-properties {
+    display: none !important;
+  }
+  .core-lists-listing,
+  .core-fields-listing {
+    i.arrows.alternate {
+      display: block;
+      margin: 1rem auto;
+      &::before {
+        display: block;
+      }
+    }
+  }
+  .core-lists-listing {
+    span[data-prop-label] {
+      display: block;
+      text-align: center;
+      &::before {
+          display: block;
+          content: attr(data-prop-label);
+          text-align: center;
+          font-weight: bold;
+      }
+    }
+  }
+  .core-fields-listing {
+    span[data-prop-label]::before {
+        display: inline-block;
+        content: attr(data-prop-label);
+        width: 10em;
+        font-weight: bold;
+    }
+  }
 }
 
 @media only screen and (max-width: 991px) {