Skip to content
This repository was archived by the owner on Sep 8, 2025. It is now read-only.

Feature/prefix tag container with unique #398

Merged
LorenzoJokhan merged 11 commits into from
Sep 4, 2023
Merged

Feature/prefix tag container with unique #398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
40a4e10
Used includes to make it easier to manage tag specific code and added…
LorenzoJokhan Jun 6, 2023
45acb4d
Added classname for easier styling of taggroup-with-prefix
LorenzoJokhan Jun 6, 2023
9602aa1
Added form tag group id and class to resource-form-widget tags
LorenzoJokhan Jun 6, 2023
e90dabe
The resource-tags should not float left
LorenzoJokhan Jun 6, 2023
2ad0552
Changed css and looks standardized the same look across usages of tag…
LorenzoJokhan Jun 6, 2023
eb249ec
Spelling and styling
LorenzoJokhan Jun 6, 2023
dcc621a
Update packages/cms/lib/modules/resource-overview-widgets/views/inclu…
Jun 13, 2023
2aeaf51
Update packages/cms/lib/modules/resource-overview-widgets/views/inclu…
Jun 26, 2023
4ed081f
Merge branch 'development' into feature/prefix-tag-container-with-uni…
LorenzoJokhan Sep 4, 2023
51adb9b
Change look of tag
LorenzoJokhan Sep 4, 2023
e37f299
Restored the styles to the original format
LorenzoJokhan Sep 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions packages/cms/lib/modules/resource-form-widgets/views/includes/fields/tags.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 %}