mirror of https://github.com/Lissy93/dashy.git
✨ (#250) Adds option for custom column count
This commit is contained in:
Alicia Sykes
parent
b88f128154
commit
98d50446a1
|
|
@ -178,9 +178,9 @@ export default {
|
|||
padding: 0.8rem;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
border-radius: var(--curve-factor);
|
||||
background: #607d8b33;
|
||||
color: var(--primary);
|
||||
background: var(--item-background);
|
||||
border-radius: var(--curve-factor);
|
||||
box-shadow: var(--item-shadow);
|
||||
}
|
||||
|
||||
|
|
@ -192,12 +192,13 @@ export default {
|
|||
display: grid;
|
||||
overflow: auto;
|
||||
@extend .scroll-bar;
|
||||
@include phone { grid-template-columns: repeat(1, 1fr); }
|
||||
@include tablet { grid-template-columns: repeat(2, 1fr); }
|
||||
@include laptop { grid-template-columns: repeat(2, 1fr); }
|
||||
@include monitor { grid-template-columns: repeat(3, 1fr); }
|
||||
@include big-screen { grid-template-columns: repeat(4, 1fr); }
|
||||
@include big-screen-up { grid-template-columns: repeat(5, 1fr); }
|
||||
@include phone { --item-col-count: 1; }
|
||||
@include tablet { --item-col-count: 2; }
|
||||
@include laptop { --item-col-count: 2; }
|
||||
@include monitor { --item-col-count: 3; }
|
||||
@include big-screen { --item-col-count: 4; }
|
||||
@include big-screen-up { --item-col-count: 5; }
|
||||
grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.orientation-horizontal {
|
||||
|
|
@ -205,13 +206,13 @@ export default {
|
|||
flex-direction: column;
|
||||
.there-are-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
@include phone { grid-template-columns: repeat(2, 1fr); }
|
||||
@include tablet { grid-template-columns: repeat(4, 1fr); }
|
||||
@include laptop { grid-template-columns: repeat(6, 1fr); }
|
||||
@include monitor { grid-template-columns: repeat(8, 1fr); }
|
||||
@include big-screen { grid-template-columns: repeat(10, 1fr); }
|
||||
@include big-screen-up { grid-template-columns: repeat(12, 1fr); }
|
||||
@include phone { --item-col-count: 2; }
|
||||
@include tablet { --item-col-count: 4; }
|
||||
@include laptop { --item-col-count: 6; }
|
||||
@include monitor { --item-col-count: 8; }
|
||||
@include big-screen { --item-col-count: 10; }
|
||||
@include big-screen-up { --item-col-count: 12; }
|
||||
grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -406,7 +406,7 @@ html[data-theme='material'], html[data-theme='material-dark'] {
|
|||
}
|
||||
}
|
||||
}
|
||||
.tooltip.item-description-tooltip {
|
||||
.tooltip.item-description-tooltip:not(.tooltip-is-small) {
|
||||
display: none !important;
|
||||
}
|
||||
.orientation-horizontal {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,11 @@
|
|||
/>
|
||||
<!-- Main content, section for each group of items -->
|
||||
<div v-if="checkTheresData(sections)"
|
||||
:class="`item-group-container orientation-${layout} item-size-${itemSizeBound}`">
|
||||
:class="`item-group-container `
|
||||
+ `orientation-${layout} `
|
||||
+ `item-size-${itemSizeBound} `
|
||||
+ (this.colCount ? `col-count-${this.colCount} ` : '')"
|
||||
>
|
||||
<Section
|
||||
v-for="(section, index) in filteredTiles"
|
||||
:key="index"
|
||||
|
|
@ -67,6 +71,14 @@ export default {
|
|||
modalOpen: false, // When true, keybindings are disabled
|
||||
}),
|
||||
computed: {
|
||||
/* Get class for num columns, if specified by user */
|
||||
colCount() {
|
||||
let { colCount } = this.appConfig;
|
||||
if (!colCount) return null;
|
||||
if (colCount < 1) colCount = 1;
|
||||
if (colCount > 8) colCount = 8;
|
||||
return colCount;
|
||||
},
|
||||
/* Combines sections from config file, with those in local storage */
|
||||
allSections() {
|
||||
// If the user has stored sections in local storage, return those
|
||||
|
|
@ -227,7 +239,6 @@ export default {
|
|||
.home {
|
||||
padding-bottom: 1px;
|
||||
background: var(--background);
|
||||
// min-height: calc(100vh - 126px);
|
||||
min-height: calc(99.9vh - var(--footer-height));
|
||||
}
|
||||
|
||||
|
|
@ -256,26 +267,27 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
/* Specify number of columns, based on screen size */
|
||||
@include phone {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
@include tablet {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@include laptop {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@include monitor {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
@include big-screen {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
@include big-screen-up {
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
/* Specify number of columns, based on screen size or user preference */
|
||||
@include phone { --col-count: 1; }
|
||||
@include tablet { --col-count: 2; }
|
||||
@include laptop { --col-count: 2; }
|
||||
@include monitor { --col-count: 3; }
|
||||
@include big-screen { --col-count: 4; }
|
||||
@include big-screen-up { --col-count: 5; }
|
||||
|
||||
@include tablet-up {
|
||||
&.col-count-1 { --col-count: 1; }
|
||||
&.col-count-2 { --col-count: 2; }
|
||||
&.col-count-3 { --col-count: 3; }
|
||||
&.col-count-4 { --col-count: 4; }
|
||||
&.col-count-5 { --col-count: 5; }
|
||||
&.col-count-6 { --col-count: 6; }
|
||||
&.col-count-7 { --col-count: 7; }
|
||||
&.col-count-8 { --col-count: 8; }
|
||||
}
|
||||
|
||||
grid-template-columns: repeat(var(--col-count, 2), minmax(0, 1fr));
|
||||
|
||||
/* Hide when search term returns nothing */
|
||||
.no-results { display: none; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue