mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Design enhancements to panels, headings, and edit button 

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2020-07-10 17:04:57 +02:00 committed by Julius Härtl
parent 429049c809
commit 28a01a9728
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/dashboard/src/App.vue
View File

@ -17,7 +17,7 @@
<div :ref="panels[panelId].id" :data-id="panels[panelId].id" />
</Draggable>
</Container>
<a class="add-panels icon-add" @click="showModal">Add more panels</a>
<a class="edit-panels icon-add" @click="showModal">{{ t('dashboard', 'Edit panels') }}</a>
<Modal v-if="modal" @close="closeModal">
<div class="modal__content">
<transition-group name="flip-list" tag="ol">
@ -205,8 +205,12 @@ export default {
}
.panel, .panels > div {
width: 280px;
width: 320px;
max-width: 100%;
margin: 16px;
padding: 16px;
border-radius: var(--border-radius-large);
border: 2px solid var(--color-border);
.panel--header h3 {
cursor: grab;
@ -218,6 +222,7 @@ export default {
& > .panel--header {
position: sticky;
top: 50px;
margin-bottom: 16px;
background: linear-gradient(var(--color-main-background-translucent), var(--color-main-background-translucent) 80%, rgba(255, 255, 255, 0));
backdrop-filter: blur(4px);
display: flex;
@ -238,7 +243,7 @@ export default {
}
}
.add-panels {
.edit-panels {
position: fixed;
bottom: 20px;
right: 20px;
@ -246,8 +251,10 @@ export default {
padding-left: 35px;
padding-right: 15px;
background-position: 10px center;
border-radius: 100px;
color: var(--color-text-maxcontrast);
border-radius: var(--border-radius-pill);
&:hover {
color: var(--color-main-text);
background-color: var(--color-background-hover);
}
}