Dashboard: add background image, improve panel design

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

4 files changed, 47 insertions, 4 deletions

diff --git a/apps/dashboard/README.md b/apps/dashboard/README.md
new file mode 100644
index 00000000000..36c4dcfbaf5
--- /dev/null
+++ b/apps/dashboard/README.md
@@ -0,0 +1,3 @@
+# Dashboard
+
+Picture credit: [Clouds by Kamil Porembiński](https://www.flickr.com/photos/paszczak000/8715851521/)
diff --git a/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg b/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg
new file mode 100644
index 00000000000..5153d2f37a6
--- /dev/null
+++ b/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg
diff --git a/apps/dashboard/img/flickr-paszczak000-8715851521.jpg b/apps/dashboard/img/flickr-paszczak000-8715851521.jpg
new file mode 100644
index 00000000000..732f28ead7e
--- /dev/null
+++ b/apps/dashboard/img/flickr-paszczak000-8715851521.jpg
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index cffef23c01f..a5fc1009976 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -225,17 +225,57 @@ export default {
 }
 </script>
 
+<style lang="scss">
+// Show Dashboard background image beneath header
+#body-user #header {
+	background: none;
+}
+
+#content {
+	padding-top: 0;
+}
+
+// Hide triangle indicators from navigation since they are out of place without the header bar
+#appmenu li a.active::before,
+#appmenu li:hover a::before,
+#appmenu li:hover a.active::before,
+#appmenu li a:focus::before {
+	display: none;
+}
+</style>
+
 <style lang="scss" scoped>
 	#app-dashboard {
 		width: 100%;
-		margin-bottom: 100px;
+		padding-bottom: 100px;
+
+		background-color: var(--color-primary);
+		background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521.jpg?v=1');
+		background-size: cover;
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-attachment: fixed;
+	}
+
+	@media only screen and (max-width: var(--breakpoint-mobile)) {
+		body {
+			background-image: url('/nextcloud/apps/dashboard/img/flickr-paszczak000-8715851521-mobile.jpg?v=1');
+		}
 	}
 
 	h2 {
+		color: var(--color-primary-text);
 		text-align: center;
 		font-size: 32px;
 		line-height: 130%;
-		padding: 80px 16px 0px;
+		padding: 120px 16px 0px;
+	}
+
+	.statuses {
+		::v-deep #user-status-menu-item__subheader>button {
+			background-color: rgba(255, 255, 255, 0.8);
+			backdrop-filter: blur(10px);
+		}
 	}
 
 	.panels {
@@ -253,9 +293,9 @@ export default {
 		width: 320px;
 		max-width: 100%;
 		margin: 16px;
-		background-color: var(--color-main-background-translucent);
+		background-color: rgba(255, 255, 255, 0.8);
+		backdrop-filter: blur(10px);
 		border-radius: var(--border-radius-large);
-		border: 2px solid var(--color-border);
 
 		&.sortable-ghost {
 			 opacity: 0.1;