Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/prefix tag container with unique #398

Merged
merged 11 commits into from Sep 4, 2023
Merged

Feature/prefix tag container with unique #398

Show file tree
Hide file tree
Changes from 6 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…
LorenzoJokhan Jun 13, 2023
2aeaf51
Update packages/cms/lib/modules/resource-overview-widgets/views/inclu…
LorenzoJokhan 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.
Jump to
Jump to file
Failed to load files.
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
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>
102 changes: 48 additions & 54 deletions packages/cms/lib/modules/resource-overview-widgets/public/css/main.less
View file
Open in desktop
Expand Up @@ -99,69 +99,63 @@ 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: #164995;
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: 0px 8px;
border-radius: 2px;
border: 2px solid #164995;

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

&:after {
content:'a';
margin-left: 4px;
content: '+';
color: #164995;
}

&.selected {
background: #164995;
color: white;
&:after {
margin-left: 8px;
content: 'x';
color: white;
}
}
}
}
.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
@@ -0,0 +1,8 @@
{% for key, tagList in data.widget.groupedOpenstadTags %}
<div class="tag-group-container">
LorenzoJokhan marked this conversation as resolved.
Show resolved Hide resolved
<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
@@ -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
@@ -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
@@ -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 %}
11 changes: 11 additions & 0 deletions ...b/modules/resource-overview-widgets/views/includes/controls/tag-includes/tags_desktop.njk
View file
Open in desktop
@@ -0,0 +1,11 @@
<div class="resource-overview-tags-container hidden-xs">
LorenzoJokhan marked this conversation as resolved.
Show resolved Hide resolved
{% 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
@@ -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
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 %}