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

Improve card layout

Browse source
This commit is contained in:
Jay Trees 2022-02-23 10:53:49 +01:00
parent a84e2aa93f
commit 8fbe7682e7
3 changed files with 85 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,7 @@
:root {
--lineHeight: 1.4285;
}
/**
* Footer
*/
@ -23,16 +27,37 @@
/**
* Card
*/
.ui.card .header > img {
height: 1.25em;
vertical-align: text-bottom;
.ui.fluid.card.stretch {
height: 100%;
}
/** Image */
.ui.card > .image > img,
.ui.cards > .card > .image > img {
height: 30vh;
object-fit: cover;
background-color: #fff;
}
/** 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));
overflow: hidden;
}
/** Icon */
.ui.card .header > img {
position: absolute;
top: 1em;
height: 1.25em;
vertical-align: text-bottom;
}
/**
* Label
*/

108
src/classes/wishlist.php
View file

@ -78,67 +78,69 @@ class Wishlist
* Cards
*/
if (!empty($products)) { ?>
<div class="ui three stackable cards">
<div class="ui stackable three column grid container">
<?php foreach ($products as $product) {
$cache = new EmbedCache();
$info = $cache->get($product['url']);
?>
<div class="card" data-id="<?= $product['id'] ?>">
<div class="column">
<div class="ui fluid card stretch" data-id="<?= $product['id'] ?>">
<?php if ($info->image) { ?>
<div class="image">
<img src="<?= $info->image ?>" />
<?php if ($info->image) { ?>
<div class="image">
<img src="<?= $info->image ?>" />
</div>
<?php } ?>
<div class="content">
<?php if ($info->title) { ?>
<div class="header">
<?php if ($info->favicon) { ?>
<img src="<?= $info->favicon ?>" />
<?php } ?>
<?php if ($info->url) { ?>
<a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
<?php } else { ?>
<?= $info->title ?>
<?php } ?>
</div>
<?php } ?>
<?php if ($info->keywords) { ?>
<div class="meta">
<?= implode(',', $info->keywords) ?>
</div>
<?php } ?>
<?php if ($info->description) { ?>
<div class="description">
<?= $info->description ?>
</div>
<?php } ?>
</div>
<div class="extra content">
<?php if ($info->publishedTime) { ?>
<span class="right floated">
<?= $info->publishedTime ?>
</span>
<?php } ?>
<?php if ($info->providerName) { ?>
<?= $info->providerName ?>
<?php } ?>
</div>
<div class="extra content">
<?php if ($info->url) { ?>
<a class="ui tiny button" href="<?= $info->url ?>" target="_blank">View</a>
<?php } ?>
<?php if (isset($_SESSION['user']) && $this->data['user'] === $_SESSION['user']['id']) { ?>
<a class="ui tiny red button delete">Delete</a>
<?php } else { ?>
<a class="ui tiny button commit">Commit</a>
<?php } ?>
</div>
<?php } ?>
<div class="content">
<?php if ($info->title) { ?>
<div class="header">
<?php if ($info->favicon) { ?>
<img src="<?= $info->favicon ?>" />
<?php } ?>
<?php if ($info->url) { ?>
<a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
<?php } else { ?>
<?= $info->title ?>
<?php } ?>
</div>
<?php } ?>
<?php if ($info->keywords) { ?>
<div class="meta">
<?= implode(',', $info->keywords) ?>
</div>
<?php } ?>
<?php if ($info->description) { ?>
<div class="description">
<?= $info->description ?>
</div>
<?php } ?>
</div>
<div class="extra content">
<?php if ($info->publishedTime) { ?>
<span class="right floated">
<?= $info->publishedTime ?>
</span>
<?php } ?>
<?php if ($info->providerName) { ?>
<?= $info->providerName ?>
<?php } ?>
</div>
<div class="extra content">
<?php if ($info->url) { ?>
<a class="ui tiny button" href="<?= $info->url ?>" target="_blank">View</a>
<?php } ?>
<?php if (isset($_SESSION['user']) && $this->data['user'] === $_SESSION['user']['id']) { ?>
<a class="ui tiny red button delete">Delete</a>
<?php } else { ?>
<a class="ui tiny button commit">Commit</a>
<?php } ?>
</div>
</div>
<?php } ?>
</div>

4
src/pages/wishlist-view.php
View file

@ -56,9 +56,9 @@ if (isset($_POST['wishlist_delete_id'])) {
</form>
</div>
</div>
<div class="wishlist-cards"></div>
</div>
<div class="wishlist-cards"></div>
</main>
<?php