Improve responsive layout
This commit is contained in:
parent
757fa606f9
commit
42369d6dce
4 changed files with 49 additions and 27 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue