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

style updates

Browse source
This commit is contained in:
Henry Jameson 2025-07-29 19:00:45 +03:00
commit 731e9eed6e
7 changed files with 73 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/App.scss
View file

@ -525,6 +525,10 @@ textarea {
height: unset; height: unset;
} }
&::placeholder {
color: var(--textFaint)
}
--_padding: 0.5em; --_padding: 0.5em;
border: none; border: none;

1
src/components/account_actions/account_actions.vue
View file

@ -3,7 +3,6 @@
<Popover <Popover
trigger="click" trigger="click"
placement="bottom" placement="bottom"
:bound-to="{ x: 'container' }"
remove-padding remove-padding
> >
<template #content> <template #content>

12
src/components/user_card/user_card.scss
View file

@ -21,13 +21,15 @@
align-items: stretch; align-items: stretch;
// create new stacking context // create new stacking context
position: relative; position: relative;
overflow: hidden;
} }
.personal-marks { .personal-marks {
margin: 0.6em; margin: 0.6em;
padding: 0.6em; padding: 0.6em;
border-bottom: 1px solid var(--border);
&:not(:last-child) {
border-bottom: 1px solid var(--border);
}
.highlighter { .highlighter {
h4 { h4 {
@ -39,11 +41,9 @@
margin-left: -0.1em; margin-left: -0.1em;
&.-none select { &.-none select {
font-style: italic;
color: var(--textFaint); color: var(--textFaint);
option { option {
font-style: initial;
color: var(--text); color: var(--text);
background: var(--background); background: var(--background);
} }
@ -164,8 +164,8 @@
--_avatarShadowFilter: var(--avatarShadowFilter); --_avatarShadowFilter: var(--avatarShadowFilter);
--_avatarShadowInset: var(--avatarShadowInset); --_avatarShadowInset: var(--avatarShadowInset);
min-width: 6em; width: 7em;
height: 6em; height: 7em;
object-fit: cover; object-fit: cover;
} }
} }

91
src/components/user_card/user_card.vue
View file

@ -83,6 +83,7 @@
/> />
<router-link <router-link
v-else v-else
class="user-info-avatar"
:to="userProfileLink(user)" :to="userProfileLink(user)"
> >
<UserAvatar :user="user" /> <UserAvatar :user="user" />
@ -312,52 +313,52 @@
/> />
</dd> </dd>
</dl> </dl>
<div class="user-extras"> </div>
<span <div class="user-extras" v-if="!hideBio">
v-if="!hideBio && !mergedConfig.hideUserStats" <span
class="user-stats" v-if="!mergedConfig.hideUserStats"
class="user-stats"
>
<dl
class="user-count"
@click.prevent="setProfileView('statuses')"
v-if="!mergedConfig.hideUserStats && !hideBio"
> >
<dl <dd>{{ user.statuses_count }}</dd>
class="user-count" {{ ' ' }}
@click.prevent="setProfileView('statuses')" <dt>{{ $t('user_card.statuses') }}</dt>
v-if="!mergedConfig.hideUserStats && !hideBio" </dl>
> <dl
<dd>{{ user.statuses_count }}</dd> class="user-count"
{{ ' ' }} @click.prevent="setProfileView('statuses')"
<dt>{{ $t('user_card.statuses') }}</dt> >
</dl> <dd>{{ dailyAvg }}</dd>
<dl {{ ' ' }}
class="user-count" <dt>{{ $t('user_card.statuses_per_day') }}</dt>
@click.prevent="setProfileView('statuses')" </dl>
> <dl
<dd>{{ dailyAvg }}</dd> class="user-count"
{{ ' ' }} @click.prevent="setProfileView('friends')"
<dt>{{ $t('user_card.statuses_per_day') }}</dt> >
</dl> <dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd>
<dl {{ ' ' }}
class="user-count" <dt>{{ $t('user_card.followees') }}</dt>
@click.prevent="setProfileView('friends')" </dl>
> <dl
<dd>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</dd> class="user-count"
{{ ' ' }} @click.prevent="setProfileView('followers')"
<dt>{{ $t('user_card.followees') }}</dt> >
</dl> <dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd>
<dl {{ ' ' }}
class="user-count" <dt>{{ $t('user_card.followers') }}</dt>
@click.prevent="setProfileView('followers')" </dl>
> </span>
<dd>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</dd> <div class="birthday" v-if="!hideBio && !!user.birthday">
{{ ' ' }} <FAIcon
<dt>{{ $t('user_card.followers') }}</dt> class="fa-old-padding"
</dl> icon="birthday-cake"
</span> />
<div class="birthday" v-if="!hideBio && !!user.birthday"> {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
<FAIcon
class="fa-old-padding"
icon="birthday-cake"
/>
{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
</div>
</div> </div>
</div> </div>
<teleport to="#modal"> <teleport to="#modal">

9
src/components/user_note/user_note.js
View file

@ -11,14 +11,14 @@ const UserNote = {
}, },
data () { data () {
return { return {
localNote: '', localNote: this.relationship.note,
editing: false, editing: false,
frozen: false frozen: false
} }
}, },
computed: { watch: {
shouldShow () { relationship () {
return this.relationship.note || this.editing this.localNote = this.relationship.note
} }
}, },
methods: { methods: {
@ -39,6 +39,7 @@ const UserNote = {
}) })
.catch(() => { .catch(() => {
this.frozen = false this.frozen = false
this.editing = false
}) })
} }
} }

20
src/components/user_note/user_note.vue
View file

@ -5,19 +5,14 @@
> >
<h4>{{ $t('user_card.personal_note') }}</h4> <h4>{{ $t('user_card.personal_note') }}</h4>
<textarea <textarea
v-show="editing"
v-model="localNote" v-model="localNote"
class="input note-text" class="input note-text"
:class="{ unstyled: !editing }"
@focus="startEditing"
@blur="finalizeEditing" @blur="finalizeEditing"
rows="1"
:placeholder="$t('user_card.note_blank_click')"
/> />
<span
v-show="!editing"
class="note-text"
:class="{ '-blank': !relationship.note }"
@click="startEditing"
>
{{ relationship.note || $t('user_card.note_blank_click') }}
</span>
<span <span
class="overlay" class="overlay"
v-if="frozen" v-if="frozen"
@ -40,11 +35,8 @@
.note-text { .note-text {
align-self: stretch; align-self: stretch;
} min-width: 100%;
margin: -0.6em;
.note-text.-blank {
font-style: italic;
color: var(--textFaint);
} }
.overlay { .overlay {

7
src/components/user_panel/user_panel.vue
View file

@ -28,8 +28,13 @@
backdrop-filter: var(--backdrop-filter); backdrop-filter: var(--backdrop-filter);
} }
.other-actions {
top: -0.6em;
right: -0.6em;
}
.user-info { .user-info {
margin-bottom: 0; margin-bottom: -1em;
.background-image { .background-image {
max-height: 5.6em; max-height: 5.6em;