tyler.durden/dashy
1
0
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2025-04-08 17:06:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

💄 Collapsible sections fill available space

Browse Source
This commit is contained in:
Alicia Sykes 2022-01-22 20:46:03 +00:00
parent 25bc577fb1
commit c3b6d2b0e0
2 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/LinkItems/Collapsable.vue
View File

@ -1,6 +1,6 @@
<template>
<div
:class="`collapsable ${rowColSpanClass} ${collapseClass}`"
:class="`collapsable ${rowColSpanClass} ${collapseClass} ${!cutToHeight ? 'full-height' : ''}`"
:style="`${color ? 'background: '+color : ''}; ${sanitizeCustomStyles(customStyles)};`"
>
<input
@ -43,6 +43,7 @@ export default {
rows: Number, // Set section vertical row span / height
color: String, // Optional color override
customStyles: String, // Optional custom stylings
cutToHeight: Boolean, // To set section height with content height
},
components: {
Icon,
@ -252,5 +253,16 @@ export default {
right: 0.5rem;
top: 0.5rem;
}
// Makes sections fill available space
&.is-open.full-height {
height: -webkit-fill-available;
display: flex;
flex-direction: column;
align-items: normal;
.collapsible-content {
height: -webkit-fill-available;
width: 100%;
}
}
}
</style>

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

@ -8,6 +8,7 @@
:rows="displayData.rows"
:color="displayData.color"
:customStyles="displayData.customStyles"
:cutToHeight="displayData.cutToHeight"
@openEditSection="openEditSection"
@openContextMenu="openContextMenu"
>