From 5f8d94e13e4f1288e3af974e0b7e9814d4d2973b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 15:51:26 +0100
Subject: [PATCH 01/59] WIP - Added first report dropdown to PostCard
 component.

---
 components/PostCard.vue | 70 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/components/PostCard.vue b/components/PostCard.vue
index 450e69959..d8466f2ad 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -8,6 +8,47 @@
       :image="post.image"
       style="cursor: pointer; position: relative;"
     >
+      <no-ssr>
+        <dropdown class="post-menu">
+          <template
+            slot="default"
+            slot-scope="{toggleMenu}"
+          >
+            <a
+              class="post-menu-trigger"
+              href="#"
+              @click.prevent="toggleMenu()"
+            >
+              Options
+            </a>
+          </template>
+          <template
+            slot="popover"
+            slot-scope="{toggleMenu}"
+          >
+            <div class="post-menu-popover">
+              <ds-menu
+                :routes="routes"
+                :is-exact="isExact"
+              >
+                <ds-menu-item
+                  slot="Navigation"
+                  slot-scope="item"
+                  :route="item.route"
+                  :parents="item.parents"
+                  @click.native="toggleMenu"
+                >
+                  <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+                </ds-menu-item>
+              </ds-menu>
+              <ds-space margin="xx-small" />
+              <nuxt-link :to="{ name: 'logout'}">
+                <ds-icon name="sign-out" /> {{ $t('login.logout') }}
+              </nuxt-link>
+            </div>
+          </template>
+        </dropdown>
+      </no-ssr>
       <!-- eslint-disable vue/no-v-html -->
       <!-- TODO: replace editor content with tiptap render view -->
       <ds-space margin-bottom="large">
@@ -55,12 +96,14 @@
 
 <script>
 import HcAuthor from '~/components/Author.vue'
+import Dropdown from '~/components/Dropdown'
 import { randomBytes } from 'crypto'
 
 export default {
   name: 'HcPostCard',
   components: {
-    HcAuthor
+    HcAuthor,
+    Dropdown
   },
   props: {
     post: {
@@ -82,6 +125,28 @@ export default {
       }
 
       return excerpt
+    },
+    routes() {
+      let routes = [
+        {
+          name: 'Melden',
+          path: `/profile/`,
+          icon: 'user'
+        },
+        {
+          name: 'Irgendwass',
+          path: `/settings`,
+          icon: 'cogs'
+        }
+      ]
+      // if (this.isAdmin) {
+      //   routes.push({
+      //     name: this.$t('admin.name'),
+      //     path: `/admin`,
+      //     icon: 'shield'
+      //   })
+      // }
+      return routes
     }
   },
   methods: {
@@ -90,6 +155,9 @@ export default {
         name: 'post-slug',
         params: { slug: post.slug }
       }).href
+    },
+    isExact(url) {
+      return this.$route.path.indexOf(url) === 0
     }
   }
 }

From a9db76e24b01a638f039bd060d509d00d3bb4273 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 18:36:17 +0100
Subject: [PATCH 02/59] fixed post card links

---
 assets/styles/main.scss |  12 +++
 components/PostCard.vue | 201 ++++++++++++++++++++++------------------
 layouts/default.vue     |   6 --
 3 files changed, 122 insertions(+), 97 deletions(-)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index e9254c4b9..e56007577 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -126,3 +126,15 @@ hr {
   background-color: $color-neutral-80;
   height: 1px !important;
 }
+
+[class$=menu-trigger] {
+  user-select: none;
+}
+[class$=menu-popover] {
+  display: inline-block;
+
+  nav {
+    margin-left: -17px;
+    margin-right: -15px;
+  }
+}
diff --git a/components/PostCard.vue b/components/PostCard.vue
index d8466f2ad..2ae3e4b37 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -1,97 +1,92 @@
 <template>
-  <a
-    v-router-link
-    :href="href(post)"
+  <ds-card
+    :header="post.title"
+    :image="post.image"
+    class="post-card"
   >
-    <ds-card
-      :header="post.title"
-      :image="post.image"
-      style="cursor: pointer; position: relative;"
+    <a
+      v-router-link
+      class="post-link"
+      :href="href(post)"
     >
-      <no-ssr>
-        <dropdown class="post-menu">
-          <template
-            slot="default"
-            slot-scope="{toggleMenu}"
+      {{ post.title }}
+    </a>
+    <no-ssr>
+      <dropdown class="post-menu">
+        <template
+          slot="default"
+          slot-scope="{toggleMenu}"
+        >
+          <a
+            class="post-menu-trigger"
+            href="#"
+            @click.prevent="toggleMenu()"
           >
-            <a
-              class="post-menu-trigger"
-              href="#"
-              @click.prevent="toggleMenu()"
-            >
-              Options
-            </a>
-          </template>
-          <template
-            slot="popover"
-            slot-scope="{toggleMenu}"
-          >
-            <div class="post-menu-popover">
-              <ds-menu
-                :routes="routes"
-                :is-exact="isExact"
+            <ds-icon name="angle-down" />
+          </a>
+        </template>
+        <template
+          slot="popover"
+          slot-scope="{toggleMenu}"
+        >
+          <div class="post-menu-popover">
+            <ds-menu :routes="routes">
+              <ds-menu-item
+                slot="Navigation"
+                slot-scope="item"
+                :route="item.route"
+                :parents="item.parents"
+                @click.native="toggleMenu"
               >
-                <ds-menu-item
-                  slot="Navigation"
-                  slot-scope="item"
-                  :route="item.route"
-                  :parents="item.parents"
-                  @click.native="toggleMenu"
-                >
-                  <ds-icon :name="item.route.icon" /> {{ item.route.name }}
-                </ds-menu-item>
-              </ds-menu>
-              <ds-space margin="xx-small" />
-              <nuxt-link :to="{ name: 'logout'}">
-                <ds-icon name="sign-out" /> {{ $t('login.logout') }}
-              </nuxt-link>
-            </div>
-          </template>
-        </dropdown>
-      </no-ssr>
-      <!-- eslint-disable vue/no-v-html -->
-      <!-- TODO: replace editor content with tiptap render view -->
-      <ds-space margin-bottom="large">
-        <div
-          class="hc-editor-content"
-          v-html="excerpt"
+                <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+              </ds-menu-item>
+            </ds-menu>
+          </div>
+        </template>
+      </dropdown>
+    </no-ssr>
+    <!-- eslint-disable vue/no-v-html -->
+    <!-- TODO: replace editor content with tiptap render view -->
+    <ds-space margin-bottom="large">
+      <div
+        class="hc-editor-content"
+        v-html="excerpt"
+      />
+    </ds-space>
+    <!-- eslint-enable vue/no-v-html -->
+    <ds-space
+      margin="small"
+      style="position: absolute; bottom: 44px; z-index: 1;"
+    >
+      <!-- TODO: find better solution for rendering errors -->
+      <no-ssr>
+        <hc-author
+          :post="post"
+          :trunc="35"
+          :show-author-popover="showAuthorPopover"
         />
-      </ds-space>
-      <!-- eslint-enable vue/no-v-html -->
-      <ds-space
-        margin="small"
-        style="position: absolute; bottom: 44px;"
-      >
-        <!-- TODO: find better solution for rendering errors -->
-        <no-ssr>
-          <hc-author
-            :post="post"
-            :trunc="35"
-            :show-author-popover="showAuthorPopover"
-          />
-        </no-ssr>
-      </ds-space>
-      <template slot="footer">
-        <div style="display: inline-block; opacity: .5;">
-          <ds-icon
-            v-for="category in post.categories"
-            :key="category.id"
-            v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
-            :name="category.icon"
-          />&nbsp;
-        </div>
-        <div style="display: inline-block; float: right">
-          <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
-            <ds-icon name="bullhorn" /> <small>{{ post.shoutedCount }}</small>
-          </span>
-          &nbsp;
-          <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
-            <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
-          </span>
-        </div>
-      </template>
-    </ds-card>
-  </a>
+      </no-ssr>
+    </ds-space>
+    <template slot="footer">
+      <div style="display: inline-block; opacity: .5;">
+        <ds-icon
+          v-for="category in post.categories"
+          :key="category.id"
+          v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
+          :name="category.icon"
+        />&nbsp;
+      </div>
+      <div style="display: inline-block; float: right">
+        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
+          <ds-icon name="bullhorn" /> <small>{{ post.shoutedCount }}</small>
+        </span>
+        &nbsp;
+        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
+          <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
+        </span>
+      </div>
+    </template>
+  </ds-card>
 </template>
 
 <script>
@@ -155,10 +150,34 @@ export default {
         name: 'post-slug',
         params: { slug: post.slug }
       }).href
-    },
-    isExact(url) {
-      return this.$route.path.indexOf(url) === 0
     }
   }
 }
 </script>
+
+<style lang="scss">
+.post-card {
+  cursor: pointer;
+  position: relative;
+
+  .ds-card-footer {
+    z-index: 1;
+  }
+}
+.post-menu {
+  position: absolute;
+  top: $space-small;
+  right: $space-small;
+  z-index: 1;
+}
+.post-link {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-indent: -999999px;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 6bf42691e..bcd7a46ab 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -138,17 +138,11 @@ export default {
   float: right;
 }
 
-.avatar-menu-trigger {
-  user-select: none;
-}
 .avatar-menu-popover {
-  display: inline-block;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 
   nav {
-    margin-left: -15px;
-    margin-right: -15px;
     padding-top: 1rem;
     padding-bottom: 1rem;
   }

From 8bb4c7dbdffbc27290ffed57d6a0ccb28221e887 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 19:42:56 +0100
Subject: [PATCH 03/59] Added unique class name to body tag based on page name

---
 components/mixins/seo.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/mixins/seo.js b/components/mixins/seo.js
index d0c232baf..de641e677 100644
--- a/components/mixins/seo.js
+++ b/components/mixins/seo.js
@@ -3,6 +3,9 @@ export default {
     return {
       htmlAttrs: {
         lang: this.$i18n.locale()
+      },
+      bodyAttrs: {
+        class: `page-name-${this.$route.name}`
       }
     }
   }

From bd8deb942aca0346a1e4934cbae4eb11a62a09d7 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 19:43:07 +0100
Subject: [PATCH 04/59] Fix styling issues

---
 pages/post/_slug/index.vue | 42 ++++++++++++++++++++------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 949263e95..8d95a4189 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -213,31 +213,33 @@ export default {
 </script>
 
 <style lang="scss">
-.post-card {
-  // max-width: 800px;
-  margin: auto;
+.page-name-post-slug {
+  .post-card {
+    // max-width: 800px;
+    margin: auto;
 
-  .comments {
-    margin-top: $space-small;
-
-    .comment {
+    .comments {
       margin-top: $space-small;
-      position: relative;
-    }
-  }
 
-  .ds-card-image {
-    img {
-      max-height: 300px;
-      object-fit: cover;
-      object-position: center;
+      .comment {
+        margin-top: $space-small;
+        position: relative;
+      }
     }
-  }
-  .ds-card-footer {
-    padding: 0;
 
-    .ds-section {
-      padding: $space-base;
+    .ds-card-image {
+      img {
+        max-height: 300px;
+        object-fit: cover;
+        object-position: center;
+      }
+    }
+    .ds-card-footer {
+      padding: 0;
+
+      .ds-section {
+        padding: $space-base;
+      }
     }
   }
 }

From 6e1889c5e8554e6aac173b6b2def577568753520 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 20:03:08 +0100
Subject: [PATCH 05/59] Improved report menu

---
 components/PostCard.vue                  | 88 ++++++++++++------------
 locales/de.json                          |  5 +-
 locales/en.json                          |  5 +-
 styleguide/src/system/icons/svg/flag.svg |  5 ++
 4 files changed, 57 insertions(+), 46 deletions(-)
 create mode 100755 styleguide/src/system/icons/svg/flag.svg

diff --git a/components/PostCard.vue b/components/PostCard.vue
index 2ae3e4b37..1286bc9bb 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -11,40 +11,6 @@
     >
       {{ post.title }}
     </a>
-    <no-ssr>
-      <dropdown class="post-menu">
-        <template
-          slot="default"
-          slot-scope="{toggleMenu}"
-        >
-          <a
-            class="post-menu-trigger"
-            href="#"
-            @click.prevent="toggleMenu()"
-          >
-            <ds-icon name="angle-down" />
-          </a>
-        </template>
-        <template
-          slot="popover"
-          slot-scope="{toggleMenu}"
-        >
-          <div class="post-menu-popover">
-            <ds-menu :routes="routes">
-              <ds-menu-item
-                slot="Navigation"
-                slot-scope="item"
-                :route="item.route"
-                :parents="item.parents"
-                @click.native="toggleMenu"
-              >
-                <ds-icon :name="item.route.icon" /> {{ item.route.name }}
-              </ds-menu-item>
-            </ds-menu>
-          </div>
-        </template>
-      </dropdown>
-    </no-ssr>
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
     <ds-space margin-bottom="large">
@@ -84,6 +50,43 @@
         <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
           <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
         </span>
+        <no-ssr>
+          <dropdown
+            class="post-menu"
+            placement="top-end"
+          >
+            <template
+              slot="default"
+              slot-scope="{toggleMenu}"
+            >
+              <a
+                class="post-menu-trigger"
+                href="#"
+                @click.prevent="toggleMenu()"
+              >
+                <ds-icon name="angle-up" />
+              </a>
+            </template>
+            <template
+              slot="popover"
+              slot-scope="{toggleMenu}"
+            >
+              <div class="post-menu-popover">
+                <ds-menu :routes="routes">
+                  <ds-menu-item
+                    slot="Navigation"
+                    slot-scope="item"
+                    :route="item.route"
+                    :parents="item.parents"
+                    @click.native="toggleMenu"
+                  >
+                    <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+                  </ds-menu-item>
+                </ds-menu>
+              </div>
+            </template>
+          </dropdown>
+        </no-ssr>
       </div>
     </template>
   </ds-card>
@@ -124,14 +127,9 @@ export default {
     routes() {
       let routes = [
         {
-          name: 'Melden',
+          name: this.$t('common.reportContent'),
           path: `/profile/`,
-          icon: 'user'
-        },
-        {
-          name: 'Irgendwass',
-          path: `/settings`,
-          icon: 'cogs'
+          icon: 'flag'
         }
       ]
       // if (this.isAdmin) {
@@ -165,9 +163,11 @@ export default {
   }
 }
 .post-menu {
-  position: absolute;
-  top: $space-small;
-  right: $space-small;
+  // position: absolute;
+  // bottom: $space-small;
+  // right: $space-small;
+  display: inline-block;
+  margin-left: $space-base;
   z-index: 1;
 }
 .post-link {
diff --git a/locales/de.json b/locales/de.json
index bb879f4ea..e88c0e096 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "reportContent": "Melden"
+  },
   "login": {
     "copy": "Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.",
     "login": "Einloggen",
@@ -94,4 +97,4 @@
       "author": "Afrikanisches Sprichwort"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/locales/en.json b/locales/en.json
index a36bdda3c..430ed2d62 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,4 +1,7 @@
 {
+  "common": {
+    "reportContent": "Report"
+  },
   "login": {
     "copy": "If you already have a human-connection account, login here.",
     "login": "Login",
@@ -94,4 +97,4 @@
       "author": "African proverb"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/styleguide/src/system/icons/svg/flag.svg b/styleguide/src/system/icons/svg/flag.svg
new file mode 100755
index 000000000..6d2769808
--- /dev/null
+++ b/styleguide/src/system/icons/svg/flag.svg
@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>flag</title>
+<path d="M5 5h12v14h-10v10h-2v-24zM18 8h9v14h-9v-14z"></path>
+</svg>

From 8584253e3f8f578f46508955e9b74248ea6baae4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 29 Dec 2018 20:11:13 +0100
Subject: [PATCH 06/59] Less left margin on report button

---
 components/PostCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PostCard.vue b/components/PostCard.vue
index 1286bc9bb..b41607b3e 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -167,7 +167,7 @@ export default {
   // bottom: $space-small;
   // right: $space-small;
   display: inline-block;
-  margin-left: $space-base;
+  margin-left: $space-small;
   z-index: 1;
 }
 .post-link {

From 8c83019cf462c2a06bf8c3a11aef3d00f0886ade Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 14:52:40 +0100
Subject: [PATCH 07/59] Introduced portal-vue component for teleporting
 components like... like in Portal 1 & 2

---
 nuxt.config.js | 1 +
 package.json   | 1 +
 yarn.lock      | 5 +++++
 3 files changed, 7 insertions(+)

diff --git a/nuxt.config.js b/nuxt.config.js
index be8da36c5..7c0111d66 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -84,6 +84,7 @@ module.exports = {
     'cookie-universal-nuxt',
     '@nuxtjs/apollo',
     '@nuxtjs/axios',
+    'portal-vue/nuxt',
     [
       'nuxt-sass-resources-loader',
       path.resolve(__dirname, './styleguide/src/system/styles/shared.scss')
diff --git a/package.json b/package.json
index f316df396..391701a73 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "jsonwebtoken": "^8.3.0",
     "nuxt": "^2.0.0",
     "nuxt-env": "^0.0.4",
+    "portal-vue": "^1.5.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",
diff --git a/yarn.lock b/yarn.lock
index 800a9deff..851ee3d5e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8734,6 +8734,11 @@ popper.js@^1.12.9:
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.5.tgz#98abcce7c7c34c4ee47fcbc6b3da8af2c0a127bc"
   integrity sha512-fs4Sd8bZLgEzrk8aS7Em1qh+wcawtE87kRUJQhK6+LndyV1HerX7+LURzAylVaTyWIn5NTB/lyjnWqw/AZ6Yrw==
 
+portal-vue@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-1.5.1.tgz#6bed79ef168d9676bb79f41d43c5cd4cedf54dbc"
+  integrity sha512-7T0K+qyY8bnjnEpQTiLbGsUaGlFcemK9gLurVSr6x1/qzr2HkHDNCOz5i+xhuTD1CrXckf/AGeCnLzvmAHMOHw==
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"

From 331ea6d0c1776ce7db5437b133e3d8e534664529 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 14:53:13 +0100
Subject: [PATCH 08/59] Forgott some metter while teleporting

---
 styleguide/package.json | 1 +
 styleguide/yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/styleguide/package.json b/styleguide/package.json
index 57eea0c0c..a2727c1ce 100644
--- a/styleguide/package.json
+++ b/styleguide/package.json
@@ -14,6 +14,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "portal-vue": "^1.5.1",
     "vue": "^2.5.17"
   },
   "devDependencies": {
diff --git a/styleguide/yarn.lock b/styleguide/yarn.lock
index fcd471314..968aa0f71 100644
--- a/styleguide/yarn.lock
+++ b/styleguide/yarn.lock
@@ -8034,6 +8034,11 @@ pn@^1.1.0:
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
   integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
 
+portal-vue@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-1.5.1.tgz#6bed79ef168d9676bb79f41d43c5cd4cedf54dbc"
+  integrity sha512-7T0K+qyY8bnjnEpQTiLbGsUaGlFcemK9gLurVSr6x1/qzr2HkHDNCOz5i+xhuTD1CrXckf/AGeCnLzvmAHMOHw==
+
 portfinder@^1.0.19, portfinder@^1.0.9:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.19.tgz#07e87914a55242dcda5b833d42f018d6875b595f"

From c144e122298cddcd504285c4e866ca632bee26c5 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 14:53:57 +0100
Subject: [PATCH 09/59] Added some transitions, animations and some more shadow
 variant to the styleguide

---
 styleguide/src/system/styles/shared.scss      |  2 +
 .../src/system/styles/shared/_animations.scss | 19 ++++++
 .../system/styles/shared/_transitions.scss    | 66 +++++++++++++++++++
 .../_examples/dark-purple/box-shadow.yml      |  2 +
 4 files changed, 89 insertions(+)
 create mode 100644 styleguide/src/system/styles/shared/_animations.scss
 create mode 100644 styleguide/src/system/styles/shared/_transitions.scss

diff --git a/styleguide/src/system/styles/shared.scss b/styleguide/src/system/styles/shared.scss
index e2da9cb8e..187740b1a 100644
--- a/styleguide/src/system/styles/shared.scss
+++ b/styleguide/src/system/styles/shared.scss
@@ -16,3 +16,5 @@
 @import "./shared/background";
 @import "./shared/spacing";
 @import "./shared/form";
+@import "./shared/transitions";
+@import "./shared/animations";
diff --git a/styleguide/src/system/styles/shared/_animations.scss b/styleguide/src/system/styles/shared/_animations.scss
new file mode 100644
index 000000000..c1987dcf5
--- /dev/null
+++ b/styleguide/src/system/styles/shared/_animations.scss
@@ -0,0 +1,19 @@
+@keyframes ds-animation-shake {
+  from, to {
+    transform: translate3d(0, 0, 0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translate3d(5px, 0, 0);
+  }
+}
+
+.ds-animated {
+  animation-duration: 0.8s;
+  animation-fill-mode: both;
+}
+.ds-animation-shake {
+  animation-name: ds-animation-shake;
+}
diff --git a/styleguide/src/system/styles/shared/_transitions.scss b/styleguide/src/system/styles/shared/_transitions.scss
new file mode 100644
index 000000000..805f031dd
--- /dev/null
+++ b/styleguide/src/system/styles/shared/_transitions.scss
@@ -0,0 +1,66 @@
+$easeOut: cubic-bezier(0.19, 1, 0.22, 1);
+
+// slide up ease
+.ds-transition-slide-up-enter-active {
+  transition: all 500ms $easeOut;
+  transition-delay: 20ms;
+  opacity: 1;
+  transform: translateY(0);
+}
+.ds-transition-slide-up-enter,
+.ds-transition-slide-up-leave-active {
+  opacity: 0;
+  box-shadow: none;
+  transform: translateY(15px);
+}
+
+// slide next / prev
+.ds-transition-slide-next-enter-active,
+.ds-transition-slide-prev-enter-active {
+  transition: transform 500ms $easeOut, opacity 500ms $easeOut;
+  transition-delay: 100ms;
+  opacity: 1;
+}
+.ds-transition-slide-next-enter,
+.ds-transition-slide-next-leave-active {
+  opacity: 0;
+  transform: translateX(10px);
+}
+.ds-transition-slide-prev-enter,
+.ds-transition-slide-prev-leave-active {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+.ds-transition-slide-next-leave-active,
+.ds-transition-slide-prev-leave-active {
+  display: none;
+}
+.ds-transition-slide-next-leave-active,
+.ds-transition-slide-prev-leave-active {
+  opacity: 0;
+  transform: translateX(-2px);
+  transition: transform 100ms $easeOut, opacity 100ms $easeOut;
+}
+
+.ds-transition-fade-delayed-leave-active {
+  transition: opacity 0ms;
+  transition-delay: 0ms;
+}
+.ds-transition-fade-delayed-enter-active {
+  transition: opacity 300ms ease-out;
+  transition-delay: 100ms;
+  opacity: 1;
+}
+.ds-transition-fade-delayed-enter,
+.ds-transition-fade-delayed-leave-active {
+  opacity: 0.1;
+}
+
+.ds-transition-fade-enter-active,
+.ds-transition-fade-leave-active {
+  transition: opacity 200ms;
+}
+.ds-transition-fade-enter,
+.ds-transition-fade-leave-to {
+  opacity: 0;
+}
diff --git a/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml b/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
index 59fb1e83d..de107d0ac 100644
--- a/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
+++ b/styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
@@ -5,6 +5,8 @@
 #
 
 props:
+  - name: box-shadow-x-large
+    value: "0 40px 120px 0 rgba(0, 0, 0, .8)"
   - name: box-shadow-large
     value: "0 20px 60px 0 rgba(0, 0, 0, .8)"
   - name: box-shadow-base

From 17a52fa8e5946987699c23eb01dd4d936875060c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 14:54:21 +0100
Subject: [PATCH 10/59] Added Modal to our Styleguide

---
 store/modal.js                                |  22 ++
 .../system/components/layout/Modal/Modal.vue  | 191 ++++++++++++++++++
 .../system/components/layout/Modal/demo.md    |  65 ++++++
 .../system/components/layout/Modal/style.scss |  75 +++++++
 4 files changed, 353 insertions(+)
 create mode 100644 store/modal.js
 create mode 100644 styleguide/src/system/components/layout/Modal/Modal.vue
 create mode 100644 styleguide/src/system/components/layout/Modal/demo.md
 create mode 100644 styleguide/src/system/components/layout/Modal/style.scss

diff --git a/store/modal.js b/store/modal.js
new file mode 100644
index 000000000..f7bc1ad8e
--- /dev/null
+++ b/store/modal.js
@@ -0,0 +1,22 @@
+export const state = () => {
+  return {
+    open: null,
+    data: {}
+  }
+}
+
+export const mutations = {
+  SET_OPEN(state, ctx) {
+    state.open = ctx.name || null
+    state.data = ctx.data || {}
+  }
+}
+
+export const getters = {
+  open(state) {
+    return state.open
+  },
+  data(state) {
+    return state.data
+  }
+}
diff --git a/styleguide/src/system/components/layout/Modal/Modal.vue b/styleguide/src/system/components/layout/Modal/Modal.vue
new file mode 100644
index 000000000..f85c3f986
--- /dev/null
+++ b/styleguide/src/system/components/layout/Modal/Modal.vue
@@ -0,0 +1,191 @@
+<template>
+  <portal to="modal">
+    <div :key="key" class="ds-modal-wrapper">
+      <transition name="ds-transition-fade" appear>
+        <div
+          v-if="isOpen"
+          class="ds-modal-backdrop"
+          ref="backdrop"
+          @click="backdropHandler"
+        >
+          &nbsp;
+        </div>
+      </transition>
+      <transition name="ds-transition-modal-appear" appear>
+        <div
+          v-if="isOpen"
+          class="ds-modal"
+          tableindex="-1"
+          role="dialog"
+          ref="modal"
+          style="display: block"
+        >
+          <div class="ds-modal-dialog">
+            <div class="ds-modal-content">
+              <div class="ds-modal-header">
+                <ds-heading
+                  tag="h3"
+                  class="ds-modal-title"
+                >
+                  {{ title }}
+                </ds-heading>
+                <ds-button
+                  v-if="allowAbort"
+                  class="ds-modal-close"
+                  ghost
+                  size="small"
+                  icon="close"
+                  aria-hidden="true"
+                  @click="cancel('close')"
+                />
+              </div>
+              <div
+                class="ds-modal-body"
+                ref="modalBody"
+              >
+                <!-- @slot Modal content -->
+                <slot/>
+              </div>
+              <div class="ds-modal-footer">
+                <!-- @slot Modal footer with action buttons -->
+                <slot
+                  name="footer"
+                  :confirm="confirm"
+                  :cancel="cancel"
+                  :cancelLabel="cancelLabel"
+                  :confirmLabel="confirmLabel"
+                >
+                  <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
+                  <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </portal>
+</template>
+
+<script>
+import Vue from 'vue'
+import portal from 'portal-vue'
+Vue.use(portal)
+
+/* eslint-disable no-empty */
+
+/**
+ * Simple Modal Component
+ * @version 1.0.0
+ */
+export default {
+  name: 'DsModal',
+  props: {
+    /**
+     * Modal title
+     */
+    title: {
+      type: String,
+      default: null
+    },
+    /**
+     * Open state
+     */
+    isOpen: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Allow closing without choosing action by ESC key, close button or click on the backdrop
+     */
+    allowAbort: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Cancel button label
+     */
+    cancelLabel: {
+      type: String,
+      default: 'Cancel'
+    },
+    /**
+     * Confirm button label
+     */
+    confirmLabel: {
+      type: String,
+      default: 'Confirm'
+    }
+  },
+  model: {
+    prop: 'isOpen',
+    event: 'update:isOpen'
+  },
+  watch: {
+    isOpen: {
+      immediate: true,
+      handler(show) {
+        try {
+          if (show) {
+            this.$emit('opened')
+            document
+              .getElementsByTagName('body')[0]
+              .classList
+              .add('modal-open')
+          } else {
+            document
+              .getElementsByTagName('body')[0]
+              .classList
+              .remove('modal-open')
+          }
+        } catch (err) {}
+      }
+    }
+  },
+  methods: {
+    confirm (type = 'confirm') {
+      this.$emit('confirm')
+      this.close(type)
+    },
+    cancel (type = 'cancel') {
+      this.$emit('cancel')
+      this.close(type)
+    },
+    close (type) {
+      this.$emit('update:isOpen', false)
+      this.$emit('close', type)
+    },
+    backdropHandler () {
+      if (this.allowAbort) {
+        this.cancel('backdrop')
+      }
+    }
+  },
+  beforeCreate() {
+    // create random key string
+    this.key = Math.random()
+      .toString(36)
+      .replace(/[^a-z]+/g, '')
+      .substr(0, 5)
+  },
+  mounted() {
+    const keydownListener = document.addEventListener('keydown', e => {
+      if (this.isOpen && this.allowAbort && e.keyCode === 27) {
+        this.cancel('backdrop')
+      }
+    })
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keydown', keydownListener)
+    })
+
+    if (this.isOpen) {
+      this.$emit('opened')
+    }
+  }
+}
+</script>
+
+<style lang="scss" src="./style.scss">
+</style>
+
+<docs src="./demo.md"></docs>
diff --git a/styleguide/src/system/components/layout/Modal/demo.md b/styleguide/src/system/components/layout/Modal/demo.md
new file mode 100644
index 000000000..68129b2f9
--- /dev/null
+++ b/styleguide/src/system/components/layout/Modal/demo.md
@@ -0,0 +1,65 @@
+## Basic Modal
+
+Basic modal usage
+
+You will need to add the portal-target to the end of your html body to get the modal working properly
+```html
+<!-- put the following tag as last element to your html body / layout -->
+<!-- make sure you only include it once! -->
+<portal-target name="modal" style="position: absolute" />
+```
+
+```
+<template>
+  <div>
+    <ds-modal 
+      v-model="isOpen"
+      title="Modal Title" 
+    >
+      <p>Hello World</p>
+    </ds-modal>
+    <ds-button primary icon="rocket" @click="isOpen = true">Open Modal</ds-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        isOpen: false
+      }
+    }
+  }
+</script>
+```
+
+Customize button labels
+```
+<template>
+  <div>
+    <ds-modal 
+      v-if="isOpen"
+      v-model="isOpen"
+      title="Custom Button Labels" 
+      :allow-abort="false"
+      confirm-label="All right"
+      cancel-label="Please not"
+    >
+      <p>Culpa amet sunt aperiam ratione est sed. Molestiae minus doloremque libero. Beatae nam repellendus aliquid maxime.</p>
+      <p>Sint quasi provident natus id earum debitis. Et facilis a iure ullam. Velit autem eveniet ea reprehenderit ducimus doloribus earum quo.</p>
+      <p>Consequatur ratione repudiandae aliquid ea. Ut eum architecto assumenda. Autem eaque provident quia et.</p>
+      <p>Eaque quia aut dolorum sunt ea consequuntur. Labore reprehenderit placeat pariatur molestiae sit laborum nostrum. Deserunt est commodi et suscipit tenetur ipsa voluptas cupiditate. Porro laborum quidem ut corrupti. Dolorum et est placeat qui.</p>
+      <p>Adipisci beatae cumque esse harum. Error quis nulla illo nemo est. Enim est quis explicabo voluptatem. Omnis maxime qui similique consequatur voluptatibus. Est necessitatibus iure aliquid omnis eum. Ut voluptatibus vel error exercitationem temporibus qui expedita.</p>
+    </ds-modal>
+    <ds-button primary icon="rocket" @click="isOpen = true">Open Modal</ds-button>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        isOpen: false
+      }
+    }
+  }
+</script>
+```
diff --git a/styleguide/src/system/components/layout/Modal/style.scss b/styleguide/src/system/components/layout/Modal/style.scss
new file mode 100644
index 000000000..1c2ab66ec
--- /dev/null
+++ b/styleguide/src/system/components/layout/Modal/style.scss
@@ -0,0 +1,75 @@
+
+.ds-modal-wrapper {
+  padding: $space-base;
+  position: relative;
+}
+
+.ds-modal {
+  position: fixed;
+  z-index: $z-index-modal;
+  left: 50%;
+  top: 50%;
+  transform: translate3d(-50%, -50%, 0);
+  display: flex;
+  flex-direction: column;
+  max-width: 600px;
+  width: calc(90vw - 40px);
+  max-height: 90vh;
+  background: white;
+  border-radius: $border-radius-large;
+  padding: 0 $space-base;
+  box-shadow: $box-shadow-x-large;
+}
+.ds-modal-close {
+  position: absolute;
+  top: $space-small;
+  right: $space-small;
+}
+.ds-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  height: auto;
+  min-height: 100px;
+  max-height: 60vh;
+}
+.ds-modal-header {
+  padding-top: $space-base;
+
+  .ds-modal-title {
+    margin-bottom: 0;
+  }
+}
+.ds-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-modal - 1;
+  background: rgba(0, 0, 0, 0.7);
+}
+.ds-modal-footer {
+  display: flex;
+  padding: $space-base 0;
+  flex-shrink: 0;
+  justify-content: flex-end;
+
+  & > button {
+    margin-left: $space-x-small;
+  }
+}
+
+$easeOut: cubic-bezier(0.19, 1, 0.22, 1);
+
+.ds-transition-modal-appear-enter-active {
+  opacity: 1;
+  transition: all 180ms $easeOut;
+  transition-delay: 0;
+  transform: translate3d(-50%, -50%, 0) scale(1);
+}
+.ds-transition-modal-appear-enter,
+.ds-transition-modal-appear-leave-active {
+  opacity: 0;
+  transition-delay: 0;
+  transform: translate3d(-50%, -50%, 0) scale(0.9);
+}

From cd83d35dc7c7dd22eb3e72a8d2f4c368fcc6e940 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 15:11:17 +0100
Subject: [PATCH 11/59] Improved Modal

---
 .../system/components/layout/Modal/Modal.vue   | 18 +++++++++++++-----
 .../src/system/components/layout/Modal/demo.md |  3 ++-
 .../system/components/layout/Modal/style.scss  |  7 +++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/styleguide/src/system/components/layout/Modal/Modal.vue b/styleguide/src/system/components/layout/Modal/Modal.vue
index f85c3f986..5aa00cde4 100644
--- a/styleguide/src/system/components/layout/Modal/Modal.vue
+++ b/styleguide/src/system/components/layout/Modal/Modal.vue
@@ -15,6 +15,7 @@
         <div
           v-if="isOpen"
           class="ds-modal"
+          :class="[extended && 'ds-modal-extended']"
           tableindex="-1"
           role="dialog"
           ref="modal"
@@ -30,7 +31,7 @@
                   {{ title }}
                 </ds-heading>
                 <ds-button
-                  v-if="allowAbort"
+                  v-if="!force"
                   class="ds-modal-close"
                   ghost
                   size="small"
@@ -95,12 +96,19 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Force user input by disabeling the ESC key, close button and click on the backdrop
+     */
+    force: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Allow closing without choosing action by ESC key, close button or click on the backdrop
      */
-    allowAbort: {
+    extended: {
       type: Boolean,
-      default: true
+      default: false
     },
     /**
      * Cancel button label
@@ -156,7 +164,7 @@ export default {
       this.$emit('close', type)
     },
     backdropHandler () {
-      if (this.allowAbort) {
+      if (!this.force) {
         this.cancel('backdrop')
       }
     }
@@ -170,7 +178,7 @@ export default {
   },
   mounted() {
     const keydownListener = document.addEventListener('keydown', e => {
-      if (this.isOpen && this.allowAbort && e.keyCode === 27) {
+      if (this.isOpen && !this.force && e.keyCode === 27) {
         this.cancel('backdrop')
       }
     })
diff --git a/styleguide/src/system/components/layout/Modal/demo.md b/styleguide/src/system/components/layout/Modal/demo.md
index 68129b2f9..50f9481e2 100644
--- a/styleguide/src/system/components/layout/Modal/demo.md
+++ b/styleguide/src/system/components/layout/Modal/demo.md
@@ -40,7 +40,8 @@ Customize button labels
       v-if="isOpen"
       v-model="isOpen"
       title="Custom Button Labels" 
-      :allow-abort="false"
+      force
+      extended
       confirm-label="All right"
       cancel-label="Please not"
     >
diff --git a/styleguide/src/system/components/layout/Modal/style.scss b/styleguide/src/system/components/layout/Modal/style.scss
index 1c2ab66ec..8c40dd5fd 100644
--- a/styleguide/src/system/components/layout/Modal/style.scss
+++ b/styleguide/src/system/components/layout/Modal/style.scss
@@ -12,7 +12,7 @@
   transform: translate3d(-50%, -50%, 0);
   display: flex;
   flex-direction: column;
-  max-width: 600px;
+  max-width: 400px;
   width: calc(90vw - 40px);
   max-height: 90vh;
   background: white;
@@ -20,6 +20,9 @@
   padding: 0 $space-base;
   box-shadow: $box-shadow-x-large;
 }
+.ds-modal-extended {
+  max-width: 600px;
+}
 .ds-modal-close {
   position: absolute;
   top: $space-small;
@@ -29,7 +32,7 @@
   flex: 1;
   overflow-y: auto;
   height: auto;
-  min-height: 100px;
+  min-height: 70px;
   max-height: 60vh;
 }
 .ds-modal-header {

From 01ad6a982221dcc24c2fd6ec499a82f94be4bfd8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 15:11:49 +0100
Subject: [PATCH 12/59] Added Content Menu and Report Modal

---
 components/ContentMenu.vue | 104 +++++++++++++++++++++++++++++++++++++
 components/PostCard.vue    |  60 +++------------------
 components/ReportModal.vue |  32 ++++++++++++
 layouts/default.vue        |   6 +++
 pages/post/_slug/index.vue |  12 ++++-
 pages/profile/_slug.vue    |  12 ++++-
 6 files changed, 170 insertions(+), 56 deletions(-)
 create mode 100644 components/ContentMenu.vue
 create mode 100644 components/ReportModal.vue

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
new file mode 100644
index 000000000..4c799fba7
--- /dev/null
+++ b/components/ContentMenu.vue
@@ -0,0 +1,104 @@
+<template>
+  <dropdown
+    class="post-menu"
+    :placement="placement"
+    offset="5"
+  >
+    <template
+      slot="default"
+      slot-scope="{toggleMenu}"
+    >
+      <a
+        class="post-menu-trigger"
+        href="#"
+        @click.prevent="toggleMenu()"
+      >
+        <ds-icon
+          v-if="placement.indexOf('top') === 0"
+          name="angle-up"
+        />
+        <ds-icon
+          v-else
+          name="angle-down"
+        />
+      </a>
+    </template>
+    <template
+      slot="popover"
+      slot-scope="{toggleMenu}"
+    >
+      <div class="post-menu-popover">
+        <ds-menu :routes="routes">
+          <ds-menu-item
+            slot="Navigation"
+            slot-scope="item"
+            :route="item.route"
+            :parents="item.parents"
+            @click.stop.prevent="openItem(item.route, toggleMenu)"
+          >
+            <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+          </ds-menu-item>
+        </ds-menu>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown
+  },
+  props: {
+    placement: { type: String, default: 'top-end' },
+    name: { type: String, required: true },
+    context: {
+      type: String,
+      required: true,
+      validator: value => {
+        return value.match(/(contribution|comment|organization|user)/)
+      }
+    }
+  },
+  computed: {
+    routes() {
+      let routes = [
+        {
+          name: this.$t('common.reportContent'),
+          callback: this.openReportDialog,
+          icon: 'flag'
+        }
+      ]
+      // if (this.isAdmin) {
+      //   routes.push({
+      //     name: this.$t('admin.name'),
+      //     path: `/admin`,
+      //     icon: 'shield'
+      //   })
+      // }
+      return routes
+    }
+  },
+  methods: {
+    openItem(route, toggleMenu) {
+      if (route.callback) {
+        route.callback()
+      } else {
+        this.$router.push(route.path)
+      }
+      toggleMenu()
+    },
+    openReportDialog() {
+      this.$store.commit('modal/SET_OPEN', {
+        name: 'report',
+        data: {
+          context: this.context,
+          name: this.name
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/components/PostCard.vue b/components/PostCard.vue
index b41607b3e..00d2db0ad 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -51,41 +51,10 @@
           <ds-icon name="comments" /> <small>{{ post.commentsCount }}</small>
         </span>
         <no-ssr>
-          <dropdown
-            class="post-menu"
-            placement="top-end"
-          >
-            <template
-              slot="default"
-              slot-scope="{toggleMenu}"
-            >
-              <a
-                class="post-menu-trigger"
-                href="#"
-                @click.prevent="toggleMenu()"
-              >
-                <ds-icon name="angle-up" />
-              </a>
-            </template>
-            <template
-              slot="popover"
-              slot-scope="{toggleMenu}"
-            >
-              <div class="post-menu-popover">
-                <ds-menu :routes="routes">
-                  <ds-menu-item
-                    slot="Navigation"
-                    slot-scope="item"
-                    :route="item.route"
-                    :parents="item.parents"
-                    @click.native="toggleMenu"
-                  >
-                    <ds-icon :name="item.route.icon" /> {{ item.route.name }}
-                  </ds-menu-item>
-                </ds-menu>
-              </div>
-            </template>
-          </dropdown>
+          <content-menu
+            context="contribution"
+            :name="post.title"
+          />
         </no-ssr>
       </div>
     </template>
@@ -94,14 +63,14 @@
 
 <script>
 import HcAuthor from '~/components/Author.vue'
-import Dropdown from '~/components/Dropdown'
+import ContentMenu from '~/components/ContentMenu'
 import { randomBytes } from 'crypto'
 
 export default {
   name: 'HcPostCard',
   components: {
     HcAuthor,
-    Dropdown
+    ContentMenu
   },
   props: {
     post: {
@@ -123,23 +92,6 @@ export default {
       }
 
       return excerpt
-    },
-    routes() {
-      let routes = [
-        {
-          name: this.$t('common.reportContent'),
-          path: `/profile/`,
-          icon: 'flag'
-        }
-      ]
-      // if (this.isAdmin) {
-      //   routes.push({
-      //     name: this.$t('admin.name'),
-      //     path: `/admin`,
-      //     icon: 'shield'
-      //   })
-      // }
-      return routes
     }
   },
   methods: {
diff --git a/components/ReportModal.vue b/components/ReportModal.vue
new file mode 100644
index 000000000..e635839cc
--- /dev/null
+++ b/components/ReportModal.vue
@@ -0,0 +1,32 @@
+<template>
+  <ds-modal
+    :title="title"
+    :is-open="isOpen"
+    cancel-label="Cancel"
+    confirm-label="Send Report"
+    @close="close"
+  >
+    <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+  </ds-modal>
+</template>
+
+<script>
+export default {
+  computed: {
+    data() {
+      return this.$store.getters['modal/data'] || {}
+    },
+    title() {
+      return `Report ${this.data.context}`
+    },
+    isOpen() {
+      return this.$store.getters['modal/open'] === 'report'
+    }
+  },
+  methods: {
+    close() {
+      this.$store.commit('modal/SET_OPEN', {})
+    }
+  }
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index bcd7a46ab..03180b61a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -72,6 +72,10 @@
         <nuxt />
       </div>
     </ds-container>
+    <report-modal />
+    <no-ssr>
+      <portal-target name="modal" />
+    </no-ssr>
   </div>
 </template>
 
@@ -79,11 +83,13 @@
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
+import ReportModal from '~/components/ReportModal'
 import seo from '~/components/mixins/seo'
 
 export default {
   components: {
     Dropdown,
+    ReportModal,
     LocaleSwitch
   },
   mixins: [seo],
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 8d95a4189..15d120261 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -6,6 +6,14 @@
     class="post-card"
   >
     <hc-author :post="post" />
+    <no-ssr>
+      <content-menu
+        style="float: right; display: inline-block; margin-top: -5rem;"
+        placement="bottom-end"
+        context="contribution"
+        :name="post.title"
+      />
+    </no-ssr>
     <ds-space margin-bottom="small" />
     <!-- Content -->
     <!-- eslint-disable vue/no-v-html -->
@@ -112,6 +120,7 @@
 
 <script>
 import gql from 'graphql-tag'
+import ContentMenu from '~/components/ContentMenu'
 import HcAuthor from '~/components/Author.vue'
 import HcShoutButton from '~/components/ShoutButton.vue'
 
@@ -122,7 +131,8 @@ export default {
   },
   components: {
     HcAuthor,
-    HcShoutButton
+    HcShoutButton,
+    ContentMenu
   },
   head() {
     return {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index c1ab8c2a6..aa586fa88 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -17,6 +17,14 @@
             class="profile-avatar"
             size="120px"
           />
+          <no-ssr>
+            <content-menu
+              style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
+              placement="bottom-start"
+              context="user"
+              :name="user.name"
+            />
+          </no-ssr>
           <ds-space margin="small">
             <ds-heading
               tag="h3"
@@ -251,6 +259,7 @@ import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
+import ContentMenu from '~/components/ContentMenu'
 
 export default {
   components: {
@@ -259,7 +268,8 @@ export default {
     HcFollowButton,
     HcCountTo,
     HcBadges,
-    HcLoadMore
+    HcLoadMore,
+    ContentMenu
   },
   transition: {
     name: 'slide-up',

From 00e61e597834dfda928f4e2b4dfdd3f9bebf6a4c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 15:24:31 +0100
Subject: [PATCH 13/59] Added translations for modal.

---
 components/ReportModal.vue |  6 +++---
 locales/de.json            | 13 +++++++++++++
 locales/en.json            | 13 +++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index e635839cc..8cc70731d 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -2,8 +2,8 @@
   <ds-modal
     :title="title"
     :is-open="isOpen"
-    cancel-label="Cancel"
-    confirm-label="Send Report"
+    :confirm-label="$t('report.submit')"
+    :cancel-label="$t('report.cancel')"
     @close="close"
   >
     <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
@@ -17,7 +17,7 @@ export default {
       return this.$store.getters['modal/data'] || {}
     },
     title() {
-      return `Report ${this.data.context}`
+      return this.$t(`report.${this.data.context}.title`)
     },
     isOpen() {
       return this.$store.getters['modal/open'] === 'report'
diff --git a/locales/de.json b/locales/de.json
index 12320e041..12cb611d1 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -90,6 +90,19 @@
       "name": "Aktiv werden"
     }
   },
+  "report": {
+    "submit": "Meldung senden",
+    "cancel": "Abbrechen",
+    "user": {
+      "title": "Nutzer melden"
+    },
+    "contribution": {
+      "title": "Beitrag melden"
+    },
+    "comment": {
+      "title": "Kommentar melden"
+    }
+  },
   "quotes": {
     "african": {
       "quote": "Viele kleine Leute, an vielen kleinen Orten, die viele kleine Dinge tun, werden das Antlitz dieser Welt verändern.",
diff --git a/locales/en.json b/locales/en.json
index eaa37a9cd..87c48e550 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -90,6 +90,19 @@
       "name": "Take action"
     }
   },
+  "report": {
+    "submit": "Send Report",
+    "cancel": "Cancel",
+    "user": {
+      "title": "Report User"
+    },
+    "contribution": {
+      "title": "Report Contribution"
+    },
+    "comment": {
+      "title": "Report Comment"
+    }
+  },
   "quotes": {
     "african": {
       "quote": "Many small people in many small places do many small things, that can alter the face of the world.",

From 487fe2aabe763eed2cf3321f966d1bcee93c25c8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 15:57:31 +0100
Subject: [PATCH 14/59] Dispatch request for report

---
 components/ContentMenu.vue |  2 +
 components/PostCard.vue    |  1 +
 components/ReportModal.vue | 76 +++++++++++++++++++++++++++++++++++++-
 pages/post/_slug/index.vue |  1 +
 pages/profile/_slug.vue    |  1 +
 5 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index 4c799fba7..cece9dc95 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -53,6 +53,7 @@ export default {
   },
   props: {
     placement: { type: String, default: 'top-end' },
+    itemId: { type: String, required: true },
     name: { type: String, required: true },
     context: {
       type: String,
@@ -95,6 +96,7 @@ export default {
         name: 'report',
         data: {
           context: this.context,
+          id: this.itemId,
           name: this.name
         }
       })
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 00d2db0ad..6aa26673d 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -53,6 +53,7 @@
         <no-ssr>
           <content-menu
             context="contribution"
+            :item-id="post.id"
             :name="post.title"
           />
         </no-ssr>
diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index 8cc70731d..b3fc87853 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -4,14 +4,46 @@
     :is-open="isOpen"
     :confirm-label="$t('report.submit')"
     :cancel-label="$t('report.cancel')"
-    @close="close"
+    confrim-icon="warning"
+    @confirm="report"
+    @cancel="close"
   >
     <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+    <template
+      slot="footer"
+      slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
+    >
+      <ds-button
+        ghost
+        icon="close"
+        :disabled="disabled || loading"
+        @click.prevent="cancel('cancel')"
+      >
+        {{ cancelLabel }}
+      </ds-button>
+      <ds-button
+        danger
+        icon="exclamation-circle"
+        :loading="loading"
+        :disabled="disabled || loading"
+        @click.prevent="confirm('confirm')"
+      >
+        {{ confirmLabel }}
+      </ds-button>
+    </template>
   </ds-modal>
 </template>
 
 <script>
+import gql from 'graphql-tag'
+
 export default {
+  data() {
+    return {
+      loading: false,
+      disabled: false
+    }
+  },
   computed: {
     data() {
       return this.$store.getters['modal/data'] || {}
@@ -23,9 +55,51 @@ export default {
       return this.$store.getters['modal/open'] === 'report'
     }
   },
+  watch: {
+    isOpen(open) {
+      if (open) {
+        this.disabled = false
+        this.loading = false
+      }
+    }
+  },
   methods: {
     close() {
       this.$store.commit('modal/SET_OPEN', {})
+    },
+    report() {
+      console.log('')
+      this.loading = true
+      this.$apollo
+        .mutate({
+          mutation: gql`
+            mutation($id: ID!, $type: _ResourceType!, $description: String) {
+              report(
+                resource: { id: $id, type: $type }
+                description: $description
+              ) {
+                id
+              }
+            }
+          `,
+          variables: {
+            id: this.data.id,
+            type: this.data.context,
+            description: '-'
+          }
+        })
+        .then(() => {
+          this.isOpen = false
+          this.$toast.success(err.message)
+          this.disabled = true
+        })
+        .catch(err => {
+          this.$toast.error(err.message)
+          this.disabled = false
+        })
+        .finally(() => {
+          this.loading = false
+        })
     }
   }
 }
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 15d120261..619841310 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -11,6 +11,7 @@
         style="float: right; display: inline-block; margin-top: -5rem;"
         placement="bottom-end"
         context="contribution"
+        :item-id="post.id"
         :name="post.title"
       />
     </no-ssr>
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 1a6809f1c..e2eab1e87 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -22,6 +22,7 @@
               style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
               placement="bottom-start"
               context="user"
+              :item-id="user.id"
               :name="user.name"
             />
           </no-ssr>

From c1fb68eb36d9dd7e412ed03a039b9264ee4f91ef Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 16:34:16 +0100
Subject: [PATCH 15/59] Report now works

---
 components/ReportModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index b3fc87853..f06fdcb3b 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -89,9 +89,9 @@ export default {
           }
         })
         .then(() => {
-          this.isOpen = false
-          this.$toast.success(err.message)
+          this.$toast.success('Thanks for reporting!')
           this.disabled = true
+          this.close()
         })
         .catch(err => {
           this.$toast.error(err.message)

From a914587f5ce3037a4299e847e7b06d307b039aa8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 18:15:21 +0100
Subject: [PATCH 16/59] Adjusted and optimized borderradius, tooltips and
 popovers

---
 assets/styles/imports/_tooltip.scss           | 82 ++++++++++---------
 pages/profile/_slug.vue                       |  4 +-
 .../system/components/layout/Card/style.scss  |  2 +-
 .../src/system/tokens/border-radius.yml       |  4 +-
 4 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
index 738d6a158..9d073c11e 100644
--- a/assets/styles/imports/_tooltip.scss
+++ b/assets/styles/imports/_tooltip.scss
@@ -1,97 +1,103 @@
-.tooltip {
-  display: block !important;
-  z-index: 10000;
-
-  .tooltip-inner {
-    background: white;
-    color: $text-color-base;
-    border-radius: $border-radius-large;
-    padding: $space-x-small $space-small;
-    box-shadow: $box-shadow-large;
-  }
-
-  .tooltip-arrow {
+@mixin arrow($size, $type, $color) {
+  .#{$type}-arrow {
     width: 0;
     height: 0;
     border-style: solid;
     position: absolute;
-    margin: 5px;
-    border-color: white;
+    margin: $size;
+    border-color: $color;
     z-index: 1;
   }
 
   &[x-placement^="top"] {
-    margin-bottom: 5px;
+    margin-bottom: $size;
 
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
+    .#{$type}-arrow {
+      border-width: $size $size 0 $size;
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
+      bottom: -$size;
+      left: calc(50% - $size);
       margin-top: 0;
       margin-bottom: 0;
     }
   }
 
   &[x-placement^="bottom"] {
-    margin-top: 5px;
+    margin-top: $size;
 
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
+    .#{$type}-arrow {
+      border-width: 0 $size $size $size;
       border-left-color: transparent !important;
       border-right-color: transparent !important;
       border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
+      top: -$size;
+      left: calc(50% - $size);
       margin-top: 0;
       margin-bottom: 0;
     }
   }
 
   &[x-placement^="right"] {
-    margin-left: 5px;
+    margin-left: $size;
 
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
+    .#{$type}-arrow {
+      border-width: $size $size $size 0;
       border-left-color: transparent !important;
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
+      left: -$size;
+      top: calc(50% - $size);
       margin-left: 0;
       margin-right: 0;
     }
   }
 
   &[x-placement^="left"] {
-    margin-right: 5px;
+    margin-right: $size;
 
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
+    .#{$type}-arrow {
+      border-width: $size 0 $size $size;
       border-top-color: transparent !important;
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
+      right: -$size;
+      top: calc(50% - $size);
       margin-left: 0;
       margin-right: 0;
     }
   }
+}
+
+.tooltip {
+  display: block !important;
+  z-index: $z-index-modal - 2;
+
+  .tooltip-inner {
+    background: $background-color-inverse-soft;
+    color: $text-color-inverse;
+    border-radius: $border-radius-base;
+    padding: $space-x-small $space-small;
+    box-shadow: $box-shadow-large;
+  }
+
+  @include arrow(5px, "tooltip", $background-color-inverse-soft);
 
   &.popover {
     .popover-inner {
-      background: white;
+      background: $background-color-soft;
       color: $text-color-base;
-      border-radius: $border-radius-large;
+      border-radius: $border-radius-base;
       padding: $space-x-small $space-small;
       box-shadow: $box-shadow-large;
     }
 
     .popover-arrow {
-      border-color: white;
+      border-color: $background-color-soft;
     }
+
+    @include arrow(8px, "popover", $background-color-soft);
   }
 
   &[aria-hidden='true'] {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index e2eab1e87..ccfedde47 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -379,10 +379,10 @@ export default {
       &.ds-tab-nav-item-active {
         border-bottom: 3px solid #17b53f;
         &:first-child {
-          border-bottom-left-radius: $border-radius-large;
+          border-bottom-left-radius: $border-radius-x-large;
         }
         &:last-child {
-          border-bottom-right-radius: $border-radius-large;
+          border-bottom-right-radius: $border-radius-x-large;
         }
       }
     }
diff --git a/styleguide/src/system/components/layout/Card/style.scss b/styleguide/src/system/components/layout/Card/style.scss
index d7b0186d2..acf5d0b39 100644
--- a/styleguide/src/system/components/layout/Card/style.scss
+++ b/styleguide/src/system/components/layout/Card/style.scss
@@ -1,4 +1,4 @@
-$border-radius: $border-radius-large;
+$border-radius: $border-radius-x-large;
 
 .ds-card {
   @include reset;
diff --git a/styleguide/src/system/tokens/border-radius.yml b/styleguide/src/system/tokens/border-radius.yml
index 237f3944b..4bbdf785a 100644
--- a/styleguide/src/system/tokens/border-radius.yml
+++ b/styleguide/src/system/tokens/border-radius.yml
@@ -5,9 +5,9 @@
 
 props:
   - name: border-radius-x-large
-    value: "8px"
+    value: "5px"
   - name: border-radius-large
-    value: "6px"
+    value: "4px"
   - name: border-radius-base
     value: "3px"
   - name: border-radius-rounded

From 7dde1a1844790f36559e0223efea79dabd6950af Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 11 Jan 2019 19:20:00 +0100
Subject: [PATCH 17/59] Added basic moderation interface

---
 components/ReportModal.vue |   2 +-
 layouts/default.vue        |   8 +++
 locales/de.json            |   7 ++
 locales/en.json            |   7 ++
 pages/moderation.vue       |  35 ++++++++++
 pages/moderation/index.vue | 140 +++++++++++++++++++++++++++++++++++++
 6 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 pages/moderation.vue
 create mode 100644 pages/moderation/index.vue

diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index f06fdcb3b..52b31cbd5 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -73,7 +73,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: gql`
-            mutation($id: ID!, $type: _ResourceType!, $description: String) {
+            mutation($id: ID!, $type: ResourceEnum!, $description: String) {
               report(
                 resource: { id: $id, type: $type }
                 description: $description
diff --git a/layouts/default.vue b/layouts/default.vue
index 01f883b1e..27bf5f94d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -101,6 +101,7 @@ export default {
     ...mapGetters({
       user: 'auth/user',
       isLoggedIn: 'auth/isLoggedIn',
+      isModerator: 'auth/isModerator',
       isAdmin: 'auth/isAdmin'
     }),
     routes() {
@@ -119,6 +120,13 @@ export default {
           icon: 'cogs'
         }
       ]
+      if (this.isModerator) {
+        routes.push({
+          name: this.$t('moderation.name'),
+          path: `/moderation`,
+          icon: 'balance-scale'
+        })
+      }
       if (this.isAdmin) {
         routes.push({
           name: this.$t('admin.name'),
diff --git a/locales/de.json b/locales/de.json
index 12cb611d1..11a4a179c 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -81,6 +81,13 @@
       "name": "Einstellungen"
     }
   },
+  "moderation": {
+    "name": "Moderation",
+    "reports": {
+      "name": "Meldungen",
+      "reporter": "gemeldet von"
+    }
+  },
   "post": {
     "name": "Beitrag",
     "moreInfo": {
diff --git a/locales/en.json b/locales/en.json
index 87c48e550..3556b08cf 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -81,6 +81,13 @@
       "name": "Settings"
     }
   },
+  "moderation": {
+    "name": "Moderation",
+    "reports": {
+      "name": "Reports",
+      "reporter": "reported by"
+    }
+  },
   "post": {
     "name": "Post",
     "moreInfo": {
diff --git a/pages/moderation.vue b/pages/moderation.vue
new file mode 100644
index 000000000..16070ae35
--- /dev/null
+++ b/pages/moderation.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <ds-heading tag="h1">
+      {{ $t('moderation.name') }}
+    </ds-heading>
+    <ds-flex gutter="small">
+      <ds-flex-item :width="{ base: '200px' }">
+        <ds-menu :routes="routes" />
+      </ds-flex-item>
+      <ds-flex-item>
+        <transition
+          name="slide-up"
+          appear
+        >
+          <nuxt-child />
+        </transition>
+      </ds-flex-item>
+    </ds-flex>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    routes() {
+      return [
+        {
+          name: this.$t('moderation.reports.name'),
+          path: `/moderation`
+        }
+      ]
+    }
+  }
+}
+</script>
diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
new file mode 100644
index 000000000..62c5c4648
--- /dev/null
+++ b/pages/moderation/index.vue
@@ -0,0 +1,140 @@
+<template>
+  <ds-card space="small">
+    <ds-heading tag="h3">
+      {{ $t('moderation.reports.name') }}
+    </ds-heading>
+    <ds-table
+      :data="Report"
+      :fields="fields"
+      condensed
+    >
+      <template
+        slot="type"
+        slot-scope="scope"
+      >
+        <template v-if="scope.row.type === 'contribution'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.contribution.slug } }">
+            <b>{{ scope.row.contribution.title | truncate(50) }}</b>
+          </nuxt-link>
+        </template>
+        <template v-else-if="scope.row.type === 'comment'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.comment.contribution.slug } }">
+            <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
+          </nuxt-link>
+        </template>
+        <template v-else>
+          <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.user.slug } }">
+            <b>{{ scope.row.user.name | truncate(50) }}</b>
+          </nuxt-link>
+        </template><br>
+        <ds-text
+          size="small"
+          color="soft"
+        >
+          {{ scope.row.type }}
+        </ds-text>
+      </template>
+      <template
+        slot="reporter"
+        slot-scope="scope"
+      >
+        <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.reporter.slug } }">
+          {{ scope.row.reporter.name }}
+        </nuxt-link>
+      </template>
+      <template slot="actions">
+        <no-ssr>
+          <dropdown
+            class="moderation-menu"
+            placement="left"
+            offset="5"
+          >
+            <template
+              slot="default"
+              slot-scope="{toggleMenu}"
+            >
+              <a
+                class="moderation-menu-trigger"
+                href="#"
+                @click.prevent="toggleMenu"
+              >
+                <ds-icon name="ellipsis-v" />
+              </a>
+            </template>
+            <template
+              slot="popover"
+            >
+              Actions...
+            </template>
+          </dropdown>
+        </no-ssr>
+      </template>
+    </ds-table>
+  </ds-card>
+</template>
+
+<script>
+import gql from 'graphql-tag'
+import Dropdown from '~/components/Dropdown'
+
+export default {
+  components: {
+    Dropdown
+  },
+  data() {
+    return {
+      Report: []
+    }
+  },
+  computed: {
+    fields() {
+      return {
+        type: ' ',
+        reporter: this.$t('moderation.reports.reporter'),
+        actions: ' '
+      }
+    }
+  },
+  apollo: {
+    Report: {
+      query: gql(`
+        query {
+          Report(first: 20, orderBy: createdAt_desc) {
+            id
+            description
+            type
+            createdAt
+            reporter {
+              name
+              slug
+            }
+            user {
+              name
+              slug
+            }
+            comment {
+              contentExcerpt
+              author {
+                name
+                slug
+              }
+              post {
+                title
+                slug
+              }
+            }
+            contribution {
+              title
+              slug
+              author {
+                name
+                slug
+              }
+            }
+          }
+        }
+      `)
+    }
+  }
+}
+</script>

From e19de71cdbac68364caeb8a13cb999b6b57a6592 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 13:40:07 +0100
Subject: [PATCH 18/59] Improved content menu

---
 assets/styles/imports/_tooltip.scss           | 16 ++++--
 components/ContentMenu.vue                    | 53 ++++++++++---------
 components/PostCard.vue                       |  2 +-
 layouts/default.vue                           |  5 --
 .../src/system/tokens/border-radius.yml       |  2 +-
 5 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
index 9d073c11e..3c922f8d2 100644
--- a/assets/styles/imports/_tooltip.scss
+++ b/assets/styles/imports/_tooltip.scss
@@ -91,24 +91,34 @@
       border-radius: $border-radius-base;
       padding: $space-x-small $space-small;
       box-shadow: $box-shadow-large;
+
+      nav {
+        margin-left: -$space-small;
+        margin-right: -$space-small;
+
+        a {
+          padding-left: 12px;
+        }
+      }
     }
 
     .popover-arrow {
       border-color: $background-color-soft;
     }
 
-    @include arrow(8px, "popover", $background-color-soft);
+    @include arrow(7px, "popover", $background-color-soft);
   }
 
+
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity .1s, visibility .1s;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity .1s;
   }
 }
diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index cece9dc95..8d9ae8eee 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <dropdown
-    class="post-menu"
+    class="content-menu"
     :placement="placement"
     offset="5"
   >
@@ -9,38 +9,30 @@
       slot-scope="{toggleMenu}"
     >
       <a
-        class="post-menu-trigger"
+        class="content-menu-trigger"
         href="#"
         @click.prevent="toggleMenu()"
       >
-        <ds-icon
-          v-if="placement.indexOf('top') === 0"
-          name="angle-up"
-        />
-        <ds-icon
-          v-else
-          name="angle-down"
-        />
+        <ds-icon name="ellipsis-v" />
       </a>
     </template>
-    <template
+    <div
       slot="popover"
       slot-scope="{toggleMenu}"
+      class="content-menu-popover"
     >
-      <div class="post-menu-popover">
-        <ds-menu :routes="routes">
-          <ds-menu-item
-            slot="Navigation"
-            slot-scope="item"
-            :route="item.route"
-            :parents="item.parents"
-            @click.stop.prevent="openItem(item.route, toggleMenu)"
-          >
-            <ds-icon :name="item.route.icon" /> {{ item.route.name }}
-          </ds-menu-item>
-        </ds-menu>
-      </div>
-    </template>
+      <ds-menu :routes="routes">
+        <ds-menu-item
+          slot="Navigation"
+          slot-scope="item"
+          :route="item.route"
+          :parents="item.parents"
+          @click.stop.prevent="openItem(item.route, toggleMenu)"
+        >
+          <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+        </ds-menu-item>
+      </ds-menu>
+    </div>
   </dropdown>
 </template>
 
@@ -104,3 +96,14 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.content-menu-popover {
+  nav {
+    margin-top: -$space-xx-small;
+    margin-bottom: -$space-xx-small;
+    margin-left: -$space-x-small;
+    margin-right: -$space-x-small;
+  }
+}
+</style>
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 6aa26673d..59e7895d4 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -115,7 +115,7 @@ export default {
     z-index: 1;
   }
 }
-.post-menu {
+.content-menu {
   // position: absolute;
   // bottom: $space-small;
   // right: $space-small;
diff --git a/layouts/default.vue b/layouts/default.vue
index 27bf5f94d..aeaf70086 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -165,14 +165,9 @@ export default {
   padding-bottom: 0.5rem;
 
   nav {
-    margin-left: -16px;
     margin-right: -10px;
     padding-top: 1rem;
     padding-bottom: 1rem;
-
-    a {
-      padding-left: 12px;
-    }
   }
 }
 </style>
diff --git a/styleguide/src/system/tokens/border-radius.yml b/styleguide/src/system/tokens/border-radius.yml
index 4bbdf785a..f299da252 100644
--- a/styleguide/src/system/tokens/border-radius.yml
+++ b/styleguide/src/system/tokens/border-radius.yml
@@ -9,7 +9,7 @@ props:
   - name: border-radius-large
     value: "4px"
   - name: border-radius-base
-    value: "3px"
+    value: "4px"
   - name: border-radius-rounded
     value: "2em"
   - name: border-radius-circle

From 1c2745ed2dee6baee6a60933ce3a464292ab574c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:09:17 +0100
Subject: [PATCH 19/59] Translated report dialog and improved popover

---
 assets/styles/imports/_tooltip.scss | 6 +++---
 assets/styles/main.scss             | 3 ++-
 components/ReportModal.vue          | 6 +++++-
 locales/de.json                     | 9 ++++++---
 locales/en.json                     | 9 ++++++---
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
index 3c922f8d2..fa6c38668 100644
--- a/assets/styles/imports/_tooltip.scss
+++ b/assets/styles/imports/_tooltip.scss
@@ -90,7 +90,7 @@
       color: $text-color-base;
       border-radius: $border-radius-base;
       padding: $space-x-small $space-small;
-      box-shadow: $box-shadow-large;
+      box-shadow: $box-shadow-x-large;
 
       nav {
         margin-left: -$space-small;
@@ -113,12 +113,12 @@
   &[aria-hidden='true'] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .1s, visibility .1s;
+    transition: opacity 60ms;
   }
 
   &[aria-hidden='false'] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .1s;
+    transition: opacity 60ms;
   }
 }
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 1ce0c0e53..235777096 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -139,7 +139,7 @@ hr {
   }
 }
 
-    #overlay {
+#overlay {
   display: block;
   opacity: 0;
   width: 100%;
@@ -156,5 +156,6 @@ hr {
   .dropdown-open & {
     opacity: 1;
     transition-delay: 0;
+    transition: opacity 80ms ease-out;
   }
 }
diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index 52b31cbd5..c79939ce5 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -8,7 +8,8 @@
     @confirm="report"
     @cancel="close"
   >
-    <p>Are you sure that you want to report the {{ data.context }} "<b>{{ data.name | truncate(30) }}</b>"?</p>
+    <!-- eslint-disable-next-line vue/no-v-html -->
+    <p v-html="$t(`report.${data.context}.message`, { name: name })" />
     <template
       slot="footer"
       slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
@@ -51,6 +52,9 @@ export default {
     title() {
       return this.$t(`report.${this.data.context}.title`)
     },
+    name() {
+      return this.$filters.truncate(this.data.name, 30)
+    },
     isOpen() {
       return this.$store.getters['modal/open'] === 'report'
     }
diff --git a/locales/de.json b/locales/de.json
index 11a4a179c..7e8d3e501 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -101,13 +101,16 @@
     "submit": "Meldung senden",
     "cancel": "Abbrechen",
     "user": {
-      "title": "Nutzer melden"
+      "title": "Nutzer melden",
+      "message": "Bist du sicher, dass du den Nutzer \"<b>{name}</b>\" melden möchtest?"
     },
     "contribution": {
-      "title": "Beitrag melden"
+      "title": "Beitrag melden",
+      "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" melden möchtest?"
     },
     "comment": {
-      "title": "Kommentar melden"
+      "title": "Kommentar melden",
+      "message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" melden möchtest?"
     }
   },
   "quotes": {
diff --git a/locales/en.json b/locales/en.json
index 3556b08cf..dd1793b12 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -101,13 +101,16 @@
     "submit": "Send Report",
     "cancel": "Cancel",
     "user": {
-      "title": "Report User"
+      "title": "Report User",
+      "message": "Do you really want to report the user \"<b>{name}</b>\"?"
     },
     "contribution": {
-      "title": "Report Contribution"
+      "title": "Report Contribution",
+      "message": "Do you really want to report the contribution \"<b>{name}</b>\"?"
     },
     "comment": {
-      "title": "Report Comment"
+      "title": "Report Comment",
+      "message": "Do you really want to report the comment from \"<b>{name}</b>\"?"
     }
   },
   "quotes": {

From 1d5fde60864f1c6937ff0349cdb9e47a847c1f34 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:13:21 +0100
Subject: [PATCH 20/59] Small improvements

---
 pages/profile/_slug.vue                                 | 2 +-
 styleguide/src/system/components/layout/Card/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index ccfedde47..ad7d1e44c 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -20,7 +20,7 @@
           <no-ssr>
             <content-menu
               style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
-              placement="bottom-start"
+              placement="bottom-end"
               context="user"
               :item-id="user.id"
               :name="user.name"
diff --git a/styleguide/src/system/components/layout/Card/style.scss b/styleguide/src/system/components/layout/Card/style.scss
index acf5d0b39..907354680 100644
--- a/styleguide/src/system/components/layout/Card/style.scss
+++ b/styleguide/src/system/components/layout/Card/style.scss
@@ -7,7 +7,7 @@ $border-radius: $border-radius-x-large;
   flex-direction: column;
   background-color: $background-color-base;
   color: $text-color-base;
-  box-shadow: $box-shadow-large;
+  box-shadow: $box-shadow-base;
   height: 100%;
 }
 

From 275b8d7261697407c8f0ea67654948c4b4645dd0 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:25:17 +0100
Subject: [PATCH 21/59] Improved report dropdown on post view

---
 components/PostCard.vue    | 3 ---
 pages/post/_slug/index.vue | 7 ++++++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/PostCard.vue b/components/PostCard.vue
index 59e7895d4..560eb50f0 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -116,9 +116,6 @@ export default {
   }
 }
 .content-menu {
-  // position: absolute;
-  // bottom: $space-small;
-  // right: $space-small;
   display: inline-block;
   margin-left: $space-small;
   z-index: 1;
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 619841310..9c1bd4ac3 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -8,7 +8,6 @@
     <hc-author :post="post" />
     <no-ssr>
       <content-menu
-        style="float: right; display: inline-block; margin-top: -5rem;"
         placement="bottom-end"
         context="contribution"
         :item-id="post.id"
@@ -225,6 +224,12 @@ export default {
 
 <style lang="scss">
 .page-name-post-slug {
+  .content-menu {
+    float: right;
+    margin-right: -$space-x-small;
+    // margin-top: $space-x-small;
+  }
+
   .post-card {
     // max-width: 800px;
     margin: auto;

From f6b551635294c07b9c1836243e1c7c80cdca4ee7 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:39:28 +0100
Subject: [PATCH 22/59] Fixed content menu positioning

---
 pages/post/_slug/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 9c1bd4ac3..6f90b3bfd 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -227,7 +227,7 @@ export default {
   .content-menu {
     float: right;
     margin-right: -$space-x-small;
-    // margin-top: $space-x-small;
+    margin-top: -$space-large;
   }
 
   .post-card {

From aa920040a972f38a28e15d934150490729f3c8f8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Sat, 12 Jan 2019 14:48:03 +0100
Subject: [PATCH 23/59] Try to fix build by providing default env vars

---
 .env.template | 2 ++
 Dockerfile    | 1 +
 2 files changed, 3 insertions(+)
 create mode 100644 .env.template

diff --git a/.env.template b/.env.template
new file mode 100644
index 000000000..4313645bb
--- /dev/null
+++ b/.env.template
@@ -0,0 +1,2 @@
+JWT_SECRET="b/&&7b78BF&fv/Vd"
+MAPBOX_TOKEN="pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ"
diff --git a/Dockerfile b/Dockerfile
index 8f7df318b..7a8c6583c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,6 +14,7 @@ RUN apk --no-cache add git
 COPY . .
 
 FROM base as build-and-test
+RUN cp .env.template .env
 RUN yarn install --production=false --frozen-lockfile --non-interactive
 RUN cd styleguide && yarn install --production=false --frozen-lockfile --non-interactive \
     && cd .. \

From a20430f3e9f498a3efc5a7de66bd1bf77d87eb1c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 14 Jan 2019 17:54:26 +0100
Subject: [PATCH 24/59] Improved modal

---
 .../system/components/layout/Modal/Modal.vue  | 70 +++++++------------
 .../system/components/layout/Modal/style.scss | 70 +++++++++++++------
 2 files changed, 75 insertions(+), 65 deletions(-)

diff --git a/styleguide/src/system/components/layout/Modal/Modal.vue b/styleguide/src/system/components/layout/Modal/Modal.vue
index 5aa00cde4..4cb76cd49 100644
--- a/styleguide/src/system/components/layout/Modal/Modal.vue
+++ b/styleguide/src/system/components/layout/Modal/Modal.vue
@@ -12,57 +12,41 @@
         </div>
       </transition>
       <transition name="ds-transition-modal-appear" appear>
-        <div
+        <ds-card
           v-if="isOpen"
           class="ds-modal"
           :class="[extended && 'ds-modal-extended']"
+          :header="title"
           tableindex="-1"
           role="dialog"
           ref="modal"
           style="display: block"
         >
-          <div class="ds-modal-dialog">
-            <div class="ds-modal-content">
-              <div class="ds-modal-header">
-                <ds-heading
-                  tag="h3"
-                  class="ds-modal-title"
-                >
-                  {{ title }}
-                </ds-heading>
-                <ds-button
-                  v-if="!force"
-                  class="ds-modal-close"
-                  ghost
-                  size="small"
-                  icon="close"
-                  aria-hidden="true"
-                  @click="cancel('close')"
-                />
-              </div>
-              <div
-                class="ds-modal-body"
-                ref="modalBody"
-              >
-                <!-- @slot Modal content -->
-                <slot/>
-              </div>
-              <div class="ds-modal-footer">
-                <!-- @slot Modal footer with action buttons -->
-                <slot
-                  name="footer"
-                  :confirm="confirm"
-                  :cancel="cancel"
-                  :cancelLabel="cancelLabel"
-                  :confirmLabel="confirmLabel"
-                >
-                  <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
-                  <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
-                </slot>
-              </div>
-            </div>
-          </div>
-        </div>
+          <ds-button
+            v-if="!force"
+            class="ds-modal-close"
+            ghost
+            size="small"
+            icon="close"
+            aria-hidden="true"
+            @click="cancel('close')"
+          />
+          <!-- @slot Modal content -->
+          <slot ref="modalBody"/>
+          <template slot="footer">
+            <!-- @slot Modal footer with action buttons -->
+            <slot
+              name="footer"
+              :confirm="confirm"
+              :cancel="cancel"
+              :cancelLabel="cancelLabel"
+              :confirmLabel="confirmLabel"
+            >
+              <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
+              <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
+            </slot>
+          </template>
+        </ds-card>
       </transition>
     </div>
   </portal>
diff --git a/styleguide/src/system/components/layout/Modal/style.scss b/styleguide/src/system/components/layout/Modal/style.scss
index 8c40dd5fd..c05df53c2 100644
--- a/styleguide/src/system/components/layout/Modal/style.scss
+++ b/styleguide/src/system/components/layout/Modal/style.scss
@@ -14,32 +14,68 @@
   flex-direction: column;
   max-width: 400px;
   width: calc(90vw - 40px);
+  height: auto;
   max-height: 90vh;
-  background: white;
-  border-radius: $border-radius-large;
-  padding: 0 $space-base;
   box-shadow: $box-shadow-x-large;
+
+  &.ds-modal-extended {
+    max-width: 600px;
+  }
 }
-.ds-modal-extended {
-  max-width: 600px;
+
+.ds-modal .ds-card-header {
+
+  position: relative;
+
+  &::after {
+    content: "";
+    height: 30px;
+    background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,0));
+    position: absolute;
+    width: calc(100% - 10px);
+    bottom: -30px;
+    left: 0;
+    pointer-events: none;
+    z-index: 1;
+  }
 }
+
 .ds-modal-close {
   position: absolute;
   top: $space-small;
   right: $space-small;
 }
-.ds-modal-body {
+.ds-modal .ds-card-content {
   flex: 1;
   overflow-y: auto;
   height: auto;
-  min-height: 70px;
-  max-height: 60vh;
+  min-height: 50px;
+  max-height: 50vh;
+  padding-bottom: $space-large !important;
 }
-.ds-modal-header {
-  padding-top: $space-base;
+.ds-modal footer {
+  position: relative;
+  display: flex;
+  overflow: visible;
+  flex-shrink: 0;
+  justify-content: flex-end;
+  background-color: $background-color-softer;
+  padding: $space-small;
 
-  .ds-modal-title {
-    margin-bottom: 0;
+  & > button {
+    margin-left: $space-x-small;
+  }
+
+  &::before {
+    content: "";
+    height: 45px;
+    background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.9));
+    position: absolute;
+    width: calc(100% - 10px);
+    z-index: 1;
+    left: 0;
+    top: -45px;
+    pointer-events: none;
   }
 }
 .ds-modal-backdrop {
@@ -51,16 +87,6 @@
   z-index: $z-index-modal - 1;
   background: rgba(0, 0, 0, 0.7);
 }
-.ds-modal-footer {
-  display: flex;
-  padding: $space-base 0;
-  flex-shrink: 0;
-  justify-content: flex-end;
-
-  & > button {
-    margin-left: $space-x-small;
-  }
-}
 
 $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
 

From a8a18314f8e0d972159b752d586c430c75948525 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 14 Jan 2019 18:12:18 +0100
Subject: [PATCH 25/59] Fixed modal setup

---
 components/ReportModal.vue                    |   1 +
 layouts/default.vue                           |   4 +-
 package.json                                  |   2 +-
 .../system/components/layout/Modal/Modal.vue  | 104 +++++++++---------
 4 files changed, 58 insertions(+), 53 deletions(-)

diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index c79939ce5..18e6fc9ad 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -39,6 +39,7 @@
 import gql from 'graphql-tag'
 
 export default {
+  name: 'ReportModal',
   data() {
     return {
       loading: false,
diff --git a/layouts/default.vue b/layouts/default.vue
index 954f1e8fc..de335d1cd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -83,10 +83,12 @@
       </div>
     </ds-container>
     <div id="overlay" />
-    <report-modal />
     <no-ssr>
       <portal-target name="modal" />
     </no-ssr>
+    <no-ssr>
+      <report-modal />
+    </no-ssr>
   </div>
 </template>
 
diff --git a/package.json b/package.json
index 07ff10d10..f558f5adc 100644
--- a/package.json
+++ b/package.json
@@ -51,8 +51,8 @@
     "jsonwebtoken": "^8.3.0",
     "nuxt": "^2.0.0",
     "nuxt-env": "^0.0.4",
-    "portal-vue": "^1.5.1",
     "nuxt-sass-resources-loader": "^2.0.5",
+    "portal-vue": "^1.5.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",
diff --git a/styleguide/src/system/components/layout/Modal/Modal.vue b/styleguide/src/system/components/layout/Modal/Modal.vue
index 4cb76cd49..4a273e680 100644
--- a/styleguide/src/system/components/layout/Modal/Modal.vue
+++ b/styleguide/src/system/components/layout/Modal/Modal.vue
@@ -1,55 +1,57 @@
 <template>
-  <portal to="modal">
-    <div :key="key" class="ds-modal-wrapper">
-      <transition name="ds-transition-fade" appear>
-        <div
-          v-if="isOpen"
-          class="ds-modal-backdrop"
-          ref="backdrop"
-          @click="backdropHandler"
-        >
-          &nbsp;
-        </div>
-      </transition>
-      <transition name="ds-transition-modal-appear" appear>
-        <ds-card
-          v-if="isOpen"
-          class="ds-modal"
-          :class="[extended && 'ds-modal-extended']"
-          :header="title"
-          tableindex="-1"
-          role="dialog"
-          ref="modal"
-          style="display: block"
-        >
-          <ds-button
-            v-if="!force"
-            class="ds-modal-close"
-            ghost
-            size="small"
-            icon="close"
-            aria-hidden="true"
-            @click="cancel('close')"
-          />
-          <!-- @slot Modal content -->
-          <slot ref="modalBody"/>
-          <template slot="footer">
-            <!-- @slot Modal footer with action buttons -->
-            <slot
-              name="footer"
-              :confirm="confirm"
-              :cancel="cancel"
-              :cancelLabel="cancelLabel"
-              :confirmLabel="confirmLabel"
-            >
-              <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
-              <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
-            </slot>
-          </template>
-        </ds-card>
-      </transition>
-    </div>
-  </portal>
+  <div>
+    <portal to="modal">
+      <div :key="key" class="ds-modal-wrapper">
+        <transition name="ds-transition-fade" appear>
+          <div
+            v-if="isOpen"
+            class="ds-modal-backdrop"
+            ref="backdrop"
+            @click="backdropHandler"
+          >
+            &nbsp;
+          </div>
+        </transition>
+        <transition name="ds-transition-modal-appear" appear>
+          <ds-card
+            v-if="isOpen"
+            class="ds-modal"
+            :class="[extended && 'ds-modal-extended']"
+            :header="title"
+            tableindex="-1"
+            role="dialog"
+            ref="modal"
+            style="display: block"
+          >
+            <ds-button
+              v-if="!force"
+              class="ds-modal-close"
+              ghost
+              size="small"
+              icon="close"
+              aria-hidden="true"
+              @click="cancel('close')"
+            />
+            <!-- @slot Modal content -->
+            <slot ref="modalBody"/>
+            <template slot="footer">
+              <!-- @slot Modal footer with action buttons -->
+              <slot
+                name="footer"
+                :confirm="confirm"
+                :cancel="cancel"
+                :cancelLabel="cancelLabel"
+                :confirmLabel="confirmLabel"
+              >
+                <ds-button ghost icon="close" @click.prevent="cancel('cancel')">{{ cancelLabel }}</ds-button>
+                <ds-button primary icon="check" @click.prevent="confirm('confirm')">{{ confirmLabel }}</ds-button>
+              </slot>
+            </template>
+          </ds-card>
+        </transition>
+      </div>
+    </portal>
+  </div>
 </template>
 
 <script>

From 4aaff6cb509bda62aac6d5172fffb44bb12d8615 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 08:13:09 +0100
Subject: [PATCH 26/59] Improved report dropdown description

---
 components/ContentMenu.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index 8d9ae8eee..ab2fea2fa 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -29,7 +29,8 @@
           :parents="item.parents"
           @click.stop.prevent="openItem(item.route, toggleMenu)"
         >
-          <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+          <ds-icon :name="item.route.icon" />
+          {{ $t(`report.${context}.title`) }}
         </ds-menu-item>
       </ds-menu>
     </div>

From 36d6d5a3f50b73a39cc141088b411ed29f753109 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 09:39:20 +0100
Subject: [PATCH 27/59] Min with for popover menus

---
 assets/styles/main.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index cd24f45a8..03e994149 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -165,6 +165,8 @@ hr {
 }
 
 [class$="menu-popover"] {
+  min-width: 130px;
+
   a, button {
     display: flex;
     align-content: center;

From 879ec5a40c3b38bad3cce62b0ddc616941883cd4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 09:39:36 +0100
Subject: [PATCH 28/59] Improved moderation list

---
 pages/moderation/index.vue | 47 +++++++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index 62c5c4648..d412b876f 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -12,27 +12,39 @@
         slot="type"
         slot-scope="scope"
       >
-        <template v-if="scope.row.type === 'contribution'">
+        <div v-if="scope.row.type === 'contribution'">
           <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.contribution.slug } }">
             <b>{{ scope.row.contribution.title | truncate(50) }}</b>
-          </nuxt-link>
-        </template>
-        <template v-else-if="scope.row.type === 'comment'">
-          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.comment.contribution.slug } }">
+          </nuxt-link><br>
+          <ds-text
+            size="small"
+            color="soft"
+          >
+            <ds-icon name="bookmark" /> {{ $t('report.contribution.type') }}
+          </ds-text>
+        </div>
+        <div v-else-if="scope.row.type === 'comment'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.comment.post.slug } }">
             <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
-          </nuxt-link>
-        </template>
-        <template v-else>
+          </nuxt-link><br>
+          <ds-text
+            size="small"
+            color="soft"
+          >
+            <ds-icon name="comments" /> {{ $t('report.comment.type') }}
+          </ds-text>
+        </div>
+        <div v-else>
           <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.user.slug } }">
             <b>{{ scope.row.user.name | truncate(50) }}</b>
-          </nuxt-link>
-        </template><br>
-        <ds-text
-          size="small"
-          color="soft"
-        >
-          {{ scope.row.type }}
-        </ds-text>
+          </nuxt-link><br>
+          <ds-text
+            size="small"
+            color="soft"
+          >
+            <ds-icon name="user" /> {{ $t('report.user.type') }}
+          </ds-text>
+        </div>
       </template>
       <template
         slot="reporter"
@@ -95,6 +107,9 @@ export default {
       }
     }
   },
+  mounted() {
+    this.$apollo.queries.Report.startPolling(5000)
+  },
   apollo: {
     Report: {
       query: gql(`

From 3bf42da9eace0e293840ff139c39d466499a329e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 09:39:48 +0100
Subject: [PATCH 29/59] More translations

---
 locales/de.json | 3 +++
 locales/en.json | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/locales/de.json b/locales/de.json
index 7e8d3e501..f4ee3577b 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -102,14 +102,17 @@
     "cancel": "Abbrechen",
     "user": {
       "title": "Nutzer melden",
+      "type": "Nutzer",
       "message": "Bist du sicher, dass du den Nutzer \"<b>{name}</b>\" melden möchtest?"
     },
     "contribution": {
       "title": "Beitrag melden",
+      "type": "Beitrag",
       "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" melden möchtest?"
     },
     "comment": {
       "title": "Kommentar melden",
+      "type": "Kommentar",
       "message": "Bist du sicher, dass du den Kommentar von \"<b>{name}</b>\" melden möchtest?"
     }
   },
diff --git a/locales/en.json b/locales/en.json
index dd1793b12..e51d9ab26 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -102,14 +102,17 @@
     "cancel": "Cancel",
     "user": {
       "title": "Report User",
+      "type": "User",
       "message": "Do you really want to report the user \"<b>{name}</b>\"?"
     },
     "contribution": {
       "title": "Report Contribution",
+      "type": "Contribution",
       "message": "Do you really want to report the contribution \"<b>{name}</b>\"?"
     },
     "comment": {
       "title": "Report Comment",
+      "type": "Comment",
       "message": "Do you really want to report the comment from \"<b>{name}</b>\"?"
     }
   },

From 538cf3498951145ec9fba3862bc9d62815228ed1 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 09:40:05 +0100
Subject: [PATCH 30/59] Added report option for comments

---
 pages/post/_slug/index.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 6f90b3bfd..e04e8c6ae 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -91,6 +91,15 @@
           <ds-space margin-bottom="x-small">
             <hc-author :post="comment" />
           </ds-space>
+          <no-ssr>
+            <content-menu
+              placement="bottom-end"
+              context="comment"
+              style="float-right"
+              :item-id="comment.id"
+              :name="comment.author.name"
+            />
+          </no-ssr>
           <!-- eslint-disable vue/no-v-html -->
           <!-- TODO: replace editor content with tiptap render view -->
           <div

From 9602632ddfc76b8e95de81364ac2c47b06aff343 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 10:54:47 +0100
Subject: [PATCH 31/59] Improved moderation list

---
 pages/moderation/index.vue | 47 ++++++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index d412b876f..c9a2feca0 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -9,7 +9,7 @@
       condensed
     >
       <template
-        slot="type"
+        slot="name"
         slot-scope="scope"
       >
         <div v-if="scope.row.type === 'contribution'">
@@ -20,7 +20,7 @@
             size="small"
             color="soft"
           >
-            <ds-icon name="bookmark" /> {{ $t('report.contribution.type') }}
+            {{ scope.row.contribution.author.name }}
           </ds-text>
         </div>
         <div v-else-if="scope.row.type === 'comment'">
@@ -31,21 +31,39 @@
             size="small"
             color="soft"
           >
-            <ds-icon name="comments" /> {{ $t('report.comment.type') }}
+            {{ scope.row.comment.author.name }}
           </ds-text>
         </div>
         <div v-else>
           <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.user.slug } }">
             <b>{{ scope.row.user.name | truncate(50) }}</b>
-          </nuxt-link><br>
-          <ds-text
-            size="small"
-            color="soft"
-          >
-            <ds-icon name="user" /> {{ $t('report.user.type') }}
-          </ds-text>
+          </nuxt-link>
         </div>
       </template>
+      <template
+        slot="type"
+        slot-scope="scope"
+      >
+        <ds-text
+          color="soft"
+        >
+          <ds-icon
+            v-if="scope.row.type === 'contribution'"
+            v-tooltip="{ content: $t(`report.${scope.row.type}.type`), placement: 'right' }"
+            name="bookmark"
+          />
+          <ds-icon
+            v-else-if="scope.row.type === 'comment'"
+            v-tooltip="{ content: $t(`report.${scope.row.type}.type`), placement: 'right' }"
+            name="comments"
+          />
+          <ds-icon
+            v-else
+            v-tooltip="{ content: $t(`report.${scope.row.type}.type`), placement: 'right' }"
+            name="user"
+          />
+        </ds-text>
+      </template>
       <template
         slot="reporter"
         slot-scope="scope"
@@ -73,9 +91,7 @@
                 <ds-icon name="ellipsis-v" />
               </a>
             </template>
-            <template
-              slot="popover"
-            >
+            <template slot="popover">
               Actions...
             </template>
           </dropdown>
@@ -102,8 +118,9 @@ export default {
     fields() {
       return {
         type: ' ',
-        reporter: this.$t('moderation.reports.reporter'),
-        actions: ' '
+        name: ' ',
+        reporter: this.$t('moderation.reports.reporter')
+        // actions: ' '
       }
     }
   },

From d44fbcc594295df13cbfa052da1dd732a17f3d21 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 10:54:57 +0100
Subject: [PATCH 32/59] Improved content menu

---
 components/ContentMenu.vue | 24 +++++++++++++++---------
 locales/de.json            | 17 +++++++++++++++++
 locales/en.json            | 17 +++++++++++++++++
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index ab2fea2fa..e446420da 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -30,7 +30,7 @@
           @click.stop.prevent="openItem(item.route, toggleMenu)"
         >
           <ds-icon :name="item.route.icon" />
-          {{ $t(`report.${context}.title`) }}
+          {{ item.route.name }}
         </ds-menu-item>
       </ds-menu>
     </div>
@@ -60,19 +60,22 @@ export default {
     routes() {
       let routes = [
         {
-          name: this.$t('common.reportContent'),
+          name: this.$t(`report.${this.context}.title`),
           callback: this.openReportDialog,
           icon: 'flag'
         }
       ]
-      // if (this.isAdmin) {
-      //   routes.push({
-      //     name: this.$t('admin.name'),
-      //     path: `/admin`,
-      //     icon: 'shield'
-      //   })
-      // }
+      if (this.isModerator) {
+        routes.push({
+          name: this.$t(`disable.${this.context}.title`),
+          callback: this.openDisableDialog,
+          icon: 'eye-slash'
+        })
+      }
       return routes
+    },
+    isModerator() {
+      return this.$store.getters['auth/isModerator']
     }
   },
   methods: {
@@ -93,6 +96,9 @@ export default {
           name: this.name
         }
       })
+    },
+    openDisableDialog() {
+      this.$toast.error('NOT IMPLEMENTED!')
     }
   }
 }
diff --git a/locales/de.json b/locales/de.json
index f4ee3577b..58bec5c2b 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -88,6 +88,23 @@
       "reporter": "gemeldet von"
     }
   },
+  "disable": {
+    "user": {
+      "title": "Nutzer sperren",
+      "type": "Nutzer",
+      "message": "Bist du sicher, dass du den Nutzer \"<b>{name}</b>\" deaktivieren möchtest?"
+    },
+    "contribution": {
+      "title": "Beitrag sperren",
+      "type": "Beitrag",
+      "message": "Bist du sicher, dass du den Beitrag \"<b>{name}</b>\" deaktivieren möchtest?"
+    },
+    "comment": {
+      "title": "Kommentar sperren",
+      "type": "Kommentar",
+      "message": "Bist du sicher, dass du den Kommentar \"<b>{name}</b>\" deaktivieren möchtest?"
+    }
+  },
   "post": {
     "name": "Beitrag",
     "moreInfo": {
diff --git a/locales/en.json b/locales/en.json
index e51d9ab26..5407df394 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -88,6 +88,23 @@
       "reporter": "reported by"
     }
   },
+  "disable": {
+    "user": {
+      "title": "Disable User",
+      "type": "User",
+      "message": "Do you really want to disable the user \"<b>{name}</b>\"?"
+    },
+    "contribution": {
+      "title": "Disable Contribution",
+      "type": "Contribution",
+      "message": "Do you really want to disable the contribution \"<b>{name}</b>\"?"
+    },
+    "comment": {
+      "title": "Disable Comment",
+      "type": "Comment",
+      "message": "Do you really want to disable the comment from \"<b>{name}</b>\"?"
+    }
+  },
   "post": {
     "name": "Post",
     "moreInfo": {

From 2a803a32876b7ee83cabf613aa5ad6296db18eb4 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 11:40:29 +0100
Subject: [PATCH 33/59] Fixed tooltip styles on build

---
 assets/styles/imports/_tooltip.scss | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/assets/styles/imports/_tooltip.scss b/assets/styles/imports/_tooltip.scss
index fa6c38668..e3032cb56 100644
--- a/assets/styles/imports/_tooltip.scss
+++ b/assets/styles/imports/_tooltip.scss
@@ -1,4 +1,7 @@
 @mixin arrow($size, $type, $color) {
+
+  --#{$type}-arrow-size: $size;
+
   .#{$type}-arrow {
     width: 0;
     height: 0;
@@ -18,7 +21,7 @@
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
       bottom: -$size;
-      left: calc(50% - $size);
+      left: calc(50% - var(--#{$type}-arrow-size));
       margin-top: 0;
       margin-bottom: 0;
     }
@@ -33,7 +36,7 @@
       border-right-color: transparent !important;
       border-top-color: transparent !important;
       top: -$size;
-      left: calc(50% - $size);
+      left: calc(50% - var(--#{$type}-arrow-size));
       margin-top: 0;
       margin-bottom: 0;
     }
@@ -48,7 +51,7 @@
       border-top-color: transparent !important;
       border-bottom-color: transparent !important;
       left: -$size;
-      top: calc(50% - $size);
+      top: calc(50% - var(--#{$type}-arrow-size));
       margin-left: 0;
       margin-right: 0;
     }
@@ -63,7 +66,7 @@
       border-right-color: transparent !important;
       border-bottom-color: transparent !important;
       right: -$size;
-      top: calc(50% - $size);
+      top: calc(50% - var(--#{$type}-arrow-size));
       margin-left: 0;
       margin-right: 0;
     }

From 7e8cefc7736557e3a092ceae796de5e9c269ba7d Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 15 Jan 2019 11:40:44 +0100
Subject: [PATCH 34/59] Improved moderation list

---
 pages/moderation/index.vue | 44 +++++++++++++-------------------------
 static/img/empty-state.svg |  1 +
 2 files changed, 16 insertions(+), 29 deletions(-)
 create mode 100644 static/img/empty-state.svg

diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index c9a2feca0..d9afc58af 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -4,6 +4,7 @@
       {{ $t('moderation.reports.name') }}
     </ds-heading>
     <ds-table
+      v-if="Report && Report.length"
       :data="Report"
       :fields="fields"
       condensed
@@ -72,43 +73,28 @@
           {{ scope.row.reporter.name }}
         </nuxt-link>
       </template>
-      <template slot="actions">
-        <no-ssr>
-          <dropdown
-            class="moderation-menu"
-            placement="left"
-            offset="5"
-          >
-            <template
-              slot="default"
-              slot-scope="{toggleMenu}"
-            >
-              <a
-                class="moderation-menu-trigger"
-                href="#"
-                @click.prevent="toggleMenu"
-              >
-                <ds-icon name="ellipsis-v" />
-              </a>
-            </template>
-            <template slot="popover">
-              Actions...
-            </template>
-          </dropdown>
-        </no-ssr>
-      </template>
     </ds-table>
+    <ds-section
+      v-else
+      centered
+    >
+      <ds-text>
+        <img
+          src="/img/empty-state.svg"
+          width="80"
+          style="margin-bottom: 5px"
+          alt="Empty"
+        ><br>
+        <b>NO REPORTS</b>
+      </ds-text>
+    </ds-section>
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
-import Dropdown from '~/components/Dropdown'
 
 export default {
-  components: {
-    Dropdown
-  },
   data() {
     return {
       Report: []
diff --git a/static/img/empty-state.svg b/static/img/empty-state.svg
new file mode 100644
index 000000000..e7b1cb669
--- /dev/null
+++ b/static/img/empty-state.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="259" height="213"><g fill="none" fill-rule="evenodd"><ellipse cx="120" cy="204" fill="#ECF1EE" rx="120" ry="9"/><path fill="#3B4340" fill-rule="nonzero" d="M24 136.244v52.761c0 3.305 2.69 5.995 6.01 5.995h179.98a5.994 5.994 0 0 0 6.01-5.995V164a3 3 0 0 1 6 0v25.005c0 6.63-5.37 11.995-12.01 11.995H30.01C23.38 201 18 195.628 18 189.005V129c0-.77.291-1.538.876-2.123a3.003 3.003 0 0 1 4.248.006l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.51-.858 2.99 2.99 0 0 1 2.522.85l14.386 14.385a3 3 0 0 1-4.243 4.243l-12.655-12.655-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857L24 136.244zm0-33.486l18.604 18.605 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 19.48-19.48a3.005 3.005 0 0 1 2.516-.857 3.005 3.005 0 0 1 2.524.857l19.48 19.48 6.763-6.763a2.999 2.999 0 0 1 4.238.005 3.005 3.005 0 0 1 .005 4.237l-8.496 8.496a2.986 2.986 0 0 1-2.515.848 3.005 3.005 0 0 1-2.515-.858l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-19.48-19.48-19.48 19.48a3.005 3.005 0 0 1-2.516.857 3.005 3.005 0 0 1-2.524-.857l-21.203-21.203a3.006 3.006 0 0 1-.005-4.248 3.003 3.003 0 0 1 4.248.006l.876.876V104h-6V11.995C18 5.365 23.37 0 30.01 0h179.98C216.62 0 222 5.372 222 11.995V74a3 3 0 0 1-6 0V11.995C216 8.69 213.31 6 209.99 6H30.01A5.994 5.994 0 0 0 24 11.995v90.763zM38 24a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm16 0a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm24-4c0-1.657 1.351-3 3-3h104c1.657 0 3 1.347 3 3 0 1.657-1.351 3-3 3H97c-1.657 0-3-1.347-3-3z"/><path fill="#D0021B" d="M212.11 92.023c3.805-6.088 9.974-6.088 13.78 0l31.22 49.954c3.805 6.088 1.071 11.023-6.1 11.023h-64.02c-7.174 0-9.906-4.935-6.1-11.023l31.22-49.954zM215 108v24c0 1.653 1.343 3 3 3 1.653 0 3-1.343 3-3v-24c0-1.653-1.343-3-3-3-1.653 0-3 1.343-3 3zm3 37a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></g></svg>
\ No newline at end of file

From a676daef3eac261d453ddb982e84dc7d4ea5f7a8 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 16 Jan 2019 19:05:09 +0100
Subject: [PATCH 35/59] Fixed logout link padding

---
 layouts/default.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/layouts/default.vue b/layouts/default.vue
index 6cc5481dc..b6f6ebe47 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -209,6 +209,9 @@ export default {
     margin-right: -$space-small;
     margin-bottom: -$space-xx-small;
     padding: $space-xx-small $space-small;
+
+    // subtract menu border with from padding
+    padding-left: $space-small - 2;
   }
 
   nav {

From 4db152575af5bc352e8adb98860c05e6ae94efc6 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Wed, 16 Jan 2019 19:11:18 +0100
Subject: [PATCH 36/59] Fixed profile-top-navigation z-index

---
 pages/profile/_slug.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 9224d2109..52fee46a6 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -398,7 +398,7 @@ export default {
 .profile-top-navigation {
   position: sticky;
   top: 53px;
-  z-index: 1;
+  z-index: 2;
 }
 
 .ds-tab-nav {

From 2a4e1e2bf3de6d142ea29b9b9340f3365998c523 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 18:58:28 +0100
Subject: [PATCH 37/59] Added empty component

---
 components/Empty.vue                          | 57 +++++++++++++++++++
 pages/moderation/index.vue                    | 22 +++----
 .../system/components/layout/Space/Space.vue  |  8 ++-
 .../system/components/layout/Space/style.scss |  6 +-
 4 files changed, 76 insertions(+), 17 deletions(-)
 create mode 100644 components/Empty.vue

diff --git a/components/Empty.vue b/components/Empty.vue
new file mode 100644
index 000000000..7d699d7d8
--- /dev/null
+++ b/components/Empty.vue
@@ -0,0 +1,57 @@
+<template>
+  <ds-space
+    class="hc-empty"
+    margin="x-large"
+    centered
+  >
+    <ds-text>
+      <img
+        :src="iconPath"
+        width="80"
+        class="hc-empty-icon"
+        style="margin-bottom: 5px"
+        alt="Empty"
+      ><br>
+      <ds-text
+        class="hc-empty-message"
+        color="softer"
+      >
+        {{ message }}
+      </ds-text>
+    </ds-text>
+  </ds-space>
+</template>
+
+<script>
+export default {
+  name: 'HcEmpty',
+  props: {
+    /**
+     * Icon that should be shown
+     * @options messages|events|alert|tasks|docs|file
+     */
+    icon: {
+      type: String,
+      required: true,
+      validator: value => {
+        return value.match(/(messages|events|alert|tasks|docs|file)/)
+      }
+    },
+    /**
+     * Message that appears under the icon
+     */
+    message: { type: String, required: true }
+  },
+  computed: {
+    iconPath() {
+      return `/img/empty/${this.icon}.svg`
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.hc-empty-icon {
+  padding-bottom: $font-space-large;
+}
+</style>
diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index d9afc58af..40dba1504 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -74,27 +74,21 @@
         </nuxt-link>
       </template>
     </ds-table>
-    <ds-section
-      v-else
-      centered
-    >
-      <ds-text>
-        <img
-          src="/img/empty-state.svg"
-          width="80"
-          style="margin-bottom: 5px"
-          alt="Empty"
-        ><br>
-        <b>NO REPORTS</b>
-      </ds-text>
-    </ds-section>
+    <hc-empty
+      icon="alert"
+      message="Glückwunsch, es gibt nichts zu moderieren."
+    />
   </ds-card>
 </template>
 
 <script>
 import gql from 'graphql-tag'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
+  components: {
+    HcEmpty
+  },
   data() {
     return {
       Report: []
diff --git a/styleguide/src/system/components/layout/Space/Space.vue b/styleguide/src/system/components/layout/Space/Space.vue
index e19bb0996..2efc2ce6e 100644
--- a/styleguide/src/system/components/layout/Space/Space.vue
+++ b/styleguide/src/system/components/layout/Space/Space.vue
@@ -2,7 +2,11 @@
   <component
     :is="tag"
     :style="styles"
-    class="ds-space">
+    class="ds-space"
+    :class="[
+      centered && `ds-space-centered`
+    ]"
+  >
     <slot />
   </component>
 </template>
@@ -49,7 +53,7 @@ export default {
     /**
      * Center content vertacally and horizontally
      */
-    center: {
+    centered: {
       type: Boolean,
       default: false
     },
diff --git a/styleguide/src/system/components/layout/Space/style.scss b/styleguide/src/system/components/layout/Space/style.scss
index b96a9437a..203986a94 100644
--- a/styleguide/src/system/components/layout/Space/style.scss
+++ b/styleguide/src/system/components/layout/Space/style.scss
@@ -1,3 +1,7 @@
 .ds-space {
   @include reset;
-}
\ No newline at end of file
+}
+
+.ds-space-centered {
+  text-align: center;
+}

From e726b14ec01045b91197d40a974d6f9787d84a45 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 19:23:16 +0100
Subject: [PATCH 38/59] Add empty icons

---
 static/img/empty/alert.svg    | 1 +
 static/img/empty/docs.svg     | 1 +
 static/img/empty/events.svg   | 1 +
 static/img/empty/file.svg     | 1 +
 static/img/empty/messages.svg | 1 +
 static/img/empty/tasks.svg    | 1 +
 6 files changed, 6 insertions(+)
 create mode 100644 static/img/empty/alert.svg
 create mode 100644 static/img/empty/docs.svg
 create mode 100644 static/img/empty/events.svg
 create mode 100644 static/img/empty/file.svg
 create mode 100644 static/img/empty/messages.svg
 create mode 100644 static/img/empty/tasks.svg

diff --git a/static/img/empty/alert.svg b/static/img/empty/alert.svg
new file mode 100644
index 000000000..5bff0a3da
--- /dev/null
+++ b/static/img/empty/alert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="131"><defs><path id="a" d="M0 .024h119.634v119.569H0z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(0 11.271)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M13.085 101.253C25.835 86.874 32.21 66.935 32.21 41.436c0-2.445.576-4.96 1.726-7.549 1.15-2.588 2.804-5.057 4.96-7.405 2.157-2.348 5.07-4.278 8.736-5.788 3.667-1.51 7.729-2.264 12.187-2.264 4.457 0 8.52.754 12.185 2.264 3.667 1.51 6.578 3.44 8.735 5.788 2.158 2.348 3.811 4.817 4.962 7.405 1.15 2.588 1.725 5.104 1.725 7.55 0 25.498 6.375 45.437 19.124 59.816H13.085zm100.007-6.327c-1.966-2.204-4.003-5.068-6.11-8.591-2.111-3.523-3.896-7.321-5.358-11.396-1.462-4.073-2.66-9.01-3.594-14.81-.935-5.799-1.402-12.03-1.402-18.693 0-7.285-2.804-14.056-8.412-20.31C82.608 14.87 75.25 11.072 66.144 9.73c.383-.91.575-1.844.575-2.804 0-1.917-.672-3.547-2.013-4.889C63.364.696 61.734.024 59.818.024c-1.918 0-3.548.672-4.89 2.013-1.342 1.342-2.013 2.972-2.013 4.89 0 .959.191 1.893.576 2.803-9.108 1.342-16.465 5.14-22.073 11.396-5.608 6.254-8.411 13.025-8.411 20.31 0 6.662-.468 12.894-1.402 18.693-.935 5.8-2.133 10.737-3.595 14.81-1.463 4.075-3.248 7.873-5.357 11.396-2.11 3.523-4.146 6.387-6.11 8.591A63.175 63.175 0 0 1 0 101.253c0 2.493.91 4.65 2.732 6.47 1.82 1.823 3.978 2.733 6.471 2.733h37.949c2.065 5.345 7.25 9.137 13.323 9.137s11.257-3.792 13.322-9.137h36.635c2.492 0 4.648-.91 6.47-2.732 1.822-1.821 2.733-3.978 2.733-6.471a62.937 62.937 0 0 1-6.543-6.327z" mask="url(#b)"/></g><path fill="#9B9B9B" d="M80.066 65.602l-.797-.468-.363.85-.292.685c-1.16 2.725-3.467 4.416-6.02 4.416-2.553 0-4.86-1.691-6.02-4.415l-.291-.685-.363-.851-.798.468-2.473 1.452-.617.362.28.658.292.685c1.89 4.441 5.719 7.2 9.99 7.2 4.27 0 8.099-2.759 9.99-7.2l.292-.684.28-.659-.617-.362-2.473-1.452zm-22.243 2.473l.28-.659-.616-.362-2.474-1.452-.797-.468-.363.85-.292.685c-1.16 2.724-3.467 4.417-6.02 4.417-2.553 0-4.859-1.693-6.02-4.416l-.291-.685-.363-.851-.797.468-2.474 1.452-.617.362.28.659.293.684c1.89 4.441 5.718 7.2 9.99 7.2 4.27 0 8.098-2.759 9.99-7.2l.291-.684zm2.652 22.042a3.874 3.874 0 1 0 0 7.748 3.874 3.874 0 0 0 0-7.748M114.652 31.462h-10.585v2.737h6.091l-6.25 7.391v2.144h10.949v-2.737h-6.455l6.25-7.391zM90.854 21.183l18.528-.008-.002-4.632-10.923.004L109.03 4.035l-.002-3.628-17.913.007.002 4.632 10.307-.004-10.572 12.512z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/docs.svg b/static/img/empty/docs.svg
new file mode 100644
index 000000000..eb97ac269
--- /dev/null
+++ b/static/img/empty/docs.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="114" height="130"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M70.71 67.52l-2.634-1.547-.85-.5-.386.907-.311.73c-1.236 2.901-3.693 4.704-6.413 4.704s-5.177-1.803-6.412-4.704l-.311-.73-.386-.907-.85.5-2.635 1.546-.657.386.298.701.311.73c2.015 4.73 6.092 7.67 10.642 7.67s8.628-2.94 10.642-7.67l.311-.73.3-.7-.658-.387zm-29.322-1.547l-.85-.5-.386.907-.31.73c-1.237 2.901-3.694 4.704-6.414 4.704-2.72 0-5.176-1.803-6.412-4.704l-.311-.73-.386-.907-.85.5-2.635 1.546-.657.386.298.701.311.73c2.015 4.73 6.092 7.67 10.642 7.67s8.628-2.94 10.642-7.67l.311-.73.3-.7-.658-.387-2.635-1.546zm5.818 26.115a4.126 4.126 0 1 0 0 8.252 4.126 4.126 0 0 0 0-8.252M113.208 43.24v2.916h-11.663v-2.284l6.658-7.873h-6.488v-2.916h11.276v2.284l-6.659 7.873zM107.374 17.19l.002 4.934-19.738.008-.002-3.865L98.899 4.938l-10.98.005-.002-4.935L106.999 0l.002 3.865-11.263 13.33z"/><path fill="#DEDEDE" fill-opacity=".7" d="M66.288 28.215c-.498-.498-1.35-.954-2.552-1.369V50.25h23.403c-.416-1.203-.872-2.055-1.37-2.552L66.288 28.215zm21.349 93.736V58.215H61.744c-1.66 0-3.071-.58-4.232-1.742-1.163-1.161-1.744-2.572-1.744-4.233V26.348h-47.8v95.603h79.669zm3.734-79.918c1.16 1.162 2.157 2.738 2.987 4.73.83 1.991 1.245 3.818 1.245 5.477v71.703c0 1.659-.581 3.07-1.742 4.232-1.163 1.161-2.574 1.743-4.233 1.743H5.976c-1.66 0-3.072-.582-4.232-1.743C.58 127.013 0 125.602 0 123.943V24.356c0-1.659.58-3.07 1.744-4.232 1.16-1.16 2.572-1.742 4.232-1.742h55.768c1.66 0 3.486.414 5.477 1.244 1.992.83 3.569 1.826 4.73 2.987l19.42 19.42z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/events.svg b/static/img/empty/events.svg
new file mode 100644
index 000000000..2ac3ba12a
--- /dev/null
+++ b/static/img/empty/events.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="133" height="134"><defs><path id="a" d="M.353.351h20.354v22.591H.353z"/><path id="c" d="M0 .08h107.481v121.033H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M77.331 73.129l-2.678-1.61L73.79 71l-.393.943-.316.76c-1.257 3.019-3.754 4.895-6.518 4.895-2.765 0-5.262-1.876-6.518-4.895l-.316-.76-.393-.943-.864.52-2.678 1.609-.668.401.304.73.316.759C57.793 79.94 61.938 83 66.563 83c4.624 0 8.769-3.059 10.816-7.982l.317-.758.304-.73-.669-.401zm-29.804-1.61L46.663 71l-.392.943-.317.76c-1.256 3.019-3.754 4.895-6.518 4.895s-5.262-1.876-6.518-4.895l-.316-.76L32.21 71l-.864.52-2.678 1.609-.668.401.303.73.316.759C30.667 79.94 34.811 83 39.436 83c4.624 0 8.77-3.059 10.817-7.982l.316-.758.304-.73-.668-.401-2.678-1.61zM53 99a4 4 0 1 0 0 8 4 4 0 0 0 0-8M133 44.1V47h-12v-2.271l6.85-7.829h-6.675V34h11.601v2.271l-6.85 7.829z"/><g transform="translate(106)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9B9B9B" mask="url(#b)" d="M20.705 17.897l.002 5.036-20.352.009-.002-3.946L11.966 5.392.645 5.396.642.359 20.318.351l.002 3.945L8.707 17.902z"/></g><g transform="translate(0 12)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M81.444 30.338V10.886c0-.63-.204-1.148-.61-1.553-.407-.405-.926-.608-1.56-.608h-4.339c-.634 0-1.152.203-1.56.608-.407.405-.61.923-.61 1.553v19.452c0 .631.203 1.148.61 1.553.408.405.926.609 1.56.609h4.339c.634 0 1.153-.204 1.56-.609.406-.405.61-.922.61-1.553zm-46.727 0V10.886c0-.63-.205-1.148-.61-1.553-.408-.405-.93-.608-1.56-.608h-4.34c-.632 0-1.152.203-1.56.608-.405.405-.609.923-.609 1.553v19.452c0 .631.204 1.148.61 1.553.407.405.927.609 1.56.609h4.339c.63 0 1.152-.204 1.56-.609.405-.405.61-.922.61-1.553zM8.68 112.466h90.122v-69.16H8.68v69.16zm98.8-86.45v86.45c0 2.341-.859 4.368-2.577 6.08-1.718 1.71-3.75 2.567-6.1 2.567H8.68c-2.35 0-4.385-.857-6.101-2.567C.859 116.834 0 114.807 0 112.466v-86.45c0-2.341.86-4.368 2.579-6.08 1.716-1.71 3.75-2.566 6.101-2.566h8.68v-6.484c0-2.972 1.06-5.515 3.184-7.632C22.67 1.138 25.224.08 28.208.08h4.339c2.982 0 5.537 1.058 7.661 3.174 2.124 2.117 3.188 4.66 3.188 7.632v6.484h20.69v-6.484c0-2.972 1.063-5.515 3.188-7.632C69.398 1.138 71.952.08 74.935.08h4.339c2.985 0 5.537 1.058 7.663 3.174 2.123 2.117 3.185 4.66 3.185 7.632v6.484h8.68c2.35 0 4.383.856 6.101 2.567 1.718 1.711 2.578 3.738 2.578 6.079z" mask="url(#d)"/></g></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/file.svg b/static/img/empty/file.svg
new file mode 100644
index 000000000..62efbf260
--- /dev/null
+++ b/static/img/empty/file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="136" height="130"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M81.331 69.129l-2.678-1.61L77.79 67l-.393.943-.316.76c-1.257 3.019-3.754 4.895-6.518 4.895s-5.262-1.876-6.518-4.895l-.316-.76-.393-.943-.863.52-2.678 1.609-.669.401.304.73.316.759C61.793 75.94 65.938 79 70.563 79c4.624 0 8.769-3.059 10.816-7.982l.317-.758.304-.73-.669-.401zm-29.804-1.61L50.663 67l-.393.943-.315.76c-1.257 3.019-3.754 4.895-6.519 4.895-2.764 0-5.261-1.876-6.517-4.895l-.317-.76L36.21 67l-.864.52-2.678 1.609-.668.401.303.73.316.759C34.667 75.94 38.812 79 43.436 79c4.625 0 8.77-3.059 10.817-7.982l.316-.758.305-.73-.67-.401-2.677-1.61zM58 94a4 4 0 1 0 0 8 4 4 0 0 0 0-8M136 44.1V47h-12v-2.271l6.85-7.829h-6.675V34h11.601v2.271l-6.85 7.829zM129.998 17.864l.002 5.127-19.998.009-.002-4.017 11.411-13.852-11.125.005-.002-5.128L129.618 0l.001 4.016-11.411 13.853z"/><path fill="#DEDEDE" fill-opacity=".7" d="M106.715 112.448c0 4.568-3.723 8.284-8.3 8.284h-80.83c-4.577 0-8.3-3.716-8.3-8.284V36.552c0-4.568 3.723-8.284 8.3-8.284H39.81l12.294 12.27.649.648h45.662c4.577 0 8.3 3.716 8.3 8.284v62.978zm4.106-75.36c-3.34-3.334-7.746-5.17-12.406-5.17H56.529l-12.293-12.27-.65-.648h-26c-4.661 0-9.068 1.836-12.407 5.17C1.839 27.501 0 31.9 0 36.551v75.896c0 4.652 1.839 9.05 5.179 12.383 3.34 3.333 7.746 5.169 12.406 5.169h80.83c4.66 0 9.066-1.836 12.406-5.17 3.34-3.332 5.179-7.73 5.179-12.382V49.47c0-4.651-1.84-9.049-5.179-12.382z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/messages.svg b/static/img/empty/messages.svg
new file mode 100644
index 000000000..6b7893918
--- /dev/null
+++ b/static/img/empty/messages.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="133"><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M70.852 56.305l-2.473-1.452-.798-.468-.362.85-.292.686c-1.16 2.724-3.467 4.416-6.02 4.416-2.553 0-4.86-1.692-6.02-4.416l-.292-.685-.362-.85-.798.467-2.473 1.452-.617.363.28.658.292.684c1.89 4.442 5.718 7.2 9.99 7.2 4.27 0 8.098-2.758 9.99-7.2l.292-.684.28-.658-.617-.363zm-27.526-1.452l-.797-.468-.363.85-.292.686c-1.16 2.724-3.467 4.416-6.02 4.416-2.553 0-4.86-1.692-6.02-4.416l-.291-.685-.363-.85-.797.467-2.474 1.452-.617.363.28.658.292.684c1.89 4.442 5.719 7.2 9.99 7.2 4.27 0 8.099-2.758 9.99-7.2l.292-.684.28-.658-.616-.363-2.474-1.452zm5.462 24.516a3.874 3.874 0 1 0 0 7.747 3.874 3.874 0 0 0 0-7.747M119.865 40.59v2.737h-10.948v-2.144l6.25-7.39h-6.09v-2.738h10.584v2.144l-6.25 7.391zM114.389 16.136l.002 4.632-18.529.008-.001-3.628 10.572-12.513-10.307.005-.002-4.632L114.037 0l.001 3.628-10.572 12.513z"/><path fill="#DEDEDE" fill-opacity=".7" d="M15.983 38.613c-4.327 0-7.847 3.523-7.847 7.853l.988 70.28 10.53-13.508a4.068 4.068 0 0 1 3.208-1.567h60.856c4.327 0 7.847-3.519 7.847-7.844l-.989-47.36c0-4.33-3.52-7.854-7.847-7.854H15.983zM5.056 132.65a4.067 4.067 0 0 1-4.067-4.068L0 46.466c0-8.816 7.17-15.988 15.983-15.988H82.73c8.814 0 15.983 7.172 15.983 15.988l.989 47.36c0 8.812-7.17 15.98-15.983 15.98h-58.87L8.266 131.084a4.069 4.069 0 0 1-3.21 1.567z"/></g></svg>
\ No newline at end of file
diff --git a/static/img/empty/tasks.svg b/static/img/empty/tasks.svg
new file mode 100644
index 000000000..260b906e5
--- /dev/null
+++ b/static/img/empty/tasks.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="141"><defs><path id="a" d="M.157.075h12.616v14.142H.157z"/><path id="c" d="M0 .047h97.792V127.5H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="#9B9B9B" d="M74.79 73.038l-2.85-1.673-.918-.54-.419.98-.336.79c-1.337 3.138-3.995 5.088-6.937 5.088s-5.6-1.95-6.936-5.088l-.337-.79-.417-.98-.92.54-2.85 1.673-.71.417.322.759.336.789c2.18 5.117 6.59 8.296 11.512 8.296 4.922 0 9.333-3.18 11.512-8.297l.336-.788.324-.759-.711-.417zm-31.719-1.673l-.919-.54-.418.98-.336.79c-1.337 3.138-3.996 5.088-6.937 5.088-2.942 0-5.6-1.95-6.937-5.088l-.336-.79-.417-.98-.92.54-2.85 1.673-.711.417.323.759.336.789c2.18 5.117 6.59 8.296 11.512 8.296 4.921 0 9.332-3.18 11.512-8.297l.336-.788.324-.759-.712-.417-2.85-1.673zm6.294 28.25a4.463 4.463 0 1 0 0 8.926 4.463 4.463 0 0 0 0-8.926"/><g transform="translate(106.875 35.712)"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><path fill="#9B9B9B" mask="url(#b)" d="M12.773 11.062v3.155H.157v-2.471l7.202-8.517H.341V.075h12.197v2.471l-7.203 8.516z"/></g><path fill="#9B9B9B" d="M113.338 18.595l.002 5.337-21.352.009-.001-4.181 12.182-14.418-11.877.004L92.29.008 112.932 0l.002 4.181L100.75 18.6z"/><g transform="translate(0 12.743)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path fill="#DEDEDE" fill-opacity=".7" d="M89.174 118.882H8.62V79.275h-.001V25.674H24.1v7.084c0 1.036.84 1.875 1.875 1.875h45.842c1.036 0 1.875-.839 1.875-1.875v-7.084h15.481v62.155h.001v31.053zm6.731-99.94c-1.254-1.256-2.782-1.886-4.577-1.886H73.692V10.24c0-1.035-.84-1.875-1.875-1.875h-6.51V1.922c0-1.035-.84-1.875-1.876-1.875H34.802c-1.035 0-1.875.84-1.875 1.875v6.443h-6.952c-1.035 0-1.875.84-1.875 1.875v6.816H6.463c-1.794 0-3.32.63-4.578 1.885C.629 20.2 0 21.725 0 23.52v97.517c0 1.794.629 3.32 1.886 4.578 1.256 1.256 2.782 1.885 4.578 1.885H91.33c1.794 0 3.32-.63 4.578-1.885 1.256-1.257 1.885-2.784 1.885-4.578V23.52c0-1.795-.628-3.321-1.887-4.579z" mask="url(#d)"/></g></g></svg>
\ No newline at end of file

From dfb488271ea958eedff1dfab5715546dfc77cae1 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 19:23:29 +0100
Subject: [PATCH 39/59] Translated empty message

---
 locales/de.json            | 1 +
 locales/en.json            | 1 +
 pages/moderation/index.vue | 3 ++-
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/locales/de.json b/locales/de.json
index 76e022ad2..b5d5be9c5 100644
--- a/locales/de.json
+++ b/locales/de.json
@@ -95,6 +95,7 @@
   "moderation": {
     "name": "Moderation",
     "reports": {
+      "empty": "Glückwunsch, es gibt nichts zu moderieren.",
       "name": "Meldungen",
       "reporter": "gemeldet von"
     }
diff --git a/locales/en.json b/locales/en.json
index 343ef9b94..023e34835 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -95,6 +95,7 @@
   "moderation": {
     "name": "Moderation",
     "reports": {
+      "empty": "Congratulations, nothing to moderate.",
       "name": "Reports",
       "reporter": "reported by"
     }
diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index 40dba1504..216252f85 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -75,8 +75,9 @@
       </template>
     </ds-table>
     <hc-empty
+      v-else
       icon="alert"
-      message="Glückwunsch, es gibt nichts zu moderieren."
+      :message="$t('moderation.reports.empty')"
     />
   </ds-card>
 </template>

From 57c106ab139cc18b614ec33b0399e0b2935db638 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 19:24:00 +0100
Subject: [PATCH 40/59] Fixe typo in AboutMeAndLocation feature

---
 cypress/integration/04.AboutMeAndLocation.feature | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/04.AboutMeAndLocation.feature b/cypress/integration/04.AboutMeAndLocation.feature
index 83e7046f5..8601f7c80 100644
--- a/cypress/integration/04.AboutMeAndLocation.feature
+++ b/cypress/integration/04.AboutMeAndLocation.feature
@@ -1,4 +1,4 @@
-Feature: About me and and location
+Feature: About me and location
   As a user
   I would like to add some about me text and a location
   So others can get some info about me and my location

From 6a58746702a1e932c391f9a3e432285a4a319107 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 20:55:37 +0100
Subject: [PATCH 41/59] Improved Modal

---
 styleguide/src/system/components/layout/Modal/style.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/styleguide/src/system/components/layout/Modal/style.scss b/styleguide/src/system/components/layout/Modal/style.scss
index c05df53c2..f7eb5fc31 100644
--- a/styleguide/src/system/components/layout/Modal/style.scss
+++ b/styleguide/src/system/components/layout/Modal/style.scss
@@ -88,11 +88,9 @@
   background: rgba(0, 0, 0, 0.7);
 }
 
-$easeOut: cubic-bezier(0.19, 1, 0.22, 1);
-
 .ds-transition-modal-appear-enter-active {
   opacity: 1;
-  transition: all 180ms $easeOut;
+  transition: all 200ms $ease-out-bounce ;
   transition-delay: 0;
   transform: translate3d(-50%, -50%, 0) scale(1);
 }
@@ -100,5 +98,5 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1);
 .ds-transition-modal-appear-leave-active {
   opacity: 0;
   transition-delay: 0;
-  transform: translate3d(-50%, -50%, 0) scale(0.9);
+  transform: translate3d(-50%, -50%, 0) scale(0.8);
 }

From 9ebe75b250e77114f17e00c95c5b060410862ef9 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 22:04:00 +0100
Subject: [PATCH 42/59] Improved moderation page

---
 graphql/ModerationListQuery.js | 41 +++++++++++++++++++++++++++++++
 pages/moderation/index.vue     | 44 ++++------------------------------
 2 files changed, 45 insertions(+), 40 deletions(-)
 create mode 100644 graphql/ModerationListQuery.js

diff --git a/graphql/ModerationListQuery.js b/graphql/ModerationListQuery.js
new file mode 100644
index 000000000..6126521cc
--- /dev/null
+++ b/graphql/ModerationListQuery.js
@@ -0,0 +1,41 @@
+import gql from 'graphql-tag'
+
+export default app => {
+  return gql(`
+    query {
+      Report(first: 20, orderBy: createdAt_desc) {
+        id
+        description
+        type
+        createdAt
+        reporter {
+          name
+          slug
+        }
+        user {
+          name
+          slug
+        }
+        comment {
+          contentExcerpt
+          author {
+            name
+            slug
+          }
+          post {
+            title
+            slug
+          }
+        }
+        contribution {
+          title
+          slug
+          author {
+            name
+            slug
+          }
+        }
+      }
+    }
+  `)
+}
diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index 216252f85..dea7e9eac 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -85,6 +85,7 @@
 <script>
 import gql from 'graphql-tag'
 import HcEmpty from '~/components/Empty.vue'
+import query from '~/graphql/ModerationListQuery.js'
 
 export default {
   components: {
@@ -106,48 +107,11 @@ export default {
     }
   },
   mounted() {
-    this.$apollo.queries.Report.startPolling(5000)
+    this.$apollo.queries.Report.refetch()
+    this.$apollo.queries.Report.startPolling(8000)
   },
   apollo: {
-    Report: {
-      query: gql(`
-        query {
-          Report(first: 20, orderBy: createdAt_desc) {
-            id
-            description
-            type
-            createdAt
-            reporter {
-              name
-              slug
-            }
-            user {
-              name
-              slug
-            }
-            comment {
-              contentExcerpt
-              author {
-                name
-                slug
-              }
-              post {
-                title
-                slug
-              }
-            }
-            contribution {
-              title
-              slug
-              author {
-                name
-                slug
-              }
-            }
-          }
-        }
-      `)
-    }
+    Report: query
   }
 }
 </script>

From 453ceae726a855ad4befd80807c4dfc86e8ca53e Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 22:21:57 +0100
Subject: [PATCH 43/59] Fix scrollbehavior to top on page change

---
 nuxt.config.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/nuxt.config.js b/nuxt.config.js
index 19d28b04b..8e4007ae8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -73,7 +73,10 @@ module.exports = {
 
   router: {
     middleware: ['authenticated'],
-    linkActiveClass: 'router-active-link'
+    linkActiveClass: 'router-active-link',
+    scrollBehavior: () => {
+      return { x: 0, y: 0 }
+    }
   },
 
   /*

From a87c9e4f4aedcee294c8b3c01e58ddffd4c199e9 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 22:22:10 +0100
Subject: [PATCH 44/59] Added report content tests

---
 cypress/fixtures/users.json                  | 17 +++++
 cypress/integration/05.ReportContent.feature | 34 +++++++++
 cypress/integration/common/report.js         | 73 ++++++++++++++++++++
 cypress/integration/common/steps.js          | 13 ++--
 cypress/support/commands.js                  |  7 ++
 cypress/support/config.js                    | 16 -----
 6 files changed, 138 insertions(+), 22 deletions(-)
 create mode 100644 cypress/fixtures/users.json
 create mode 100644 cypress/integration/05.ReportContent.feature
 create mode 100644 cypress/integration/common/report.js
 delete mode 100644 cypress/support/config.js

diff --git a/cypress/fixtures/users.json b/cypress/fixtures/users.json
new file mode 100644
index 000000000..339866774
--- /dev/null
+++ b/cypress/fixtures/users.json
@@ -0,0 +1,17 @@
+{
+  "admin": {
+    "email": "admin@example.org",
+    "password": "1234",
+    "name": "Peter Lustig"
+  },
+  "moderator": {
+    "email": "moderator@example.org",
+    "password": "1234",
+    "name": "Bob der Bausmeister"
+  },
+  "user": {
+    "email": "user@example.org",
+    "password": "1234",
+    "name": "Jenny Rostock"
+  }
+}
diff --git a/cypress/integration/05.ReportContent.feature b/cypress/integration/05.ReportContent.feature
new file mode 100644
index 000000000..d9b9e46fe
--- /dev/null
+++ b/cypress/integration/05.ReportContent.feature
@@ -0,0 +1,34 @@
+Feature: Report content
+  As a user
+  I would like to report content that viloates the community guidlines
+  So the moderators can take action on it
+
+  As a moderator
+  I would like to see all reported content
+  So I can look into it and decide what to do
+
+  Scenario: Report a Post from landingpage
+    Given I am logged in as "user"
+    And I am on the "landing" page
+
+    When I click on a Post menu and select the report option
+    And I click on send in the confirmation dialog
+    Then I get a success message
+
+  Scenario: See reported content
+    Given I am logged in as "moderator"
+    And I previously reported a post
+
+    When I am on the "moderation" page
+    Then I see my reported post
+
+  Scenario: Report while reading Post
+    Given I am logged in as "admin"
+    And I am viewing a post
+
+    When I report the current post
+    And I visit the "moderation" page
+    Then I see my reported post
+
+  #Scenario: Normal user can't see the moderation page
+    #Given I am logged in as "user"
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
new file mode 100644
index 000000000..e202bfad2
--- /dev/null
+++ b/cypress/integration/common/report.js
@@ -0,0 +1,73 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+/* global cy  */
+
+let lastPostTitle
+
+const savePostTitle = $post => {
+  return $post
+    .first()
+    .find('.ds-heading')
+    .first()
+    .invoke('text')
+    .then(title => {
+      lastPostTitle = title
+    })
+}
+const invokeReportOnElement = selector => {
+  cy.get(selector)
+    .first()
+    .find('.content-menu-trigger')
+    .first()
+    .click()
+
+  return savePostTitle(cy.get(selector)).then(() => {
+    cy.get('.popover .ds-menu-item-link')
+      .contains('Report')
+      .click()
+  })
+}
+
+Given('I am logged in as {string}', userType => {
+  cy.loginAs(userType)
+})
+
+Given('I previously reported a post', () => {
+  invokeReportOnElement('.post-card')
+})
+
+Given('I am viewing a post', () => {
+  cy.visit('/')
+  cy.get('.post-card:nth(2)')
+    .click()
+    .wait(200)
+  cy.location('pathname').should('contain', '/post')
+})
+
+When('I report the current post', () => {
+  invokeReportOnElement('.post-card').then(() => {
+    cy.get('button')
+      .contains('Send')
+      .click()
+  })
+})
+
+When('I click on a Post menu and select the report option', () => {
+  invokeReportOnElement('.post-card')
+})
+
+When('I click on send in the confirmation dialog', () => {
+  cy.get('button')
+    .contains('Send')
+    .click()
+})
+
+Then('I get a success message', () => {
+  cy.get('.iziToast-message').contains('Thanks')
+})
+
+Then('I see my reported post', () => {
+  cy.get('table').then(() => {
+    cy.get('tbody tr:first-child()').contains(lastPostTitle.slice(0, 20))
+  })
+})
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index ee9a364f7..a7c88d74d 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -1,11 +1,9 @@
 import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 import { getLangByName } from '../../support/helpers'
-import find from 'lodash/find'
+import users from '../../fixtures/users.json'
 
 /* global cy  */
 
-const username = 'Peter Lustig'
-
 const openPage = page => {
   if (page === 'landing') {
     page = ''
@@ -14,7 +12,10 @@ const openPage = page => {
 }
 
 Given('I am logged in', () => {
-  cy.login('admin@example.org', 1234)
+  cy.loginAs('admin')
+})
+Given('I am logged in as {string}', userType => {
+  cy.loginAs(userType)
 })
 
 Given('we have a selection of tags and categories as well as posts', () => {
@@ -59,7 +60,7 @@ Then('I can click on my profile picture in the top right corner', () => {
 })
 
 Then('I can see my name {string} in the dropdown menu', () => {
-  cy.get('.avatar-menu-popover').should('contain', username)
+  cy.get('.avatar-menu-popover').should('contain', users.admin.name)
 })
 
 Then('I see the login screen again', () => {
@@ -68,7 +69,7 @@ Then('I see the login screen again', () => {
 
 Then('I am still logged in', () => {
   cy.get('.avatar-menu').click()
-  cy.get('.avatar-menu-popover').contains(username)
+  cy.get('.avatar-menu-popover').contains(users.admin.name)
 })
 
 When('I select {string} in the language menu', name => {
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 77c75c7d5..a747644de 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -15,6 +15,7 @@
 /* globals Cypress cy */
 
 import { getLangByName } from './helpers'
+import users from '../fixtures/users.json'
 
 const switchLang = name => {
   cy.get('.locale-menu').click()
@@ -54,6 +55,12 @@ Cypress.Commands.add('login', (email, password) => {
     .click()
   cy.location('pathname').should('eq', '/') // we're in!
 })
+
+Cypress.Commands.add('loginAs', userType => {
+  userType = userType || 'admin'
+  cy.login(users[userType].email, users[userType].password)
+})
+
 Cypress.Commands.add('logout', (email, password) => {
   cy.visit(`/logout`)
   cy.location('pathname').should('contain', '/login') // we're out
diff --git a/cypress/support/config.js b/cypress/support/config.js
deleted file mode 100644
index af96ad615..000000000
--- a/cypress/support/config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export default {
-  users: {
-    admin: {
-      email: 'admin@example.org',
-      password: 1234
-    },
-    moderator: {
-      email: 'moderator@example.org',
-      password: 1234
-    },
-    user: {
-      email: 'user@example.org',
-      password: 1234
-    }
-  }
-}

From cd40879c6e32f67e0462774192f2325fc64ef616 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 22:41:48 +0100
Subject: [PATCH 45/59] Added user report test (broken for no reason)

---
 cypress/integration/05.ReportContent.feature |  9 +++++++
 cypress/integration/common/report.js         | 28 +++++++++++++++++---
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/05.ReportContent.feature b/cypress/integration/05.ReportContent.feature
index d9b9e46fe..2e68beb4e 100644
--- a/cypress/integration/05.ReportContent.feature
+++ b/cypress/integration/05.ReportContent.feature
@@ -30,5 +30,14 @@ Feature: Report content
     And I visit the "moderation" page
     Then I see my reported post
 
+  Scenario: Report user
+    Given I am logged in as "admin"
+    And I am viewing a post
+
+    When I click on the author
+    And I report the author
+    And I visit the "moderation" page
+    Then I see my reported user
+
   #Scenario: Normal user can't see the moderation page
     #Given I am logged in as "user"
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index e202bfad2..782c294a1 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -2,7 +2,7 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 /* global cy  */
 
-let lastPostTitle
+let lastReportTitle
 
 const savePostTitle = $post => {
   return $post
@@ -11,7 +11,7 @@ const savePostTitle = $post => {
     .first()
     .invoke('text')
     .then(title => {
-      lastPostTitle = title
+      lastReportTitle = title
     })
 }
 const invokeReportOnElement = selector => {
@@ -56,6 +56,23 @@ When('I click on a Post menu and select the report option', () => {
   invokeReportOnElement('.post-card')
 })
 
+When('I click on the author', () => {
+  cy.get('a.author')
+    .first()
+    .click()
+    .wait(200)
+})
+
+When('I report the author', () => {
+  cy.get('.page-name-profile-slug').then(() => {
+    invokeReportOnElement('.ds-card').then(() => {
+      cy.get('button')
+        .contains('Send')
+        .click()
+    })
+  })
+})
+
 When('I click on send in the confirmation dialog', () => {
   cy.get('button')
     .contains('Send')
@@ -68,6 +85,11 @@ Then('I get a success message', () => {
 
 Then('I see my reported post', () => {
   cy.get('table').then(() => {
-    cy.get('tbody tr:first-child()').contains(lastPostTitle.slice(0, 20))
+    cy.get('tbody tr:first-child()').contains(lastReportTitle.slice(0, 20))
+  })
+})
+Then('I see my reported user', () => {
+  cy.get('table').then(() => {
+    cy.get('tbody tr:first-child()').contains(lastReportTitle)
   })
 })

From 12d713d528b0ed417cc0d325326e67213a282707 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 10:10:42 +0100
Subject: [PATCH 46/59] Fixed user report test

---
 cypress/integration/05.ReportContent.feature | 2 +-
 cypress/integration/common/report.js         | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/05.ReportContent.feature b/cypress/integration/05.ReportContent.feature
index 2e68beb4e..09d5871a3 100644
--- a/cypress/integration/05.ReportContent.feature
+++ b/cypress/integration/05.ReportContent.feature
@@ -1,4 +1,4 @@
-Feature: Report content
+Feature: Report and Moderate
   As a user
   I would like to report content that viloates the community guidlines
   So the moderators can take action on it
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 782c294a1..67275e61b 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -85,11 +85,15 @@ Then('I get a success message', () => {
 
 Then('I see my reported post', () => {
   cy.get('table').then(() => {
-    cy.get('tbody tr:first-child()').contains(lastReportTitle.slice(0, 20))
+    cy.get('tbody tr')
+      .first()
+      .contains(lastReportTitle.trim().slice(0, 20))
   })
 })
 Then('I see my reported user', () => {
   cy.get('table').then(() => {
-    cy.get('tbody tr:first-child()').contains(lastReportTitle)
+    cy.get('tbody tr')
+      .first()
+      .contains(lastReportTitle.trim())
   })
 })

From 9a63da733f1e736bb8b68504d3fafe380731a41d Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 10:25:49 +0100
Subject: [PATCH 47/59] Added moderation menu item check for non moderators to
 be hidden

---
 cypress/integration/05.ReportContent.feature | 7 +++++--
 cypress/integration/common/report.js         | 7 +++++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/05.ReportContent.feature b/cypress/integration/05.ReportContent.feature
index 09d5871a3..29509fdcd 100644
--- a/cypress/integration/05.ReportContent.feature
+++ b/cypress/integration/05.ReportContent.feature
@@ -39,5 +39,8 @@ Feature: Report and Moderate
     And I visit the "moderation" page
     Then I see my reported user
 
-  #Scenario: Normal user can't see the moderation page
-    #Given I am logged in as "user"
+  Scenario: Normal user can't see the moderation page
+    Given I am logged in as "user"
+
+    When I can click on my profile picture in the top right corner
+    Then I can't see the moderation menu item
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 67275e61b..72a45a903 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -97,3 +97,10 @@ Then('I see my reported user', () => {
       .contains(lastReportTitle.trim())
   })
 })
+
+Then(`I can't see the moderation menu item`, () => {
+  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu-popover')
+    .find('a[href="/moderation"]')
+    .should('have.length', 0)
+})

From e6326f772b67059e49b781384954a2e6f6dce744 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 10:35:48 +0100
Subject: [PATCH 48/59] Secured moderation and admin pages by role

---
 middleware/isAdmin.js     | 5 +++++
 middleware/isModerator.js | 5 +++++
 pages/admin.vue           | 1 +
 pages/moderation.vue      | 1 +
 4 files changed, 12 insertions(+)
 create mode 100644 middleware/isAdmin.js
 create mode 100644 middleware/isModerator.js

diff --git a/middleware/isAdmin.js b/middleware/isAdmin.js
new file mode 100644
index 000000000..4db10bbb6
--- /dev/null
+++ b/middleware/isAdmin.js
@@ -0,0 +1,5 @@
+export default ({ store, error }) => {
+  if (!store.getters['auth/isAdmin']) {
+    return error({ statusCode: 403 })
+  }
+}
diff --git a/middleware/isModerator.js b/middleware/isModerator.js
new file mode 100644
index 000000000..e99793a3e
--- /dev/null
+++ b/middleware/isModerator.js
@@ -0,0 +1,5 @@
+export default ({ store, error }) => {
+  if (!store.getters['auth/isModerator']) {
+    return error({ statusCode: 403 })
+  }
+}
diff --git a/pages/admin.vue b/pages/admin.vue
index ce2c50960..e6d0fd66b 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -21,6 +21,7 @@
 
 <script>
 export default {
+  middleware: ['isAdmin'],
   computed: {
     routes() {
       return [
diff --git a/pages/moderation.vue b/pages/moderation.vue
index 16070ae35..0e0660309 100644
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -21,6 +21,7 @@
 
 <script>
 export default {
+  middleware: ['isModerator'],
   computed: {
     routes() {
       return [

From d29852b8437adbf550c6d36b5650cd5b9511648f Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 12:14:40 +0100
Subject: [PATCH 49/59] Optimized fetching of data on report content page

---
 pages/moderation/index.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index dea7e9eac..77ffc9373 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -107,11 +107,13 @@ export default {
     }
   },
   mounted() {
-    this.$apollo.queries.Report.refetch()
-    this.$apollo.queries.Report.startPolling(8000)
+    this.$apollo.queries.Report.startPolling(10000)
   },
   apollo: {
-    Report: query
+    Report: {
+      query,
+      fetchPolicy: 'cache-and-network'
+    }
   }
 }
 </script>

From 272b1071d47095577bcf57c35dff4042d7fdc67b Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 12:14:57 +0100
Subject: [PATCH 50/59] Improved content menu and empty profile page

---
 components/ContentMenu.vue |  9 ++++----
 components/Empty.vue       | 15 +++++++++++--
 components/PostCard.vue    | 12 ++++++-----
 pages/post/_slug/index.vue | 11 +++++-----
 pages/profile/_slug.vue    | 44 ++++++++++++++++++++++++++++----------
 5 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index e446420da..7e4f24d9b 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -8,13 +8,14 @@
       slot="default"
       slot-scope="{toggleMenu}"
     >
-      <a
+      <ds-button
         class="content-menu-trigger"
-        href="#"
-        @click.prevent="toggleMenu()"
+        size="small"
+        ghost
+        @click.prevent="toggleMenu"
       >
         <ds-icon name="ellipsis-v" />
-      </a>
+      </ds-button>
     </template>
     <div
       slot="popover"
diff --git a/components/Empty.vue b/components/Empty.vue
index 7d699d7d8..8755a11bd 100644
--- a/components/Empty.vue
+++ b/components/Empty.vue
@@ -1,8 +1,8 @@
 <template>
   <ds-space
     class="hc-empty"
-    margin="x-large"
     centered
+    :margin="margin"
   >
     <ds-text>
       <img
@@ -13,6 +13,7 @@
         alt="Empty"
       ><br>
       <ds-text
+        v-show="message"
         class="hc-empty-message"
         color="softer"
       >
@@ -40,7 +41,17 @@ export default {
     /**
      * Message that appears under the icon
      */
-    message: { type: String, required: true }
+    message: {
+      type: String,
+      default: null
+    },
+    /**
+     * Vertical spacing
+     */
+    margin: {
+      type: [String, Object],
+      default: 'x-large'
+    }
   },
   computed: {
     iconPath() {
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 560eb50f0..25b410257 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -114,11 +114,13 @@ export default {
   .ds-card-footer {
     z-index: 1;
   }
-}
-.content-menu {
-  display: inline-block;
-  margin-left: $space-small;
-  z-index: 1;
+
+  .content-menu {
+    display: inline-block;
+    margin-left: $space-xx-small;
+    margin-right: -$space-x-small;
+    z-index: 1;
+  }
 }
 .post-link {
   display: block;
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index 19f697187..b321c6bd1 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -118,11 +118,10 @@
         </div>
         <ds-space margin-bottom="small" />
       </div>
-      <div v-else>
-        <p style="text-align: center; opacity: .5;">
-          NO COMMENTS
-        </p>
-      </div>
+      <hc-empty
+        v-else
+        icon="messages"
+      />
     </ds-section>
   </ds-card>
 </template>
@@ -132,6 +131,7 @@ import gql from 'graphql-tag'
 import ContentMenu from '~/components/ContentMenu'
 import HcAuthor from '~/components/Author.vue'
 import HcShoutButton from '~/components/ShoutButton.vue'
+import HcEmpty from '~/components/Empty.vue'
 
 export default {
   transition: {
@@ -141,6 +141,7 @@ export default {
   components: {
     HcAuthor,
     HcShoutButton,
+    HcEmpty,
     ContentMenu
   },
   head() {
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 52fee46a6..913efb429 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -19,7 +19,6 @@
           />
           <no-ssr>
             <content-menu
-              style="float: right; display: inline-block; margin-top: -3.5rem; margin-right: -0.5rem;"
               placement="bottom-end"
               context="user"
               :item-id="user.id"
@@ -252,16 +251,26 @@
               </ds-flex>
             </ds-card>
           </ds-flex-item>
-          <ds-flex-item
-            v-for="post in uniq(user.contributions.filter(post => !post.deleted))"
-            :key="post.id"
-            :width="{ base: '100%', md: '100%', xl: '50%' }"
-          >
-            <hc-post-card
-              :post="post"
-              :show-author-popover="false"
-            />
-          </ds-flex-item>
+          <template v-if="activePosts">
+            <ds-flex-item
+              v-for="post in activePosts"
+              :key="post.id"
+              :width="{ base: '100%', md: '100%', xl: '50%' }"
+            >
+              <hc-post-card
+                :post="post"
+                :show-author-popover="false"
+              />
+            </ds-flex-item>
+          </template>
+          <template v-else>
+            <ds-flex-item :width="{ base: '100%' }">
+              <hc-empty
+                margin="xx-large"
+                icon="file"
+              />
+            </ds-flex-item>
+          </template>
         </ds-flex>
         <hc-load-more
           v-if="hasMore"
@@ -282,6 +291,7 @@ import HcFollowButton from '~/components/FollowButton.vue'
 import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
+import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
 
 export default {
@@ -292,6 +302,7 @@ export default {
     HcCountTo,
     HcBadges,
     HcLoadMore,
+    HcEmpty,
     ContentMenu
   },
   transition: {
@@ -329,6 +340,9 @@ export default {
         this.user.contributions &&
         this.user.contributions.length < this.user.contributionsCount
       )
+    },
+    activePosts() {
+      return this.uniq(this.user.contributions.filter(post => !post.deleted))
     }
   },
   watch: {
@@ -395,6 +409,14 @@ export default {
   border: #fff 5px solid;
 }
 
+.page-name-profile-slug {
+  .ds-flex-item:first-child .content-menu {
+    position: absolute;
+    top: $space-x-small;
+    right: $space-x-small;
+  }
+}
+
 .profile-top-navigation {
   position: sticky;
   top: 53px;

From 91a9aed46a7c274d6e5ec1fa10f99edd98f27b2a Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 14:57:43 +0100
Subject: [PATCH 51/59] Fixed content menu and modal styles

---
 components/ContentMenu.vue                               | 2 +-
 styleguide/src/system/components/layout/Modal/style.scss | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/ContentMenu.vue b/components/ContentMenu.vue
index 7e4f24d9b..9ab85cb12 100644
--- a/components/ContentMenu.vue
+++ b/components/ContentMenu.vue
@@ -24,7 +24,7 @@
     >
       <ds-menu :routes="routes">
         <ds-menu-item
-          slot="Navigation"
+          slot="menuitem"
           slot-scope="item"
           :route="item.route"
           :parents="item.parents"
diff --git a/styleguide/src/system/components/layout/Modal/style.scss b/styleguide/src/system/components/layout/Modal/style.scss
index f7eb5fc31..8b4e9f4a5 100644
--- a/styleguide/src/system/components/layout/Modal/style.scss
+++ b/styleguide/src/system/components/layout/Modal/style.scss
@@ -90,13 +90,11 @@
 
 .ds-transition-modal-appear-enter-active {
   opacity: 1;
-  transition: all 200ms $ease-out-bounce ;
-  transition-delay: 0;
+  transition: all 200ms $ease-out-bounce;
   transform: translate3d(-50%, -50%, 0) scale(1);
 }
 .ds-transition-modal-appear-enter,
 .ds-transition-modal-appear-leave-active {
   opacity: 0;
-  transition-delay: 0;
   transform: translate3d(-50%, -50%, 0) scale(0.8);
 }

From 1a106dc6ccf481652dff04b07d5102fe40cdc183 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Fri, 18 Jan 2019 16:30:25 +0100
Subject: [PATCH 52/59] Removed polling on moderation page due to error

---
 pages/moderation/index.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/pages/moderation/index.vue b/pages/moderation/index.vue
index 77ffc9373..995c9d560 100644
--- a/pages/moderation/index.vue
+++ b/pages/moderation/index.vue
@@ -106,9 +106,6 @@ export default {
       }
     }
   },
-  mounted() {
-    this.$apollo.queries.Report.startPolling(10000)
-  },
   apollo: {
     Report: {
       query,

From 04663aa94a8e8239f26b47e5b7a3d7994cc32fa6 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 21 Jan 2019 08:53:17 +0100
Subject: [PATCH 53/59] Improved modal

---
 components/ReportModal.vue | 37 +++++++++++++++++++++++++++++++++++--
 package.json               |  1 +
 yarn.lock                  |  5 +++++
 3 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/components/ReportModal.vue b/components/ReportModal.vue
index 18e6fc9ad..1ae23fd94 100644
--- a/components/ReportModal.vue
+++ b/components/ReportModal.vue
@@ -8,8 +8,19 @@
     @confirm="report"
     @cancel="close"
   >
+    <transition name="ds-transition-fade">
+      <ds-flex
+        v-if="success"
+        class="hc-modal-success"
+        centered
+      >
+        <sweetalert-icon icon="success" />
+      </ds-flex>
+    </transition>
+
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="$t(`report.${data.context}.message`, { name: name })" />
+
     <template
       slot="footer"
       slot-scope="{ cancel, confirm, cancelLabel, confirmLabel }"
@@ -37,11 +48,16 @@
 
 <script>
 import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
 
 export default {
   name: 'ReportModal',
+  components: {
+    SweetalertIcon
+  },
   data() {
     return {
+      success: false,
       loading: false,
       disabled: false
     }
@@ -63,6 +79,7 @@ export default {
   watch: {
     isOpen(open) {
       if (open) {
+        this.success = false
         this.disabled = false
         this.loading = false
       }
@@ -75,6 +92,7 @@ export default {
     report() {
       console.log('')
       this.loading = true
+      this.disabled = true
       this.$apollo
         .mutate({
           mutation: gql`
@@ -94,9 +112,9 @@ export default {
           }
         })
         .then(() => {
+          this.success = true
           this.$toast.success('Thanks for reporting!')
-          this.disabled = true
-          this.close()
+          setTimeout(this.close, 1500)
         })
         .catch(err => {
           this.$toast.error(err.message)
@@ -109,3 +127,18 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.hc-modal-success {
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  opacity: 1;
+  z-index: $z-index-modal;
+  border-radius: $border-radius-x-large;
+}
+</style>
diff --git a/package.json b/package.json
index edf111d23..6edaaf3d5 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "v-tooltip": "^2.0.0-rc.33",
     "vue-count-to": "^1.0.13",
     "vue-izitoast": "1.1.2",
+    "vue-sweetalert-icons": "^3.2.0",
     "vuex-i18n": "^1.11.0"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 980bb910a..72c9c7094 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11691,6 +11691,11 @@ vue-svg-loader@^0.11.0:
     loader-utils "^1.1.0"
     svg-to-vue "^0.3.0"
 
+vue-sweetalert-icons@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/vue-sweetalert-icons/-/vue-sweetalert-icons-3.2.0.tgz#2926d3af5590b81c0ba3b104212922fc1709396d"
+  integrity sha512-N18uG8++ZfdCnXO0gHNTmwpB2mAE8WWrwjGeWGa8CnHu6l1emn4RG6E8r1P9crVJ+fx3R9gTUezC+cdVu0mN7w==
+
 vue-template-compiler@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.17.tgz#52a4a078c327deb937482a509ae85c06f346c3cb"

From 6c74531608bc67d53277e9fd492fdb11e5a8d2f5 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 21 Jan 2019 09:14:36 +0100
Subject: [PATCH 54/59] Fixed logout link styling

---
 layouts/default.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 0a37d2abe..7283bf308 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -207,11 +207,17 @@ export default {
   .logout-link {
     margin-left: -$space-small;
     margin-right: -$space-small;
-    margin-bottom: -$space-xx-small;
-    padding: $space-xx-small $space-small;
-
+    margin-top: -$space-xxx-small;
+    margin-bottom: -$space-x-small;
+    padding: $space-x-small $space-small;
     // subtract menu border with from padding
     padding-left: $space-small - 2;
+
+    color: $text-color-base;
+
+    &:hover {
+      color: $text-color-link-active;
+    }
   }
 
   nav {

From 834973f3d3227ec32d743c1e291dfcd9fb516cdc Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 21 Jan 2019 11:49:37 +0100
Subject: [PATCH 55/59] Try to fix test

---
 cypress/integration/common/report.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 72a45a903..bbe2916c6 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -40,7 +40,7 @@ Given('I am viewing a post', () => {
   cy.visit('/')
   cy.get('.post-card:nth(2)')
     .click()
-    .wait(200)
+    .wait(300)
   cy.location('pathname').should('contain', '/post')
 })
 

From 4af7a6673cbfc1719643357d2be5efd36cdd9749 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Mon, 21 Jan 2019 12:06:38 +0100
Subject: [PATCH 56/59] Mobile friendly admin, settings and moderation

---
 pages/admin.vue      | 4 ++--
 pages/moderation.vue | 4 ++--
 pages/settings.vue   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/pages/admin.vue b/pages/admin.vue
index 34d8b0567..7149109b1 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -4,13 +4,13 @@
       {{ $t('admin.name') }}
     </ds-heading>
     <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '200px' }">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu
           :routes="routes"
           :is-exact="() => true"
         />
       </ds-flex-item>
-      <ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition
           name="slide-up"
           appear
diff --git a/pages/moderation.vue b/pages/moderation.vue
index 0e0660309..6b151b0e4 100644
--- a/pages/moderation.vue
+++ b/pages/moderation.vue
@@ -4,10 +4,10 @@
       {{ $t('moderation.name') }}
     </ds-heading>
     <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '200px' }">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu :routes="routes" />
       </ds-flex-item>
-      <ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition
           name="slide-up"
           appear
diff --git a/pages/settings.vue b/pages/settings.vue
index e302cba44..9e2d63056 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -4,13 +4,13 @@
       {{ $t('settings.name') }}
     </ds-heading>
     <ds-flex gutter="small">
-      <ds-flex-item :width="{ base: '200px' }">
+      <ds-flex-item :width="{ base: '100%', md: '200px' }">
         <ds-menu
           :routes="routes"
           :is-exact="() => true"
         />
       </ds-flex-item>
-      <ds-flex-item>
+      <ds-flex-item :width="{ base: '100%', md: 1 }">
         <transition
           name="slide-up"
           appear

From e63e34672073b7f67b4e8919a87df031bb4c1877 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 21 Jan 2019 12:57:44 +0100
Subject: [PATCH 57/59] Refactor "Report content" cucumber feature

---
 cypress/integration/05.ReportContent.feature |  73 +++++++-----
 cypress/integration/common/report.js         | 113 ++++++++++++-------
 cypress/integration/common/steps.js          |  33 +++---
 cypress/support/commands.js                  |  14 ++-
 4 files changed, 144 insertions(+), 89 deletions(-)

diff --git a/cypress/integration/05.ReportContent.feature b/cypress/integration/05.ReportContent.feature
index 29509fdcd..fbfdfe8de 100644
--- a/cypress/integration/05.ReportContent.feature
+++ b/cypress/integration/05.ReportContent.feature
@@ -7,40 +7,53 @@ Feature: Report and Moderate
   I would like to see all reported content
   So I can look into it and decide what to do
 
-  Scenario: Report a Post from landingpage
-    Given I am logged in as "user"
-    And I am on the "landing" page
+  Background:
+    Given we have the following posts in our database:
+      | Author       | Title                         | Content           | Slug                          |
+      | David Irving | The Truth about the Holocaust | It never existed! | the-truth-about-the-holocaust |
 
-    When I click on a Post menu and select the report option
-    And I click on send in the confirmation dialog
-    Then I get a success message
-
-  Scenario: See reported content
-    Given I am logged in as "moderator"
-    And I previously reported a post
-
-    When I am on the "moderation" page
-    Then I see my reported post
-
-  Scenario: Report while reading Post
-    Given I am logged in as "admin"
-    And I am viewing a post
-
-    When I report the current post
-    And I visit the "moderation" page
-    Then I see my reported post
+  Scenario Outline: Report a post from various pages
+    Given I am logged in with a "user" role
+    And I see David Irving's post on the <Page>
+    When I click on "Report Contribution" from the triple dot menu of the post
+    And I confirm the reporting dialog because it is a criminal act under German law:
+    """
+    Do you really want to report the contribution "The Truth about the Holocaust"?
+    """
+    Then I see a success message:
+    """
+    Thanks for reporting!
+    """
+    Examples:
+      | Page         |
+      | landing page |
+      | post page    |
 
   Scenario: Report user
-    Given I am logged in as "admin"
-    And I am viewing a post
-
+    Given I am logged in with a "user" role
+    And I see David Irving's post on the post page
     When I click on the author
-    And I report the author
-    And I visit the "moderation" page
-    Then I see my reported user
+    And I click on "Report User" from the triple dot menu in the user info box
+    And I confirm the reporting dialog because he is a holocaust denier:
+    """
+    Do you really want to report the user "David Irving"?
+    """
+    Then I see a success message:
+    """
+    Thanks for reporting!
+    """
+
+  Scenario: Review reported content
+    Given somebody reported the following posts:
+      | Slug                          |
+      | the-truth-about-the-holocaust |
+    And I am logged in with a "moderator" role
+    When I click on the avatar menu in the top right corner
+    And I click on "Moderation"
+    Then I see all the reported posts including the one from above
+    And each list item links to the post page
 
   Scenario: Normal user can't see the moderation page
-    Given I am logged in as "user"
-
-    When I can click on my profile picture in the top right corner
+    Given I am logged in with a "user" role
+    When I click on the avatar menu in the top right corner
     Then I can't see the moderation menu item
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index bbe2916c6..144b18630 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -3,6 +3,9 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 /* global cy  */
 
 let lastReportTitle
+let dummyReportedPostTitle = "Hacker, Freaks und Funktionäre"
+let dummyReportedPostSlug = 'hacker-freaks-und-funktionareder-ccc' 
+let dummyAuthorName = "Jenny Rostock"
 
 const savePostTitle = $post => {
   return $post
@@ -14,46 +17,42 @@ const savePostTitle = $post => {
       lastReportTitle = title
     })
 }
-const invokeReportOnElement = selector => {
-  cy.get(selector)
-    .first()
+
+Given('I see David Irving\'s post on the landing page', (page) => {
+  cy.openPage('landing')
+})
+
+Given('I see David Irving\'s post on the post page', (page) => {
+  cy.visit(`/post/${dummyReportedPostSlug}`)
+  cy.contains(dummyReportedPostTitle) // wait
+})
+
+Given('I am logged in with a {string} role', role => {
+  cy.loginAs(role)
+})
+
+When('I click on "Report Contribution" from the triple dot menu of the post', () => {
+  //TODO: match the created post title, not a dummy post title
+  cy.contains('.ds-card', dummyReportedPostTitle)
     .find('.content-menu-trigger')
     .first()
     .click()
 
-  return savePostTitle(cy.get(selector)).then(() => {
-    cy.get('.popover .ds-menu-item-link')
-      .contains('Report')
-      .click()
-  })
-}
-
-Given('I am logged in as {string}', userType => {
-  cy.loginAs(userType)
-})
-
-Given('I previously reported a post', () => {
-  invokeReportOnElement('.post-card')
-})
-
-Given('I am viewing a post', () => {
-  cy.visit('/')
-  cy.get('.post-card:nth(2)')
+  cy.get('.popover .ds-menu-item-link')
+    .contains('Report Contribution')
     .click()
-    .wait(300)
-  cy.location('pathname').should('contain', '/post')
 })
 
-When('I report the current post', () => {
-  invokeReportOnElement('.post-card').then(() => {
-    cy.get('button')
-      .contains('Send')
-      .click()
-  })
-})
+When('I click on "Report User" from the triple dot menu in the user info box', () => {
+  //TODO: match the created post author, not a dummy author
+  cy.contains('.ds-card', dummyAuthorName)
+    .find('.content-menu-trigger')
+    .first()
+    .click()
 
-When('I click on a Post menu and select the report option', () => {
-  invokeReportOnElement('.post-card')
+  cy.get('.popover .ds-menu-item-link')
+    .contains('Report User')
+    .click()
 })
 
 When('I click on the author', () => {
@@ -83,13 +82,6 @@ Then('I get a success message', () => {
   cy.get('.iziToast-message').contains('Thanks')
 })
 
-Then('I see my reported post', () => {
-  cy.get('table').then(() => {
-    cy.get('tbody tr')
-      .first()
-      .contains(lastReportTitle.trim().slice(0, 20))
-  })
-})
 Then('I see my reported user', () => {
   cy.get('table').then(() => {
     cy.get('tbody tr')
@@ -99,8 +91,45 @@ Then('I see my reported user', () => {
 })
 
 Then(`I can't see the moderation menu item`, () => {
-  cy.get('.avatar-menu').click()
   cy.get('.avatar-menu-popover')
-    .find('a[href="/moderation"]')
-    .should('have.length', 0)
+    .find('a[href="/settings"]', 'Settings')
+    .should('exist') // OK, the dropdown is actually open
+
+  cy.get('.avatar-menu-popover')
+    .find('a[href="/moderation"]', 'Moderation')
+    .should('not.exist')
+})
+
+When(/^I confirm the reporting dialog .*:$/, () => {
+  //TODO: take message from method argument
+  //TODO: match the right post
+  const message = 'Do you really want to report the'
+  cy.contains(message) // wait for element to become visible
+  //TODO: cy.get('.ds-modal').contains(dummyReportedPostTitle)
+  cy.get('.ds-modal').within(() => {
+    cy.get('button')
+      .contains('Send Report')
+      .click()
+  })
+})
+
+Given('somebody reported the following posts:', table => {
+  table.hashes().forEach((row) => {
+    //TODO: calll factory here
+    // const options = Object.assign({}, row, { reported: true })
+    //create('post', options)
+  })
+})
+
+Then('I see all the reported posts including the one from above', () => {
+  //TODO: match the right post
+  cy.get('table tbody').within(() => {
+    cy.contains('tr', dummyReportedPostTitle)
+  })
+})
+
+Then('each list item links to the post page', () => {
+  //TODO: match the right post
+  cy.contains(dummyReportedPostTitle).click()
+  cy.location('pathname').should('contain', '/post')
 })
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index a7c88d74d..6d370a75a 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -4,13 +4,6 @@ import users from '../../fixtures/users.json'
 
 /* global cy  */
 
-const openPage = page => {
-  if (page === 'landing') {
-    page = ''
-  }
-  cy.visit(`/${page}`)
-}
-
 Given('I am logged in', () => {
   cy.loginAs('admin')
 })
@@ -33,10 +26,11 @@ Given('my user account has the role {string}', role => {
 When('I log out', cy.logout)
 
 When('I visit the {string} page', page => {
-  openPage(page)
+  cy.openPage(page)
 })
+
 Given('I am on the {string} page', page => {
-  openPage(page)
+  cy.openPage(page)
 })
 
 When('I fill in my email and password combination and click submit', () => {
@@ -54,11 +48,6 @@ When('I log out through the menu in the top right corner', () => {
     .click()
 })
 
-Then('I can click on my profile picture in the top right corner', () => {
-  cy.get('.avatar-menu').click()
-  cy.get('.avatar-menu-popover')
-})
-
 Then('I can see my name {string} in the dropdown menu', () => {
   cy.get('.avatar-menu-popover').should('contain', users.admin.name)
 })
@@ -94,3 +83,19 @@ When(`I click on {string}`, linkOrButton => {
 When('I press {string}', label => {
   cy.contains(label).click()
 })
+
+Given('we have the following posts in our database:', table => {
+  table.hashes().forEach((row) => {
+    //TODO: calll factory here
+    //create('post', row)
+  })
+})
+
+
+Then('I see a success message:', (message) => {
+  cy.contains(message)
+})
+
+When('I click on the avatar menu in the top right corner', () => {
+  cy.get('.avatar-menu').click()
+})
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index a747644de..3d91979bd 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -56,9 +56,9 @@ Cypress.Commands.add('login', (email, password) => {
   cy.location('pathname').should('eq', '/') // we're in!
 })
 
-Cypress.Commands.add('loginAs', userType => {
-  userType = userType || 'admin'
-  cy.login(users[userType].email, users[userType].password)
+Cypress.Commands.add('loginAs', role => {
+  role = role || 'admin'
+  cy.login(users[role].email, users[role].password)
 })
 
 Cypress.Commands.add('logout', (email, password) => {
@@ -66,6 +66,14 @@ Cypress.Commands.add('logout', (email, password) => {
   cy.location('pathname').should('contain', '/login') // we're out
 })
 
+Cypress.Commands.add('openPage', (page) =>  {
+  if (page === 'landing') {
+    page = ''
+  }
+  cy.visit(`/${page}`)
+})
+
+
 //
 //
 // -- This is a child command --

From 6efa2b01c9d467c881b4fb3190112a0deeded687 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 21 Jan 2019 15:16:13 +0100
Subject: [PATCH 58/59] Fix eslint

---
 cypress/integration/common/report.js | 58 +++++++++++++++-------------
 cypress/integration/common/steps.js  |  5 +--
 cypress/support/commands.js          |  3 +-
 cypress/support/helpers.js           |  1 -
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 144b18630..3c546f0f5 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -3,9 +3,9 @@ import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 /* global cy  */
 
 let lastReportTitle
-let dummyReportedPostTitle = "Hacker, Freaks und Funktionäre"
-let dummyReportedPostSlug = 'hacker-freaks-und-funktionareder-ccc' 
-let dummyAuthorName = "Jenny Rostock"
+let dummyReportedPostTitle = 'Hacker, Freaks und Funktionäre'
+let dummyReportedPostSlug = 'hacker-freaks-und-funktionareder-ccc'
+let dummyAuthorName = 'Jenny Rostock'
 
 const savePostTitle = $post => {
   return $post
@@ -18,11 +18,11 @@ const savePostTitle = $post => {
     })
 }
 
-Given('I see David Irving\'s post on the landing page', (page) => {
+Given("I see David Irving's post on the landing page", page => {
   cy.openPage('landing')
 })
 
-Given('I see David Irving\'s post on the post page', (page) => {
+Given("I see David Irving's post on the post page", page => {
   cy.visit(`/post/${dummyReportedPostSlug}`)
   cy.contains(dummyReportedPostTitle) // wait
 })
@@ -31,29 +31,35 @@ Given('I am logged in with a {string} role', role => {
   cy.loginAs(role)
 })
 
-When('I click on "Report Contribution" from the triple dot menu of the post', () => {
-  //TODO: match the created post title, not a dummy post title
-  cy.contains('.ds-card', dummyReportedPostTitle)
-    .find('.content-menu-trigger')
-    .first()
-    .click()
+When(
+  'I click on "Report Contribution" from the triple dot menu of the post',
+  () => {
+    //TODO: match the created post title, not a dummy post title
+    cy.contains('.ds-card', dummyReportedPostTitle)
+      .find('.content-menu-trigger')
+      .first()
+      .click()
 
-  cy.get('.popover .ds-menu-item-link')
-    .contains('Report Contribution')
-    .click()
-})
+    cy.get('.popover .ds-menu-item-link')
+      .contains('Report Contribution')
+      .click()
+  }
+)
 
-When('I click on "Report User" from the triple dot menu in the user info box', () => {
-  //TODO: match the created post author, not a dummy author
-  cy.contains('.ds-card', dummyAuthorName)
-    .find('.content-menu-trigger')
-    .first()
-    .click()
+When(
+  'I click on "Report User" from the triple dot menu in the user info box',
+  () => {
+    //TODO: match the created post author, not a dummy author
+    cy.contains('.ds-card', dummyAuthorName)
+      .find('.content-menu-trigger')
+      .first()
+      .click()
 
-  cy.get('.popover .ds-menu-item-link')
-    .contains('Report User')
-    .click()
-})
+    cy.get('.popover .ds-menu-item-link')
+      .contains('Report User')
+      .click()
+  }
+)
 
 When('I click on the author', () => {
   cy.get('a.author')
@@ -114,7 +120,7 @@ When(/^I confirm the reporting dialog .*:$/, () => {
 })
 
 Given('somebody reported the following posts:', table => {
-  table.hashes().forEach((row) => {
+  table.hashes().forEach(row => {
     //TODO: calll factory here
     // const options = Object.assign({}, row, { reported: true })
     //create('post', options)
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 6d370a75a..e34a06a31 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -85,14 +85,13 @@ When('I press {string}', label => {
 })
 
 Given('we have the following posts in our database:', table => {
-  table.hashes().forEach((row) => {
+  table.hashes().forEach(row => {
     //TODO: calll factory here
     //create('post', row)
   })
 })
 
-
-Then('I see a success message:', (message) => {
+Then('I see a success message:', message => {
   cy.contains(message)
 })
 
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 3d91979bd..ebbd6acd1 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -66,14 +66,13 @@ Cypress.Commands.add('logout', (email, password) => {
   cy.location('pathname').should('contain', '/login') // we're out
 })
 
-Cypress.Commands.add('openPage', (page) =>  {
+Cypress.Commands.add('openPage', page => {
   if (page === 'landing') {
     page = ''
   }
   cy.visit(`/${page}`)
 })
 
-
 //
 //
 // -- This is a child command --
diff --git a/cypress/support/helpers.js b/cypress/support/helpers.js
index 661682139..1aed57de1 100644
--- a/cypress/support/helpers.js
+++ b/cypress/support/helpers.js
@@ -1,4 +1,3 @@
-
 import find from 'lodash/find'
 
 const helpers = {

From fb182643874be6b5858b08c525fbc9165329a788 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Mon, 21 Jan 2019 15:46:38 +0100
Subject: [PATCH 59/59] Re-add step definition of unrelated cucumber

---
 cypress/integration/common/steps.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index e34a06a31..cd4280578 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -56,6 +56,11 @@ Then('I see the login screen again', () => {
   cy.location('pathname').should('contain', '/login')
 })
 
+Then('I can click on my profile picture in the top right corner', () => {
+  cy.get('.avatar-menu').click()
+  cy.get('.avatar-menu-popover')
+})
+
 Then('I am still logged in', () => {
   cy.get('.avatar-menu').click()
   cy.get('.avatar-menu-popover').contains(users.admin.name)