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

fix(header-alignment): Fix logo and locale position.
2025-12-13 07:46:06 +00:00 · 2019-09-12 11:44:52 +02:00 · 2019-09-12 11:44:52 +02:00 · 33942f6475
commit 33942f6475
parent 6ff532ab4a 73db6c5e58
21 changed files with 255 additions and 98 deletions
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/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>
--- a/webapp/components/PasswordReset/Request.spec.js
+++ b/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
-  let mocks
+  let wrapper, Wrapper, mocks, stubs

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

--- a/webapp/components/PasswordReset/Request.vue
+++ b/webapp/components/PasswordReset/Request.vue
@ -1,6 +1,18 @@
 <template>
  <ds-card class="password-reset">
-    <ds-space margin="large">
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+        <client-only>
+          <locale-switch class="login-locale-switch" offset="5" />
+        </client-only>
+        <ds-space margin-top="small" margin-bottom="xxx-small" centered>
+          <img class="login-image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
+        </ds-space>
+      </ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+        <ds-space margin="small">
+          <ds-text size="small" align="left">{{ $t('login.copy') }}</ds-text>
+        </ds-space>
        <ds-form
          v-if="!submitted"
          @input="handleInput"
@ -18,9 +30,7 @@
            icon="envelope"
          />
          <ds-space margin-botton="large">
-          <ds-text>
-            {{ $t('password-reset.form.description') }}
-          </ds-text>
+            <ds-text align="left">{{ $t('password-reset.form.description') }}</ds-text>
          </ds-space>
          <ds-button
            :disabled="disabled"
@ -40,19 +50,28 @@
              <sweetalert-icon icon="info" />
            </ds-flex>
          </transition>
-        <ds-text v-html="submitMessage" />
+          <ds-text v-html="submitMessage" align="left" />
        </div>
-    </ds-space>
+        <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>
--- a/webapp/components/Registration/CreateUserAccount.spec.js
+++ b/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
-  let mocks
-  let propsData
+  let wrapper, Wrapper, mocks, propsData, stubs

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

--- a/webapp/components/Registration/CreateUserAccount.vue
+++ b/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>
--- a/webapp/layouts/basic.vue
+++ b/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>
--- a/webapp/layouts/blank.vue
+++ b/webapp/layouts/blank.vue
@ -11,7 +11,6 @@

 <script>
 import seo from '~/mixins/seo'
-
 export default {
  mixins: [seo],
 }
--- a/webapp/layouts/default.vue
+++ b/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-item :width="{ lg: '3.5%' }" />
+          <ds-flex class="main-navigation-flex">
+            <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">
-      <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>
+    <page-footer />
    <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>
--- a/webapp/layouts/no-header.vue
+++ b/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>
--- a/webapp/locales/de.json
+++ b/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",
--- a/webapp/locales/en.json
+++ b/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": {
--- a/webapp/locales/pt.json
+++ b/webapp/locales/pt.json
@ -1,28 +1,37 @@
 {
  "site": {
-    "made": "Com &#10084; feito",
+    "made": "Feito com &#10084;",
    "imprint": "Impressão",
-    "termsAc": "termos e condições",
-    "data-privacy": "protecção de dados",
+    "termsAc": "Termos e Condições",
+    "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",
--- a/webapp/pages/changelog.vue
+++ b/webapp/pages/changelog.vue
@ -76,7 +76,7 @@

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

 <script>
 export default {
+  layout: 'basic',
  head() {
    return {
      title: this.$t('site.code-of-conduct'),
--- a/webapp/pages/data-privacy.vue
+++ b/webapp/pages/data-privacy.vue
@ -385,7 +385,7 @@

 <script>
 export default {
-  layout: 'default',
+  layout: 'basic',
  head() {
    return {
      title: this.$t('site.data-privacy'),
--- a/webapp/pages/imprint.vue
+++ b/webapp/pages/imprint.vue
@ -73,6 +73,7 @@

 <script>
 export default {
+  layout: 'basic',
  head() {
    return {
      title: this.$t('site.imprint'),
--- a/webapp/pages/login.vue
+++ b/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,
--- a/webapp/pages/logout.vue
+++ b/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('/')
--- a/webapp/pages/password-reset.vue
+++ b/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('/')
--- a/webapp/pages/registration.vue
+++ b/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('/')
--- a/webapp/pages/terms-and-conditions.vue
+++ b/webapp/pages/terms-and-conditions.vue
@ -23,7 +23,7 @@

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