josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧 Adds the grid layout to minimal view

Browse Source
This commit is contained in:
Alicia Sykes
2021-08-08 17:16:31 +01:00
parent 0c130b0d4b
commit 88ae71cb6b
3 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/MinimalView/MinimalHeading.vue
View File

@@ -31,6 +31,10 @@ div.minimal-section-heading {
cursor: pointer;
padding: 0.5rem 0.25rem;
border-radius: var(--curve-factor);
border: 1px solid var(--primary);
border-bottom: none;
border-radius: var(--curve-factor) var(--curve-factor) 0 0;
margin-bottom: 0;
h3 {
margin: 0;
color: var(--primary);
@@ -38,7 +42,7 @@ div.minimal-section-heading {
&.selected {
background: var(--primary);
h3 {
color: var(--background);
color: var(--item-group-heading-text-color);
}
}
}

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

@@ -92,9 +92,16 @@ export default {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: var(--item-group-background);
border-radius: 0 0 var(--curve-factor) var(--curve-factor);
.section-items {
display: flex;
flex-direction: column;
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); }
}
&.selected {
border: 1px solid var(--primary);