make profile page usable on mobile

Signed-off-by: szaimen <szaimen@e.mail.de> Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
nextcloud · Nov 23, 2021 · 4d92f42 · 4d92f42
1 parent 129de60
commit 4d92f42
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/core/js/dist/profile.js b/core/js/dist/profile.js
diff --git a/core/js/dist/profile.js.map b/core/js/dist/profile.js.map
diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue
@@ -512,6 +512,52 @@ $content-max-width: 640px;
 	}
 }
 
+@media only screen and (max-width: 1024px) {
+	.profile {
+		&__header {
+			height: 250px;
+			position: unset;
+
+			&__container {
+				grid-template-columns: unset;
+
+				&__displayname {
+					margin: 100px 20px 0px;
+					width: unset;
+					display: unset;
+					text-align: center;
+				}
+
+				&__edit-button {
+					width: fit-content;
+					display: block;
+					margin: 30px auto;
+				}
+			}
+		}
+
+		&__content {
+			display: block;
+		}
+
+		&__blocks {
+			width: unset;
+			max-width: 600px;
+			margin: 0 auto;
+			padding: 20px 50px 50px 50px;
+
+			&-empty-info {
+				margin: 0;
+			}
+		}
+
+		&__sidebar {
+			margin: unset;
+			position: unset;
+		}
+	}
+}
+
 .user-actions {
 	display: flex;
 	flex-direction: column;