Fix preferences tabs display on small screens

[galette.git] / galette / templates / default / pages / preferences.html.twig

diff --git a/galette/templates/default/pages/preferences.html.twig b/galette/templates/default/pages/preferences.html.twig
index 5a8eef96bc56a06d5edcaab4067460a487290dd1..5473a221eb39ebdf39ff59d4fc512877861ee128 100644 (file)
--- a/galette/templates/default/pages/preferences.html.twig
+++ b/galette/templates/default/pages/preferences.html.twig
@@ -2,7 +2,7 @@
 
 {% block content %}
         <form action="{{ url_for('store-preferences') }}" method="post" enctype="multipart/form-data" class="ui form">
-        <div class="ui stackable pointing inverted menu tabbed">
+        <div class="ui stackable pointing inverted wrapping centered fluid menu tabbed">
             <a href="{{ url_for('preferences') }}?tab=general" class="item{{ tab == 'general' ? ' active' }}" data-tab="general">{{ _T("General") }}</a>
             <a href="{{ url_for('preferences') }}?tab=social" class="item{{ tab == 'social' ? ' active' }}" data-tab="social">{{ _T("Social networks") }}</a>
             <a href="{{ url_for('preferences') }}?tab=parameters" class="item{{ tab == 'parameters' ? ' active' }}" data-tab="parameters">{{ _T("Parameters") }}</a>
@@ -944,15 +944,27 @@
                                     $.ajax({
                                         url: '{{ url_for('ajaxMessages') }}',
                                         method: "GET",
-                                        success: function(message) {
-                                            var message_inline = new DOMParser().parseFromString(message, 'text/html');
-                                            var message_content = message_inline.body.querySelectorAll('div.content');
-                                            $('body').toast({
-                                                position: 'bottom right',
-                                                message: message_content,
-                                                showIcon: 'check circle outline',
-                                                class: 'success'
-                                            });
+                                        success: function (values) {
+                                            for (var type in values) {
+                                                var dtime = 0;
+                                                if (type == 'success') {
+                                                    dtime = 'auto';
+                                                }
+                                                $('body')
+                                                    .toast({
+                                                        displayTime: dtime,
+                                                        minDisplayTime: 5000,
+                                                        wordsPerMinute: 80,
+                                                        showProgress: 'bottom',
+                                                        closeIcon: true,
+                                                        position: 'top attached',
+                                                        title: values[type]['title'],
+                                                        message: values[type]['messages'].join('<br/>'),
+                                                        showIcon: values[type]['icon'],
+                                                        class: type
+                                                    })
+                                                ;
+                                            }
                                         }
                                     });
                                 },