Add visual indicator for expanded groups

AmauriC · Mar 29, 2021 · 10b2c00 · 10b2c00
1 parent 9807d3c
commit 10b2c00
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/css/tarteaucitron.css b/css/tarteaucitron.css
@@ -22,6 +22,69 @@ span.tarteaucitronH3 {
 }
 /*****/
 
+/** BETTER MOBILE MODE **/
+@media screen and (max-width: 767px) {
+
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder button,
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronAsk,
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronName {
+        width:100%!important;
+        display: block!important;
+        margin-left: 0!important;
+        margin-right: 0!important;
+        box-sizing: border-box!important;
+    }
+
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder ul .tarteaucitronLine {
+        padding: 16px!important;
+    }
+
+    html body #tarteaucitronRoot #tarteaucitron div#tarteaucitronMainLineOffset .tarteaucitronName {
+        display: none!important;
+    }
+
+    #tarteaucitronServices_mandatory li.tarteaucitronLine .tarteaucitronName span {
+        width: 100%!important;
+        display: inline-block;
+    }
+    li.tarteaucitronLine .tarteaucitronName span {
+        width: 80%!important;
+        display: inline-block;
+    }
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder button.tarteaucitron-toggle-group {
+        width: 10%!important;
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        font-size: 0px;
+        padding: 10px 0;
+    }
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder button.tarteaucitron-toggle-group:before {
+        content: '\0025BE';
+        font-weight:700;
+        font-size: 14px;
+    }
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronIsExpanded button.tarteaucitron-toggle-group:before {
+        content: '\0025B4';
+    }
+}
+@media screen and (min-width: 768px) {
+
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder button.tarteaucitron-toggle-group:after {
+        content: '\0025BE';
+        font-weight:700;
+        font-size: 14px;
+        margin-left: 15px;
+    }
+    html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder .tarteaucitronIsExpanded button.tarteaucitron-toggle-group:after {
+        content: '\0025B4';
+        margin-left: 15px;
+    }
+}
+/****/
+
+
+
 /***
 * Reset CSS
 */

diff --git a/tarteaucitron.js b/tarteaucitron.js
@@ -633,7 +633,11 @@ var tarteaucitron = {
                             document.querySelector('#tarteaucitronServices_' + cat).style.display = 'none';
                             tarteaucitron.addClickEventToId("tarteaucitron-toggle-group-" + cat, function () {
                                 tarteaucitron.userInterface.toggle('tarteaucitronServices_' + cat);
-                                tarteaucitron.userInterface.jsSizing('main');
+                                if (document.getElementById('tarteaucitronServices_' + cat).style.display == 'block') {
+                                    tarteaucitron.userInterface.addClass('tarteaucitronServicesTitle_' + cat, 'tarteaucitronIsExpanded');
+                                } else {
+                                    tarteaucitron.userInterface.removeClass('tarteaucitronServicesTitle_' + cat, 'tarteaucitronIsExpanded');
+                                }
                             });
                             tarteaucitron.addClickEventToId("tarteaucitron-accept-group-" + cat, function () {
                                 tarteaucitron.userInterface.respondAll(true, cat);