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

better styling and layout

Browse source
This commit is contained in:
Henry Jameson 2026-06-12 17:55:50 +03:00
commit 1417b941d0
6 changed files with 183 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/settings_modal/admin_tabs/emoji_tab.scss
View file

@ -3,6 +3,11 @@
margin: 0.5em 2em;
}
.setting-section {
margin-left: 0.5em;
margin-right: 0.5em;
}
.toolbar {
display: flex;
flex-wrap: wrap;

4
src/components/settings_modal/admin_tabs/frontends_tab.scss
View file

@ -1,4 +1,5 @@
.FrontendsTab {
padding: 0 1em;
.cards-list {
padding: 0;
}
@ -34,7 +35,8 @@
h5 {
margin: 0;
font-size: 1.15em
font-size: 1.15em;
text-transform: capitalize;
}
dl {

29
src/components/settings_modal/admin_tabs/users_tab.scss
View file

@ -2,14 +2,26 @@
max-height: 100%;
display: flex;
flex-direction: column;
overflow-y: hidden;
padding: 0;
h3 {
margin-left: 0.5em;
margin-right: 0.5em;
}
.splitter {
max-height: 100%;
display: flex;
overflow-y: hidden;
}
.filters-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
grid-auto-columns: 1fr;
grid-auto-flow: row;
gap: 0.5em 1em;
display: flex;
flex-direction: column;
gap: 1em;
border-right: 1px solid var(--border);
padding: 0 1em;
margin-right: 1em;
> div {
flex: 0 1 auto;
@ -17,7 +29,6 @@
.filter {
display: block;
margin-bottom: 0.5em;
min-width: 14em;
.query-label {
@ -29,4 +40,8 @@
}
}
}
.users-list {
flex: 1 0 30em;
}
}

261
src/components/settings_modal/admin_tabs/users_tab.vue
View file

@ -6,140 +6,143 @@
<h3>
{{ $t('admin_dash.users.title') }}
</h3>
<div class="filters-section">
<label class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.query') }}
</div>
<input
v-model="filtersQuery"
class="input string-input filter-input"
>
</label>
<label class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.name') }}
</div>
<input
v-model="filtersName"
class="input string-input filter-input"
>
</label>
<label class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.email') }}
</div>
<input
v-model="filtersEmail"
class="input string-input filter-input"
>
</label>
<div class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.origin') }}
</div>
<Select
v-model="filtersOrigin"
>
<option
value="all"
<div class="splitter">
<div class="filters-section">
<label class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.query') }}
</div>
<input
v-model="filtersQuery"
class="input string-input filter-input"
>
{{ $t('admin_dash.users.options.all') }}
</option>
<option
value="local"
</label>
<label class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.name') }}
</div>
<input
v-model="filtersName"
class="input string-input filter-input"
>
{{ $t('admin_dash.users.options.only_local') }}
</option>
<option
value="external"
</label>
<label class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.email') }}
</div>
<input
v-model="filtersEmail"
class="input string-input filter-input"
>
{{ $t('admin_dash.users.options.only_external') }}
</option>
</Select>
</div>
<div class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.activity') }}
</div>
<Select
v-model="filtersActivity"
>
<option
value="all"
>
{{ $t('admin_dash.users.options.all') }}
</option>
<option
value="active"
>
{{ $t('admin_dash.users.options.only_active') }}
</option>
<option
value="deactivated"
>
{{ $t('admin_dash.users.options.only_deactivated') }}
</option>
</Select>
</div>
<div class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.privileges') }}
</div>
<Select v-model="filtersPrivileges">
<option
value="all"
>
{{ $t('admin_dash.users.options.all') }}
</option>
<option
value="admin"
>
{{ $t('admin_dash.users.options.only_admins') }}
</option>
<option
value="modsnadmins"
>
{{ $t('admin_dash.users.options.only_privileged') }}
</option>
<option
value="moderator"
>
{{ $t('admin_dash.users.options.only_moderators') }}
</option>
</Select>
</div>
<div class="filter">
<Checkbox v-model="filtersNeedApproval">
{{ $t('admin_dash.users.options.only_unapproved') }}
</Checkbox>
</div>
<div class="filter">
<Checkbox v-model="filtersUnconfirmed">
{{ $t('admin_dash.users.options.only_unconfirmed') }}
</Checkbox>
</label>
<div class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.origin') }}
</div>
<Select
v-model="filtersOrigin"
>
<option
value="all"
>
{{ $t('admin_dash.users.options.all') }}
</option>
<option
value="local"
>
{{ $t('admin_dash.users.options.only_local') }}
</option>
<option
value="external"
>
{{ $t('admin_dash.users.options.only_external') }}
</option>
</Select>
</div>
<div class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.activity') }}
</div>
<Select
v-model="filtersActivity"
>
<option
value="all"
>
{{ $t('admin_dash.users.options.all') }}
</option>
<option
value="active"
>
{{ $t('admin_dash.users.options.only_active') }}
</option>
<option
value="deactivated"
>
{{ $t('admin_dash.users.options.only_deactivated') }}
</option>
</Select>
</div>
<div class="filter">
<div class="query-label">
{{ $t('admin_dash.users.labels.privileges') }}
</div>
<Select v-model="filtersPrivileges">
<option
value="all"
>
{{ $t('admin_dash.users.options.all') }}
</option>
<option
value="admin"
>
{{ $t('admin_dash.users.options.only_admins') }}
</option>
<option
value="modsnadmins"
>
{{ $t('admin_dash.users.options.only_privileged') }}
</option>
<option
value="moderator"
>
{{ $t('admin_dash.users.options.only_moderators') }}
</option>
</Select>
</div>
<div class="filter">
<Checkbox v-model="filtersNeedApproval">
{{ $t('admin_dash.users.options.only_unapproved') }}
</Checkbox>
</div>
<div class="filter">
<Checkbox v-model="filtersUnconfirmed">
{{ $t('admin_dash.users.options.only_unconfirmed') }}
</Checkbox>
</div>
</div>
<List
class="users-list"
ref="usersList"
:fetch-function="fetchUsers"
selectable
scrollable
@select="onSelect"
>
<template #header="{selected}">
<ModerationTools :users="selected" />
</template>
<template #item="{item}">
<AdminUserCard :user-id="item.id" />
</template>
<template #load>
<span> loading </span>
</template>
<template #empty>
<span> no users </span>
</template>
</List>
</div>
<List
ref="usersList"
:fetch-function="fetchUsers"
selectable
scrollable
@select="onSelect"
>
<template #header="{selected}">
<ModerationTools :users="selected" />
</template>
<template #item="{item}">
<AdminUserCard :user-id="item.id" />
</template>
<template #load>
<span> loading </span>
</template>
<template #empty>
<span> no users </span>
</template>
</List>
</div>
</template>
<script src="./users_tab.js"></script>

12
src/components/settings_modal/helpers/vertical_tab_switcher.jsx
View file

@ -160,19 +160,25 @@ export default {
'tab-content-wrapper',
active ? '-active' : '-hidden',
]
const slotWrapperClasses = [
'tab-slot-wrapper',
active ? '-active' : '-hidden',
]
const contentClasses = ['tab-content']
if (props['full-width'] || props['full-width'] === '') {
if (props['full-width'] || props['full-width'] != null) {
contentClasses.push('-full-width')
wrapperClasses.push('-full-width')
slotWrapperClasses.push('-full-width')
}
if (props['full-height'] || props['full-width'] === '') {
if (props['full-height'] || props['full-width'] != null) {
contentClasses.push('-full-height')
wrapperClasses.push('-full-height')
slotWrapperClasses.push('-full-height')
}
return (
<div class={wrapperClasses}>
<div class="tab-mobile-header">{header}</div>
<div class="tab-slot-wrapper">
<div class={slotWrapperClasses}>
<div class={contentClasses}>{renderSlot}</div>
</div>
</div>

12
src/components/settings_modal/helpers/vertical_tab_switcher.scss
View file

@ -49,6 +49,16 @@
grid-template-areas: ". content .";
flex-direction: column;
&.-full-width {
padding-left: 0;
padding-right: 0;
}
&.-full-height {
padding-top: 0;
padding-bottom: 0;
}
.tab-content {
grid-area: content;
@ -57,6 +67,8 @@
}
&.-full-height {
display: flex;
flex-direction: column;
height: 100%;
> * {