Fixes and improvements on small screens display

* prevent file inputs overflow
* add margin bottom on grouped buttons and labels
* fix unstaked columns in preferences template
* fix sortable items in advanced search template

diff --git a/galette/templates/default/components/dynamic_fields.html.twig b/galette/templates/default/components/dynamic_fields.html.twig
index b1f98e917c1eb1754a21b3e326c3a477ff7a3429..1ae06ae0e3705fe46447f1e38cf6910dcb820100 100644 (file)
--- a/galette/templates/default/components/dynamic_fields.html.twig
+++ b/galette/templates/default/components/dynamic_fields.html.twig
@@ -147,7 +147,7 @@
                             {% if get_class(field) == 'Galette\\DynamicFields\\File' or (field.isRepeatable() and field.getRepeat() > 1) or (field.isMultiValued() and field.getRepeat() == 0) %}
                                repetable sixteen wide {% endif %}column">
                             {% for field_data in values %}
-                                <div class="field{% if field.isRequired() %} required{% endif %}">
+                                <div class="field{% if field.isRequired() %} required{% endif %}{% if get_class(field) == 'Galette\\DynamicFields\\File' %} wide{% endif %}">
                                     {{ _self.draw_field(field, field_data, disabled, loop.index, object, masschange) }}
                                     {% if field.getInformation() %}
                                         <p class="exemple">{{ field.getInformation()|raw }}</p>

diff --git a/galette/templates/default/pages/advanced_search.html.twig b/galette/templates/default/pages/advanced_search.html.twig
index 9227afd1a8499cf72acf95e966adf27913e02a94..c3a41eb89b957da4a711711c89ca9cd5f3420bf5 100644 (file)
--- a/galette/templates/default/pages/advanced_search.html.twig
+++ b/galette/templates/default/pages/advanced_search.html.twig
@@ -232,7 +232,7 @@
                     </div>
                     <ul id="gs_sortable" class="sortable-items">
                     {% for gs in filters.groups_search %}
-                        <li class="even ui segment items">
+                        <li class="even ui segment unstackable items">
                             <div class="ui item">
                                 <div class="ui image">
                                     <i class="arrows alternate icon"></i>
@@ -431,7 +431,7 @@
                     <div class="active content">
                         <ul id="fs_sortable" class="sortable-items">
 {% for fs in filters.free_search %}
-                            <li class="even ui segment items">
+                            <li class="even ui segment unstackable items">
                                 <div class="ui item">
                                     <div class="ui image">
                                         <i class="arrows alternate icon"></i>

diff --git a/galette/templates/default/pages/import.html.twig b/galette/templates/default/pages/import.html.twig
index fa34a351e4da59be1dd0dbd11b777f5738b0d82d..326b945210747bf0b85cd77a0ced4a7961132cac 100644 (file)
--- a/galette/templates/default/pages/import.html.twig
+++ b/galette/templates/default/pages/import.html.twig
@@ -78,7 +78,7 @@
                             {{ _T('Upload new file') }}
                         </div>
                         <div class="active content field">
-                            <div class="field">
+                            <div class="field wide">
                                 <div class="ui file action input">
                                     <input type="file" name="new_file" accept="text/csv" id="new_file"/>
                                     <label for="new_file" class="ui button">
@@ -91,18 +91,20 @@
                     </div>
                 </div>
                 <div class="ui basic center aligned segment">
-                    <button type="submit" name="upload" id="upload" class="ui primary labeled icon button">
-                        <i class="upload icon" aria-hidd="true"></i>
-                        {{ _T('Upload file') }}
-                    </button>
-                    <a
-                        href="{{ url_for('importModel') }}"
-                        class="ui labeled icon button"
-                    >
-                        <i class="cogs icon" aria-hidden="true"></i>
-                        {{ _T('Configure import model') }}
-                    </a>
-                    {% include "components/forms/csrf.html.twig" %}
+                    <div class="ui wrapping spaced buttons">
+                        <button type="submit" name="upload" id="upload" class="ui primary labeled icon button">
+                            <i class="upload icon" aria-hidd="true"></i>
+                            {{ _T('Upload file') }}
+                        </button>
+                        <a
+                            href="{{ url_for('importModel') }}"
+                            class="ui labeled icon button"
+                        >
+                            <i class="cogs icon" aria-hidden="true"></i>
+                            {{ _T('Configure import model') }}
+                        </a>
+                        {% include "components/forms/csrf.html.twig" %}
+                    </div>
                 </div>
             </form>
 {% endblock %}

diff --git a/galette/templates/default/pages/import_model.html.twig b/galette/templates/default/pages/import_model.html.twig
index 1a6ead0194369cba3a3f14b61fcb931cfae13ea1..bf05dc49d55eb65f81c1ee9057f9bf6d7c21813d 100644 (file)
--- a/galette/templates/default/pages/import_model.html.twig
+++ b/galette/templates/default/pages/import_model.html.twig
@@ -31,21 +31,23 @@
     {% endfor %}
     </table>
     <div class="ui basic center aligned segment">
-        <a class="ui labeled icon primary button" href="{{ url_for('getImportModel') }}">
-            <i class="file csv icon" aria-hidden="true"></i>
-            {{ _T('Generate empty CSV file') }}
-        </a>
-        {% if not defaults_loaded %}
-        <a
-            id="delete"
-            class="ui labeled icon button delete tooltip"
-            href="{{ url_for('importModel') }}?remove=true"
-            title="{{ _T('Remove model and back to defaults') }}"
-        >
-            <i class="trash icon" aria-hiden="true"></i>
-            {{ _T('Remove model') }}
-        </a>
-        {% endif %}
+        <div class="ui wrapping spaced buttons">
+            <a class="ui labeled icon primary button" href="{{ url_for('getImportModel') }}">
+                <i class="file csv icon" aria-hidden="true"></i>
+                {{ _T('Generate empty CSV file') }}
+            </a>
+            {% if not defaults_loaded %}
+            <a
+                id="delete"
+                class="ui labeled icon button delete tooltip"
+                href="{{ url_for('importModel') }}?remove=true"
+                title="{{ _T('Remove model and back to defaults') }}"
+            >
+                <i class="trash icon" aria-hiden="true"></i>
+                {{ _T('Remove model') }}
+            </a>
+            {% endif %}
+        </div>
     </div>
 </div>
 <div class="ui{{ tab == 'change' ? ' active' }} tab segment" data-tab="change">

diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 5080c3fc72e21c4ae8e977e6b030776e763054e0..eb1aca64f2efcff418d8ff41ff902395a1841665 100644 (file)
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -42,7 +42,7 @@
                     </div>
                 </div>
                 <div class="column">
-                    <div class="field ui items">
+                    <div class="field wide ui items">
                         <label>{{ _T("Logo:") }}</label>
                         <div class="item">
         {% if logo.isCustom() %}
@@ -533,7 +533,7 @@
     {% endif %}
         </div>{# /tab segment #}
         <div class="ui{{ tab == 'labels' ? ' active' }} tab segment" data-tab="labels">
-            <div class="ui two column grid">
+            <div class="ui stackable two column grid">
                 <div class="column">
                     <div class="{% if required.pref_etiq_marges_v is defined and required.pref_etiq_marges_v == 1 %}required {% endif %}field">
                         <label for="pref_etiq_marges_v">{{ _T("Vertical margins:") }}</label>
@@ -608,12 +608,12 @@
                     {{ _T("Each card is 75mm width and 40mm height. Each page contains 2 columns and 6 rows.<br/>Double check margins and spacings ;)")|raw }}
                 </div>
             </div>
-            <div class="ui two column grid">
+            <div class="ui stackable two column grid">
                 <div class="column">
                     <div class="field">
                         <label for="pref_card_abrev">{{ _T("Short Text (Card Center):") }}</label>
                         <div class="ui action input">
-                            <input type="text" name="pref_card_abrev" id="pref_card_abrev" value="{{ pref.pref_card_abrev }}" size="10" maxlength="10"/>
+                            <input type="text" name="pref_card_abrev" id="pref_card_abrev" value="{{ pref.pref_card_abrev }}" maxlength="10"/>
                             <a
                                 href="{{ url_for("dynamicTranslations", {"text_orig": pref.pref_card_abrev|escape}) }}"
                                 class="tooltip ui icon button{% if pref.pref_card_abrev is empty %} disabled{% endif %}"
@@ -628,7 +628,7 @@
                     <div class="field">
                         <label for="pref_card_strip">{{ _T("Long Text (Bottom Line):") }}</label>
                         <div class="ui action input">
-                            <input type="text" name="pref_card_strip" id="pref_card_strip" value="{{ pref.pref_card_strip }}" size="40" maxlength="65"/>
+                            <input type="text" name="pref_card_strip" id="pref_card_strip" value="{{ pref.pref_card_strip }}" maxlength="65"/>
                             <a
                                 href="{{ url_for("dynamicTranslations", {"text_orig": pref.pref_card_strip|escape}) }}"
                                 class="tooltip ui icon button{% if pref.pref_card_strip is empty %} disabled{% endif %}"
@@ -662,7 +662,7 @@
                             <i class="circular small inverted primary icon info tooltip" title="{{ _T("Hexadecimal color notation: #RRGGBB") }}"></i>
                         </div>
                     </div>{# /group fields #}
-                    <div class="field ui items">
+                    <div class="field wide ui items">
                         <label>{{ _T("Logo:") }}</label>
                         <div class="item">
     {% if print_logo.isCustom() %}

diff --git a/ui/semantic/galette/globals/site.overrides b/ui/semantic/galette/globals/site.overrides
index 0795720e498a28311d48f576b8ba1f64800f1d9f..9fe77bb36a2b5dfeba2d3aa8b939a28e04cce09a 100644 (file)
--- a/ui/semantic/galette/globals/site.overrides
+++ b/ui/semantic/galette/globals/site.overrides
@@ -249,6 +249,16 @@ footer .ui.horizontal.list > .item{
   color: @textColor;
 }
 
+/*-------------------------
+      Spacings
+--------------------------*/
+.filters .segment .button,
+.infoline .segments .fitted.segment .label,
+.infoline .segments .fitted.segment .tiny.button,
+#groups_field .button {
+  margin-bottom: 0.75em;
+}
+
 /*-----------------------
     Sortable items
 ------------------------*/

diff --git a/ui/semantic/galette/views/item.overrides b/ui/semantic/galette/views/item.overrides
index 6b676878bbd63051f4ee1ccc71ad296fb6ea646f..0f7a150546349b3e01c7b4178be8ae8c7b2a12c9 100644 (file)
--- a/ui/semantic/galette/views/item.overrides
+++ b/ui/semantic/galette/views/item.overrides
@@ -2,11 +2,22 @@
     Galette Overrides
 *******************************/
 
-.edit-member .fieldset-1 .ui.items > .item {
-  & > .image {
-    display: none;
+.edit-member {
+  .fieldset-1 .ui.items > .item {
+    & > .image {
+      display: none;
+    }
+    & > .content {
+      padding: 0;
+    }
   }
-  & > .content {
-    padding: 0;
+}
+
+.advanced-search {
+  #gs_sortable,
+  #fs_sortable {
+    .ui.items > .item .image {
+      width: auto !important;
+    }
   }
 }