Skip to content

Commit

Permalink
Merge pull request #398 from openstad/feature/prefix-tag-container-wi…
Browse files Browse the repository at this point in the history 
…th-unique-id

Feature/prefix tag container with unique
  • Loading branch information
@LorenzoJokhan
LorenzoJokhan committed Sep 4, 2023
2 parents 9c45225 + e37f299 commit f1ea11b
Show file tree
Hide file tree
Showing 9 changed files with 142 additions and 125 deletions.
16 changes: 12 additions & 4 deletions packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
and data.groupedOpenstadTags[field.tagType]
and data.groupedOpenstadTags[field.tagType].length %}

<div id="resource-form-tag-group-{{field.tagType}}" class="form-tag-group">
{% for tag in data.groupedOpenstadTags[field.tagType] %}

<div class="checkbox">
<input
type="checkbox"
Expand All @@ -14,8 +16,10 @@
{% if field.idea.tags %}checked{% endif %}
/>
<label for="checkbox-{{loop.index}}-{{tag.id}}" class="checkbox-label">{{tag.name}}</label>
</div>
</div>
{% endfor %}
</div>

{% endif %}
</div>

Expand All @@ -25,16 +29,18 @@
{% set outer_loop = loop %}

{% if field.showTagTypeLabels %}
{% if outer_loop.length > 1 and key !== 'undefined' %}
{% if outer_loop.length > 1 and key !== 'undefined' and key !== 'null'%}
<p>{{key}}</p>
{% endif %}

{% if outer_loop.length > 1 and key == 'undefined' %}
{% if outer_loop.length > 1 and key == 'undefined' or key == 'null' %}
<p>Overig</p>
{% endif %}
{% endif %}

{% for tag in tagList %}
<div id="resource-form-tag-group-{{key if key !=='undefined' and key !== 'null' else 'Overig'}}" class="form-tag-group">

{% for tag in tagList %}
<div class="checkbox">
<input
type="checkbox"
Expand All @@ -47,6 +53,8 @@
<label for="checkbox-{{outer_loop.index}}-{{loop.index}}-{{tag.id}}" class="checkbox-label">{{tag.name}}</label>
</div>
{% endfor %}
</div>

{% endfor %}
{% endif %}
</div>
107 changes: 53 additions & 54 deletions packages/cms/lib/modules/resource-overview-widgets/public/css/main.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,69 +99,68 @@ input.search {
margin: 15px 0;
}

.resource-tag {
border: solid 2px #ec0000;
}


.resource-tag {
padding: 0 20px;
height: 40px;
margin: 5px 0;
border-radius: 20px;
border: solid 2px #164995;
display: inline-block;
//height minus bordersize
line-height: 36px;
text-align: center;
font-size: 17px;
color: black;
font-weight: bold;
position: relative;
padding-left: 40px;
transition: all 200ms ease-in;
overflow: hidden;
.mobile-tag-group, .tag-group {
display: flex;
flex-direction: row;
justify-content: start;
flex-wrap: wrap;
gap: 8px;
}
.mobile-tag-group a, .tag-group a {
color: #000;
text-decoration: none;
padding: 0;
margin: 0;

@media @phone {
float: left;
clear: left;
margin: 5px 0;
}

&::after {
content: '+';
position: absolute;
top: -1px;
left: 15px;
font-size: 22px;
}

transition: all 200ms ease-in;
}
.mobile-tag-group a:hover, .tag-group a:hover {
&:hover, &:active {
text-decoration: none;
transform: scale(1.03);
}
}

&--selected {
background: #164995 ;
color: white ;
padding-right: 40px;
padding-left: 20px;

&::after {
content: '✕';
position: absolute;
top: 11px;
right: 15px;
font-size: 17px;
line-height: 1;
left: auto;
}
.mobile-tag-group .tag, .tag-group .tag {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8px 24px;
border-radius: 32px;
border: 2px solid #164995;

&:hover, &:active {
&.large {
padding: 4px 20px;
}

&:after {
content:'a';
margin-left: 12px;
content: '+';
color: #000;
font-weight: bold;
font-size: 2rem;
vertical-align: middle;
}

&.selected {
background: #164995;
color: white;
&:after {
margin-left: 12px;
content: 'x';
color: white;
}
font-size: 1.5rem;
vertical-align: middle;
}
}
}
.mobile-tag-group-title, .tag-group-title {
margin: 8px 0px;
}

.tag p {
margin: 0;
}

.search-wrapper button[type="submit"],.search-wrapper .search-reset {
Expand Down
8 changes: 8 additions & 0 deletions ...resource-overview-widgets/views/includes/controls/tag-includes/group-variants/grouped.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{% 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>
</div>
{% endfor %}
5 changes: 5 additions & 0 deletions ...urce-overview-widgets/views/includes/controls/tag-includes/group-variants/non-grouped.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div id="{{ tagGroupPrefix }}tag-group-none }}" class="{{ tagGroupPrefix }}tag-group">
{% for key, tagList in data.widget.groupedOpenstadTags %}
{% include 'includes/controls/tag-includes/tag-buttons.njk' %}
{% endfor %}
</div>
5 changes: 5 additions & 0 deletions ...rce-overview-widgets/views/includes/controls/tag-includes/group-variants/single-group.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div id="{{ tagGroupPrefix }}tag-group-{{ data.widget.tagType }}" class="{{ tagGroupPrefix }}tag-group">
{% for tagList in [data.widget.groupedOpenstadTags[data.widget.tagType]] %}
{% include 'includes/controls/tag-includes/tag-buttons.njk' %}
{% endfor %}
</div>
17 changes: 17 additions & 0 deletions ...ib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tag-buttons.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{% for tag in tagList %}
{% if data
.widget
.isTagSelected(tag, data.query) %}
<a href="{{ data.widget.formatTagRemoveUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
<div class="tag selected">
<p>{{ tag.name }}</p>
</div>
</a>
{% else %}
<a href="{{ data.widget.formatTagSelectUrl(tag, data.query) }}" class="openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">
<div class="tag">
<p>{{ tag.name }}</p>
</div>
</a>
{% endif %}
{% endfor %}
12 changes: 12 additions & 0 deletions ...b/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_desktop.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{% set tagGroupPrefix = "" %}
<div class="resource-overview-tags-container hidden-xs">
{% if data.widget.tagType %}
{% include 'includes/controls/tag-includes/group-variants/single-group.njk' %}
{% endif %}
{% if not data.widget.showTagTypeLabels and not data.widget.tagType %}
{% include 'includes/controls/tag-includes/group-variants/non-grouped.njk' %}
{% endif %}
{% if data.widget.showTagTypeLabels and data.widget.tagType === '' %}
{% include 'includes/controls/tag-includes/group-variants/grouped.njk' %}
{% endif %}
</div>
26 changes: 26 additions & 0 deletions ...ib/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_mobile.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{% set tagGroupPrefix = "mobile-" %}
<div id="filter-tags-modal" class="content-modal content-modal--l">
<div class="content-modal-content">
<div class="content-modal-body">
<h3 class="filter-tags-modal-title">Filter op tags</h3>
<a href="#closed" class="content-modal-close">
<img src="{{ data.siteUrl }}/modules/openstad-assets/img/close.svg" width="13" height="13"/>
</a>
{% if data.widget.tagType %}
{% include 'includes/controls/tag-includes/group-variants/single-group.njk' %}
{% endif %}
{% if not data.widget.showTagTypeLabels and not data.widget.tagType %}
{% include 'includes/controls/tag-includes/group-variants/non-grouped.njk' %}
{% endif %}
{% if data.widget.showTagTypeLabels and data.widget.tagType === '' %}
{% include 'includes/controls/tag-includes/group-variants/grouped.njk' %}
{% endif %}
<br/>
<div>
<a href="#closed" class="filled-button stretch">
Toon resultaten
</a>
</div>
</div>
</div>
</div>
71 changes: 4 additions & 67 deletions packages/cms/lib/modules/resource-overview-widgets/views/includes/controls/tags.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,70 +4,7 @@
Filter op tags
</a>
</div>
<div class="resource-overview-tags-container hidden-xs">

{% if data.widget.tagType and data.widget.groupedOpenstadTags[data.widget.tagType] and data.widget.groupedOpenstadTags[data.widget.tagType].length %}
{% for tag in data.widget.groupedOpenstadTags[data.widget.tagType] %}
{% if data.widget.isTagSelected(tag, data.query) %}
<a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}asdfsaf</a>
{% else %}
<a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}fasfasfds</a>
{% endif %}
{% endfor %}
{% endif %}




{% if data.widget.tagType === '' and data.widget.groupedOpenstadTags %}

{% for key, tagList in data.widget.groupedOpenstadTags %}

{% if data.widget.showTagTypeLabels %}
<div>

<p> {{ "tags" if key === 'undefined' else key }}</p>
{% for tag in tagList %}
{% if data.widget.isTagSelected(tag, data.query) %}
<a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
{% else %}
<a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
{% endif %}
{% endfor %}
</div>
{% else%}
{% for tag in tagList %}
{% if data.widget.isTagSelected(tag, data.query) %}
<a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
{% else %}
<a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
{% endif %}
{% endfor %}
{% endif%}
{% endfor %}
{% endif %}
</div>
<div id="filter-tags-modal" class="content-modal content-modal--l">
<div class="content-modal-content">
<div class="content-modal-body">
<h3 class="filter-tags-modal-title "> Filter op tags </h3>
<a href="#closed" class="content-modal-close">
<img src="{{data.siteUrl}}/modules/openstad-assets/img/close.svg" width="13" height="13">
</a>
{% for tag in data.widget.openstadTags %}
{% if data.widget.isTagSelected(tag, data.query) %}
<a href="{{data.widget.formatTagRemoveUrl(tag, data.query)}}" class="resource-tag resource-tag--selected openstad-ajax-refresh-link resource-tag--{{tag.id}}" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
{% else %}
<a href="{{data.widget.formatTagSelectUrl(tag, data.query)}}" class="resource-tag openstad-ajax-refresh-link resource-tag--{{tag.id}}" data-reset-pagination="1" data-reset-hash="1">{{tag.name}}</a>
{% endif %}
{% endfor %}
<br />
<div>
<a href="#closed" class="filled-button stretch">
Toon resultaten
</a>
</div>
</div>
</div>
</div>
{% endif %}
<!-- On desktop screen -->
{% include 'includes/controls/tag-includes/tags_desktop.njk' %}
<!-- On mobile screen -->
{% include 'includes/controls/tag-includes/tags_mobile.njk' %} {% endif %}

1 comment on commit f1ea11b

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Published new image: openstad/frontend:development-f1ea11b

Please sign in to comment.