Fixed a community guidelines layout (#9893)

* Fixed a community guidelines layout

* Refactoring: add community guidelines component

website/client/components/groups/communityGuidelines.vue

@@ -0,0 +1,47 @@
+<template lang="pug">
+.row.community-guidelines(v-if='!communityGuidelinesAccepted')
+  div.col.col-sm-12.col-xl-8(v-once, v-html="$t('communityGuidelinesIntro')")
+
+  div.col-md-auto.col-md-12.col-xl-4
+    button.btn.btn-info.btn-follow-guidelines(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+</template>
+
+<style lang="scss">
+@import '~client/assets/scss/colors.scss';
+
+.community-guidelines {
+  background-color: rgba(135, 129, 144, 0.84);
+  padding: 1em;
+  color: $white;
+  position: absolute;
+  top: 0;
+  height: 150px;
+  margin-top: 2.3em;
+  width: 100%;
+  border-radius: 4px;
+  align-items: center;
+  justify-content: center;
+
+  .btn-follow-guidelines {
+    white-space: pre-line;
+  }
+}
+</style>
+
+<script>
+import { mapState } from 'client/libs/store';
+
+export default {
+  computed: {
+    ...mapState({user: 'user.data'}),
+    communityGuidelinesAccepted () {
+      return this.user.flags.communityGuidelinesAccepted;
+    },
+  },
+  methods: {
+    acceptCommunityGuidelines () {
+      this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
+    },
+  },
+};
+</script>

website/client/components/groups/group.vue

@@ -37,10 +37,7 @@
             button.btn.btn-secondary.float-left(v-once, @click='reverseChat()') {{ $t('reverseChat') }}
           .col-6
             button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
-        .row.community-guidelines(v-if='!communityGuidelinesAccepted')
-          div.col-8(v-once, v-html="$t('communityGuidelinesIntro')")
-          div.col-4
-            button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+        community-guidelines
         .row
           .col-12.hr
           chat-message(:chat.sync='group.chat', :group-id='group._id', group-name='group.name')
@@ -229,19 +226,6 @@
   .chat-row {
     margin-top: 2em;
 
-    .community-guidelines {
-      background-color: rgba(135, 129, 144, 0.84);
-      padding: 1em;
-      color: $white;
-      position: absolute;
-      top: 0;
-      height: 150px;
-      padding-top: 3em;
-      margin-top: 2.3em;
-      width: 100%;
-      border-radius: 4px;
-    }
-
     .new-message-row {
       position: relative;
     }
@@ -311,6 +295,7 @@ import groupChallenges from '../challenges/groupChallenges';
 import groupGemsModal from 'client/components/groups/groupGemsModal';
 import questSidebarSection from 'client/components/groups/questSidebarSection';
 import markdownDirective from 'client/directives/markdown';
+import communityGuidelines from './communityGuidelines';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -341,6 +326,7 @@ export default {
     questDetailsModal,
     groupGemsModal,
     questSidebarSection,
+    communityGuidelines,
   },
   directives: {
     markdown: markdownDirective,
@@ -381,9 +367,6 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
-    communityGuidelinesAccepted () {
-      return this.user.flags.communityGuidelinesAccepted;
-    },
     partyStore () {
       return this.$store.state.party;
     },
@@ -454,9 +437,6 @@ export default {
     },
   },
   methods: {
-    acceptCommunityGuidelines () {
-      this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
-    },
     load () {
       if (this.isParty) {
         this.searchId = 'party';

website/client/components/groups/tavern.vue

@@ -20,10 +20,7 @@
           .col-6
             button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
 
-        .row.community-guidelines(v-if='!communityGuidelinesAccepted')
-          div.col-8(v-once, v-html="$t('communityGuidelinesIntro')")
-          div.col-4
-            button.btn.btn-info(@click='acceptCommunityGuidelines()', v-once) {{ $t('acceptCommunityGuidelines') }}
+        community-guidelines
 
         .row
           .hr.col-12
@@ -148,19 +145,6 @@
   .chat-row {
     position: relative;
 
-    .community-guidelines {
-      background-color: rgba(135, 129, 144, 0.84);
-      padding: 1em;
-      color: $white;
-      position: absolute;
-      top: 0;
-      height: 150px;
-      padding-top: 3em;
-      margin-top: 2.3em;
-      width: 100%;
-      border-radius: 4px;
-    }
-
     textarea {
       height: 150px;
       width: 100%;
@@ -360,6 +344,7 @@ import { mapState } from 'client/libs/store';
 import { TAVERN_ID } from '../../../common/script/constants';
 import chatMessage from '../chat/chatMessages';
 import autocomplete from '../chat/autoComplete';
+import communityGuidelines from './communityGuidelines';
 
 import gemIcon from 'assets/svg/gem.svg';
 import questIcon from 'assets/svg/quest.svg';
@@ -384,6 +369,7 @@ export default {
   components: {
     chatMessage,
     autocomplete,
+    communityGuidelines,
   },
   data () {
     return {
@@ -502,9 +488,6 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
-    communityGuidelinesAccepted () {
-      return this.user.flags.communityGuidelinesAccepted;
-    },
   },
   async mounted () {
     this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
@@ -542,9 +525,6 @@ export default {
     selectedAutocomplete (newText) {
       this.newMessage = newText;
     },
-    acceptCommunityGuidelines () {
-      this.$store.dispatch('user:set', {'flags.communityGuidelinesAccepted': true});
-    },
     toggleSleep () {
       this.user.preferences.sleep = !this.user.preferences.sleep;
       this.$store.dispatch('user:sleep');