diff options
| author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2020-07-10 17:04:57 +0200 |
|---|---|---|
| committer | Julius Härtl <jus@bitgrid.net> | 2020-08-05 17:01:27 +0200 |
| commit | 28a01a9728c9834b822377b380f5b15b02fd77ec (patch) | |
| tree | 74605ffc6b9d1152de653b677fbd03af2efcd6af /apps | |
| parent | 429049c809226f3750647a19a4cb48e0d3d4ea75 (diff) | |
| download | nextcloud-server-28a01a9728c9834b822377b380f5b15b02fd77ec.tar.gz nextcloud-server-28a01a9728c9834b822377b380f5b15b02fd77ec.zip | |
Design enhancements to panels, headings, and edit button
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'apps')
| -rw-r--r-- | apps/dashboard/src/App.vue | 15 |
1 files changed, 11 insertions, 4 deletions
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue index 44cb763b020..05fd509d50b 100644 --- a/apps/dashboard/src/App.vue +++ b/apps/dashboard/src/App.vue @@ -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); } } |