Merge pull request #430 from openstad/feature/tag-group-styling

Feature/tag group styling
openstad · Sep 13, 2023 · 2ede37e · 2ede37e · github-actions · Sep 13, 2023
2 parents 12a3bd2 + 2e7ef36
commit 2ede37e
Show file tree

Hide file tree

Showing 13 changed files with 225 additions and 14 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
@@ -15,7 +15,7 @@ module.exports = (self, options) => {
         {
             name: 'displaySettings',
             label: 'Display settings',
-            fields: ['displayTitle', 'displayRanking', 'displayLabel', 'displaySummary', 'displayDescription', 'displayVoteProgressBar', 'displayVoteForCount', 'displayVoteAgainstCount', 'displayArgumentsCount', 'displayTheme', 'displayArea', 'showVoteCounter', 'displayShareButtons', 'displayEditLinkForModerator', 'editUrl', 'displayVoteCaption', 'voteCaption']
+            fields: ['displayTitle', 'displayRanking', 'displayLabel', 'displaySummary', 'displayDescription', 'displayVoteProgressBar', 'displayVoteForCount', 'displayVoteAgainstCount', 'displayArgumentsCount', 'displayTheme', 'displayArea', 'showVoteCounter', 'displayShareButtons', 'displayEditLinkForModerator', 'editUrl', 'displayVoteCaption', 'voteCaption', 'displayModeColumns']
         },
         {
             name: 'gridder',
@@ -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,6 +561,37 @@ 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 & idea layout',
+    type: 'select',
+    choices: [
+      {
+        label: 'Columns: Kolommen gebruiken, en ook lijstweergave met selectboxes',
+        value: true
+      },
+      {
+        label: 'Full width (default): houden zoals nu de standaard is',
+        value: false,
+      }
+    ],
+    def: false
+  },
   {
     name: 'displaySorting',
     label: 'Display sorting',

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
@@ -1,3 +1,67 @@
+.ideasList.columns {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 8px;
+
+  @media @phone {
+    flex-direction: column;
+  }
+
+  #ideas {
+    flex-grow: 1;
+  }
+
+  .resource-filter-row{
+    width: 100%;
+    display: block;
+    div {
+      margin-bottom: 8px;
+      width: 100% !important;
+      display: block;
+
+      * {
+        width: 100% !important;
+      }
+    }
+  }
+}
+
+.tag-checkbox-container{
+  margin: 0;
+  padding: 0px 16px;
+}
+
+.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;
@@ -105,6 +169,10 @@ input.search {
   justify-content: start;
   flex-wrap: wrap;
   gap: 8px;
+
+  &.columned {
+    flex-direction: column;
+  }
 }
 .mobile-tag-group a, .tag-group a {
   color: #000;
@@ -155,8 +223,28 @@ input.search {
     } 
   }
 } 
+
+.mobile-tag-group .tag-checkbox, .tag-group .tag-checkbox {
+  display: inline-block;
+  padding: 8px 8px;
+  border: 2px solid #164995;
+
+
+  &.selected {
+    background: #164995;
+    color: white;
+  }
+}
+
+.tag-checkbox + p {
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: 500;
+}
+
 .mobile-tag-group-title, .tag-group-title {
   margin: 8px 0px;
+  font-weight: 500;
 }
 
 .tag  p {

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,16 @@ $(document).ready(function () {
 		showVoteCreator();
 		selectIdea(window.ideaId, true);
 	}
+
+	var nodes = document.querySelectorAll(".resource-overview-tag-select-group");
+
+	// Add toggle to the select-groups
+	for(var i = 0; i < nodes.length; i++) {
+		var node = nodes[i];
+		node.addEventListener("click", function() {
+			node.classList.toggle("selected");
+		});
+	}
 
 	if ($('#ideaList li').length) {
 		// Make sure the gridder-mouse-over is visible when tabbing through the buttons
@@ -74,4 +84,15 @@ $(document).on('openstadAjaxRefresh', function () {
 			selectIdea(ideaId, true);
 		}
 	}
-});
+
+
+	var nodes = document.querySelectorAll(".resource-overview-tag-select-group");
+
+	// Add toggle to the select-groups
+	for(var i = 0; i < nodes.length; i++) {
+		var node = nodes[i];
+		node.addEventListener("click", function() {
+			node.classList.toggle("selected");
+		});
+	}
+});
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/area.html b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/area.html
@@ -1,9 +1,11 @@
 {% if data.widget.displayAreaFilter %}
+<div>
 <label for="resource-overview-area" class="sr-only">Selecteer een gebied: </label>
 <select id="resource-overview-area" class="default-select openstad-ajax-refresh-input" name="area" data-reset-pagination="1">
   <option value="">Alle gebieden</option>
   {% for area in data.widget.areas %}
   <option value="{{area.value}}" {% if area.value === data.query.area %} selected {% endif %}>{{area.value}}</option>
   {% endfor %}
 </select>
+</div>
 {% endif %}
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/sort.html b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/sort.html
@@ -1,4 +1,6 @@
 {% if data.widget.displaySorting %}
+<div class="sort-wrapper">
+
   <label for="resource-sort-filter" class="sr-only">Sorteren op: </label>
   <select class="default-select ideas-sort-select openstad-ajax-refresh-input" id="resource-sort-filter" name="sort" data-reset-pagination="1">
     {% for selectedSorting in data.widget.selectedSorting %}
@@ -7,4 +9,5 @@
     </option>
     {% endfor %}
   </select>
+  </div>
 {% endif %}
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,8 +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">
-            {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+
+    {% 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>
-    </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>
+    {% endif %}
 {% endfor %}
diff --git a/...urce-overview-widgets/views/includes/controls/tag-includes/group-variants/non-grouped.njk b/...urce-overview-widgets/views/includes/controls/tag-includes/group-variants/non-grouped.njk
@@ -1,5 +1,10 @@
-<div id="{{ tagGroupPrefix }}tag-group-none }}" class="{{ tagGroupPrefix }}tag-group">
+<div id="{{ tagGroupPrefix }}tag-group-none }}" class="{{ tagGroupPrefix }}tag-group {{ 'columned' if data.widget.displayModeColumns else '' }}">
+
     {% for key, tagList in data.widget.groupedOpenstadTags %}
-        {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+        {% if data.widget.displayModeColumns%}
+            {% include 'includes/controls/tag-includes/tag-checkboxes.njk' %}
+        {% else %}
+            {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+        {% endif %}
     {% endfor %}
 </div>
diff --git a/...rce-overview-widgets/views/includes/controls/tag-includes/group-variants/single-group.njk b/...rce-overview-widgets/views/includes/controls/tag-includes/group-variants/single-group.njk
@@ -1,5 +1,11 @@
-<div id="{{ tagGroupPrefix }}tag-group-{{ data.widget.tagType }}" class="{{ tagGroupPrefix }}tag-group">
+<div id="{{ tagGroupPrefix }}tag-group-{{ data.widget.tagType }}" class="{{ tagGroupPrefix }}tag-group {{ 'columned' if data.widget.displayModeColumns else '' }}">
         {% for tagList in [data.widget.groupedOpenstadTags[data.widget.tagType]] %}
-                {% include 'includes/controls/tag-includes/tag-buttons.njk' %}
+
+        {% if data.widget.displayModeColumns%}
+                {% include 'includes/controls/tag-includes/tag-checkboxes.njk' %}
+                 {% else %}
+                        {% include 'includes/controls/tag-includes/tag-buttons. njk' %}
+                  {% endif%}
+
         {% endfor %}
 </div>
diff --git a/...modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-checkboxes.njk b/...modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-checkboxes.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 %}
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 %}
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/theme.html b/packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/theme.html
@@ -1,9 +1,11 @@
 {% if data.widget.displayThemeFilter %}
+<div>
 <label for="resource-theme-filter" class="sr-only">Selecteer een thema: </label>
 <select class="default-select openstad-ajax-refresh-input" id="resource-theme-filter" name="theme" data-reset-pagination="1">
   <option value="">Alle thema's</option>
   {% for theme in data.widget.themes %}
   <option value="{{theme.value}}" {% if theme.value === data.query.theme %} selected {% endif %}>{{theme.value}}</option>
   {% endfor %}
 </select>
+</div>
 {% endif %}
diff --git a/packages/cms/lib/modules/resource-overview-widgets/views/widget.html b/packages/cms/lib/modules/resource-overview-widgets/views/widget.html
@@ -10,8 +10,8 @@
 		{% if data.widget.voting %}
 	    {{ voteCreator.showVoteCreator(false, data.widget.ideas, data) }}
 	  {% endif %}
-
-		<div class="ideasList" >
+	  
+		<div class="ideasList {{'columns' if data.widget.displayModeColumns}}" >
 	    {% include 'includes/filters.html' %}
 
 			{% if data.widget.formattedResultCountText %}