Skip to content

Commit

Permalink
[#2741] Add conditional styling for paragraphs inside filter pop-up
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Oct 3, 2024
1 parent 89ad25d commit a34befb
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 68 deletions.
16 changes: 9 additions & 7 deletions src/open_inwoner/components/templates/components/FilterBar/FilterBar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,27 @@
{# Wrapper for multiple filters #}
<div class="filter-bar" id="filterBar">
<div class="filter-bar__mobile-controls">
{% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
{% button icon="close" text=_("Sluiten") hide_text=True icon_outlined=True transparent=True extra_classes="show-controls" %}
<div class="form__actions form__actions--fullwidth form__actions--reset">
{% button bordered=False text=_("Wis alle filters") id="resetFilters" type="button" transparent=True primary=True %}
</div>
</div>
<div class="filter-bar__mobile-button">
<p class="utrecht-paragraph">Filters</p>
{% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
<span class="filter-bar__status-text">Status</span>
</div>
<form class="form" method="{{ method }}"
{% if no_action %}action="" {% else %}action="{% firstof form_action request.path %}" {% endif %}
{% if id %}id="{{ id }}" {% endif %}>
{# Note: each element inside the form is a flex column #}
{{ contents }}

{# Submit button updates on select #}
<div class="form__actions form__actions--fullwidth" id="multiselectFormActions">
<button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
{% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
</button>
</div>
{# Mobile submit button updates on select #}
<div class="form__reload--mobile form__actions form__actions--fullwidth" id="filterFormActions">
<button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
{% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
</button>
</div>
</form>
</div>
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/FilterBar/MultiSelectListbox.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load i18n l10n form_tags icon_tags button_tags %}

<div class="filter-bar__multiselect-listbox multiselect-listbox" id="selectDropdownWrapper">
<div class="multiselect-listbox__modal">
<div class="multiselect-listbox__popup">
<button id="selectButton" type="button" class="button button__select" aria-haspopup="listbox" aria-expanded="false" aria-live="polite">
{% trans 'Status' %}:
{% icon icon="expand_more" icon_position="after" icon_outlined=True %}
Expand Down
1 change: 1 addition & 0 deletions src/open_inwoner/js/components/FilterBar/filterbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ htmx.on('htmx:afterSwap', function (e) {
document.addEventListener('DOMContentLoaded', () => {
const filterBars = document.querySelectorAll(FilterBar.selector)
if (filterBars.length === 0) {
// If filter-bar is disabled, leave be.
console.error('No filter bars found on the page.')
} else {
filterBars.forEach((filterbar) => new FilterBar(filterbar))
Expand Down
6 changes: 5 additions & 1 deletion src/open_inwoner/js/components/FilterBar/multiselect_listbox_checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,11 @@ function initFilterBar() {
checkboxes.forEach((checkbox) => {
checkbox.checked = false
})
calculateAndDisplayCheckedSum() // Recalculate and update the button and sum
calculateAndDisplayCheckedSum() // Recalculate and update the button and sum, even after refresh
const filterBarForm = document.querySelector('#filterBar .form')
if (filterBarForm) {
filterBarForm.submit()
}
})

selectButton.setAttribute('aria-live', 'polite')
Expand Down
94 changes: 67 additions & 27 deletions src/open_inwoner/scss/components/FilterBar/FilterBar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,6 @@
position: relative;
display: inline-block;

&--mobile {
width: 100%;
background-color: var(--color-gray-lightest);
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
margin: 0 0 0 calc(-1 * var(--spacing-medium));
padding: 0;
height: 70vh;
position: fixed;
top: 30vh;
transition: top 2s linear;
z-index: 500;

.multiselect-listbox__modal {
display: block !important;
z-index: 600;
}

.filter-bar__mobile-controls {
display: flex !important;
justify-content: space-between;

@media (min-width: 768px) {
display: none;
}
}
}

// Pop-ups for future multiple filters on-load may go here
.multiselect-listbox__modal {
display: none;
Expand All @@ -46,7 +19,13 @@
padding: var(--spacing-large);
}

.filter-bar__heading,
.filter-bar__status-text {
display: none;
}

.filter-bar__form {
display: none;
margin: 0;
padding: 0 0 0 var(--spacing-small);

Expand Down Expand Up @@ -79,4 +58,65 @@
display: inline;
}
}

// In mobile view all child elements become part of a pop-up
&--mobile {
display: flex;
flex-direction: column;
gap: var(--spacing-giant);
width: 100%;
background-color: var(--color-gray-lightest);
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
margin: 0 0 0 calc(-1 * var(--spacing-large));
padding: var(--spacing-large);
height: 70vh;
position: fixed;
top: 30vh;
transition: top 2s linear;
z-index: 1020;

.multiselect-listbox__popup {
display: block;
z-index: 600;
}

.filter-bar__form {
display: flex !important;
flex-direction: row;
align-items: flex-start;
gap: var(--spacing-extra-large);
}

.filter-bar__mobile-controls {
display: flex;
justify-content: space-between;

.button {
padding: 0;

[class*='icons'] {
font-size: 32px;
}
}

@media (min-width: 768px) {
display: none;
}
}

.button.show-modal {
display: none;
}

.filter-bar__heading {
display: block;
font-size: var(--font-size-body-larger);
font-weight: bold;
}

.filter-bar__status-text {
color: var(--utrecht-document-color);
display: block;
}
}
}
70 changes: 45 additions & 25 deletions src/open_inwoner/scss/components/FilterBar/MultiSelectListbox.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
.filter-bar__multiselect-listbox {
padding: 0;
position: relative;
width: 280px;
width: 100%;

@media (min-width: 768px) {
padding: 1px;
width: 280px;
}

&:has(.show) {
.button__select {
*[class*='icons'] {
display: inline-block;
display: flex;
position: absolute;
right: var(--spacing-large);
top: 8px;
Expand All @@ -22,22 +28,24 @@
}

.button__select {
background-color: var(--color-white);
border: 1px solid var(--color-gray-dark-900);
border-radius: var(--border-radius);
box-sizing: border-box;
color: var(--color-gray-dark);
font-family: var(--font-family-body);
font-size: var(--font-size-body);
height: var(--row-height);
justify-content: space-between;
margin: 0;
padding: var(--spacing-medium) var(--spacing-large);
text-align: left;
max-width: 100%;
display: none;
width: 100%;

@media (min-width: 768px) {
background-color: var(--color-white);
border: 1px solid var(--color-gray-dark-900);
border-radius: var(--border-radius);
box-sizing: border-box;
color: var(--color-gray-dark);
display: flex;
font-family: var(--font-family-body);
font-size: var(--font-size-body);
height: var(--row-height);
justify-content: space-between;
margin: 0;
padding: var(--spacing-medium) var(--spacing-large);
text-align: left;
max-width: 100%;
width: 280px;
}

Expand Down Expand Up @@ -78,17 +86,20 @@
}

.multiselect-listbox__content {
position: absolute;
background-color: var(--color-white);
max-height: calc(6 * 40px);
left: 0;
min-width: 280px;
opacity: 0;
top: 40px;
position: static;
opacity: 1;
width: 100%;
z-index: 1;

@media (min-width: 768px) {
position: absolute;
background-color: var(--color-white);
max-height: calc(6 * 40px);
left: 0;
min-width: 280px;
opacity: 0;
top: 40px;
z-index: 1;
width: 280px;
}

Expand All @@ -98,6 +109,8 @@
overflow-y: auto;

& > .checkbox {
background-color: var(--color-white);
margin-bottom: var(--spacing-medium);
padding: var(--spacing-extra-large) var(--spacing-medium);

.checkbox__input:focus ~ .checkbox__label {
Expand All @@ -113,17 +126,24 @@
outline: var(--focus-border-style) var(--focus-border-width)
var(--color-secondary);
}

@media (min-width: 768px) {
margin-bottom: 0;
}
}

.checkbox:has(input[type='checkbox']) {
display: flex;
justify-content: start;
color: var(--color-gray-dark-900);
border: 1px solid var(--color-gray);
border: 1px solid var(--color-gray-lightest);
border-top: none;
line-height: 0;
padding: var(--spacing-medium) var(--spacing-large);
max-width: 260px;

@media (min-width: 768px) {
border: 1px solid var(--color-gray);
}
}

.checkbox:has(input[type='checkbox']:checked) {
Expand All @@ -142,7 +162,7 @@
display: flex;
flex-direction: row;
flex-wrap: wrap;
color: var(--color-black);
color: var(--utrecht-document-color);
text-decoration: none;
padding: 0 var(--spacing-small) var(--spacing-small) 30px;

Expand Down
1 change: 1 addition & 0 deletions src/open_inwoner/scss/views/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,7 @@

--font-size-body-extra-small: 12px;
--font-size-body-small: var(--utrecht-paragraph-small-font-size);
--font-size-body-larger: 18px;
--font-size-body-large: 20px;
--font-line-height-body-small: 20px;
--font-line-height-body-medium: 24px;
Expand Down
9 changes: 2 additions & 7 deletions src/open_inwoner/templates/pages/cases/list_inner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,13 @@ <h1 class="utrecht-heading-1" id="cases">{{ page_title }} ({{ paginator.count }}
</div>
</div>
<div class="filter-bar__mobile-button">
<p class="utrecht-paragraph filter-bar__heading">Filters</p>
{% button icon="filter_alt" text=_("Filters") icon_outlined=True transparent=True extra_classes="show-modal" %}
<p class="utrecht-paragraph filter-bar__status-text">Status</p>
</div>
<form class="form filter-bar__form" method="GET" id="filter-form" novalidate>
<span class="filter-bar__label">{% trans 'Filter op' %}:</span>
{% include "components/FilterBar/MultiSelectListbox.html" with statusfrequencies=status_freqs %}

{# Mobile submit button updates on select #}
<div class="form__reset--mobile form__actions form__actions--fullwidth" id="filterFormActions">
<button class="button button--primary" type="submit" title="{% trans 'Toon resultaten' %}" aria-label="{% trans 'Toon resultaten' %}" id="filterCases">
{% trans 'Toon' %}<span class="filter-bar__frequency-sum" id="frequencySum">0</span><span id="resultText">{% trans 'resultaten' %}</span>
</button>
</div>
</form>
</div>
{% endif %}
Expand Down

0 comments on commit a34befb

Please sign in to comment.