monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

show user memo in popup

Browse source 
(the styling is still a bit off)

People set memos to remind themselves about, among other things, how
to (not) interact with other users: do they like being boosted? are
they argumentative? what timezone are they in?

Having this sort of information in the popup means you don't have to
remember to go to the user's profile to get them.
This commit is contained in:
dakkar 2023-12-08 11:32:15 +00:00
parent 107cbac914
commit ece1eb5f59
1 changed files with 32 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
packages/frontend/src/components/MkUserPopup.vue
View file

@ -27,6 +27,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <MkA :class="$style.name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA>
<div :class="$style.username"><MkAcct :user="user"/></div> <div :class="$style.username"><MkAcct :user="user"/></div>
</div> </div>
<div v-if="user.memo" :class="$style.memo">
<div :class="$style.heading" v-text="i18n.ts.memo"/>
<div :class="$style.memo-body">{{ user.memo }}</div>
</div>
<div :class="$style.description"> <div :class="$style.description">
<Mfm v-if="user.description" :nyaize="false" :class="$style.mfm" :text="user.description" :author="user"/> <Mfm v-if="user.description" :nyaize="false" :class="$style.mfm" :text="user.description" :author="user"/>
<div v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</div> <div v-else style="opacity: 0.7;">{{ i18n.ts.noAccountDescription }}</div>
@ -224,6 +228,34 @@ onMounted(() => {
opacity: 0.7; opacity: 0.7;
} }
.memo {
padding: 8px 8px 16px 8px;
margin: 0 8px 0 8px;
background: transparent;
color: var(--fg);
border: 1px solid var(--divider);
border-radius: var(--radius-sm);
line-height: 0;
> .heading {
text-align: left;
color: var(--fgTransparent);
line-height: 1.5;
font-size: 85%;
}
> .memo-body {
width: 100%;
height: auto;
min-height: 0;
line-height: 1.5;
color: var(--fg);
overflow: hidden;
background: transparent;
font-family: inherit;
}
}
.description { .description {
padding: 16px 26px; padding: 16px 26px;
font-size: 0.8em; font-size: 0.8em;