Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix chats button alignment

Browse source
This commit is contained in:
Henry Jameson 2022-04-12 17:17:52 +03:00
parent e5eca8a554
commit 08ad2923a5
3 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/chat/chat.scss
View file

@ -47,7 +47,6 @@
} }
.chat-view-heading { .chat-view-heading {
align-items: center;
justify-content: space-between; justify-content: space-between;
display: flex; display: flex;
z-index: 2; z-index: 2;
@ -56,11 +55,11 @@
} }
.go-back-button { .go-back-button {
cursor: pointer;
width: 28px;
text-align: center; text-align: center;
padding: 0.6em; padding: 0 0.7em;
margin: -0.6em 0.6em -0.6em -0.6em; line-height: 100%;
height: 100%;
align-self: stretch;
} }
.jump-to-bottom-button { .jump-to-bottom-button {

6
src/components/chat/chat.vue
View file

@ -9,15 +9,15 @@
ref="header" ref="header"
class="panel-heading -sticky chat-view-heading mobile-hidden" class="panel-heading -sticky chat-view-heading mobile-hidden"
> >
<a <button
class="go-back-button" class="button-unstyled go-back-button"
@click="goBack" @click="goBack"
> >
<FAIcon <FAIcon
size="lg" size="lg"
icon="chevron-left" icon="chevron-left"
/> />
</a> </button>
<div class="title text-center"> <div class="title text-center">
<ChatTitle <ChatTitle
:user="recipient" :user="recipient"

16
src/components/chat_title/chat_title.vue
View file

@ -4,13 +4,13 @@
:title="title" :title="title"
> >
<router-link <router-link
class="avatar-container"
v-if="withAvatar && user" v-if="withAvatar && user"
:to="getUserProfileLink(user)" :to="getUserProfileLink(user)"
> >
<UserAvatar <UserAvatar
class="titlebar-avatar"
:user="user" :user="user"
width="23px"
height="23px"
/> />
</router-link> </router-link>
<RichContent <RichContent
@ -32,7 +32,6 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
align-items: center;
--emoji-size: 14px; --emoji-size: 14px;
@ -45,11 +44,14 @@
overflow: hidden; overflow: hidden;
} }
.Avatar { .avatar-container {
width: 23px; align-self: center;
height: 23px; }
margin-right: 0.5em;
.titlebar-avatar {
margin-right: 0.5em;
height: 1.5em;
width: 1.5em;
border-radius: $fallback--avatarAltRadius; border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);