Resource overview will become master detail if displayModeColumns is …

…set to true
openstad · Sep 4, 2023 · 4e3e860 · 4e3e860 · github-actions · Sep 4, 2023
1 parent f1ea11b
commit 4e3e860
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 9 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',

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,21 @@ module.exports = [
       }
     ],
   },
+  {
+    name: 'displayModeColumns',
+    label: 'Display the filters and ideas next to eachother (tags will become checkboxes)',
+    type: 'boolean',
+    choices: [
+      {
+        label: 'Yes',
+        value: true
+      },
+      {
+        label: 'No',
+        value: 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,32 @@
+.ideasList.columns {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 8px;
+
+  #ideas {
+    flex-grow: 1;
+  }
+
+  .resource-filter-row{
+    width: 100%;
+    display: block;
+    div {
+      margin-bottom: 8px;
+      width: 100% !important;
+      display: block;
+
+      * {
+        width: 100% !important;
+      }
+    }
+  }
+
+
+}
+
+
+
 .search-wrapper {
   width: 100%;
   position: relative;
@@ -105,6 +134,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,6 +188,23 @@ 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;
+}
+
 .mobile-tag-group-title, .tag-group-title {
   margin: 8px 0px;
 }

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,13 @@
 {% 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' %}
+        <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>
 {% 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/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 %}