Merge pull request #1283 from Human-Connection/fix/header-alignment

fix(header-alignment): Fix logo and locale position.

webapp/components/PageFooter/PageFooter.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="footer" class="ds-footer">
+    <a href="https://human-connection.org" target="_blank" v-html="$t('site.made')"></a>
+    <span>-</span>
+    <nuxt-link to="/imprint">{{ $t('site.imprint') }}</nuxt-link>
+    <span>-</span>
+    <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
+    <span>-</span>
+    <nuxt-link to="/code-of-conduct">{{ $t('site.code-of-conduct') }}</nuxt-link>
+    <span>-</span>
+    <nuxt-link to="/data-privacy">{{ $t('site.data-privacy') }}</nuxt-link>
+    <span>-</span>
+    <nuxt-link to="/changelog">{{ $t('site.changelog') }}</nuxt-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ds-footer {
+  text-align: center;
+  position: fixed;
+  bottom: 0px;
+  z-index: 10;
+  background-color: white;
+  width: 100%;
+  padding: 10px 10px;
+  box-shadow: 0px -6px 12px -4px rgba(0, 0, 0, 0.1);
+}
+span {
+  margin-right: 0.2rem;
+}
+</style>

webapp/components/PasswordReset/Request.spec.js

@@ -6,11 +6,11 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+config.stubs['client-only'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('Request', () => {
-  let wrapper
+  let wrapper, Wrapper, mocks, stubs
-  let Wrapper
-  let mocks
 
   beforeEach(() => {
     mocks = {
@@ -23,6 +23,12 @@ describe('Request', () => {
         loading: false,
         mutate: jest.fn().mockResolvedValue({ data: { reqestPasswordReset: true } }),
       },
+      $i18n: {
+        locale: () => 'en',
+      },
+    }
+    stubs = {
+      LocaleSwitch: "<div class='stub'></div>",
     }
   })
 
@@ -33,6 +39,7 @@ describe('Request', () => {
       return mount(Request, {
         mocks,
         localVue,
+        stubs,
       })
     }
 

webapp/components/PasswordReset/Request.vue

@@ -1,58 +1,77 @@
 <template>
   <ds-card class="password-reset">
-    <ds-space margin="large">
+    <ds-flex gutter="small">
-      <ds-form
+      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
-        v-if="!submitted"
+        <client-only>
-        @input="handleInput"
+          <locale-switch class="login-locale-switch" offset="5" />
-        @input-valid="handleInputValid"
+        </client-only>
-        v-model="formData"
+        <ds-space margin-top="small" margin-bottom="xxx-small" centered>
-        :schema="formSchema"
+          <img class="login-image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
-        @submit="handleSubmit"
-      >
-        <ds-input
-          :placeholder="$t('login.email')"
-          type="email"
-          id="email"
-          model="email"
-          name="email"
-          icon="envelope"
-        />
-        <ds-space margin-botton="large">
-          <ds-text>
-            {{ $t('password-reset.form.description') }}
-          </ds-text>
         </ds-space>
-        <ds-button
+      </ds-flex-item>
-          :disabled="disabled"
+      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
-          :loading="$apollo.loading"
+        <ds-space margin="small">
-          primary
+          <ds-text size="small" align="left">{{ $t('login.copy') }}</ds-text>
-          fullwidth
+        </ds-space>
-          name="submit"
+        <ds-form
-          type="submit"
+          v-if="!submitted"
-          icon="envelope"
+          @input="handleInput"
+          @input-valid="handleInputValid"
+          v-model="formData"
+          :schema="formSchema"
+          @submit="handleSubmit"
         >
-          {{ $t('password-reset.form.submit') }}
+          <ds-input
-        </ds-button>
+            :placeholder="$t('login.email')"
-      </ds-form>
+            type="email"
-      <div v-else>
+            id="email"
-        <transition name="ds-transition-fade">
+            model="email"
-          <ds-flex centered>
+            name="email"
-            <sweetalert-icon icon="info" />
+            icon="envelope"
-          </ds-flex>
+          />
-        </transition>
+          <ds-space margin-botton="large">
-        <ds-text v-html="submitMessage" />
+            <ds-text align="left">{{ $t('password-reset.form.description') }}</ds-text>
-      </div>
+          </ds-space>
-    </ds-space>
+          <ds-button
+            :disabled="disabled"
+            :loading="$apollo.loading"
+            primary
+            fullwidth
+            name="submit"
+            type="submit"
+            icon="envelope"
+          >
+            {{ $t('password-reset.form.submit') }}
+          </ds-button>
+        </ds-form>
+        <div v-else>
+          <transition name="ds-transition-fade">
+            <ds-flex centered>
+              <sweetalert-icon icon="info" />
+            </ds-flex>
+          </transition>
+          <ds-text v-html="submitMessage" align="left" />
+        </div>
+        <ds-space margin-bottom="small" />
+        <div>
+          <nuxt-link to="/login">{{ $t('site.login') }}</nuxt-link>
+        </div>
+      </ds-flex-item>
+    </ds-flex>
+
+    <ds-space margin="x-small"></ds-space>
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
+import LocaleSwitch from '../LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
     SweetalertIcon,
+    LocaleSwitch,
   },
   data() {
     return {
@@ -105,3 +124,17 @@ export default {
   },
 }
 </script>
+<style>
+.login-image {
+  width: 90%;
+  max-width: 200px;
+}
+.password-reset {
+  position: relative;
+}
+.login-locale-switch {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+}
+</style>

webapp/components/Registration/CreateUserAccount.spec.js

@@ -7,12 +7,10 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+config.stubs['client-only'] = '<span><slot /></span>'
 
 describe('CreateUserAccount', () => {
-  let wrapper
+  let wrapper, Wrapper, mocks, propsData, stubs
-  let Wrapper
-  let mocks
-  let propsData
 
   beforeEach(() => {
     mocks = {
@@ -27,6 +25,9 @@ describe('CreateUserAccount', () => {
       },
     }
     propsData = {}
+    stubs = {
+      LocaleSwitch: "<div class='stub'></div>",
+    }
   })
 
   describe('mount', () => {
@@ -35,6 +36,7 @@ describe('CreateUserAccount', () => {
         mocks,
         propsData,
         localVue,
+        stubs,
       })
     }
 

webapp/components/Registration/CreateUserAccount.vue

@@ -16,7 +16,10 @@
       @submit="submit"
     >
       <template slot-scope="{ errors }">
-        <ds-card :header="$t('registration.create-user-account.title')">
+        <ds-card class="create-account-card" :header="$t('registration.create-user-account.title')">
+          <client-only>
+            <locale-switch class="create-account-locale-switch" offset="5" />
+          </client-only>
           <ds-input
             id="name"
             model="name"
@@ -88,11 +91,13 @@ import { SweetalertIcon } from 'vue-sweetalert-icons'
 import PasswordForm from '~/components/utils/PasswordFormHelper'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 import { SignupVerificationMutation } from '~/graphql/Registration.js'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
     PasswordStrength,
     SweetalertIcon,
+    LocaleSwitch,
   },
   data() {
     const passwordForm = PasswordForm({ translate: this.$t })
@@ -151,3 +156,14 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.create-account-card {
+  position: relative;
+}
+.create-account-locale-switch {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+}
+</style>

webapp/layouts/basic.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="layout-blank">
+    <div class="main-navigation">
+      <ds-container width="x-large" class="main-navigation-container" style="padding: 10px 10px;">
+        <ds-flex class="main-navigation-flex" centered>
+          <ds-flex-item width="5.5%" />
+          <ds-flex-item style="flex-grow:1;" width="20%">
+            <a @click="redirectToRoot">
+              <ds-logo />
+            </a>
+          </ds-flex-item>
+          <ds-flex-item width="20%" style="flex-grow:0;">
+            <client-only>
+              <locale-switch class="topbar-locale-switch" placement="top" offset="16" />
+            </client-only>
+          </ds-flex-item>
+        </ds-flex>
+      </ds-container>
+    </div>
+    <ds-container>
+      <div style="padding: 5rem 2rem;">
+        <nuxt />
+      </div>
+    </ds-container>
+    <page-footer></page-footer>
+    <div id="overlay" />
+  </div>
+</template>
+
+<script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import seo from '~/mixins/seo'
+import PageFooter from '~/components/PageFooter/PageFooter'
+
+export default {
+  components: {
+    LocaleSwitch,
+    PageFooter,
+  },
+  mixins: [seo],
+  methods: {
+    redirectToRoot() {
+      this.$router.replace('/')
+    },
+  },
+}
+</script>

webapp/layouts/blank.vue

@@ -11,7 +11,6 @@
 
 <script>
 import seo from '~/mixins/seo'
-
 export default {
   mixins: [seo],
 }

webapp/layouts/default.vue

@@ -3,8 +3,8 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container" style="padding: 10px 10px;">
         <div>
-          <ds-flex class="main-navigation-flex" centered>
+          <ds-flex class="main-navigation-flex">
-            <ds-flex-item :width="{ lg: '3.5%' }" />
+            <ds-flex-item :width="{ lg: '30%' }" />
             <ds-flex-item :width="{ base: '80%', sm: '80%', md: '80%', lg: '15%' }">
               <nuxt-link :to="{ name: 'index' }">
                 <ds-logo />
@@ -126,19 +126,7 @@
         <nuxt />
       </div>
     </ds-container>
-    <div id="footer" class="ds-footer">
+    <page-footer />
-      <a href="https://human-connection.org" target="_blank" v-html="$t('site.made')"></a>
-      &nbsp;-&nbsp;
-      <nuxt-link to="/imprint">{{ $t('site.imprint') }}</nuxt-link>
-      &nbsp;‑&nbsp;
-      <nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link>
-      &nbsp;‑&nbsp;
-      <nuxt-link to="/code-of-conduct">{{ $t('site.code-of-conduct') }}</nuxt-link>
-      &nbsp;‑&nbsp;
-      <nuxt-link to="/data-privacy">{{ $t('site.data-privacy') }}</nuxt-link>
-      &nbsp;‑&nbsp;
-      <nuxt-link to="/changelog">{{ $t('site.changelog') }}</nuxt-link>
-    </div>
     <div id="overlay" />
     <client-only>
       <modal />
@@ -157,6 +145,8 @@ import HcAvatar from '~/components/Avatar/Avatar.vue'
 import seo from '~/mixins/seo'
 import FilterPosts from '~/components/FilterPosts/FilterPosts.vue'
 import CategoryQuery from '~/graphql/CategoryQuery.js'
+import PageFooter from '~/components/PageFooter/PageFooter'
+
 export default {
   components: {
     Dropdown,
@@ -166,6 +156,7 @@ export default {
     NotificationMenu,
     HcAvatar,
     FilterPosts,
+    PageFooter,
   },
   mixins: [seo],
   data() {
@@ -346,13 +337,4 @@ export default {
     display: none;
   }
 }
-.ds-footer {
-  text-align: center;
-  position: fixed;
-  bottom: 0px;
-  z-index: 10;
-  background-color: white;
-  width: 100%;
-  padding: 10px 10px;
-}
 </style>

webapp/layouts/no-header.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="layout-blank">
+    <ds-container>
+      <div style="padding: 5rem 2rem;">
+        <nuxt />
+      </div>
+    </ds-container>
+    <page-footer />
+    <div id="overlay" />
+  </div>
+</template>
+
+<script>
+import seo from '~/mixins/seo'
+import PageFooter from '~/components/PageFooter/PageFooter'
+
+export default {
+  components: {
+    PageFooter,
+  },
+  mixins: [seo],
+  methods: {
+    redirectToRoot() {
+      this.$router.replace('/')
+    },
+  },
+}
+</script>

webapp/locales/de.json

@@ -41,7 +41,8 @@
     "responsible": "Verantwortlicher gemäß § 55 Abs. 2 RStV ",
     "bank": "Bankverbindung",
     "germany": "Deutschland",
-    "code-of-conduct": "Verhaltenscodex"
+    "code-of-conduct": "Verhaltenscodex",
+    "login": "Zurück zum Anmeldung"
   },
   "sorting": {
     "newest": "Neuste",
@@ -61,7 +62,6 @@
     "success": "Du bist eingeloggt!"
   },
   "password-reset": {
-    "title": "Passwort zurücksetzen",
     "form": {
       "description": "Eine Mail zum Zurücksetzen des Passworts wird an die angegebene E-Mail Adresse geschickt.",
       "submit": "Email anfordern",
@@ -619,4 +619,4 @@
     "have-fun": "Jetzt aber viel Spaß mit der Alpha von Human Connection! Für den ersten Weltfrieden. ♥︎",
     "closing": "Herzlichst <br><br> Euer Human Connection Team"
   }
-}
+}

webapp/locales/en.json

@@ -41,14 +41,15 @@
     "responsible": "responsible for contents of this page (§ 55 Abs. 2 RStV)",
     "bank": "bank account",
     "germany": "Germany",
-    "code-of-conduct": "Code of Conduct"
+    "code-of-conduct": "Code of Conduct",
+    "login": "Back to login"
   },
   "sorting": {
     "newest": "Newest",
     "oldest": "Oldest"
   },
   "login": {
-    "copy": "If you already have a human-connection account, login here.",
+    "copy": "If you already have a human-connection account, please login.",
     "login": "Login",
     "logout": "Logout",
     "email": "Your Email",
@@ -65,7 +66,7 @@
     "form": {
       "description": "A password reset email will be sent to the given email address.",
       "submit": "Request email",
-      "submitted": "A mail with further instruction has been sent to <b>{email}</b>"
+      "submitted": "An email with further instructions has been sent to <b>{email}</b>"
     }
   },
   "registration": {
@@ -619,4 +620,4 @@
     "have-fun": "Now have fun with the alpha version of Human Connection! For the first universal peace. ♥︎",
     "closing": "Thank you very much <br> <br> your Human Connection Team"
   }
-}
+}

webapp/locales/pt.json

@@ -1,28 +1,37 @@
 {
   "site": {
-    "made": "Com ❤ feito",
+    "made": "Feito com ❤",
     "imprint": "Impressão",
-    "termsAc": "termos e condições",
+    "termsAc": "Termos e Condições",
-    "data-privacy": "protecção de dados",
+    "data-privacy": "Proteção de Dados",
     "changelog": "Mudanças e Histórico",
     "contact": "Contato",
-    "tribunal": "tribunal",
     "tribunal": "tribunal de registo",
     "register": "número de registo",
     "director": "Diretor Administrativo",
     "taxident": "Número de identificação do imposto sobre o valor acrescentado de acordo com o § 27 da Lei do Imposto sobre o Valor Acrescentado (Alemanha)",
     "responsible": "Responsável segundo § 55 Abs. 2 RStV (Alemanha) ",
     "bank": "conta bancária",
-    "germany": "Alemanha"
+    "germany": "Alemanha",
+    "code-of-conduct": "Codigo de Conduto",
+    "login": "Voltar para o Login"
   },
   "login": {
-    "copy": "Se você já tem uma conta no Human Connection, entre aqui.",
+    "copy": "Se você já tem uma conta no Human Connection, por favor faça o login.",
     "login": "Entrar",
     "logout": "Sair",
     "email": "Seu email",
     "password": "Sua senha",
     "moreInfo": "O que é o Human Connection?",
-    "hello": "Olá"
+    "hello": "Olá",
+    "forgotPassword": "Esqueceu a sua senha?"
+  },
+  "password-reset": {
+    "form": {
+      "description": "Um e-mail de redefinição de senha será enviado para o endereço de e-mail fornecido.",
+      "submit": "Solicitar email",
+      "submitted": "Um e-mail com mais instruções foi enviado para <b>{email}</b>"
+    }
   },
   "profile": {
     "name": "Meu perfil",
@@ -203,4 +212,4 @@
   "shoutButton": {
     "shouted": "Aclamou"
   }
-}
+}

webapp/pages/changelog.vue

@@ -76,7 +76,7 @@
 
 <script>
 export default {
-  layout: 'default',
+  layout: 'basic',
   head() {
     return {
       title: this.$t('site.changelog'),

webapp/pages/code-of-conduct.vue

@@ -36,6 +36,7 @@
 
 <script>
 export default {
+  layout: 'basic',
   head() {
     return {
       title: this.$t('site.code-of-conduct'),

webapp/pages/data-privacy.vue

@@ -385,7 +385,7 @@
 
 <script>
 export default {
-  layout: 'default',
+  layout: 'basic',
   head() {
     return {
       title: this.$t('site.data-privacy'),

webapp/pages/imprint.vue

@@ -73,6 +73,7 @@
 
 <script>
 export default {
+  layout: 'basic',
   head() {
     return {
       title: this.$t('site.imprint'),

webapp/pages/login.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="fade" appear>
-    <ds-container v-if="ready" width="small">
+    <ds-container v-if="ready" width="medium">
       <ds-space margin="small">
         <blockquote>
           <p>{{ $t('quotes.african.quote') }}</p>
@@ -78,10 +78,10 @@ import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 
 export default {
+  layout: 'no-header',
   components: {
     LocaleSwitch,
   },
-  layout: 'default',
   data() {
     return {
       ready: false,

webapp/pages/logout.vue

@@ -15,7 +15,7 @@
 
 <script>
 export default {
-  layout: 'default',
+  layout: 'blank',
   async beforeCreate() {
     await this.$store.dispatch('auth/logout')
     this.$router.replace('/')

webapp/pages/password-reset.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-container width="small">
+  <ds-container width="medium">
     <ds-flex>
       <ds-flex-item :width="{ base: '100%' }" centered>
         <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  layout: 'default',
+  layout: 'no-header',
   asyncData({ store, redirect }) {
     if (store.getters['auth/isLoggedIn']) {
       redirect('/')

webapp/pages/registration.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-  layout: 'default',
+  layout: 'no-header',
   asyncData({ store, redirect }) {
     if (store.getters['auth/isLoggedIn']) {
       redirect('/')

webapp/pages/terms-and-conditions.vue

@@ -23,7 +23,7 @@
 
 <script>
 export default {
-  layout: 'default',
+  layout: 'basic',
   head() {
     return {
       title: this.$t('site.termsAndConditions'),