Fixes inconsistencies regarding mobile menu button state.

This commit is contained in:
mateuswetah 2024-06-13 15:02:48 -03:00
parent ad5210db83
commit e81551085b
3 changed files with 11 additions and 8 deletions

View File

@ -38,7 +38,7 @@
&.horizontal-filters {
.modal-content {
padding: var(--tainacan-container-padding) var(--tainacan-one-column);
padding: calc(var(--tainacan-container-padding) - 12px) var(--tainacan-one-column) var(--tainacan-container-padding) var(--tainacan-one-column);
}
}

View File

@ -192,12 +192,12 @@
break-inside: avoid;
display: inline-block;
vertical-align: text-top;
padding-right: 2.25em;
margin-bottom: 12px;
}
@media screen and (min-width: 769px) {
.filter-item-forms {
padding-right: 2.25em;
width: 272px;
}
}
@ -216,10 +216,6 @@
width: 100%;
}
#filter-menu-compress-button {
display: none;
}
.filters-menu {
padding-top: 0;

View File

@ -41,12 +41,19 @@
}"
aria-controls="filters-modal"
:aria-expanded="isFiltersModalActive"
:class="hideHideFiltersButton ? 'is-hidden-tablet' : ''"
:class="{
'is-hidden-tablet': !shouldNotHideFiltersOnMobile && hideHideFiltersButton,
'is-hidden': shouldNotHideFiltersOnMobile && hideHideFiltersButton
}"
:aria-label="!isFiltersModalActive ? $i18n.get('label_show_filters') : $i18n.get('label_hide_filters')"
@click="isFiltersModalActive = !isFiltersModalActive">
<span class="icon">
<i
:class="{ 'tainacan-icon-arrowleft' : isFiltersModalActive, 'tainacan-icon-arrowright' : !isFiltersModalActive }"
:class="{
'tainacan-icon-arrowdown': isFiltersModalActive && displayFiltersHorizontally,
'tainacan-icon-arrowleft': isFiltersModalActive && !displayFiltersHorizontally,
'tainacan-icon-arrowright' : !isFiltersModalActive
}"
class="tainacan-icon tainacan-icon-1-25em" />
</span>
<span class="text is-hidden-tablet">{{ $i18n.get('filters') }}</span>