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