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

Fix list view layout

Browse source
This commit is contained in:
grandeljay 2022-12-28 17:08:47 +01:00
parent 60ee90cd6a
commit 031601d5e0
2 changed files with 70 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/assets/css/wish-card.css
View file

@ -1,3 +1,6 @@
/**
* Wish card
*/
.wishlist .ui.card {
--padding: 0.91666667em;
--wishPreviewHeight: max(var(--wishPreviewHeightHover), var(--wishPreviewHeightMobile));
@ -7,7 +10,6 @@
aspect-ratio: 1;
}
.wishlist .ui.card:focus-within {
z-index: calc(var(--dimmerZIndex) + 2);
}
@ -16,6 +18,13 @@
height: 100%;
}
/** Horizontal */
.wishlist .ui.horizontal.card {
width: 100%;
aspect-ratio: unset;
}
/**
* Image
*/
@ -143,6 +152,7 @@
flex-flow: column nowrap;
gap: 0.5em;
width: 100%;
height: 100%;
z-index: 1;
@ -242,7 +252,7 @@
text-overflow: ellipsis;
}
@media (hover: hover) {
.wishlist .ui.card:hover > .content > .description > p {
.wishlist .ui:not(.horizontal).card:hover > .content > .description > p {
white-space: normal;
}
}

146
src/classes/wish.php
View file

@ -135,99 +135,78 @@ class Wish
$generateCache = 'false';
}
switch ($this->style) {
case 'list':
?>
<div class="ui horizontal card"
data-id="<?= $this->id ?>"
data-cache="<?= $generateCache ?>"
>
<?= $this->getCardImage() ?>
<div class="content">
<?= $this->getCardPriority() ?>
<?= $this->getCardContentHeader() ?>
<?= $this->getCardContentDescription() ?>
<?= $this->getCardButtons($userIsCurrent) ?>
</div>
</div>
<?php
break;
default:
?>
<div class="ui blurring dimmable fluid card wish"
data-id="<?= $this->id ?>"
data-cache="<?= $generateCache ?>"
>
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui icon header">
<i class="history icon"></i>
<div class="content">
<?= __('Wish temporarily fulfilled') ?>
<div class="sub header">
<?php
printf(
/** TRANSLATORS: %s: Duration (e. g. 30 minutes) */
__('If this wish is a product, confirm the order was successful and mark it as fulfilled here. If you do not confirm this wish as fulfilled, it will become available again to others after %s.'),
sprintf(
/** TRANSLATORS: %d Amount of minutes */
'<strong>' . __('%d minutes') . '</strong>',
self::STATUS_TEMPORARY_MINUTES
)
)
?>
</div>
</div>
$card_style = 'list' === $this->style ? 'horizontal card' : 'card';
?>
<div class="ui blurring dimmable fluid <?= $card_style ?> wish"
data-id="<?= $this->id ?>"
data-cache="<?= $generateCache ?>"
>
<div class="ui inverted dimmer">
<div class="content">
<div class="center">
<div class="ui icon header">
<i class="history icon"></i>
<div class="content">
<?= __('Wish temporarily fulfilled') ?>
<div class="sub header">
<?php
printf(
/** TRANSLATORS: %s: Duration (e. g. 30 minutes) */
__('If this wish is a product, confirm the order was successful and mark it as fulfilled here. If you do not confirm this wish as fulfilled, it will become available again to others after %s.'),
sprintf(
/** TRANSLATORS: %d Amount of minutes */
'<strong>' . __('%d minutes') . '</strong>',
self::STATUS_TEMPORARY_MINUTES
)
)
?>
</div>
<button class="ui positive labeled icon button confirm">
<i class="check double icon"></i>
<?= __('Confirm') ?>
</button>
</div>
</div>
<button class="ui positive labeled icon button confirm">
<i class="check double icon"></i>
<?= __('Confirm') ?>
</button>
</div>
</div>
</div>
<?= $this->getCardImage() ?>
<?= $this->getCardImage() ?>
<div class="content">
<?php if ($this->title) { ?>
<?= $this->getCardContentHeader() ?>
<?php } ?>
<div class="content">
<?php if ($this->title) { ?>
<?= $this->getCardContentHeader() ?>
<?php } ?>
<?= $this->getCardContentDescription() ?>
<?= $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 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 ($this->price) { ?>
<div class="price">
<?= $numberFormatter->format($this->price) ?>
</div>
<?php if (!empty($this->info->providerName)) { ?>
<span class="provider"><?= $this->info->providerName ?></span>
<?php } ?>
</div>
<?php } ?>
<?= $this->getCardButtons($userIsCurrent) ?>
<?php if ($this->price) { ?>
<div class="price">
<?= $numberFormatter->format($this->price) ?>
</div>
<?php } ?>
</div>
</div>
<?php
break;
}
<?php } ?>
<?= $this->getCardButtons($userIsCurrent) ?>
</div>
</div>
<?php
$html = ob_get_clean();
@ -326,19 +305,10 @@ class Wish
private function getCardPriority(): string
{
switch ($this->style) {
case 'list':
$direction = 'left';
break;
default:
$direction = 'right';
break;
}
ob_start();
?>
<?php if ($this->priority && isset(self::$priorities[$this->priority])) { ?>
<div class="ui small <?= self::$priorities[$this->priority]['color'] ?> <?= $direction ?> label">
<div class="ui small <?= self::$priorities[$this->priority]['color'] ?> right label">
<i class="heart icon"></i>
<span><?= self::$priorities[$this->priority]['name'] ?></span>
</div>