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

Redesign wish grid

Browse source
This commit is contained in:
grandeljay 2022-12-10 17:10:43 +01:00
parent 6b9cee1a0a
commit ebde21b94c
5 changed files with 212 additions and 220 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

345
src/assets/css/wishlist.css → src/assets/css/wish-card.css
View file

@ -1,50 +1,24 @@
/**
* Wishlist Card
*/
.wishlist .ui.card {
--padding: 0.91666667em;
--wishPreviewHeight: max(var(--wishPreviewHeightHover), var(--wishPreviewHeightMobile));
--wishPreviewHeightMobile: 192px;
--wishPreviewHeightHover: calc(1em + 3 * var(--padding));
--wishPreviewHeightDifference: calc(var(--wishPreviewHeightMobile) - var(--wishPreviewHeightHover));
aspect-ratio: 1;
}
.wishlist .ui.card:focus-within {
z-index: calc(var(--dimmerZIndex) + 2);
}
.wishlist .ui.card {
height: 100%;
}
.wishlist .ui.horizontal.card::before {
position: absolute;
right: 0;
left: 0;
bottom: 0;
height: 4em;
width: 100%;
content: '';
border-radius: .28571429rem;
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1) 0.75em, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 100%);
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.horizontal.card::before {
background-image: linear-gradient(0deg, rgba(27, 28, 29, 1) 0.75em, rgba(27, 28, 29, 0.9) 45%, rgba(27, 28, 29, 0) 100%);
}
}
.wishlist .ui.card.loading::before {
height: 100%;
}
.ui.card.horizontal,
.ui.horizontal.cards > .card {
flex-wrap: nowrap;
width: auto;
}
/** Image */
/**
* Image
*/
.wishlist .ui.card > .image {
--wishPreviewHeightMin: calc(1.28571429em * 1.28571429 + 2em + 3px);
@ -77,11 +51,29 @@
z-index: 1;
border-radius: inherit;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
background-image:
linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%),
linear-gradient(0, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image::before {
background-image: linear-gradient(180deg, rgba(27, 28, 29, 1) 0, rgba(27, 28, 29, 0) 100%);
background-image:
linear-gradient(180deg, rgba(27, 28, 29, 0.8) 0, transparent 100%),
linear-gradient(0, rgba(27, 28, 29, 0.8) 0, transparent 100%);
}
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .image::before {
transition: 0.4s ease opacity;
}
}
.wishlist .ui.card > .image::before {
opacity: 0;
}
.wishlist .ui.card:hover > .image::before {
opacity: 1;
}
}
@ -90,18 +82,8 @@
height: 100%;
}
.wishlist .ui.horizontal.card > .image > :is(svg, img.preview) {
height: var(--wishPreviewHeightHover);
}
@media (hover: hover) {
.wishlist .ui.horizontal.card > .image > :is(svg, img.preview) {
height: var(--wishPreviewHeight);
}
}
.wishlist .ui.card > .image > svg {
width: 100%;
color: #f0f0f0;
background-color: #f4f4f4;
@ -133,10 +115,6 @@
0.2s linear opacity;
}
}
.wishlist .ui.horizontal.card:hover > .image > svg {
padding: 0 !important;
opacity: 0;
}
}
.wishlist .ui.card > .image > img.preview {
@ -152,112 +130,18 @@
}
}
.ui.card.horizontal > .image,
.ui.horizontal.cards > .card > .image {
--sizeFaviconX: calc(1.25em + var(--padding) * 2);
width: min(var(--sizeFaviconX), var(--wishPreviewHeightMin));
}
@media (max-width: 512px) {
.ui.card.horizontal > .image,
.ui.horizontal.cards > .card > .image {
display: none;
}
}
/** Provider */
.wishlist .ui.card > .image > img.favicon,
.wishlist .ui.card > .image > span.provider {
position: absolute;
top: 0;
}
/** Favicon */
.wishlist .ui.card > .image > img.favicon {
padding: calc(var(--padding) * 1.5) var(--padding);
height: 1.25em;
width: auto;
box-sizing: content-box;
z-index: 1;
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > img.favicon {
filter: brightness(80%);
}
}
.wishlist .ui.card > .image > img.favicon + span.provider {
padding-left: 3em;
}
/** Provider name */
.wishlist .ui.card > .image > span.provider {
display: block;
width: 100%;
padding: calc(var(--padding) * 1.5) var(--padding);
line-height: 1;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(0, 0, 0, 0.6);
}
}
@supports (backdrop-filter: blur(4px)) {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .image > span.provider {
background-color: rgba(0, 0, 0, 0.2);
}
}
}
@media (hover: hover) {
.wishlist .ui.card > .image > span.provider {
position: absolute;
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .image > span.provider {
transition: opacity 0.2s linear;
}
}
.wishlist .ui.card:hover > .image > span.provider {
display: block;
opacity: 1;
}
}
/** Content */
/**
* Content
*/
.wishlist .ui.card > .content:not(.extra) {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-flow: column nowrap;
gap: 0.5em;
width: 100%;
height: 100%;
z-index: 1;
text-shadow: 0.02em 0.02em 0.12em #ddd;
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
@ -267,13 +151,13 @@
0.2s linear margin-bottom;
}
}
.wishlist .ui.horizontal.card > .content:not(.extra) {
--contentHeight: calc(var(--wishPreviewHeightMobile) * 1.25);
overflow: hidden;
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .content:not(.extra) {
text-shadow: 0.02em 0.02em 0.12em #222;
}
}
.ui.card > .content::after,
.ui.cards > .card > .content::after {
display: none;
@ -282,17 +166,9 @@
.wishlist .ui.card > .content > .header {
flex-shrink: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0.02em 0.02em 0.12em #ddd;
}
@media (prefers-color-scheme: dark) {
.wishlist .ui.card > .content > .header {
text-shadow: 0.02em 0.02em 0.12em #222;
}
}
.wishlist .ui.card > .content > .header > .ui.label {
@ -305,41 +181,138 @@
text-shadow: none;
}
.wishlist .ui.card > .content > .description {
margin-top: 0;
overflow: auto;
.wishlist .ui.card > .content > .header > .ui.small.label {
max-width: calc(0.78571429rem + 0.833em * 2);
}
@media (max-width: 768px) {
.wishlist .ui.horizontal.card > .content > .description {
display: none;
@media (min-width: 768px) {
.wishlist .ui.card > .content > .header > .ui.label {
max-width: 100%;
}
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .content > .header > .ui.small.label {
transition: 0.4s ease max-width;
}
}
.wishlist .ui.card > .content > .header > .ui.small.label {
max-width: 100%;
}
.wishlist .ui.card:hover > .content > .header > .ui.label {
max-width: calc(0.78571429rem + 0.833em * 2);
}
}
/** Buttons */
.wishlist .ui.card > .extra.buttons,
.wishlist .ui.card > .content > .extra.buttons {
position: relative;
.wishlist .ui.card > .content > .header > .ui.label > span {
opacity: 0;
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .content > .header > .ui.label > span {
transition: 0.4s ease opacity;
}
}
display: flex;
justify-content: flex-start;
align-items: center;
flex-flow: row wrap;
gap: 0.25em;
width: 100%;
.wishlist .ui.card > .content > .header > .ui.label > span {
opacity: 1;
}
background-color: inherit;
z-index: 2;
.wishlist .ui.card:hover > .content > .header > .ui.label > span {
opacity: 0;
}
}
.wishlist .ui.card > .content > .extra.buttons {
flex-flow: row wrap;
}
.wishlist .ui.card > .extra.buttons > .button,
.wishlist .ui.card > .content > .extra.buttons > .button {
margin: 0;
.wishlist .ui.card > .content > .description {
margin-top: 0;
flex: 1 1 auto;
overflow: auto;
}
.wishlist .ui.card > .content > .description > p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (hover: hover) {
.wishlist .ui.card:hover > .content > .description > p {
white-space: normal;
}
}
/** Meta */
.wishlist .ui.card .meta {
display: flex;
justify-content: space-between;
}
.wishlist .ui.card .meta .favicon {
height: 1em;
}
/** Buttons */
.wishlist .ui.card > .content > .extra.buttons {
display: flex;
gap: 0.25em;
margin-top: auto;
}
@media (hover: hover) {
@media (prefers-reduced-motion: no-preference) {
.wishlist .ui.card > .content > .extra.buttons {
transition: 0.2s ease opacity;
}
}
.wishlist .ui.card > .content > .extra.buttons {
opacity: 0;
}
.wishlist .ui.card > .content > .extra.buttons {
opacity: 1;
}
}
@media (min-width: 768px) {
.wishlist .ui.card > .content > .extra.buttons {
flex-wrap: wrap;
}
}
.wishlist .ui.card > .content > .extra.buttons > .ui.button {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wishlist .ui.card > .content > .extra.buttons > .ui.labeled.icon.button {
flex: 1 1 auto;
margin: 0;
}
@media (max-width: 511.9px) {
.wishlist .ui.card > .content > .extra.buttons > .ui.labeled.icon.button {
padding: 0.589286em !important;
}
}
.wishlist .ui.card > .content > .extra.buttons > .ui.labeled.icon.button > i.icon {
display: contents;
}
@media (min-width: 512px) {
.wishlist .ui.card > .content > .extra.buttons > .ui.labeled.icon.button > i.icon {
display: revert;
}
}
.wishlist .ui.card > .content > .extra.buttons > .ui.labeled.icon.button > span {
display: none;
}
@media (min-width: 512px) {
.wishlist .ui.card > .content > .extra.buttons > .ui.labeled.icon.button > span {
display: revert;
}
}
/** Overlay */

9
src/assets/css/wish.css
View file

@ -1,9 +0,0 @@
.image.preview {
height: var(--wishPreviewHeight) !important;
object-fit: cover;
object-position: 50%;
background-color: #fff;
cursor: pointer;
}

69
src/classes/wish.php
View file

@ -147,11 +147,6 @@ class Wish
<div class="content">
<?= $this->getCardPriority() ?>
<?= $this->getCardContentHeader() ?>
<?php if ($this->price) { ?>
<?= $this->getCardContentMeta($numberFormatter->format($this->price)) ?>
<?php } ?>
<?= $this->getCardContentDescription() ?>
<?= $this->getCardButtons($userIsCurrent) ?>
</div>
@ -203,14 +198,32 @@ class Wish
<?= $this->getCardContentHeader() ?>
<?php } ?>
<?php if ($this->price) { ?>
<?= $this->getCardContentMeta($numberFormatter->format($this->price)) ?>
<?= $this->getCardContentDescription() ?>
<?php if (!empty($this->info->favicon) || !empty($this->info->providerName) || $this->price) { ?>
<div class="meta">
<?php if (!empty($this->info->favicon) || !empty($this->info->providerName)) { ?>
<div class="provider">
<?php if (!empty($this->info->favicon)) { ?>
<img class="favicon" src="<?= $this->info->favicon ?>" loading="lazy" />
<?php } ?>
<?php if (!empty($this->info->providerName)) { ?>
<span class="provider"><?= $this->info->providerName ?></span>
<?php } ?>
</div>
<?php } ?>
<?php if ($this->price) { ?>
<div class="price">
<?= $numberFormatter->format($this->price) ?>
</div>
<?php } ?>
</div>
<?php } ?>
<?= $this->getCardContentDescription() ?>
<?= $this->getCardButtons($userIsCurrent) ?>
</div>
<?= $this->getCardButtons($userIsCurrent) ?>
</div>
<?php
break;
@ -253,14 +266,6 @@ class Wish
<?php } else { ?>
<?= file_get_contents(ROOT . self::NO_IMAGE) ?>
<?php } ?>
<?php if (isset($this->info->favicon) && $this->info->favicon) { ?>
<img class="favicon" src="<?= $this->info->favicon ?>" loading="lazy" />
<?php } ?>
<?php if (isset($this->info->providerName) && $this->info->providerName) { ?>
<span class="provider"><?= $this->info->providerName ?></span>
<?php } ?>
</div>
<?php
$image = ob_get_clean();
@ -306,11 +311,11 @@ class Wish
?>
<?php if ($this->description) { ?>
<div class="description">
<?= $this->description ?>
<p><?= $this->description ?></p>
</div>
<?php } elseif ($this->url && !$this->title) { ?>
<div class="description">
<a href="<?= $this->url ?>" target="_blank"><?= $this->url ?></a>
<p><a href="<?= $this->url ?>" target="_blank"><?= $this->url ?></a></p>
</div>
<?php } ?>
<?php
@ -334,7 +339,8 @@ class Wish
?>
<?php if ($this->priority && isset(self::$priorities[$this->priority])) { ?>
<div class="ui small <?= self::$priorities[$this->priority]['color'] ?> <?= $direction ?> label">
<?= self::$priorities[$this->priority]['name'] ?>
<i class="heart icon"></i>
<span><?= self::$priorities[$this->priority]['name'] ?></span>
</div>
<?php } ?>
<?php
@ -347,6 +353,27 @@ class Wish
{
ob_start();
?>
<div class="extra content buttons">
<button class="ui compact labeled icon button">
<i class="stream icon"></i>
<span><?= __('Details') ?></span>
</button>
<?php if ($this->url) { ?>
<a class="ui compact labeled icon button"
href="<?= $this->url ?>" target="_blank"
title="<?= __('Visit') ?>"
>
<i class="external icon"></i>
<span><?= __('Visit') ?></span>
</a>
<?php } ?>
</div>
<?php
$buttons = ob_get_clean();
return $buttons;
?>
<div class="extra content buttons">
<?php if (!$userIsCurrent) { ?>
<a class="ui small primary labeled icon button fulfil"

7
src/pages/wishlist.php
View file

@ -8,9 +8,10 @@
namespace wishthis;
$wishlist = new Wishlist($_GET['hash']);
$page = new Page(__FILE__, $wishlist->getTitle());
$wishlist_user = User::getFromID($wishlist->user);
$wishlist = new Wishlist($_GET['hash']);
$page = new Page(__FILE__, $wishlist->getTitle());
$page->stylesheets[] = 'src/assets/css/wish-card.css';
$wishlist_user = User::getFromID($wishlist->user);
if (!$wishlist->exists) {
$page->errorDocument(404, $wishlist);

2
src/pages/wishlists.php
View file

@ -9,7 +9,7 @@
namespace wishthis;
$page = new Page(__FILE__, __('My lists'), 1);
$page->stylesheets[] = 'src/assets/css/wishlist.css';
$page->stylesheets[] = 'src/assets/css/wish-card.css';
$page->header();
$page->bodyStart();
$page->navigation();