tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-27 07:34:43 +02: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 No Items to Show Yet
</div> </div>
<div v-else <div v-else
:class="`there-are-items ${isGridLayout? 'item-group-grid': ''}`" :class="`there-are-items ${isGridLayout? 'item-group-grid': ''} inner-size-${itemSize}`"
:style="gridStyle" :style="gridStyle"
> >
<Item <Item
@ -213,6 +213,16 @@ export default {
@include big-screen-up { --item-col-count: 12; } @include big-screen-up { --item-col-count: 12; }
grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr)); 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> </style>