PrivateCoffee/wishthis
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve wishlist filter

Browse source
This commit is contained in:
grandeljay 2022-11-28 13:38:38 +01:00
parent 4b6abba37d
commit 45ae729476
2 changed files with 62 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/assets/css/default.css
View file

@ -451,16 +451,29 @@ p .ui.horizontal.label {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
.flex.wishlist-filter {
gap: 1rem;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.flex { .flex {
flex-direction: column; flex-direction: column;
} }
.flex.wishlist-filter {
flex-direction: row;
}
.flex > *, .flex > *,
.flex > .ui.button { .flex > .ui.button {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.flex.wishlist-filter > div {
flex: 1 1 auto;
margin: 0;
}
.flex.wishlist-filter > div > div {
width: 100%;
}
.flex :last-child { .flex :last-child {
margin-bottom: 0; margin-bottom: 0;

90
src/pages/parts/wishlist.php
View file

@ -18,55 +18,63 @@ $scripts = array(
<div> <div>
<div class="ui stackable grid"> <div class="ui stackable grid">
<div class="column"> <div class="column">
<div class="flex wishlist-filter">
<div>
<div class="ui floating dropdown labeled icon button filter priority"> <div class="ui floating dropdown labeled icon button filter priority">
<input type="hidden" name="filters" /> <input type="hidden" name="filters" />
<i class="filter icon"></i>
<span class="text"><?= __('Filter priorities') ?></span>
<div class="menu">
<div class="ui icon search input">
<i class="search icon"></i>
<input type="text" placeholder="<?= __('Search priorities') ?>" />
</div>
<div class="divider"></div>
<div class="header">
<i class="filter icon"></i> <i class="filter icon"></i>
<?= __('Priorities') ?> <span class="text"><?= __('Filter priorities') ?></span>
</div>
<div class="scrolling menu"> <div class="menu">
<div class="item" data-value="-1"> <div class="ui icon search input">
<i class="ui empty circular label"></i> <i class="search icon"></i>
<?= __('All priorities') ?> <input type="text" placeholder="<?= __('Search priorities') ?>" />
</div>
<div class="item" data-value="">
<i class="ui white empty circular label"></i>
<?= __('No priority') ?>
</div>
<div class="divider"></div>
<?php foreach (Wish::$priorities as $number => $priority) { ?>
<div class="item" data-value="<?= $number ?>">
<i class="ui <?= $priority['color'] ?> empty circular label"></i>
<?= $priority['name'] ?>
</div> </div>
<?php } ?>
<div class="divider"></div>
<div class="header">
<i class="filter icon"></i>
<?= __('Priorities') ?>
</div>
<div class="scrolling menu">
<div class="item" data-value="-1">
<i class="ui empty circular label"></i>
<?= __('All priorities') ?>
</div>
<div class="item" data-value="">
<i class="ui white empty circular label"></i>
<?= __('No priority') ?>
</div>
<div class="divider"></div>
<?php foreach (Wish::$priorities as $number => $priority) { ?>
<div class="item" data-value="<?= $number ?>">
<i class="ui <?= $priority['color'] ?> empty circular label"></i>
<?= $priority['name'] ?>
</div>
<?php } ?>
</div>
</div>
</div> </div>
</div>
<div>
<input type="hidden" name="style" value="grid" />
<div class="ui icon buttons view">
<button class="ui button" value="grid"><i class="grip horizontal icon"></i></button>
<button class="ui button" value="list"><i class="grip lines icon"></i></button>
</div>
</div> </div>
</div> </div>
<input type="hidden" name="style" value="grid" />
<div class="ui icon buttons view">
<button class="ui button" value="grid"><i class="grip horizontal icon"></i></button>
<button class="ui button" value="list"><i class="grip lines icon"></i></button>
</div>
</div> </div>
</div> </div>
</div> </div>