merged master in

2025-12-13 07:45:56 +00:00 · 2019-01-11 15:19:02 +01:00 · 2019-01-11 15:19:02 +01:00 · b2ab7e4301
commit b2ab7e4301
parent 01ad6a9822 9825b4107c
25 changed files with 506 additions and 207 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -11,3 +11,8 @@ scripts/
 .env

 cypress/
+
+README.md 
+screenshot*.png
+lokalise.png
+.editorconfig
--- a/.travis.yml
+++ b/.travis.yml
@ -18,8 +18,8 @@ before_install:
  - sudo mv docker-compose /usr/local/bin

 install:
-  - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT -t humanconnection/nitro-web .
-  - docker-compose -f docker-compose.yml up -d
+  - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT --target production -t humanconnection/nitro-web .
+  - docker-compose -f docker-compose.yml -f docker-compose.travis.yml up -d
  - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend
  - git -C "../Nitro-Backend" checkout $TRAVIS_BRANCH || echo "Branch \`$TRAVIS_BRANCH\` does not exist, falling back to \`master\`"
  - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d
@ -27,8 +27,8 @@ install:
  - yarn add cypress-cucumber-preprocessor

 script:
-  - docker-compose exec webapp yarn run lint
-  - docker-compose exec webapp yarn run test
+  - docker-compose exec -e NODE_ENV=test webapp yarn run lint
+  - docker-compose exec -e NODE_ENV=test webapp yarn run test
  - docker-compose -f ../Nitro-Backend/docker-compose.yml exec backend yarn run db:seed > /dev/null
  - wait-on http://localhost:3000
  - cypress run --record --key $CYPRESS_TOKEN
--- a/25
+++ b/25
@ -1,9 +1,9 @@
-FROM node:10-alpine
+FROM node:10-alpine as base
 LABEL Description="Web Frontend of the Social Network Human-Connection.org" Vendor="Human-Connection gGmbH" Version="0.0.1" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"

 # Expose the app port
-EXPOSE 3000
-
+ARG BUILD_COMMIT
+ENV BUILD_COMMIT=$BUILD_COMMIT
 ARG WORKDIR=/nitro-web
 RUN mkdir -p $WORKDIR
 WORKDIR $WORKDIR
@ -11,18 +11,19 @@ WORKDIR $WORKDIR
 # See: https://github.com/nodejs/docker-node/pull/367#issuecomment-430807898
 RUN apk --no-cache add git

-# Install Web Application
-COPY package.json .
-COPY yarn.lock .
-COPY styleguide/ ./styleguide
-RUN yarn install --production=false --frozen-lockfile --non-interactive
+COPY . .

-# Install and build Styleguide
-COPY styleguide/ ./styleguide
+FROM base as build-and-test
+RUN yarn install --production=false --frozen-lockfile --non-interactive
 RUN cd styleguide && yarn install --production=false --frozen-lockfile --non-interactive \
    && cd .. \
    && yarn run styleguide:build
+RUN yarn run build

-COPY . .
-RUN ["yarn", "run", "build"]
+FROM base as production
+ENV NODE_ENV=production
+COPY --from=build-and-test ./nitro-web/node_modules ./node_modules
+COPY --from=build-and-test ./nitro-web/.nuxt ./.nuxt
+
+EXPOSE 3000
 CMD ["yarn", "run", "start"]
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@ -138,3 +138,23 @@ hr {
    margin-right: -15px;
  }
 }
+
+    #overlay {
+  display: block;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+  transition-delay: 50ms;
+
+  .dropdown-open & {
+    opacity: 1;
+    transition-delay: 0;
+  }
+}
--- a/components/Author.vue
+++ b/components/Author.vue
@ -1,127 +1,127 @@
 <template>
-  <v-popover
-    :open.sync="isPopoverOpen"
+  <dropdown
    :disabled="!hasAuthor || !showAuthorPopover"
-    :open-group="Math.random().toString()"
    placement="top-start"
-    trigger="manual"
    offset="0"
  >
-    <a
-      v-router-link
-      :href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
-      style="white-space: nowrap; display: flex; align-items: center;"
-      @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave"
+    <template
+      slot="default"
+      slot-scope="{openMenu, closeMenu, isOpen}"
    >
-      <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
-        <ds-avatar
-          :image="author.avatar"
-          :name="author.name"
-          style="display: inline-block; vertical-align: middle;"
-          size="32px"
-        />
-      </div>
-      <div style="display: inline-block; height: 100%; vertical-align: middle;">
-        <b
-          class="username"
-          style="vertical-align: middle;"
-        >
-          {{ author.name | truncate(trunc, 18) }}
-        </b>
-        <template v-if="post.createdAt">
-          <br>
-          <ds-text
-            size="small"
-            color="soft"
-          >
-            {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-          </ds-text>
-        </template>
-      </div>
-    </a>
-    <div
-      slot="popover"
-      style="min-width: 250px;"
-      @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave"
-    >
-      <!--<ds-avatar
-        :image="author.avatar"
-        :name="author.name || 'Anonymus'"
-        class="profile-avatar"
-        size="90px" />-->
-      <hc-badges
-        v-if="author.badges && author.badges.length"
-        :badges="author.badges"
-        style="margin-bottom: -10px"
-      />
-      <ds-flex>
-        <ds-flex-item class="ds-tab-nav-item">
-          <ds-space margin="small">
-            <ds-number
-              :count="fanCount"
-              label="Folgen"
-              size="x-large"
-            />
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
-          <ds-space margin="small">
-            <ds-number
-              :count="author.contributionsCount"
-              label="Beiträge"
-            />
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item class="ds-tab-nav-item">
-          <ds-space margin="small">
-            <ds-number
-              :count="author.commentsCount"
-              label="Kommentare"
-            />
-          </ds-space>
-        </ds-flex-item>
-      </ds-flex>
-      <!--<ds-text
-        color="soft"
-        size="small">
-        <ds-icon name="map-marker" /> Hamburg, Deutschland
-      </ds-text>-->
-      <ds-flex
-        v-if="!itsMe"
-        gutter="x-small"
-        style="margin-bottom: 0;"
+      <a
+        v-router-link
+        :href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
+        :class="['author', isOpen && 'active']"
+        @mouseover="openMenu(true)"
+        @mouseleave="closeMenu(true)"
      >
-        <ds-flex-item :width="{base: 3}">
-          <hc-follow-button
-            :follow-id="author.id"
-            @update="voted = true"
+        <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
+          <ds-avatar
+            :image="author.avatar"
+            :name="author.name"
+            style="display: inline-block; vertical-align: middle;"
+            size="32px"
          />
-        </ds-flex-item>
-        <ds-flex-item :width="{base: 1}">
-          <ds-button full-width>
-            <ds-icon name="user-times" />
-          </ds-button>
-        </ds-flex-item>
-      </ds-flex>
-      <!--<ds-space margin-bottom="x-small" />-->
-    </div>
-  </v-popover>
+        </div>
+        <div style="display: inline-block; height: 100%; vertical-align: middle;">
+          <b
+            class="username"
+            style="vertical-align: middle;"
+          >
+            {{ author.name | truncate(trunc, 18) }}
+          </b>
+          <template v-if="post.createdAt">
+            <br>
+            <ds-text
+              size="small"
+              color="soft"
+            >
+              {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
+            </ds-text>
+          </template>
+        </div>
+      </a>
+    </template>
+    <template
+      slot="popover"
+    >
+      <div style="min-width: 250px">
+        <!--<ds-avatar
+          :image="author.avatar"
+          :name="author.name || 'Anonymus'"
+          class="profile-avatar"
+          size="90px" />-->
+        <hc-badges
+          v-if="author.badges && author.badges.length"
+          :badges="author.badges"
+          style="margin-bottom: -10px"
+        />
+        <ds-flex>
+          <ds-flex-item class="ds-tab-nav-item">
+            <ds-space margin="small">
+              <ds-number
+                :count="fanCount"
+                :label="$t('profile.followers')"
+                size="x-large"
+              />
+            </ds-space>
+          </ds-flex-item>
+          <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
+            <ds-space margin="small">
+              <ds-number
+                :count="author.contributionsCount"
+                :label="$t('common.post', null, author.contributionsCount)"
+              />
+            </ds-space>
+          </ds-flex-item>
+          <ds-flex-item class="ds-tab-nav-item">
+            <ds-space margin="small">
+              <ds-number
+                :count="author.commentsCount"
+                :label="$t('common.comment', null, author.commentsCount)"
+              />
+            </ds-space>
+          </ds-flex-item>
+        </ds-flex>
+        <!--<ds-text
+          color="soft"
+          size="small">
+          <ds-icon name="map-marker" /> Hamburg, Deutschland
+        </ds-text>-->
+        <ds-flex
+          v-if="!itsMe"
+          gutter="x-small"
+          style="margin-bottom: 0;"
+        >
+          <ds-flex-item :width="{base: 3}">
+            <hc-follow-button
+              :follow-id="author.id"
+              @update="voted = true"
+            />
+          </ds-flex-item>
+          <ds-flex-item :width="{base: 1}">
+            <ds-button full-width>
+              <ds-icon name="user-times" />
+            </ds-button>
+          </ds-flex-item>
+        </ds-flex>
+        <!--<ds-space margin-bottom="x-small" />-->
+      </div>
+    </template>
+  </dropdown>
 </template>

 <script>
 import HcFollowButton from '~/components/FollowButton.vue'
 import HcBadges from '~/components/Badges.vue'
-
-let mouseEnterTimer = null
-let mouseLeaveTimer = null
+import Dropdown from '~/components/Dropdown'

 export default {
  name: 'HcAuthor',
  components: {
    HcFollowButton,
-    HcBadges
+    HcBadges,
+    Dropdown
  },
  props: {
    post: { type: Object, default: null },
@ -130,7 +130,6 @@ export default {
  },
  data() {
    return {
-      isPopoverOpen: false,
      voted: false
    }
  },
@ -156,30 +155,6 @@ export default {
    hasAuthor() {
      return Boolean(this.post && this.post.author)
    }
-  },
-  beforeDestroy() {
-    clearTimeout(mouseEnterTimer)
-    clearTimeout(mouseLeaveTimer)
-  },
-  methods: {
-    popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (!this.isPopoverOpen) {
-        mouseEnterTimer = setTimeout(() => {
-          this.isPopoverOpen = true
-        }, 500)
-      }
-    },
-    popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
-      if (this.isPopoverOpen) {
-        mouseLeaveTimer = setTimeout(() => {
-          this.isPopoverOpen = false
-        }, 300)
-      }
-    }
  }
 }
 </script>
@ -191,4 +166,15 @@ export default {
  margin-top: -45px;
  border: #fff 5px solid;
 }
+.author {
+  white-space: nowrap;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &.active {
+    z-index: 999;
+  }
+}
 </style>
--- a/components/Dropdown.vue
+++ b/components/Dropdown.vue
@ -3,10 +3,16 @@
    :open.sync="isPopoverOpen"
    :open-group="Math.random().toString()"
    :placement="placement"
+    :disabled="disabled"
    trigger="manual"
    :offset="offset"
  >
-    <slot :toggleMenu="toggleMenu" />
+    <slot
+      :toggleMenu="toggleMenu"
+      :openMenu="openMenu"
+      :closeMenu="closeMenu"
+      :isOpen="isOpen"
+    />
    <div
      slot="popover"
      @mouseover="popoverMouseEnter"
@ -15,6 +21,9 @@
      <slot
        name="popover"
        :toggleMenu="toggleMenu"
+        :openMenu="openMenu"
+        :closeMenu="closeMenu"
+        :isOpen="isOpen"
      />
    </div>
  </v-popover>
@ -29,6 +38,7 @@ let mouseLeaveTimer = null
 export default {
  props: {
    placement: { type: String, default: 'bottom-end' },
+    disabled: { type: Boolean, default: false },
    offset: { type: [String, Number], default: '16' }
  },
  data() {
@ -36,17 +46,68 @@ export default {
      isPopoverOpen: false
    }
  },
+  computed: {
+    isOpen() {
+      return this.isPopoverOpen
+    }
+  },
+  watch: {
+    isPopoverOpen: {
+      immediate: true,
+      handler(isOpen) {
+        try {
+          if (isOpen) {
+            this.$nextTick(() => {
+              setTimeout(() => {
+                document
+                  .getElementsByTagName('body')[0]
+                  .classList.add('dropdown-open')
+              }, 20)
+            })
+          } else {
+            document
+              .getElementsByTagName('body')[0]
+              .classList.remove('dropdown-open')
+          }
+        } catch (err) {}
+      }
+    }
+  },
  beforeDestroy() {
    clearTimeout(mouseEnterTimer)
    clearTimeout(mouseLeaveTimer)
  },
  methods: {
    toggleMenu() {
-      this.isPopoverOpen = !this.isPopoverOpen
+      this.isPopoverOpen ? this.closeMenu(false) : this.openMenu(false)
+    },
+    openMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoverMouseEnter()
+      } else {
+        this.isPopoverOpen = true
+      }
+    },
+    closeMenu(useTimeout) {
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
+      if (useTimeout === true) {
+        this.popoveMouseLeave()
+      } else {
+        this.isPopoverOpen = false
+      }
    },
    popoverMouseEnter() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
      if (!this.isPopoverOpen) {
        mouseEnterTimer = setTimeout(() => {
          this.isPopoverOpen = true
@ -54,13 +115,19 @@ export default {
      }
    },
    popoveMouseLeave() {
-      clearTimeout(mouseEnterTimer)
-      clearTimeout(mouseLeaveTimer)
+      if (this.disabled) {
+        return
+      }
+      this.clearTimeouts()
      if (this.isPopoverOpen) {
        mouseLeaveTimer = setTimeout(() => {
          this.isPopoverOpen = false
        }, 300)
      }
+    },
+    clearTimeouts() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
    }
  }
 }
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@ -1,6 +1,5 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 import find from 'lodash/find'
-import { eq } from 'semver';

 /* global cy */

@ -73,7 +72,6 @@ Given('my user account has the role {string}', role => {
  // TODO: use db factories instead of seed data
 })

-
 When('I log out', logout)

 When('I visit the {string} page', page => {
--- a/docker-compose.override.yml
+++ b/docker-compose.override.yml
@ -2,6 +2,9 @@ version: '3.7'

 services:
  webapp:
+    build:
+      context: .
+      target: build-and-test
    volumes:
      - .:/nitro-web
      - node_modules:/nitro-web/node_modules
--- a/docker-compose.travis.yml
+++ b/docker-compose.travis.yml
@ -0,0 +1,7 @@
+version: "3.7"
+
+services:
+  webapp:
+    build:
+      context: .
+      target: build-and-test
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -3,7 +3,9 @@ version: '3.7'
 services:
  webapp:
    image: humanconnection/nitro-web:latest
-    build: .
+    build:
+      context: .
+      target: production
    ports:
      - 3000:3000
      - 8080:8080
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@ -5,6 +5,7 @@
        <nuxt />
      </div>
    </ds-container>
+    <div id="overlay" />
  </div>
 </template>

--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -26,7 +26,7 @@
                  <a
                    class="avatar-menu-trigger"
                    :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
-                    @click.prevent="toggleMenu()"
+                    @click.prevent="toggleMenu"
                  >
                    <ds-avatar
                      :image="user.avatar"
@ -37,7 +37,7 @@
                </template>
                <template
                  slot="popover"
-                  slot-scope="{toggleMenu}"
+                  slot-scope="{closeMenu}"
                >
                  <div class="avatar-menu-popover">
                    {{ $t('login.hello') }} <b>{{ user.name }}</b>
@ -50,13 +50,16 @@
                        slot-scope="item"
                        :route="item.route"
                        :parents="item.parents"
-                        @click.native="toggleMenu"
+                        @click.native="closeMenu(false)"
                      >
                        <ds-icon :name="item.route.icon" /> {{ item.route.name }}
                      </ds-menu-item>
                    </ds-menu>
                    <ds-space margin="xx-small" />
-                    <nuxt-link :to="{ name: 'logout'}">
+                    <nuxt-link
+                      :to="{ name: 'logout'}"
+                      style="margin-left: 0"
+                    >
                      <ds-icon name="sign-out" /> {{ $t('login.logout') }}
                    </nuxt-link>
                  </div>
@ -72,6 +75,7 @@
        <nuxt />
      </div>
    </ds-container>
+    <div id="overlay" />
    <report-modal />
    <no-ssr>
      <portal-target name="modal" />
@ -127,6 +131,10 @@ export default {
  },
  methods: {
    isExact(url) {
+      if (url.indexOf('/profile') === 0) {
+        // do only match own profile
+        this.$route.path === url
+      }
      return this.$route.path.indexOf(url) === 0
    }
  }
@ -149,8 +157,14 @@ export default {
  padding-bottom: 0.5rem;

  nav {
+    margin-left: -16px;
+    margin-right: -10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
+
+    a {
+      padding-left: 12px;
+    }
  }
 }
 </style>
--- a/locales/de.json
+++ b/locales/de.json
@ -1,9 +1,6 @@
 {
-  "common": {
-    "reportContent": "Melden"
-  },
  "login": {
-    "copy": "Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.",
+    "copy": "Wenn Du bereits ein Konto bei Human Connection hast, melde Dich bitte hier an.",
    "login": "Einloggen",
    "logout": "Ausloggen",
    "email": "Deine E-Mail",
@ -16,7 +13,9 @@
    "memberSince": "Mitglied seit",
    "follow": "Folgen",
    "followers": "Folgen",
-    "following": "Folgt"
+    "following": "Folgt",
+    "shouted": "Empfohlen",
+    "commented": "Kommentiert"
  },
  "settings": {
    "name": "Einstellungen",
@ -96,5 +95,23 @@
      "quote": "Viele kleine Leute, an vielen kleinen Orten, die viele kleine Dinge tun, werden das Antlitz dieser Welt verändern.",
      "author": "Afrikanisches Sprichwort"
    }
+  },
+  "common": {
+    "reportContent": "Melden",
+    "post": "Beitrag ::: Beiträge",
+    "comment": "Kommentar ::: Kommentare",
+    "letsTalk": "Miteinander reden",
+    "versus": "Versus",
+    "moreInfo": "Mehr Info",
+    "takeAction": "Aktiv werden",
+    "shout": "Empfehlung ::: Empfehlungen",
+    "user": "Benutzer ::: Benutzer",
+    "category": "Kategorie ::: Kategorien",
+    "organization": "Organisation ::: Organisationen",
+    "project": "Projekt ::: Projekte",
+    "tag": "Tag ::: Tags",
+    "name": "Name",
+    "loadMore": "mehr laden",
+    "loading": "wird geladen"
  }
 }
--- a/locales/en.json
+++ b/locales/en.json
@ -1,7 +1,4 @@
 {
-  "common": {
-    "reportContent": "Report"
-  },
  "login": {
    "copy": "If you already have a human-connection account, login here.",
    "login": "Login",
@ -16,7 +13,9 @@
    "memberSince": "Member since",
    "follow": "Follow",
    "followers": "Followers",
-    "following": "Following"
+    "following": "Following",
+    "shouted": "Shouted",
+    "commented": "Commented"
  },
  "settings": {
    "name": "Settings",
@ -96,5 +95,23 @@
      "quote": "Many small people in many small places do many small things, that can alter the face of the world.",
      "author": "African proverb"
    }
+  },
+  "common": {
+    "reportContent": "Report",
+    "post": "Post ::: Posts",
+    "comment": "Comment ::: Comments",
+    "letsTalk": "Let`s Talk",
+    "versus": "Versus",
+    "moreInfo": "More Info",
+    "takeAction": "Take Action",
+    "shout": "Shout ::: Shouts",
+    "user": "User ::: Users",
+    "category": "Category ::: Categories",
+    "organization": "Organization ::: Organizations",
+    "project": "Project ::: Projects",
+    "tag": "Tag ::: Tags",
+    "name": "Name",
+    "loadMore": "load more",
+    "loading": "loading"
  }
 }
--- a/locales/es.json
+++ b/locales/es.json
@ -1,6 +1,7 @@
 {
  "login": {
    "copy": "Si ya tiene una cuenta de Human Connection, inicie sesión aquí.",
+    "login": "Iniciar sesión",
    "logout": "Cierre de sesión",
    "email": "Tu correo electrónico",
    "password": "Tu contraseña",
@ -10,9 +11,12 @@
  "profile": {
    "name": "Mi perfil",
    "memberSince": "Miembro desde",
-    "followers": "Seguidores"
+    "follow": "Seguir",
+    "followers": "Seguidores",
+    "following": "Siguiendo"
  },
  "settings": {
+    "name": "Configuración",
    "data": {
      "name": "Sus datos"
    },
@ -25,6 +29,9 @@
    "download": {
      "name": "Descargar datos"
    },
+    "delete": {
+      "name": "Borrar cuenta"
+    },
    "organizations": {
      "name": "Mis organizaciones"
    },
@ -35,12 +42,16 @@
  "admin": {
    "name": "Admin",
    "dashboard": {
+      "name": "Tablero",
      "users": "Usuarios",
+      "posts": "Mensajes",
      "comments": "Comentarios",
+      "notifications": "Notificaciones",
      "organizations": "Organizaciones",
      "projects": "Proyectos",
      "invites": "Invita",
-      "follows": "Sigue"
+      "follows": "Sigue",
+      "shouts": "Gritos"
    },
    "organizations": {
      "name": "Organizaciones"
@ -56,14 +67,20 @@
    },
    "categories": {
      "name": "Categorías",
-      "categoryName": "Nombre"
+      "categoryName": "Nombre",
+      "postCount": "Mensajes"
    },
    "tags": {
      "name": "Etiquetas",
-      "tagCountUnique": "Usuarios"
+      "tagCountUnique": "Usuarios",
+      "tagCount": "Mensajes"
+    },
+    "settings": {
+      "name": "Configuración"
    }
  },
  "post": {
+    "name": "Mensaje",
    "moreInfo": {
      "name": "Más info"
    },
@ -73,7 +90,25 @@
  },
  "quotes": {
    "african": {
+      "quote": "Muchas personas pequeñas en muchos lugares pequeños hacen muchas cosas pequeñas, que pueden alterar la faz del mundo.",
      "author": "Proverbio africano"
    }
+  },
+  "common": {
+    "post": "Mensaje ::: Mensajes",
+    "comment": "Comentario ::: Comentarios",
+    "letsTalk": "Hablemos",
+    "versus": "Versus",
+    "moreInfo": "Más info",
+    "takeAction": "Tomar acción",
+    "shout": "Grito ::: Gritos",
+    "user": "Usuario ::: Usuarios",
+    "category": "Categoría ::: Categorías",
+    "organization": "Organización ::: Organizaciones",
+    "project": "Proyecto ::: Proyectos",
+    "tag": "Etiqueta ::: Etiquetas",
+    "name": "Nombre",
+    "loadMore": "cargar más",
+    "loading": "cargando"
  }
 }
--- a/locales/fr.json
+++ b/locales/fr.json
@ -93,5 +93,22 @@
      "quote": "Beaucoup de petites personnes dans beaucoup de petits endroits font beaucoup de petites choses, qui peuvent changer la face du monde.",
      "author": "Proverbe africain"
    }
+  },
+  "common": {
+    "post": "Message ::: Messages",
+    "comment": "Commentaire ::: Commentaires",
+    "letsTalk": "Parlons-en",
+    "versus": "Versus",
+    "moreInfo": "Plus d'infos",
+    "takeAction": "Passer à l'action",
+    "shout": "Shout ::: Shouts",
+    "user": "Utilisateur ::: Utilisateurs",
+    "category": "Catégorie ::: Catégories",
+    "organization": "Organisation ::: Organisations",
+    "project": "Projet ::: Projets",
+    "tag": "Tag ::: Tags",
+    "name": "Nom",
+    "loadMore": "charger plus",
+    "loading": "chargement"
  }
 }
--- a/locales/it.json
+++ b/locales/it.json
@ -1,6 +1,7 @@
 {
  "login": {
    "copy": "Se hai già un account di Human Connection, accedi qui.",
+    "login": "Accesso",
    "logout": "Logout",
    "email": "La tua email",
    "password": "La tua password",
@ -9,8 +10,10 @@
  },
  "profile": {
    "name": "Il mio profilo",
+    "memberSince": "Membro dal",
    "follow": "Seguire",
-    "followers": "Seguaci"
+    "followers": "Seguaci",
+    "following": "Seguendo"
  },
  "settings": {
    "name": "Impostazioni",
@ -41,12 +44,14 @@
    "dashboard": {
      "name": "Cruscotto",
      "users": "Utenti",
+      "posts": "Messaggi",
      "comments": "Commenti",
      "notifications": "Notifiche",
      "organizations": "Organizzazioni",
      "projects": "Progetti",
      "invites": "Inviti",
-      "follows": "Segue"
+      "follows": "Segue",
+      "shouts": "Grida"
    },
    "organizations": {
      "name": "Organizzazioni"
@ -62,7 +67,8 @@
    },
    "categories": {
      "name": "Categorie",
-      "categoryName": "Nome"
+      "categoryName": "Nome",
+      "postCount": "Messaggi"
    },
    "tags": {
      "name": "Tag",
@ -74,6 +80,7 @@
    }
  },
  "post": {
+    "name": "Messaggio",
    "moreInfo": {
      "name": "Ulteriori informazioni"
    },
@ -83,7 +90,25 @@
  },
  "quotes": {
    "african": {
+      "quote": "Molte piccole persone in molti piccoli luoghi fanno molte piccole cose, che possono alterare la faccia del mondo.",
      "author": "Proverbio africano"
    }
+  },
+  "common": {
+    "post": "Messaggio ::: Messaggi",
+    "comment": "Commento ::: Commenti",
+    "letsTalk": "Parliamo",
+    "versus": "Contro",
+    "moreInfo": "Ulteriori informazioni",
+    "takeAction": "Agire",
+    "shout": "Grida ::: Grida",
+    "user": "Utente ::: Utenti",
+    "category": "Categoria ::: Categorie",
+    "organization": "Organizzazione ::: Organizzazioni",
+    "project": "Progetto ::: Progetti",
+    "tag": "Tag ::: Tag",
+    "name": "Nome",
+    "loadMore": "caricare di più",
+    "loading": "caricamento"
  }
 }
--- a/locales/nl.json
+++ b/locales/nl.json
@ -23,6 +23,9 @@
    "security": {
      "name": "Veiligheid"
    },
+    "invites": {
+      "name": "Uitnodigingen"
+    },
    "download": {
      "name": "Gegevens downloaden"
    },
@ -46,6 +49,7 @@
      "notifications": "Meldingen",
      "organizations": "Organisaties",
      "projects": "Projecten",
+      "invites": "Uitnodigingen",
      "follows": "Volgt",
      "shouts": "Shouts"
    },
@ -55,6 +59,9 @@
    "users": {
      "name": "Gebruikers"
    },
+    "pages": {
+      "name": "Pages"
+    },
    "notifications": {
      "name": "Meldingen"
    },
@ -86,5 +93,22 @@
      "quote": "Veel kleine mensen op veel kleine plaatsen doen veel kleine dingen, die het gezicht van de wereld kunnen veranderen.",
      "author": "Afrikaans spreekwoord"
    }
+  },
+  "common": {
+    "post": "Bericht ::: Berichten",
+    "comment": "Opmerking ::: Opmerkingen",
+    "letsTalk": "Laten we praten",
+    "versus": "Versus",
+    "moreInfo": "Meer info",
+    "takeAction": "Onderneem actie",
+    "shout": "Shout ::: Shouts",
+    "user": "Gebruiker ::: Gebruikers",
+    "category": "Categorie ::: Categorieën",
+    "organization": "Organisatie ::: Organisaties",
+    "project": "Project ::: Projecten",
+    "tag": "Tag ::: Tags",
+    "name": "Naam",
+    "loadMore": "meer laden",
+    "loading": "inlading"
  }
 }
--- a/locales/pl.json
+++ b/locales/pl.json
@ -1,7 +1,7 @@
 {
  "login": {
    "copy": "Jeśli masz już konto Human Connection, zaloguj się tutaj.",
-    "login": "Login",
+    "login": "logowanie",
    "logout": "Wyloguj się",
    "email": "Twój adres e-mail",
    "password": "Twoje hasło",
@ -40,7 +40,7 @@
    }
  },
  "admin": {
-    "name": "Admin",
+    "name": "Administrator",
    "dashboard": {
      "name": "Tablica rozdzielcza",
      "users": "Użytkownicy",
@ -51,7 +51,7 @@
      "projects": "Projekty",
      "invites": "Zaproszenia",
      "follows": "Obserwowań",
-      "shouts": "Wykrzyki"
+      "shouts": "   okrzyk"
    },
    "organizations": {
      "name": "Organizacje"
@ -93,5 +93,22 @@
      "quote": "Wielu małych ludzi w wielu małych miejscach robi wiele małych rzeczy, które mogą zmienić oblicze świata.",
      "author": "Afrykańskie przysłowie"
    }
+  },
+  "common": {
+    "post": "Post ::: Posty",
+    "comment": "Komentarz ::: Komentarze",
+    "letsTalk": "Porozmawiajmy",
+    "versus": "Versus",
+    "moreInfo": "Więcej informacji",
+    "takeAction": "Podejmij działanie",
+    "shout": "okrzyk       okrzyki",
+    "user": "Użytkownik ::: Użytkownicy",
+    "category": "kategoria kategorie",
+    "organization": "Organizacja ::: Organizacje",
+    "project": "Projekt ::: Projekty",
+    "tag": "Tag ::: Tagi",
+    "name": "imię",
+    "loadMore": "załaduj więcej",
+    "loading": "ładowanie"
  }
 }
--- a/locales/pt.json
+++ b/locales/pt.json
@ -44,13 +44,14 @@
    "dashboard": {
      "name": "Painel de controle",
      "users": "Usuários",
-      "posts": "Postagens",
+      "posts": "Pastagens",
      "comments": "Comentários",
      "notifications": "Notificações",
      "organizations": "Organizações",
      "projects": "Projetos",
      "invites": "Convites",
-      "follows": "Seguidores"
+      "follows": "Seguidores",
+      "shouts": "Gritos"
    },
    "organizations": {
      "name": "Organizações"
@ -67,12 +68,12 @@
    "categories": {
      "name": "Categorias",
      "categoryName": "Nome",
-      "postCount": "Postagens"
+      "postCount": "Pastagens"
    },
    "tags": {
      "name": "Etiquetas",
      "tagCountUnique": "Usuários",
-      "tagCount": "Postagens"
+      "tagCount": "Pastagens"
    },
    "settings": {
      "name": "Configurações"
@ -92,5 +93,22 @@
      "quote": "Pequenos grupos de pessoas, em pequenos locais podem fazer várias coisas pequenas, mas que podem alterar o mundo ao nosso redor.",
      "author": "Provérbio Africano"
    }
+  },
+  "common": {
+    "post": "Post ::: Postagens",
+    "comment": "Comentário ::: Comentários",
+    "letsTalk": "Vamos falar",
+    "versus": "Versus",
+    "moreInfo": "Mais informações",
+    "takeAction": "Tomar uma ação",
+    "shout": "Grito ::: Gritos",
+    "user": "Usuário ::: Usuários",
+    "category": "Categoria ::: Categorias",
+    "organization": "Organização ::: Organizações",
+    "project": "Projeto ::: Projetos",
+    "tag": "Tag ::: Tags",
+    "name": "Nome",
+    "loadMore": "carregar mais",
+    "loading": "carregando"
  }
 }
--- a/package.json
+++ b/package.json
@ -42,7 +42,7 @@
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/dotenv": "^1.3.0",
    "accounting": "^0.4.1",
-    "cookie-universal-nuxt": "^2.0.12",
+    "cookie-universal-nuxt": "^2.0.14",
    "cross-env": "^5.2.0",
    "date-fns": "^2.0.0-alpha.26",
    "express": "^4.16.3",
@ -52,6 +52,7 @@
    "nuxt": "^2.0.0",
    "nuxt-env": "^0.0.4",
    "portal-vue": "^1.5.1",
+    "nuxt-sass-resources-loader": "^2.0.5",
    "v-tooltip": "^2.0.0-rc.33",
    "vue-count-to": "^1.0.13",
    "vue-izitoast": "1.1.2",
@ -73,7 +74,6 @@
    "jest": "^23.6.0",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.9",
-    "nuxt-sass-resources-loader": "^2.0.5",
    "prettier": "1.14.3",
    "sass-loader": "^7.1.0",
    "vue-jest": "^3.0.2",
--- a/pages/post/_slug.vue
+++ b/pages/post/_slug.vue
@ -18,33 +18,33 @@

 <script>
 export default {
-  data() {
-    return {
-      routes: [
+  computed: {
+    routes() {
+      return [
        {
-          name: 'Post',
+          name: this.$t('common.post', null, 1),
          path: `/post/${this.$route.params.slug}`,
          children: [
            {
-              name: 'Kommentare',
+              name: this.$t('common.comment', null, 2),
              path: `/post/${this.$route.params.slug}#comments`
            },
            {
-              name: 'Miteinander reden',
+              name: this.$t('common.letsTalk'),
              path: `/post/${this.$route.params.slug}#lets-talk`
            },
            {
-              name: 'Versus',
+              name: this.$t('common.versus'),
              path: `/post/${this.$route.params.slug}#versus`
            }
          ]
        },
        {
-          name: 'Mehr Info',
+          name: this.$t('common.moreInfo'),
          path: `/post/${this.$route.params.slug}/more-info`
        },
        {
-          name: 'Aktiv werden',
+          name: this.$t('common.takeAction'),
          path: `/post/${this.$route.params.slug}/take-action`
        }
      ]
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@ -191,7 +191,7 @@
                  <ds-space margin="small">
                    <!-- TODO: find better solution for rendering errors -->
                    <no-ssr>
-                      <ds-number label="Beiträge">
+                      <ds-number :label="$t('common.post', null, user.contributionsCount)">
                        <hc-count-to
                          slot="count"
                          :end-val="user.contributionsCount"
@ -204,7 +204,7 @@
                  <ds-space margin="small">
                    <!-- TODO: find better solution for rendering errors -->
                    <no-ssr>
-                      <ds-number label="Kommentiert">
+                      <ds-number :label="$t('profile.commented')">
                        <hc-count-to
                          slot="count"
                          :end-val="user.commentsCount"
@ -217,7 +217,7 @@
                  <ds-space margin="small">
                    <!-- TODO: find better solution for rendering errors -->
                    <no-ssr>
-                      <ds-number label="Empfohlen">
+                      <ds-number :label="$t('profile.shouted')">
                        <hc-count-to
                          slot="count"
                          :end-val="user.shoutedCount"
--- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue
+++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue
@ -14,6 +14,10 @@
    <component
      v-if="route"
      class="ds-menu-item-link"
+      :class="[
+        isExact && 'router-active-link',
+        isExact && 'router-link-exact-active'
+      ]"
      v-bind="bindings"
      :exact="isExact"
      :is="linkTag"
--- a/yarn.lock
+++ b/yarn.lock
@ -2777,6 +2777,11 @@ big.js@^3.1.3:
  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
  integrity sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==

+big.js@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
+
 binary-extensions@^1.0.0:
  version "1.12.0"
  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
@ -3793,18 +3798,18 @@ cookie-signature@1.0.6:
  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=

-cookie-universal-nuxt@^2.0.12:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.12.tgz#061bb1864d2dd010fad1c484ae982da42954bfd9"
-  integrity sha512-qZu3rOgsDjWqgq9dU+zCQl3RpsZeevI/c6fN+wgTRsQdSe8MSwYWpl+6Pitu0mXgZKVJ8e+JA3s3jDVoXV5szg==
+cookie-universal-nuxt@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/cookie-universal-nuxt/-/cookie-universal-nuxt-2.0.14.tgz#6fdf8e928eadd7611c04a57614fe2e29b60eb971"
+  integrity sha512-ih9Z0Z2K6eLaugTttGCVN85nogKseIFF/dqup3klvYC4mQS3+1IloqBqzTL/N7degBBAols2oppwYNDmaRtVig==
  dependencies:
    "@types/cookie" "^0.3.1"
-    cookie-universal "^2.0.12"
+    cookie-universal "^2.0.14"

-cookie-universal@^2.0.12:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.12.tgz#3627a56045a84c1c53618d38bd30b278db5633f4"
-  integrity sha512-/3ch/W145NHVmX2Oenykb3U/Knmu/78JJZxGY2qw28mIr/Ueve6D+A3BySAncvqIgNUy7lIgmAUjf1hV4D4d/A==
+cookie-universal@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/cookie-universal/-/cookie-universal-2.0.14.tgz#1b4f27cffccfc2e47703fa235c1f67f931213041"
+  integrity sha512-m6J0DQa4/RQvXhzUG37EY1ynK3Uq1BKzp5hotST9olrzjrRx+B0vNPx7azg0/X0XrYQvL7MMbPXwou8m0BNDwg==
  dependencies:
    "@types/cookie" "^0.3.1"
    cookie "^0.3.1"
@ -7177,6 +7182,13 @@ json5@^0.5.0, json5@^0.5.1:
  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=

+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
 json5@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850"
@ -7382,7 +7394,7 @@ loader-utils@^0.2.16:
    json5 "^0.5.0"
    object-assign "^4.0.1"

-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1.0:
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
  integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
@ -7391,6 +7403,15 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.0.4, loader-utils@^1.1
    emojis-list "^2.0.0"
    json5 "^0.5.0"

+loader-utils@^1.0.4:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^2.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"