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

Improve wishlists design

Browse source
This commit is contained in:
Jay Trees 2022-02-25 11:39:09 +01:00
parent c2a62a9cac
commit 2b05eb47b1
2 changed files with 61 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -41,6 +41,25 @@ img {
height: 100%;
}
/** Overlay */
.ui.card .overlay {
transition: 0.4s ease opacity;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
opacity: 0;
background-color: rgba(255, 255, 255, 0.6);
}
.ui.card:hover .overlay {
opacity: 1;
}
/** Image */
.ui.card > .image > img.preview{
height: 25vh;
@ -56,11 +75,13 @@ img {
height: 1.25em;
width: auto;
z-index: 1;
z-index: 2;
}
.ui.card > .image > img.favicon + span.provider {
padding-left: 3em;
z-index: 2;
}
/** Provider name */
@ -74,9 +95,7 @@ img {
padding: calc(0.91666667em * 1.5) 0.91666667em;
line-height: 1;
background-color: rgba(255, 255, 255, 0.6);
user-select: none;
opacity: 0;
}
.ui.card:hover > .image > span.provider {
@ -94,6 +113,7 @@ img {
opacity: 0;
background-color: transparent;
z-index: 2;
}
.ui.card:hover > .image > button {
animation: buttonWorking 2s linear infinite paused;
@ -114,13 +134,42 @@ img {
}
/** Content */
.ui.card > .content > .header + .description,
.ui.card > .content > .meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.cards > .card > .content > .meta + .description {
max-height: calc(2em * var(--lineHeight));
.ui.card > .content > .description {
position: absolute;
left: 1em;
right: 1em;
}
overflow: hidden;
.ui.card > .content > .description-fade {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4em;
width: 100%;
background-image: linear-gradient(0deg, rgba(255,255,255,1) 0.75em, rgba(255,255,255,0.8995799003195029) 45%, rgba(255,255,255,0) 100%);
}
/** Buttons */
.ui.card > .extra.buttons,
.ui.cards > .card > .extra.buttons {
transition: 0.4s ease opacity;
display: flex;
opacity: 0;
background-color: inherit;
z-index: 2;
}
.ui.card:hover > .extra.buttons,
.ui.cards > .card:hover > .extra.buttons {
opacity: 1;
}
.ui.card > .extra.buttons > .button,
.ui.cards > .card > .extra.buttons > .button {
flex: 1 1 auto;
}
/**

5
src/classes/wishlist.php
View file

@ -89,6 +89,7 @@ class Wishlist
?>
<div class="column">
<div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-index="<?= $cardIndex ?>" data-cache="<?= $exists ?>">
<div class="overlay"></div>
<?php if ($info->image) { ?>
<div class="image">
@ -131,6 +132,7 @@ class Wishlist
<div class="description">
<?= $info->description ?>
</div>
<div class="description-fade"></div>
<?php } ?>
</div>
@ -143,7 +145,7 @@ class Wishlist
<?php } ?>
<?php if ($info->url) { ?>
<a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
<a class="ui small labeled icon button" href="<?= $info->url ?>" target="_blank">
<i class="external icon"></i>
View
</a>
@ -156,7 +158,6 @@ class Wishlist
</a>
<?php } ?>
</div>
</div>
</div>
<?php } ?>