Improve saved wishlists design
This commit is contained in:
parent
f1463d4c41
commit
056dee4c08
4 changed files with 70 additions and 19 deletions
|
@ -71,6 +71,12 @@ figure {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Image */
|
/** Image */
|
||||||
|
svg#no-image,
|
||||||
|
.wishlist .ui.card > .image > svg {
|
||||||
|
color: #f0f0f0;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
}
|
||||||
|
|
||||||
.wishlist .ui.card > .image > svg {
|
.wishlist .ui.card > .image > svg {
|
||||||
transition: var(--themeTransitionDuration) ease color,
|
transition: var(--themeTransitionDuration) ease color,
|
||||||
var(--themeTransitionDuration) ease background-color;
|
var(--themeTransitionDuration) ease background-color;
|
||||||
|
@ -81,11 +87,9 @@ figure {
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: inherit;
|
border-radius: inherit;
|
||||||
|
|
||||||
color: #f0f0f0;
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
svg#no-image,
|
||||||
.wishlist .ui.card > .image > svg {
|
.wishlist .ui.card > .image > svg {
|
||||||
color: #0f0f0f;
|
color: #0f0f0f;
|
||||||
background-color: #0b0b0b;
|
background-color: #0b0b0b;
|
||||||
|
|
44
src/assets/css/wishlists-saved.css
Normal file
44
src/assets/css/wishlists-saved.css
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
.wishlists-saved .image {
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: 20vh !important;
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlists-saved .image {
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlists-saved svg#no-image {
|
||||||
|
width: 40%;
|
||||||
|
height: 60%;
|
||||||
|
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlists-saved .ui.bordered.image svg,
|
||||||
|
.wishlists-saved .ui.bordered.images svg {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wishlists-saved .content {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
padding: 1em;
|
||||||
|
margin: 0.5rem 0.5625rem;
|
||||||
|
|
||||||
|
border-radius: 0 0 4px 4px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.wishlists-saved .content {
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
}
|
|
@ -47,6 +47,7 @@ $page->navigation();
|
||||||
<ul>
|
<ul>
|
||||||
<li><?= __('Localisation (many new translations added)') ?></li>
|
<li><?= __('Localisation (many new translations added)') ?></li>
|
||||||
<li><?= __('Additional logins are no longer required when switching between wishthis channels') ?></li>
|
<li><?= __('Additional logins are no longer required when switching between wishthis channels') ?></li>
|
||||||
|
<li><?= __('Saved wishlists design') ?></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h3 class="ui header"><?= __('Changed') ?></h3>
|
<h3 class="ui header"><?= __('Changed') ?></h3>
|
||||||
|
|
|
@ -17,24 +17,26 @@ $page->navigation();
|
||||||
<div class="ui container">
|
<div class="ui container">
|
||||||
<h1 class="ui header"><?= $page->title ?></h1>
|
<h1 class="ui header"><?= $page->title ?></h1>
|
||||||
|
|
||||||
<div class="ui segment">
|
<div class="ui three column grid wishlists-saved">
|
||||||
<div class="ui relaxed divided list">
|
<?php foreach ($user->getSavedWishlists() as $wishlist_saved) { ?>
|
||||||
|
<?php
|
||||||
<?php foreach ($user->getSavedWishlists() as $wishlist_saved) { ?>
|
$wishlist = new Wishlist($wishlist_saved['wishlist']);
|
||||||
<?php
|
$wishlist_user = new User($wishlist_saved['user']);
|
||||||
$wishlist = new Wishlist($wishlist_saved['wishlist']);
|
$wishlist_href = Page::PAGE_WISHLIST . '&hash=' . $wishlist->hash;
|
||||||
$wishlist_user = new User($wishlist_saved['user']);
|
?>
|
||||||
?>
|
<div class="column">
|
||||||
<div class="item">
|
<a class="header" href="<?= $wishlist_href ?>">
|
||||||
<i class="large heart middle aligned icon"></i>
|
<div class="ui rounded bordered fluid image">
|
||||||
<div class="content">
|
<?= file_get_contents(ROOT . '/' . Wish::NO_IMAGE) ?>
|
||||||
<a class="header" href="<?= Page::PAGE_WISHLIST ?>&hash=<?= $wishlist->hash ?>"><?= $wishlist->getTitle(); ?></a>
|
|
||||||
<div class="description"><?= $wishlist_user->getDisplayName(); ?></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</a>
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
</div>
|
<div class="content">
|
||||||
|
<a class="header" href="<?= $wishlist_href ?>"><?= $wishlist->getTitle(); ?></a>
|
||||||
|
<div class="description"><?= $wishlist_user->getDisplayName(); ?></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
Loading…
Reference in a new issue