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; cursor: default;
user-select: none; 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; $cardIndex = 0;
if (!empty($products)) { ?> if (!empty($products)) { ?>
<div class="ui stackable three column grid"> <div class="ui three column doubling stackable grid">
<?php foreach ($products as $product) { <?php foreach ($products as $product) {
$cache = new EmbedCache($product['url']); $cache = new EmbedCache($product['url']);
$info = $cache->get(false); $info = $cache->get(false);

View file

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

View file

@ -35,6 +35,7 @@ $page->navigation();
<div class="ui divider"></div> <div class="ui divider"></div>
<div class="flex">
<a class="ui small labeled icon button wishlist-product-add disabled"> <a class="ui small labeled icon button wishlist-product-add disabled">
<i class="add icon"></i> <i class="add icon"></i>
Add a product Add a product
@ -48,12 +49,13 @@ $page->navigation();
<form class="ui form wishlist-delete" method="post" style="display: inline-block;"> <form class="ui form wishlist-delete" method="post" style="display: inline-block;">
<input type="hidden" name="wishlist_delete_id" /> <input type="hidden" name="wishlist_delete_id" />
<button class="ui small labeled red icon button disabled" type="submit"> <button class="ui fluid small labeled red icon button disabled" type="submit">
<i class="trash icon"></i> <i class="trash icon"></i>
Delete Delete
</button> </button>
</form> </form>
</div> </div>
</div>
<div class="ui segment"> <div class="ui segment">
<p>General options.</p> <p>General options.</p>