Merge branch 'markup-fixes-again' into 'develop'

Fix few markup inconsistencies

See merge request pleroma/pleroma-fe!2008

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,4 +1,6 @@
 <template>
+  <div class="column-inner">
+    <TermsOfServicePanel v-if="!hasSignUpNotice && !embeddedToS" />
     <div class="settings panel panel-default">
       <div class="panel-heading">
         <h1 class="title">
@@ -294,6 +296,7 @@
 
             <!-- eslint-disable vue/no-v-html -->
             <div
+              v-if="embeddedToS"
               class="terms-of-service"
               v-html="termsOfService"
             />
@@ -318,6 +321,7 @@
         </p>
       </div>
     </div>
+  </div>
 </template>
 
 <script src="./registration.js"></script>
@@ -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,6 +1,14 @@
 <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
@@ -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,