tyler.durden
/
dashy
mirror of https://github.com/Lissy93/dashy.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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() {
let styles = '';
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
? `grid-template-rows: repeat(${this.displayData.itemCountY}, 1fr);` : '';
? `grid-template-rows: repeat(${this.displayData.itemCountY}, minmax(0, 1fr));` : '';
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);
.section-items {
display: grid;
@include phone { grid-template-columns: repeat(1, 1fr); }
@include tablet { grid-template-columns: repeat(2, 1fr); }
@include laptop { grid-template-columns: repeat(3, 1fr); }
@include monitor { grid-template-columns: repeat(4, 1fr); }
@include big-screen { grid-template-columns: repeat(5, 1fr); }
@include big-screen-up { grid-template-columns: repeat(6, 1fr); }
@include phone { --minimal-col-count: 1; }
@include tablet { --minimal-col-count: 2; }
@include laptop { --minimal-col-count: 3; }
@include monitor { --minimal-col-count: 4; }
@include big-screen { --minimal-col-count: 5; }
@include big-screen-up { --minimal-col-count: 6; }
grid-template-columns: repeat(var(--minimal-col-count, 1), minmax(0, 1fr));
}
&.selected {
border: 1px solid var(--minimal-view-group-color);