Improve wishlist layout
This commit is contained in:
Jay Trees
parent
b5a2ed8dd8
commit
f6a1d8681b
3 changed files with 139 additions and 119 deletions
|
|
@ -40,6 +40,10 @@ img {
|
|||
/**
|
||||
* Card
|
||||
*/
|
||||
.wishlist-cards {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui.card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -138,3 +142,10 @@ p .ui.horizontal.label {
|
|||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Segment
|
||||
*/
|
||||
.ui.segments {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,85 +80,87 @@ class Wishlist
|
|||
$userIsCurrent = isset($_SESSION['user']) && $this->data['user'] === $_SESSION['user']['id'];
|
||||
|
||||
if (!empty($products)) { ?>
|
||||
<div class="ui stackable three column grid container">
|
||||
<?php foreach ($products as $product) {
|
||||
$cache = new EmbedCache($product['url']);
|
||||
$info = $cache->get(false);
|
||||
$exists = $cache->exists() ? 'true' : 'false';
|
||||
?>
|
||||
<div class="column">
|
||||
<div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-cache="<?= $exists ?>">
|
||||
<div class="ui container">
|
||||
<div class="ui stackable three column grid">
|
||||
<?php foreach ($products as $product) {
|
||||
$cache = new EmbedCache($product['url']);
|
||||
$info = $cache->get(false);
|
||||
$exists = $cache->exists() ? 'true' : 'false';
|
||||
?>
|
||||
<div class="column">
|
||||
<div class="ui fluid card stretch" data-id="<?= $product['id'] ?>" data-cache="<?= $exists ?>">
|
||||
|
||||
<?php if ($info->image) { ?>
|
||||
<div class="image">
|
||||
<img class="preview" src="<?= $info->image ?>" loading="lazy"/>
|
||||
<?php if ($info->image) { ?>
|
||||
<div class="image">
|
||||
<img class="preview" src="<?= $info->image ?>" loading="lazy"/>
|
||||
|
||||
<?php if ($info->favicon) { ?>
|
||||
<img class="favicon" src="<?= $info->favicon ?>" loading="lazy"/>
|
||||
<?php } ?>
|
||||
<?php if ($info->favicon) { ?>
|
||||
<img class="favicon" src="<?= $info->favicon ?>" loading="lazy"/>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($info->providerName) { ?>
|
||||
<span class="provider"><?= $info->providerName ?></span>
|
||||
<?php } ?>
|
||||
<?php if ($info->providerName) { ?>
|
||||
<span class="provider"><?= $info->providerName ?></span>
|
||||
<?php } ?>
|
||||
|
||||
<?php if($userIsCurrent) { ?>
|
||||
<button class="ui icon button refresh">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="content">
|
||||
<?php if ($info->title) { ?>
|
||||
<div class="header">
|
||||
<?php if ($info->url) { ?>
|
||||
<a href="<?= $info->url ?>" target="_blank"><?= $info->title ?></a>
|
||||
<?php } else { ?>
|
||||
<?= $info->title ?>
|
||||
<?php if($userIsCurrent) { ?>
|
||||
<button class="ui icon button refresh">
|
||||
<i class="refresh icon"></i>
|
||||
</button>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($info->keywords) { ?>
|
||||
<div class="meta">
|
||||
<?= implode(', ', $info->keywords) ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<div class="content">
|
||||
<?php if ($info->title) { ?>
|
||||
<div class="header">
|
||||
<?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 buttons">
|
||||
<?php if (!$userIsCurrent) { ?>
|
||||
<a class="ui small primary labeled icon button commit">
|
||||
<i class="shopping cart icon"></i>
|
||||
Commit
|
||||
</a>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($info->url) { ?>
|
||||
<a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
|
||||
<i class="external icon"></i>
|
||||
View
|
||||
</a>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($userIsCurrent) { ?>
|
||||
<a class="ui small labeled red icon button delete">
|
||||
<i class="trash icon"></i>
|
||||
Delete
|
||||
</a>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<?php if ($info->description) { ?>
|
||||
<div class="description">
|
||||
<?= $info->description ?>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<div class="extra content buttons">
|
||||
<?php if (!$userIsCurrent) { ?>
|
||||
<a class="ui small primary labeled icon button commit">
|
||||
<i class="shopping cart icon"></i>
|
||||
Commit
|
||||
</a>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($info->url) { ?>
|
||||
<a class="ui small right labeled icon button" href="<?= $info->url ?>" target="_blank">
|
||||
<i class="external icon"></i>
|
||||
View
|
||||
</a>
|
||||
<?php } ?>
|
||||
|
||||
<?php if ($userIsCurrent) { ?>
|
||||
<a class="ui small labeled red icon button delete">
|
||||
<i class="trash icon"></i>
|
||||
Delete
|
||||
</a>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php } else { ?>
|
||||
<div class="sixteen wide column">
|
||||
|
|
|
|||
|
|
@ -45,66 +45,73 @@ if (isset($_POST['wishlist_delete_id'])) {
|
|||
<div class="ui container">
|
||||
<h1 class="ui header"><?= $page->title ?></h1>
|
||||
|
||||
<div class="ui segment">
|
||||
<h2 class="ui header">Create</h2>
|
||||
<p>
|
||||
Choose a new name for your wishlist.
|
||||
Here's a suggestion to get you started!
|
||||
</p>
|
||||
<div class="ui equal width stackable grid">
|
||||
|
||||
<form class="ui form" method="post">
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input type="text"
|
||||
name="name"
|
||||
placeholder="<?= getCurrentSeason() ?>"
|
||||
value="<?= getCurrentSeason() ?>"
|
||||
/>
|
||||
<div class="column">
|
||||
<div class="ui segment form">
|
||||
<h2 class="ui header">View</h2>
|
||||
<p>Please select a wishlist to view.</p>
|
||||
|
||||
<div class="field">
|
||||
<label>Wishlist</label>
|
||||
<select class="ui fluid search selection dropdown loading wishlists" name="wishlist">
|
||||
<option value="">Loading your wishlists...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<div class="ui segment">
|
||||
<h2 class="ui header">Create</h2>
|
||||
<p>
|
||||
Choose a new name for your wishlist.
|
||||
Here's a suggestion to get you started!
|
||||
</p>
|
||||
|
||||
<form class="ui form" method="post">
|
||||
<div class="field">
|
||||
<label>Name</label>
|
||||
<input type="text"
|
||||
name="name"
|
||||
placeholder="<?= getCurrentSeason() ?>"
|
||||
value="<?= getCurrentSeason() ?>"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input class="ui primary button"
|
||||
type="submit"
|
||||
name="wishlist-create"
|
||||
value="Create"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input class="ui primary button"
|
||||
type="submit"
|
||||
name="wishlist-create"
|
||||
value="Create"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="ui horizontal stackable segments">
|
||||
<div class="ui segment">
|
||||
<h2 class="ui header">View</h2>
|
||||
<p>Please select a wishlist to view.</p>
|
||||
<div class="ui segment">
|
||||
<h2 class="ui header">Options</h1>
|
||||
<p>Wishlist related options.</p>
|
||||
|
||||
<div class="field">
|
||||
<select class="ui fluid search selection dropdown loading wishlists" name="wishlist">
|
||||
<option value="">Loading your wishlists...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<a class="ui small labeled icon button wishlist-product-add" href="/?page=wishlist-product-add">
|
||||
<i class="add icon"></i>
|
||||
Add products
|
||||
</a>
|
||||
|
||||
<div class="ui segment">
|
||||
<h2 class="ui header">Options</h1>
|
||||
<p>Wishlist related options.</p>
|
||||
<a class="ui small labeled icon button wishlist-share disabled" target="_blank">
|
||||
<i class="share icon"></i>
|
||||
Share
|
||||
</a>
|
||||
|
||||
<a class="ui small labeled icon button wishlist-product-add" href="/?page=wishlist-product-add">
|
||||
<i class="add icon"></i>
|
||||
Add products
|
||||
</a>
|
||||
<form class="ui form wishlist-delete" method="post" style="display: inline-block;">
|
||||
<input type="hidden" name="wishlist_delete_id" />
|
||||
|
||||
<a class="ui small labeled icon button wishlist-share disabled" target="_blank">
|
||||
<i class="share icon"></i>
|
||||
Share
|
||||
</a>
|
||||
|
||||
<form class="ui form wishlist-delete" method="post" style="display: inline-block;">
|
||||
<input type="hidden" name="wishlist_delete_id" />
|
||||
|
||||
<button class="ui small labeled red icon button disabled" type="submit">
|
||||
<i class="trash icon"></i>
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<button class="ui small labeled red icon button disabled" type="submit">
|
||||
<i class="trash icon"></i>
|
||||
Delete
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue