From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Fri, 10 Jul 2020 15:04:57 +0000 (+0200)
Subject: Design enhancements to panels, headings, and edit button
X-Git-Tag: v20.0.0beta1~122^2~26
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=28a01a9728c9834b822377b380f5b15b02fd77ec;p=nextcloud-server.git

Design enhancements to panels, headings, and edit button

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---

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);
 		}
 	}