On phone reset layout to default on mobile with checkboxes

openstad · Sep 5, 2023 · 9b550dd · 9b550dd
1 parent 2fe0006
commit 9b550dd
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 13 deletions.
diff --git a/packages/cms/lib/modules/resource-overview-widgets/lib/arrangeFields.js b/packages/cms/lib/modules/resource-overview-widgets/lib/arrangeFields.js
@@ -55,7 +55,7 @@ module.exports = (self, options) => {
         {
             name: 'tags',
             label: 'Tags',
-            fields: ['displayTagFilters', 'tagType', 'showTagTypeLabels']
+            fields: ['displayTagFilters', 'tagType', 'showTagTypeLabels', 'displayGroupsAsSelectBoxes']
         },
         {
             name: 'include_exclude',

diff --git a/packages/cms/lib/modules/resource-overview-widgets/lib/fields.js b/packages/cms/lib/modules/resource-overview-widgets/lib/fields.js
@@ -561,9 +561,24 @@ module.exports = [
       }
     ],
   },
+  {
+    name: 'displayGroupsAsSelectBoxes',
+    label: 'Display the tag groups as select boxes (only when Filter & Idea layout is set to columns)',
+    type: 'boolean',
+    choices: [
+      {
+        label: 'Yes',
+        value: true
+      },
+      {
+        label: 'No',
+        value: false,
+      }
+    ],
+  },
   {
     name: 'displayModeColumns',
-    label: 'Filter and idea layout',
+    label: 'Filter & idea layout',
     type: 'select',
     choices: [
       {

diff --git a/packages/cms/lib/modules/resource-overview-widgets/public/css/main.less b/packages/cms/lib/modules/resource-overview-widgets/public/css/main.less
@@ -4,6 +4,10 @@
   justify-content: space-between;
   gap: 8px;
 
+  @media @phone {
+    flex-direction: column;
+  }
+
   #ideas {
     flex-grow: 1;
   }
@@ -23,6 +27,41 @@
   }
 }
 
+.tag-checkbox-container{
+  margin: 0;
+  padding: 0;
+}
+
+.resource-overview-tag-select-group {
+  margin-bottom: 8px;
+  box-shadow: 0 4px 20px 0 rgba(42, 18, 18, 0.12);
+  background-color: #ffffff;
+  border: 0;
+  color: #000;
+  font-weight: 500;
+
+  >p {
+    text-align: left;
+    margin: 0;
+    border: none;
+  }
+
+  > div {
+    display: none;
+  }
+
+  &.selected >div{
+    display: flex;
+    padding-top: 8px;
+    padding-left: 8px;
+    padding-right: 8px;
+    // border-left: #000 1px solid;
+    // border-right: #000 1px solid;
+    // border-bottom: #000 1px solid;
+
+  }
+}
+
 .search-wrapper {
   width: 100%;
   position: relative;

diff --git a/packages/cms/lib/modules/resource-overview-widgets/public/js/main.js b/packages/cms/lib/modules/resource-overview-widgets/public/js/main.js
@@ -53,6 +53,12 @@ $(document).ready(function () {
 		showVoteCreator();
 		selectIdea(window.ideaId, true);
 	}
+
+	// Add toggle to the select-groups
+	document.querySelectorAll(".resource-overview-tag-select-group").forEach((node) => {
+		node.addEventListener("click", () => {
+		node.classList.toggle("selected");
+	})});
 
 	if ($('#ideaList li').length) {
 		// Make sure the gridder-mouse-over is visible when tabbing through the buttons
@@ -74,4 +80,10 @@ $(document).on('openstadAjaxRefresh', function () {
 			selectIdea(ideaId, true);
 		}
 	}
-});
+
+	// Add toggle to the select-groups
+	document.querySelectorAll(".resource-overview-tag-select-group").forEach((node) => {
+		node.addEventListener("click", () => {
+		node.classList.toggle("selected");
+	})});
+});
diff --git a/...resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk b/...resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk
@@ -1,13 +1,27 @@
 {% for key, tagList in data.widget.groupedOpenstadTags %}
-    <div id="tag-group-container-{{ 'tags' if key === 'undefined' else key }}" class="tag-group-container">
-        <p class="{{ tagGroupPrefix }}tag-group-title">{{ "Overig" if key === 'undefined' or key === 'null' else key }}</p>
-        <div id="{{ tagGroupPrefix }}tag-group-{{ 'tags' if key === 'undefined' else key }}" class="{{ tagGroupPrefix }}tag-group {{ 'columned' if data.widget.displayModeColumns else '' }}">
-
-            {% if data.widget.displayModeColumns%}
-                {% include 'includes/controls/tag-includes/tag-checkboxes.njk' %}
-            {% else %}
-                {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
-            {% endif%}
+
+    {% if data.widget.displayModeColumns and data.widget.displayGroupsAsSelectBoxes%}
+
+        <div id="tag-group-container-{{ 'tags' if key === 'undefined' else key }}" class="tag-group-container">
+            <div class="resource-overview-tag-select-group">
+                <p class="{{ tagGroupPrefix }}tag-group-title default-select">{{ "Overig" if key === 'undefined' or key === 'null' else key }}</p>
+                <div id="{{ tagGroupPrefix }}tag-group-{{ 'tags' if key === 'undefined' else key }}" class="{{ tagGroupPrefix }}tag-group columned }}">
+                    {% include 'includes/controls/tag-includes/tag-group-selects.njk' %}
+                </div>
+            </div>
+        </div>
+
+    {% else %}
+        <div id="tag-group-container-{{ 'tags' if key === 'undefined' else key }}" class="tag-group-container">
+            <p class="{{ tagGroupPrefix }}tag-group-title">{{ "Overig" if key === 'undefined' or key === 'null' else key }}</p>
+            <div id="{{ tagGroupPrefix }}tag-group-{{ 'tags' if key === 'undefined' else key }}" class="{{ tagGroupPrefix }}tag-group {{ 'columned' if data.widget.displayModeColumns else '' }}">
+
+                {% if data.widget.displayModeColumns%}
+                    {% include 'includes/controls/tag-includes/tag-checkboxes.njk' %}
+                {% else %}
+                    {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+                {% endif%}
+            </div>
         </div>
-    </div>
+    {% endif %}
 {% endfor %}
diff --git a/...ules/resource-overview-widgets/views/includes/controls/tag-includes/tag-group-selects.njk b/...ules/resource-overview-widgets/views/includes/controls/tag-includes/tag-group-selects.njk
@@ -0,0 +1,17 @@
+{% for tag in tagList %}
+    {% if data.widget.isTagSelected(tag, data.query) %}
+            <div class="tag-checkbox-container">
+                <a href="{{ data.widget.formatTagRemoveUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
+                    <div class="tag-checkbox selected"></div>
+                    <p>{{ tag.name }}</p>
+                </a>
+            </div>
+    {% else %}
+            <div class="tag-checkbox-container">
+                <a href="{{ data.widget.formatTagSelectUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
+                <div class="tag-checkbox"></div>
+                <p>{{ tag.name }}</p>
+            </a>
+            </div>
+    {% endif %}
+{% endfor %}