platypush/platypush
platypush/platypush
2
2
Fork 4
Code Issues 30 Pull requests Projects 4 Releases Packages Wiki Activity

[UI] Extracted grid into layout.scss.

Browse source
This commit is contained in:
Fabio Manganiello 2023-11-09 01:35:49 +01:00
parent 4814c56a2d
commit a83f4729a6
Signed by: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
platypush/backend/http/webapp/src/components/panels/Media/Results.vue
View file

@ -5,7 +5,7 @@
No search results
</NoItems>
<div class="media-grid" v-else>
<div class="grid" v-else>
<Item v-for="(item, i) in results"
:key="i"
:item="item"
@ -77,34 +77,6 @@ export default {
background: $background-color;
overflow: auto;
.media-grid {
width: 100%;
display: grid;
row-gap: 1em;
column-gap: 1.5em;
padding: 1em;
@include until($tablet) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) and (max-width: $tablet) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@include between($tablet, $desktop) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@include between($desktop, $widescreen) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@include from($widescreen) {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.info-container {
width: 100%;
cursor: initial;

31
platypush/backend/http/webapp/src/style/layout.scss
View file

@ -1,5 +1,6 @@
@use "sass:math";
$tablet-small: 640px;
$tablet: 769px;
$desktop: 1024px;
$widescreen: 1216px;
@ -13,6 +14,7 @@ $widths: (
);
$width-ranges: (
tablet-small: ($tablet-small, $tablet),
tablet: ($tablet, $desktop),
desktop: ($desktop, $widescreen),
widescreen: ($widescreen, $fullhd),
@ -227,3 +229,32 @@ $width-ranges: (
justify-content: center;
}
// Grid layout
.grid {
width: 100%;
display: grid;
row-gap: 1em;
column-gap: 1.5em;
padding: 1em;
@include until($tablet-small) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@include between($tablet-small, $tablet) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@include between($tablet, $desktop) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@include between($desktop, $widescreen) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@include from($widescreen) {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}