Improve wishlist filter
This commit is contained in:
parent
4b6abba37d
commit
45ae729476
2 changed files with 62 additions and 41 deletions
|
@ -451,16 +451,29 @@ p .ui.horizontal.label {
|
|||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.flex.wishlist-filter {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.flex {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex.wishlist-filter {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex > *,
|
||||
.flex > .ui.button {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.flex.wishlist-filter > div {
|
||||
flex: 1 1 auto;
|
||||
margin: 0;
|
||||
}
|
||||
.flex.wishlist-filter > div > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex :last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
|
@ -18,55 +18,63 @@ $scripts = array(
|
|||
<div>
|
||||
<div class="ui stackable grid">
|
||||
<div class="column">
|
||||
<div class="flex wishlist-filter">
|
||||
<div>
|
||||
|
||||
<div class="ui floating dropdown labeled icon button filter priority">
|
||||
<input type="hidden" name="filters" />
|
||||
<div class="ui floating dropdown labeled icon button filter priority">
|
||||
<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>
|
||||
<?= __('Priorities') ?>
|
||||
</div>
|
||||
<span class="text"><?= __('Filter priorities') ?></span>
|
||||
|
||||
<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 class="menu">
|
||||
<div class="ui icon search input">
|
||||
<i class="search icon"></i>
|
||||
<input type="text" placeholder="<?= __('Search priorities') ?>" />
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue