Change tablet breakpoint to 810px

This commit is contained in:
Jay Trees 2022-02-23 10:12:31 +01:00
parent a27ce05daf
commit eed1f5844a
11 changed files with 28 additions and 23 deletions

View file

@ -660,7 +660,7 @@
/* Tablet Or Below */ /* Tablet Or Below */
@media only screen and (max-width: 767.98px) { @media only screen and (max-width: 809.98px) {
.ui.stackable.buttons { .ui.stackable.buttons {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-box-direction: normal; -webkit-box-direction: normal;

File diff suppressed because one or more lines are too long

View file

@ -21,7 +21,7 @@
} }
/* Mobile */ /* Mobile */
@media only screen and (max-width: 767.98px) { @media only screen and (max-width: 809.98px) {
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
width: auto; width: auto;
margin-left: 1em; margin-left: 1em;
@ -39,20 +39,20 @@
} }
/* Tablet */ /* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991.98px) { @media only screen and (min-width: 810px) and (max-width: 991.98px) {
.ui.ui.ui.container:not(.fluid) { .ui.ui.ui.container:not(.fluid) {
width: 719px; width: 761px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.ui.ui.ui.grid.container { .ui.ui.ui.grid.container {
width: calc(719px + 2rem); width: calc(761px + 2rem);
} }
.ui.ui.ui.relaxed.grid.container { .ui.ui.ui.relaxed.grid.container {
width: calc(719px + 3rem); width: calc(761px + 3rem);
} }
.ui.ui.ui.very.relaxed.grid.container { .ui.ui.ui.very.relaxed.grid.container {
width: calc(719px + 5rem); width: calc(761px + 5rem);
} }
} }

View file

@ -6,4 +6,4 @@
* Released under the MIT license * Released under the MIT license
* http://opensource.org/licenses/MIT * http://opensource.org/licenses/MIT
* *
*/.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:719px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(719px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(719px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(719px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:927px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(927px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(927px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(927px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1119px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1119px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1119px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)}}.ui.text.container{font-family:Raleway,sans-serif;max-width:700px;line-height:1.5;font-size:1.16666667rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto} */.ui.container{display:block;max-width:100%}@media only screen and (max-width:809.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:810px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:761px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(761px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(761px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(761px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:927px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(927px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(927px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(927px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1119px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1119px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1119px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)}}.ui.text.container{font-family:Raleway,sans-serif;max-width:700px;line-height:1.5;font-size:1.16666667rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}

View file

@ -114,7 +114,7 @@
} }
/* Inside grid */ /* Inside grid */
@media only screen and (max-width: 767.98px) { @media only screen and (max-width: 809.98px) {
.ui.stackable.grid .ui.vertical.divider, .ui.stackable.grid .ui.vertical.divider,
.ui.grid .stackable.row .ui.vertical.divider { .ui.grid .stackable.row .ui.vertical.divider {
display: table; display: table;
@ -281,7 +281,7 @@
.ui.horizontal.divider:after { .ui.horizontal.divider:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC'); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 809px) {
.ui.stackable.grid .ui.vertical.divider:before, .ui.stackable.grid .ui.vertical.divider:before,
.ui.grid .stackable.row .ui.vertical.divider:before, .ui.grid .stackable.row .ui.vertical.divider:before,
.ui.stackable.grid .ui.vertical.divider:after, .ui.stackable.grid .ui.vertical.divider:after,

File diff suppressed because one or more lines are too long

View file

@ -218,7 +218,7 @@
--------------------*/ --------------------*/
@mobileBreakpoint : 320px; @mobileBreakpoint : 320px;
@tabletBreakpoint : 768px; @tabletBreakpoint : 810px;
@computerBreakpoint : 992px; @computerBreakpoint : 992px;
@largeMonitorBreakpoint : 1200px; @largeMonitorBreakpoint : 1200px;
@widescreenMonitorBreakpoint : 1920px; @widescreenMonitorBreakpoint : 1920px;

View file

@ -27,6 +27,11 @@
height: 1.25em; height: 1.25em;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
.ui.card > .image > img,
.ui.cards > .card > .image > img {
height: 30vh;
object-fit: cover;
}
/** /**
* Label * Label

View file

@ -78,12 +78,12 @@ class Wishlist
* Cards * Cards
*/ */
if (!empty($products)) { ?> if (!empty($products)) { ?>
<?php foreach ($products as $product) { <div class="ui three stackable cards">
$cache = new EmbedCache(); <?php foreach ($products as $product) {
$info = $cache->get($product['url']); $cache = new EmbedCache();
?> $info = $cache->get($product['url']);
<div class="column"> ?>
<div class="ui fluid card" data-id="<?= $product['id'] ?>"> <div class="card" data-id="<?= $product['id'] ?>">
<?php if ($info->image) { ?> <?php if ($info->image) { ?>
<div class="image"> <div class="image">
@ -140,8 +140,8 @@ class Wishlist
</div> </div>
</div> </div>
</div> <?php } ?>
<?php } ?> </div>
<?php } else { ?> <?php } else { ?>
<div class="sixteen wide column"> <div class="sixteen wide column">
<?= Page::info('This wishlist seems to be empty.', 'Empty'); ?> <?= Page::info('This wishlist seems to be empty.', 'Empty'); ?>

View file

@ -57,7 +57,7 @@ if (isset($_POST['wishlist_delete_id'])) {
</div> </div>
</div> </div>
<div class="ui three column stackable grid wishlist-cards"></div> <div class="wishlist-cards"></div>
</div> </div>
</main> </main>

View file

@ -62,7 +62,7 @@ $page->navigation();
</p> </p>
</div> </div>
<div class="ui three column stackable grid wishlist-cards"> <div class="wishlist-cards">
<?php <?php
echo $wishlist->getCards( echo $wishlist->getCards(
array( array(