Improve saved wishlists design

This commit is contained in:
grandeljay 2022-06-14 19:59:23 +02:00
parent f1463d4c41
commit 056dee4c08
4 changed files with 70 additions and 19 deletions

View file

@ -71,6 +71,12 @@ figure {
}
/** Image */
svg#no-image,
.wishlist .ui.card > .image > svg {
color: #f0f0f0;
background-color: #f4f4f4;
}
.wishlist .ui.card > .image > svg {
transition: var(--themeTransitionDuration) ease color,
var(--themeTransitionDuration) ease background-color;
@ -81,11 +87,9 @@ figure {
box-sizing: border-box;
border-radius: inherit;
color: #f0f0f0;
background-color: #f4f4f4;
}
@media (prefers-color-scheme: dark) {
svg#no-image,
.wishlist .ui.card > .image > svg {
color: #0f0f0f;
background-color: #0b0b0b;

View 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);
}
}

View file

@ -47,6 +47,7 @@ $page->navigation();
<ul>
<li><?= __('Localisation (many new translations added)') ?></li>
<li><?= __('Additional logins are no longer required when switching between wishthis channels') ?></li>
<li><?= __('Saved wishlists design') ?></li>
</ul>
<h3 class="ui header"><?= __('Changed') ?></h3>

View file

@ -17,24 +17,26 @@ $page->navigation();
<div class="ui container">
<h1 class="ui header"><?= $page->title ?></h1>
<div class="ui segment">
<div class="ui relaxed divided list">
<?php foreach ($user->getSavedWishlists() as $wishlist_saved) { ?>
<?php
$wishlist = new Wishlist($wishlist_saved['wishlist']);
$wishlist_user = new User($wishlist_saved['user']);
?>
<div class="item">
<i class="large heart middle aligned icon"></i>
<div class="content">
<a class="header" href="<?= Page::PAGE_WISHLIST ?>&hash=<?= $wishlist->hash ?>"><?= $wishlist->getTitle(); ?></a>
<div class="description"><?= $wishlist_user->getDisplayName(); ?></div>
<div class="ui three column grid wishlists-saved">
<?php foreach ($user->getSavedWishlists() as $wishlist_saved) { ?>
<?php
$wishlist = new Wishlist($wishlist_saved['wishlist']);
$wishlist_user = new User($wishlist_saved['user']);
$wishlist_href = Page::PAGE_WISHLIST . '&hash=' . $wishlist->hash;
?>
<div class="column">
<a class="header" href="<?= $wishlist_href ?>">
<div class="ui rounded bordered fluid image">
<?= file_get_contents(ROOT . '/' . Wish::NO_IMAGE) ?>
</div>
</div>
<?php } ?>
</a>
</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>
</main>