From a2feb51eb04555c99bbcb57a8b3172382f5526b2 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 6 Jan 2023 00:36:01 +0100
Subject: [PATCH] Redesign positions of person action buttons and avatar
---
.../components/person/PersonOverview.vue | 38 +++++++++++++------
1 file changed, 27 insertions(+), 11 deletions(-)
diff --git a/aleksis/core/assets/components/person/PersonOverview.vue b/aleksis/core/assets/components/person/PersonOverview.vue
index 3e74a6b2b..857d32102 100644
--- a/aleksis/core/assets/components/person/PersonOverview.vue
+++ b/aleksis/core/assets/components/person/PersonOverview.vue
@@ -17,25 +17,40 @@
</v-row>
</template>
<template v-else-if="data && data.person">
- <v-row>
- <v-spacer />
+ <v-row class="align-center">
<v-col
- cols="6"
+ cols="5"
sm="4"
md="3"
lg="2"
+ xl="1"
+ order="first"
max-width="220px"
>
<AvatarClickBox :id="id"/>
</v-col>
- <v-spacer />
- </v-row>
+ <v-col
+ order="last"
+ order-sm="1"
+ cols="12"
+ sm=""
+ >
+ <h1>
+ {{ data.person.firstName }} {{ data.person.lastName }}
+ </h1>
+ <div v-if="data.person.username" class="text-h5 grey--text text--darken-2">
+ {{ data.person.username }}
+ </div>
+ </v-col>
- <h1 class="text-center">{{ data.person.firstName }} {{ data.person.lastName }}
- <span v-if="data.person.username" class="text-h5 grey--text text--darken-2">
- {{ data.person.username }}
- </span>
- </h1>
+ <v-col
+ order="1"
+ order-sm="last"
+ class="ms-5"
+ >
+ <PersonActions :id="data.person.id" />
+ </v-col>
+ </v-row>
<div class="text-center my-5" v-text="data.person.description"></div>
@@ -200,11 +215,12 @@
import AdditionalImage from "./AdditionalImage.vue";
import AvatarClickBox from "./AvatarClickBox.vue";
import GroupList from "../group/GroupList.vue";
+import PersonActions from "./PersonActions.vue";
import PersonList from "./PersonList.vue";
export default {
name: "PersonOverview",
- components: {AdditionalImage, AvatarClickBox, GroupList, PersonList},
+ components: {AdditionalImage, AvatarClickBox, GroupList, PersonActions, PersonList},
props: {
id: {
type: String,
--
GitLab