tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-07-23 13:45:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

💄 Use min-max css func, when calculating row fraction

Browse Source
This commit is contained in:
Alicia Sykes 2021-10-03 21:44:13 +01:00
parent 7ede2c4a4d
commit 27d52c0635
2 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,9 +106,9 @@ export default {
gridStyle() { gridStyle() {
let styles = ''; let styles = '';
styles += this.displayData.itemCountX styles += this.displayData.itemCountX
? `grid-template-columns: repeat(${this.displayData.itemCountX}, 1fr);` : ''; ? `grid-template-columns: repeat(${this.displayData.itemCountX}, minmax(0, 1fr));` : '';
styles += this.displayData.itemCountY styles += this.displayData.itemCountY
? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : ''; ? `grid-template-rows: repeat(${this.displayData.itemCountY}, minmax(0, 1fr));` : '';
return styles; return styles;
}, },
}, },

13
src/components/MinimalView/MinimalSection.vue
View File

@ -97,12 +97,13 @@ export default {
border-radius: 0 0 var(--curve-factor) var(--curve-factor); border-radius: 0 0 var(--curve-factor) var(--curve-factor);
.section-items { .section-items {
display: grid; display: grid;
@include phone { grid-template-columns: repeat(1, 1fr); } @include phone { --minimal-col-count: 1; }
@include tablet { grid-template-columns: repeat(2, 1fr); } @include tablet { --minimal-col-count: 2; }
@include laptop { grid-template-columns: repeat(3, 1fr); } @include laptop { --minimal-col-count: 3; }
@include monitor { grid-template-columns: repeat(4, 1fr); } @include monitor { --minimal-col-count: 4; }
@include big-screen { grid-template-columns: repeat(5, 1fr); } @include big-screen { --minimal-col-count: 5; }
@include big-screen-up { grid-template-columns: repeat(6, 1fr); } @include big-screen-up { --minimal-col-count: 6; }
grid-template-columns: repeat(var(--minimal-col-count, 1), minmax(0, 1fr));
} }
&.selected { &.selected {
border: 1px solid var(--minimal-view-group-color); border: 1px solid var(--minimal-view-group-color);