Improve responsive layout

This commit is contained in:
Jay Trees 2022-02-25 16:22:12 +01:00
parent 757fa606f9
commit 42369d6dce
4 changed files with 49 additions and 27 deletions

View file

@ -203,3 +203,24 @@ p .ui.horizontal.label {
cursor: default;
user-select: none;
}
/**
* Flex
*/
.flex {
display: flex;
flex-flow: row nowrap;
}
@media (max-width: 767px) {
.flex {
flex-direction: column;
}
.flex > *,
.flex > .ui.button {
margin-bottom: 0.5rem;
}
.flex :last-child {
margin-bottom: 0;
}
}

View file

@ -81,7 +81,7 @@ class Wishlist
$cardIndex = 0;
if (!empty($products)) { ?>
<div class="ui stackable three column grid">
<div class="ui three column doubling stackable grid">
<?php foreach ($products as $product) {
$cache = new EmbedCache($product['url']);
$info = $cache->get(false);

View file

@ -23,17 +23,16 @@ $page->navigation();
wishthis is a simple, intuitive and modern platform to create,
manage and view your wishes for any kind of occasion.
</p>
<?php if ($user->isLoggedIn()) { ?>
<p>
<a class="ui primary button" href="/?page=wishlists">Create a wishlist</a>
<a class="ui button" href="/?page=wishlists">View your wishlists</a>
</p>
<?php } else { ?>
<p>
<a class="ui primary button" href="/?page=register">Register now</a>
<a class="ui button" href="/?page=login">Login</a>
</p>
<?php } ?>
<div class="ui four column doubling stackable grid">
<?php if ($user->isLoggedIn()) { ?>
<div class="column"><a class="ui fluid primary button" href="/?page=wishlists">Create a wishlist</a></div>
<div class="column"><a class="ui fluid button" href="/?page=wishlists">View your wishlists</a></div>
<?php } else { ?>
<div class="column"><a class="ui fluid primary button" href="/?page=register">Register now</a></div>
<div class="column"><a class="ui fluid button" href="/?page=login">Login</a></div>
<?php } ?>
</div>
<h2 class="ui header">Use case</h2>
<p>

View file

@ -35,24 +35,26 @@ $page->navigation();
<div class="ui divider"></div>
<a class="ui small labeled icon button wishlist-product-add disabled">
<i class="add icon"></i>
Add a product
</a>
<div class="flex">
<a class="ui small labeled icon button wishlist-product-add disabled">
<i class="add icon"></i>
Add a product
</a>
<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-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" />
<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>
<button class="ui fluid small labeled red icon button disabled" type="submit">
<i class="trash icon"></i>
Delete
</button>
</form>
</div>
</div>
<div class="ui segment">