Fix few markup inconsistencies

changelog.d/markup-panels.fix

@@ -0,0 +1 @@
+Fix few markup panel inconsistencies; better ToS and registration

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')

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;

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>

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') }}

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>

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,

src/components/registration/registration.vue

@@ -1,321 +1,325 @@
 <template>
-  <div class="settings panel panel-default">
+  <div class="column-inner">
-    <div class="panel-heading">
+    <TermsOfServicePanel v-if="!hasSignUpNotice && !embeddedToS" />
-      <h1 class="title">
+    <div class="settings panel panel-default">
-        {{ $t('registration.registration') }}
+      <div class="panel-heading">
-      </h1>
+        <h1 class="title">
-    </div>
+          {{ $t('registration.registration') }}
-    <div
+        </h1>
-      v-if="!hasSignUpNotice"
+      </div>
-      class="panel-body"
+      <div
-    >
+        v-if="!hasSignUpNotice"
-      <form
+        class="panel-body"
-        class="registration-form"
-        @submit.prevent="submit(user)"
       >
-        <div class="container">
+        <form
-          <div class="text-fields">
+          class="registration-form"
-            <div
+          @submit.prevent="submit(user)"
-              class="form-group"
+        >
-              :class="{ 'form-group--error': v$.user.username.$error }"
+          <div class="container">
-            >
+            <div class="text-fields">
-              <label
+              <div
-                class="form--label"
+                class="form-group"
-                for="sign-up-username"
+                :class="{ 'form-group--error': v$.user.username.$error }"
-              >{{ $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>
+                <label
-            <div
+                  class="form--label"
-              v-if="v$.user.username.$dirty"
+                  for="sign-up-username"
-              class="form-error"
+                >{{ $t('login.username') }}</label>
-            >
-              <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')"
-              >
-            </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"
-              >
-            </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"
-              >
-            </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"
-              >
-            </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="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"
+                  id="sign-up-username"
-                  v-model="captcha.solution"
+                  v-model.trim="v$.user.username.$model"
                   :disabled="isPending"
                   class="input form-control"
-                  type="text"
+                  :aria-required="true"
-                  autocomplete="off"
+                  :placeholder="$t('registration.username_placeholder')"
-                  autocorrect="off"
-                  autocapitalize="off"
-                  spellcheck="false"
                 >
-              </template>
+              </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')"
+                >
+              </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"
+                >
+              </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"
+                >
+              </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"
+                >
+              </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="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"
+                >
+              </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"
+              v-if="embeddedToS"
-              class="form-group"
+              class="terms-of-service"
-            >
+              v-html="termsOfService"
-              <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>
-          </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>
           </div>
-        </div>
+          <div
-      </form>
+            v-if="serverValidationErrors.length"
-    </div>
+            class="form-group"
-    <div v-else>
+          >
-      <p class="registration-notice">
+            <div class="alert error">
-        {{ signUpNotice.message }}
+              <span
-      </p>
+                v-for="error in serverValidationErrors"
+                :key="error"
+              >{{ error }}</span>
+            </div>
+          </div>
+        </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>

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: 1em;
-  padding-top: 1em;
 
   .basic-user-card {
     padding-left: 0;

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
     }
   }
 }

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>

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"

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",

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,