commit: 3627aadeadb5a154fe21fc6e453ba31caa5bff0d
parent f659c9c123622a5206f17f6f17711f0572fc2119
Author: Pleroma User <66706-pleromian@users.noreply.git.pleroma.social>
Date: Mon, 10 Feb 2025 21:20:56 +0000
Fix few markup inconsistencies
Diffstat:
14 files changed, 355 insertions(+), 314 deletions(-)
diff --git a/changelog.d/markup-panels.fix b/changelog.d/markup-panels.fix
@@ -0,0 +1 @@
+Fix few markup panel inconsistencies; better ToS and registration
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
@@ -129,6 +129,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
copyInstanceOption('theme')
copyInstanceOption('style')
copyInstanceOption('palette')
+ copyInstanceOption('embeddedToS')
copyInstanceOption('nsfwCensorImage')
copyInstanceOption('background')
copyInstanceOption('hidePostStats')
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
@@ -34,7 +34,7 @@
</div>
<div
v-else
- class="emtpy-chat-list-alert"
+ class="empty-chat-list-alert"
>
<span>{{ $t('chats.empty_chat_list_placeholder') }}</span>
</div>
@@ -50,7 +50,7 @@
margin-bottom: 0;
}
-.emtpy-chat-list-alert {
+.empty-chat-list-alert {
padding: 3em;
font-size: 1.2em;
display: flex;
diff --git a/src/components/drafts/drafts.vue b/src/components/drafts/drafts.vue
@@ -1,15 +1,18 @@
<template>
<div class="Drafts">
<div class="panel panel-default">
- <div class="panel-heading">
+ <div class="panel-heading -sticky">
<div class="title">
{{ $t('drafts.drafts') }}
</div>
</div>
<div class="panel-body">
- <p v-if="drafts.length === 0">
+ <div
+ v-if="drafts.length === 0"
+ class="empty-drafs-list-alert"
+ >
{{ $t('drafts.no_drafts') }}
- </p>
+ </div>
<List
v-else
:items="drafts"
@@ -33,4 +36,13 @@
.draft {
margin: 1em 0;
}
+
+.empty-drafs-list-alert {
+ padding: 3em;
+ font-size: 1.2em;
+ display: flex;
+ justify-content: center;
+ color: var(--textFaint);
+}
+
</style>
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
@@ -1,12 +1,12 @@
<template>
<div class="features-panel">
<div class="panel panel-default base01-background">
- <div class="panel-heading timeline-heading base02-background base04">
+ <div class="panel-heading timeline-heading base02-background base04 -sticky">
<h1 class="title">
{{ $t('features_panel.title') }}
</h1>
</div>
- <div class="panel-body features-panel">
+ <div class="panel-body">
<ul>
<li v-if="shout">
{{ $t('features_panel.shout') }}
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -4,7 +4,7 @@
class="mrf-transparency-panel"
>
<div class="panel panel-default base01-background">
- <div class="panel-heading timeline-heading base02-background">
+ <div class="panel-heading timeline-heading base02-background -sticky">
<div class="title">
{{ $t("about.mrf.federation") }}
</div>
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
@@ -4,6 +4,7 @@ import { mapActions, mapState } from 'vuex'
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
import localeService from '../../services/locale/locale.service.js'
import { DAY } from 'src/services/date_utils/date_utils.js'
+import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
const registration = {
setup () { return { v$: useVuelidate() } },
@@ -21,7 +22,8 @@ const registration = {
captcha: {}
}),
components: {
- InterfaceLanguageSwitcher
+ InterfaceLanguageSwitcher,
+ TermsOfServicePanel
},
validations () {
return {
@@ -86,6 +88,7 @@ const registration = {
signUpNotice: (state) => state.users.signUpNotice,
hasSignUpNotice: (state) => !!state.users.signUpNotice.message,
termsOfService: (state) => state.instance.tos,
+ embeddedToS: (state) => state.instance.embeddedToS,
accountActivationRequired: (state) => state.instance.accountActivationRequired,
accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
birthdayRequired: (state) => state.instance.birthdayRequired,
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
@@ -1,321 +1,325 @@
<template>
- <div class="settings panel panel-default">
- <div class="panel-heading">
- <h1 class="title">
- {{ $t('registration.registration') }}
- </h1>
- </div>
- <div
- v-if="!hasSignUpNotice"
- class="panel-body"
- >
- <form
- class="registration-form"
- @submit.prevent="submit(user)"
+ <div class="column-inner">
+ <TermsOfServicePanel v-if="!hasSignUpNotice && !embeddedToS" />
+ <div class="settings panel panel-default">
+ <div class="panel-heading">
+ <h1 class="title">
+ {{ $t('registration.registration') }}
+ </h1>
+ </div>
+ <div
+ v-if="!hasSignUpNotice"
+ class="panel-body"
>
- <div class="container">
- <div class="text-fields">
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.username.$error }"
- >
- <label
- class="form--label"
- for="sign-up-username"
- >{{ $t('login.username') }}</label>
- <input
- id="sign-up-username"
- v-model.trim="v$.user.username.$model"
- :disabled="isPending"
- class="input form-control"
- :aria-required="true"
- :placeholder="$t('registration.username_placeholder')"
+ <form
+ class="registration-form"
+ @submit.prevent="submit(user)"
+ >
+ <div class="container">
+ <div class="text-fields">
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.username.$error }"
>
- </div>
- <div
- v-if="v$.user.username.$dirty"
- class="form-error"
- >
- <ul>
- <li v-if="!v$.user.username.required">
- <span>{{ $t('registration.validations.username_required') }}</span>
- </li>
- </ul>
- </div>
-
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.fullname.$error }"
- >
- <label
- class="form--label"
- for="sign-up-fullname"
- >{{ $t('registration.fullname') }}</label>
- <input
- id="sign-up-fullname"
- v-model.trim="v$.user.fullname.$model"
- :disabled="isPending"
- class="input form-control"
- :aria-required="true"
- :placeholder="$t('registration.fullname_placeholder')"
+ <label
+ class="form--label"
+ for="sign-up-username"
+ >{{ $t('login.username') }}</label>
+ <input
+ id="sign-up-username"
+ v-model.trim="v$.user.username.$model"
+ :disabled="isPending"
+ class="input form-control"
+ :aria-required="true"
+ :placeholder="$t('registration.username_placeholder')"
+ >
+ </div>
+ <div
+ v-if="v$.user.username.$dirty"
+ class="form-error"
>
- </div>
- <div
- v-if="v$.user.fullname.$dirty"
- class="form-error"
- >
- <ul>
- <li v-if="!v$.user.fullname.required">
- <span>{{ $t('registration.validations.fullname_required') }}</span>
- </li>
- </ul>
- </div>
-
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.email.$error }"
- >
- <label
- class="form--label"
- for="email"
- >{{ accountActivationRequired ? $t('registration.email') : $t('registration.email_optional') }}</label>
- <input
- id="email"
- v-model="v$.user.email.$model"
- :disabled="isPending"
- class="input form-control"
- type="email"
- :aria-required="accountActivationRequired"
+ <ul>
+ <li v-if="!v$.user.username.required">
+ <span>{{ $t('registration.validations.username_required') }}</span>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.fullname.$error }"
>
- </div>
- <div
- v-if="v$.user.email.$dirty"
- class="form-error"
- >
- <ul>
- <li v-if="!v$.user.email.required">
- <span>{{ $t('registration.validations.email_required') }}</span>
- </li>
- </ul>
- </div>
-
- <div class="form-group">
- <label
- class="form--label"
- for="bio"
- >{{ $t('registration.bio_optional') }}</label>
- <textarea
- id="bio"
- v-model="user.bio"
- :disabled="isPending"
- class="input form-control"
- :placeholder="bioPlaceholder"
- />
- </div>
-
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.password.$error }"
- >
- <label
- class="form--label"
- for="sign-up-password"
- >{{ $t('login.password') }}</label>
- <input
- id="sign-up-password"
- v-model="user.password"
- :disabled="isPending"
- class="input form-control"
- type="password"
- :aria-required="true"
+ <label
+ class="form--label"
+ for="sign-up-fullname"
+ >{{ $t('registration.fullname') }}</label>
+ <input
+ id="sign-up-fullname"
+ v-model.trim="v$.user.fullname.$model"
+ :disabled="isPending"
+ class="input form-control"
+ :aria-required="true"
+ :placeholder="$t('registration.fullname_placeholder')"
+ >
+ </div>
+ <div
+ v-if="v$.user.fullname.$dirty"
+ class="form-error"
>
- </div>
- <div
- v-if="v$.user.password.$dirty"
- class="form-error"
- >
- <ul>
- <li v-if="!v$.user.password.required">
- <span>{{ $t('registration.validations.password_required') }}</span>
- </li>
- </ul>
- </div>
-
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.confirm.$error }"
- >
- <label
- class="form--label"
- for="sign-up-password-confirmation"
- >{{ $t('registration.password_confirm') }}</label>
- <input
- id="sign-up-password-confirmation"
- v-model="user.confirm"
- :disabled="isPending"
- class="input form-control"
- type="password"
- :aria-required="true"
+ <ul>
+ <li v-if="!v$.user.fullname.required">
+ <span>{{ $t('registration.validations.fullname_required') }}</span>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.email.$error }"
>
- </div>
- <div
- v-if="v$.user.confirm.$dirty"
- class="form-error"
- >
- <ul>
- <li v-if="v$.user.confirm.required.$invalid">
- <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
- </li>
- <li v-if="v$.user.confirm.sameAs.$invalid">
- <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
- </li>
- </ul>
- </div>
+ <label
+ class="form--label"
+ for="email"
+ >{{ accountActivationRequired ? $t('registration.email') : $t('registration.email_optional') }}</label>
+ <input
+ id="email"
+ v-model="v$.user.email.$model"
+ :disabled="isPending"
+ class="input form-control"
+ type="email"
+ :aria-required="accountActivationRequired"
+ >
+ </div>
+ <div
+ v-if="v$.user.email.$dirty"
+ class="form-error"
+ >
+ <ul>
+ <li v-if="!v$.user.email.required">
+ <span>{{ $t('registration.validations.email_required') }}</span>
+ </li>
+ </ul>
+ </div>
+
+ <div class="form-group">
+ <label
+ class="form--label"
+ for="bio"
+ >{{ $t('registration.bio_optional') }}</label>
+ <textarea
+ id="bio"
+ v-model="user.bio"
+ :disabled="isPending"
+ class="input form-control"
+ :placeholder="bioPlaceholder"
+ />
+ </div>
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.birthday.$error }"
- >
- <label
- class="form--label"
- for="sign-up-birthday"
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.password.$error }"
>
- {{ birthdayRequired ? $t('registration.birthday') : $t('registration.birthday_optional') }}
- </label>
- <input
- id="sign-up-birthday"
- v-model="user.birthday"
- :disabled="isPending"
- class="input form-control"
- type="date"
- :max="birthdayRequired ? birthdayMinAttr : undefined"
- :aria-required="birthdayRequired"
+ <label
+ class="form--label"
+ for="sign-up-password"
+ >{{ $t('login.password') }}</label>
+ <input
+ id="sign-up-password"
+ v-model="user.password"
+ :disabled="isPending"
+ class="input form-control"
+ type="password"
+ :aria-required="true"
+ >
+ </div>
+ <div
+ v-if="v$.user.password.$dirty"
+ class="form-error"
>
- </div>
- <div
- v-if="v$.user.birthday.$dirty"
- class="form-error"
- >
- <ul>
- <li v-if="v$.user.birthday.required.$invalid">
- <span>{{ $t('registration.validations.birthday_required') }}</span>
- </li>
- <li v-if="v$.user.birthday.maxValue.$invalid">
- <span>{{ $t('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
- </li>
- </ul>
- </div>
-
- <div
- class="form-group"
- :class="{ 'form-group--error': v$.user.language.$error }"
- >
- <interface-language-switcher
- for="email-language"
- :prompt-text="$t('registration.email_language')"
- :language="v$.user.language.$model"
- :set-language="val => v$.user.language.$model = val"
- @click.stop.prevent
- />
- </div>
-
- <div
- v-if="accountApprovalRequired"
- class="form-group"
- >
- <label
- class="form--label"
- for="reason"
- >{{ $t('registration.reason') }}</label>
- <textarea
- id="reason"
- v-model="user.reason"
- :disabled="isPending"
- class="input form-control"
- :placeholder="reasonPlaceholder"
- />
- </div>
-
- <div
- v-if="captcha.type != 'none'"
- id="captcha-group"
- class="form-group"
- >
- <label
- class="form--label"
- for="captcha-label"
- >{{ $t('registration.captcha') }}</label>
-
- <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
- <img
- :src="captcha.url"
- @click="setCaptcha"
+ <ul>
+ <li v-if="!v$.user.password.required">
+ <span>{{ $t('registration.validations.password_required') }}</span>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.confirm.$error }"
+ >
+ <label
+ class="form--label"
+ for="sign-up-password-confirmation"
+ >{{ $t('registration.password_confirm') }}</label>
+ <input
+ id="sign-up-password-confirmation"
+ v-model="user.confirm"
+ :disabled="isPending"
+ class="input form-control"
+ type="password"
+ :aria-required="true"
>
-
- <sub>{{ $t('registration.new_captcha') }}</sub>
-
+ </div>
+ <div
+ v-if="v$.user.confirm.$dirty"
+ class="form-error"
+ >
+ <ul>
+ <li v-if="v$.user.confirm.required.$invalid">
+ <span>{{ $t('registration.validations.password_confirmation_required') }}</span>
+ </li>
+ <li v-if="v$.user.confirm.sameAs.$invalid">
+ <span>{{ $t('registration.validations.password_confirmation_match') }}</span>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.birthday.$error }"
+ >
+ <label
+ class="form--label"
+ for="sign-up-birthday"
+ >
+ {{ birthdayRequired ? $t('registration.birthday') : $t('registration.birthday_optional') }}
+ </label>
<input
- id="captcha-answer"
- v-model="captcha.solution"
+ id="sign-up-birthday"
+ v-model="user.birthday"
+ :disabled="isPending"
+ class="input form-control"
+ type="date"
+ :max="birthdayRequired ? birthdayMinAttr : undefined"
+ :aria-required="birthdayRequired"
+ >
+ </div>
+ <div
+ v-if="v$.user.birthday.$dirty"
+ class="form-error"
+ >
+ <ul>
+ <li v-if="v$.user.birthday.required.$invalid">
+ <span>{{ $t('registration.validations.birthday_required') }}</span>
+ </li>
+ <li v-if="v$.user.birthday.maxValue.$invalid">
+ <span>{{ $t('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
+ </li>
+ </ul>
+ </div>
+
+ <div
+ class="form-group"
+ :class="{ 'form-group--error': v$.user.language.$error }"
+ >
+ <interface-language-switcher
+ for="email-language"
+ :prompt-text="$t('registration.email_language')"
+ :language="v$.user.language.$model"
+ :set-language="val => v$.user.language.$model = val"
+ @click.stop.prevent
+ />
+ </div>
+
+ <div
+ v-if="accountApprovalRequired"
+ class="form-group"
+ >
+ <label
+ class="form--label"
+ for="reason"
+ >{{ $t('registration.reason') }}</label>
+ <textarea
+ id="reason"
+ v-model="user.reason"
:disabled="isPending"
class="input form-control"
+ :placeholder="reasonPlaceholder"
+ />
+ </div>
+
+ <div
+ v-if="captcha.type != 'none'"
+ id="captcha-group"
+ class="form-group"
+ >
+ <label
+ class="form--label"
+ for="captcha-label"
+ >{{ $t('registration.captcha') }}</label>
+
+ <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
+ <img
+ :src="captcha.url"
+ @click="setCaptcha"
+ >
+
+ <sub>{{ $t('registration.new_captcha') }}</sub>
+
+ <input
+ id="captcha-answer"
+ v-model="captcha.solution"
+ :disabled="isPending"
+ class="input form-control"
+ type="text"
+ autocomplete="off"
+ autocorrect="off"
+ autocapitalize="off"
+ spellcheck="false"
+ >
+ </template>
+ </div>
+
+ <div
+ v-if="token"
+ class="form-group"
+ >
+ <label for="token">{{ $t('registration.token') }}</label>
+ <input
+ id="token"
+ v-model="token"
+ disabled="true"
+ class="input form-control"
type="text"
- autocomplete="off"
- autocorrect="off"
- autocapitalize="off"
- spellcheck="false"
>
- </template>
+ </div>
+ <div class="form-group">
+ <button
+ :disabled="isPending"
+ type="submit"
+ class="btn button-default"
+ >
+ {{ $t('registration.register') }}
+ </button>
+ </div>
</div>
+ <!-- eslint-disable vue/no-v-html -->
<div
- v-if="token"
- class="form-group"
- >
- <label for="token">{{ $t('registration.token') }}</label>
- <input
- id="token"
- v-model="token"
- disabled="true"
- class="input form-control"
- type="text"
- >
- </div>
- <div class="form-group">
- <button
- :disabled="isPending"
- type="submit"
- class="btn button-default"
- >
- {{ $t('registration.register') }}
- </button>
- </div>
+ v-if="embeddedToS"
+ class="terms-of-service"
+ v-html="termsOfService"
+ />
+ <!-- eslint-enable vue/no-v-html -->
</div>
-
- <!-- eslint-disable vue/no-v-html -->
<div
- class="terms-of-service"
- v-html="termsOfService"
- />
- <!-- eslint-enable vue/no-v-html -->
- </div>
- <div
- v-if="serverValidationErrors.length"
- class="form-group"
- >
- <div class="alert error">
- <span
- v-for="error in serverValidationErrors"
- :key="error"
- >{{ error }}</span>
+ v-if="serverValidationErrors.length"
+ class="form-group"
+ >
+ <div class="alert error">
+ <span
+ v-for="error in serverValidationErrors"
+ :key="error"
+ >{{ error }}</span>
+ </div>
</div>
- </div>
- </form>
- </div>
- <div v-else>
- <p class="registration-notice">
- {{ signUpNotice.message }}
- </p>
+ </form>
+ </div>
+ <div v-else>
+ <p class="registration-notice">
+ {{ signUpNotice.message }}
+ </p>
+ </div>
</div>
</div>
</template>
@@ -325,7 +329,7 @@
.registration-form {
display: flex;
flex-direction: column;
- margin: 0.6em;
+ margin: 1em;
.container {
display: flex;
@@ -338,7 +342,7 @@
.terms-of-service {
flex: 0 1 50%;
- margin: 0.8em;
+ margin: 0.6em 0 0 0.8em;
}
.text-fields {
@@ -417,6 +421,10 @@
@media all and (max-width: 800px) {
.registration-form .container {
flex-direction: column-reverse;
+
+ .terms-of-service {
+ margin: 0;
+ }
}
}
</style>
diff --git a/src/components/staff_panel/staff_panel.vue b/src/components/staff_panel/staff_panel.vue
@@ -1,7 +1,7 @@
<template>
<div class="staff-panel">
<div class="panel panel-default base01-background">
- <div class="panel-heading timeline-heading base02-background">
+ <div class="panel-heading timeline-heading base02-background -sticky">
<div class="title">
{{ $t("about.staff") }}
</div>
@@ -28,8 +28,7 @@
<style lang="scss">
.staff-group {
- padding-left: 1em;
- padding-top: 1em;
+ padding: 1em;
.basic-user-card {
padding-left: 0;
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.js b/src/components/terms_of_service_panel/terms_of_service_panel.js
@@ -2,6 +2,9 @@ const TermsOfServicePanel = {
computed: {
content () {
return this.$store.state.instance.tos
+ },
+ embedded () {
+ return this.$store.state.instance.embeddedToS
}
}
}
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue
@@ -1,13 +1,21 @@
<template>
- <div>
+ <div class="terms-of-service-panel">
<div class="panel panel-default">
+ <div
+ v-if="!embedded"
+ class="panel-heading -sticky"
+ >
+ <div class="title">
+ {{ $t("about.terms") }}
+ </div>
+ </div>
<div class="panel-body">
<!-- eslint-disable vue/no-v-html -->
<div
class="tos-content"
v-html="content"
/>
- <!-- eslint-enable vue/no-v-html -->
+ <!-- eslint-enable vue/no-v-html -->
</div>
</div>
</div>
@@ -19,4 +27,5 @@
.tos-content {
margin: 1em;
}
+
</style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
@@ -275,7 +275,10 @@
/>
</div>
</div>
- <div v-if="!hideBio">
+ <div
+ v-if="!hideBio"
+ class="user-bio"
+ >
<div
v-if="!mergedConfig.hideUserStats && switcher"
class="user-counts"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -30,7 +30,8 @@
"media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
}
},
- "staff": "Staff"
+ "staff": "Staff",
+ "terms": "Terms of Service"
},
"announcements": {
"page_header": "Announcements",
diff --git a/src/modules/instance.js b/src/modules/instance.js
@@ -54,6 +54,7 @@ const defaultState = {
defaultAvatar: '/images/avi.png',
defaultBanner: '/images/banner.png',
background: '/static/aurora_borealis.jpg',
+ embeddedToS: true,
collapseMessageWithSubject: false,
greentext: false,
useAtIcon: false,
