refactor(dashboard): polish styles

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud · Oct 23, 2023 · 86f8b4f · 86f8b4f
1 parent 1c71a31
commit 86f8b4f
Showing 1 changed file with 35 additions and 58 deletions.
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
@@ -12,16 +12,14 @@
 		<Draggable v-model="layout"
 			class="panels"
 			v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}"
-			handle=".panel--header"
+			handle=".panel__header"
 			@end="saveLayout">
 			<div v-for="panelId in layout" :key="panels[panelId].id" class="panel">
-				<div class="panel--header">
-					<h2>
-						<span aria-hidden="true" class="panel__header-icon" :class="getWidgetIconClass(panels[panelId])" />
-						{{ getWidgetTitle(panels[panelId]) }}
-					</h2>
-				</div>
-				<div class="panel--content" :class="{ loading: !isApiWidgetV2(panels[panelId].id) && !panels[panelId].mounted }">
+				<h2 class="panel__header">
+					<span aria-hidden="true" class="panel__header-icon" :class="getWidgetIconClass(panels[panelId])" />
+					{{ getWidgetTitle(panels[panelId]) }}
+				</h2>
+				<div class="panel__content" :class="{ loading: !isApiWidgetV2(panels[panelId].id) && !panels[panelId].mounted }">
 					<ApiDashboardWidget v-if="isApiWidgetV2(panels[panelId].id)"
 						:widget="apiWidgets[panels[panelId].id]"
 						:data="apiWidgetItems[panels[panelId].id]"
@@ -470,16 +468,18 @@ export default {
 	flex-wrap: wrap;
 }
 
-.panel, .panels > div {
+.panel {
 	width: 320px;
 	max-width: 100%;
-	margin: 16px;
+	margin: calc(var(--default-grid-baseline) * 4);
 	align-self: stretch;
 	background-color: var(--color-main-background-blur);
 	-webkit-backdrop-filter: var(--filter-background-blur);
 	backdrop-filter: var(--filter-background-blur);
 	border-radius: var(--border-radius-rounded);
 
+	padding: calc(var(--default-grid-baseline) * 4);
+
 	#body-user.theme--highcontrast & {
 		border: 2px solid var(--color-border);
 	}
@@ -488,66 +488,43 @@ export default {
 		 opacity: 0.1;
 	}
 
-	& > .panel--header {
+	&__header {
 		display: flex;
-		z-index: 1;
-		top: 50px;
-		padding: 16px;
+		align-items: flex-end;
+		margin: 0;
+		padding: calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2);
+		line-height: 24px;
+		height: 56px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		cursor: grab;
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+	}
 
-		&, ::v-deep * {
-			-webkit-touch-callout: none;
-			-webkit-user-select: none;
-			-khtml-user-select: none;
-			-moz-user-select: none;
-			-ms-user-select: none;
-			user-select: none;
-		}
-
-		&:active {
-			cursor: grabbing;
-		}
-
-		a {
-			flex-grow: 1;
-		}
-
-		> h2 {
-			display: block;
-			align-items: center;
-			flex-grow: 1;
-			margin: 0;
-			font-size: 20px;
-			line-height: 24px;
-			font-weight: bold;
-			padding: 16px 8px;
-			height: 56px;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			cursor: grab;
-			span {
-				background-size: 32px;
-				width: 32px;
-				height: 32px;
-				margin-right: 16px;
-				background-position: center;
-				float: left;
-				margin-top: -6px;
-			}
-		}
+	&__header-icon {
+		background-position: center;
+		background-size: 32px;
+		background-repeat: no-repeat;
+		height: 32px;
+		width: 32px;
+		margin-right: 16px;
 	}
 
-	& > .panel--content {
-		margin: 0 16px 16px 16px;
+	&__content {
 		height: 424px;
 		// We specifically do not want scrollbars inside widgets
 		overflow: visible;
 	}
 
 	// No need to extend height of widgets if only one column is shown
 	@media only screen and (max-width: 709px) {
-		& > .panel--content {
+		&__content {
 			height: auto;
 		}
 	}