Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-30 20:26:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

📱 Improved responsivness for large items with grid layout

Browse Source
This commit is contained in:
Alicia Sykes 2021-10-12 20:26:44 +01:00
parent a21dc50597
commit 51789f8164
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/LinkItems/Section.vue
View File

@ -13,7 +13,7 @@
No Items to Show Yet
</div>
<div v-else
:class="`there-are-items ${isGridLayout? 'item-group-grid': ''}`"
:class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
:style="gridStyle"
>
<Item
@ -213,6 +213,16 @@ export default {
@include big-screen-up { --item-col-count: 12; }
grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
}
.there-are-items.inner-size-large {
display: grid;
@include phone { --item-col-count: 1; }
@include tablet { --item-col-count: 2; }
@include laptop { --item-col-count: 3; }
@include monitor { --item-col-count: 5; }
@include big-screen { --item-col-count: 6; }
@include big-screen-up { --item-col-count: 8; }
grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
}
}
</style>