diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue index 8f4206c5cf..a9034732c2 100644 --- a/src/components/LinkItems/Section.vue +++ b/src/components/LinkItems/Section.vue @@ -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)); } } diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index d0ace6ea27..124895befe 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -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 { diff --git a/src/views/Home.vue b/src/views/Home.vue index 097a747fac..85a8e1be01 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -18,7 +18,11 @@ />
+ :class="`item-group-container ` + + `orientation-${layout} ` + + `item-size-${itemSizeBound} ` + + (this.colCount ? `col-count-${this.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; } }