From 3eb96a20b208ab0e8501371a5f85369f9ea849ad Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 17 Apr 2019 15:21:08 +0200
Subject: [PATCH] lint fixes

---
 webapp/components/User/index.vue   |  73 +++++++++++----
 webapp/layouts/default.vue         |  59 +++++++++---
 webapp/pages/profile/_id/_slug.vue | 146 +++++++++++++++++++++++------
 webapp/pages/settings/index.vue    |   9 +-
 4 files changed, 225 insertions(+), 62 deletions(-)

diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue
index 2a3904763..ab7b94db6 100644
--- a/webapp/components/User/index.vue
+++ b/webapp/components/User/index.vue
@@ -3,16 +3,36 @@
     <div
       style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
     >
-      <ds-avatar style="display: inline-block; vertical-align: middle;" size="32px"/>
+      <ds-avatar
+        style="display: inline-block; vertical-align: middle;"
+        size="32px"
+      />
     </div>
     <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
+      <b
+        class="username"
+        style="vertical-align: middle;"
+      >{{ $t('profile.userAnonym') }}</b>
     </div>
   </div>
-  <dropdown v-else :class="{'disabled-content': user.disabled}" placement="top-start" offset="0">
-    <template slot="default" slot-scope="{openMenu, closeMenu, isOpen}">
-      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
-        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
+  <dropdown
+    v-else
+    :class="{'disabled-content': user.disabled}"
+    placement="top-start"
+    offset="0"
+  >
+    <template
+      slot="default"
+      slot-scope="{openMenu, closeMenu, isOpen}"
+    >
+      <nuxt-link
+        :to="userLink"
+        :class="['user', isOpen && 'active']"
+      >
+        <div
+          @mouseover="openMenu(true)"
+          @mouseleave="closeMenu(true)"
+        >
           <div
             style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
           >
@@ -24,14 +44,24 @@
             />
           </div>
           <div style="display: inline-block; height: 100%; vertical-align: middle;">
-            <b class="username" style="vertical-align: middle;">{{ userName(18) }}</b>
+            <b
+              class="username"
+              style="vertical-align: middle;"
+            >{{ userName(18) }}</b>
           </div>
           <!-- Time -->
-          <div v-if="dateTime" style="display: inline;">
-            <ds-text align="right" size="small" color="soft">
-              <ds-icon name="clock"/>
+          <div
+            v-if="dateTime"
+            style="display: inline;"
+          >
+            <ds-text
+              align="right"
+              size="small"
+              color="soft"
+            >
+              <ds-icon name="clock" />
               <no-ssr>
-                <hc-relative-date-time :date-time="dateTime"/>
+                <hc-relative-date-time :date-time="dateTime" />
               </no-ssr>
             </ds-text>
           </div>
@@ -40,7 +70,10 @@
     </template>
     <template slot="popover">
       <div style="min-width: 250px">
-        <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges"/>
+        <hc-badges
+          v-if="user.badges && user.badges.length"
+          :badges="user.badges"
+        />
         <ds-text
           v-if="user.location"
           align="center"
@@ -49,13 +82,17 @@
           style="margin-top: 5px"
           bold
         >
-          <ds-icon name="map-marker"/>
+          <ds-icon name="map-marker" />
           {{ user.location.name }}
         </ds-text>
         <ds-flex style="margin-top: -10px">
           <ds-flex-item class="ds-tab-nav-item">
             <ds-space margin="small">
-              <ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large"/>
+              <ds-number
+                :count="fanCount"
+                :label="$t('profile.followers')"
+                size="x-large"
+              />
             </ds-space>
           </ds-flex-item>
           <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@@ -75,7 +112,11 @@
             </ds-space>
           </ds-flex-item>
         </ds-flex>
-        <ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
+        <ds-flex
+          v-if="!itsMe"
+          gutter="x-small"
+          style="margin-bottom: 0;"
+        >
           <ds-flex-item :width="{base: 3}">
             <hc-follow-button
               :follow-id="user.id"
@@ -86,7 +127,7 @@
           </ds-flex-item>
           <ds-flex-item :width="{base: 1}">
             <ds-button fullwidth>
-              <ds-icon name="user-times"/>
+              <ds-icon name="user-times" />
             </ds-button>
           </ds-flex-item>
         </ds-flex>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index b513291e0..b2ed8039f 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -3,8 +3,12 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container">
         <div class="main-navigation-left">
-          <a v-router-link style="display: inline-flex" href="/">
-            <ds-logo/>
+          <a
+            v-router-link
+            style="display: inline-flex"
+            href="/"
+          >
+            <ds-logo />
           </a>
         </div>
         <div class="main-navigation-center hc-navbar-search">
@@ -20,22 +24,39 @@
         </div>
         <div class="main-navigation-right">
           <no-ssr>
-            <locale-switch class="topbar-locale-switch" placement="bottom" offset="23"/>
+            <locale-switch
+              class="topbar-locale-switch"
+              placement="bottom"
+              offset="23"
+            />
           </no-ssr>
           <template v-if="isLoggedIn">
             <no-ssr>
               <dropdown class="avatar-menu">
-                <template slot="default" slot-scope="{toggleMenu}">
+                <template
+                  slot="default"
+                  slot-scope="{toggleMenu}"
+                >
                   <a
                     class="avatar-menu-trigger"
                     :href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
                     @click.prevent="toggleMenu"
                   >
-                    <ds-avatar :image="user.avatar" :name="user.name" size="42"/>
-                    <ds-icon size="xx-small" name="angle-down"/>
+                    <ds-avatar
+                      :image="user.avatar"
+                      :name="user.name"
+                      size="42"
+                    />
+                    <ds-icon
+                      size="xx-small"
+                      name="angle-down"
+                    />
                   </a>
                 </template>
-                <template slot="popover" slot-scope="{closeMenu}">
+                <template
+                  slot="popover"
+                  slot-scope="{closeMenu}"
+                >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }}
                     <b>{{ userName() }}</b>
@@ -44,10 +65,15 @@
                         color="softer"
                         size="small"
                         style="margin-bottom: 0"
-                      >{{ user.role | camelCase }}</ds-text>
+                      >
+                        {{ user.role | camelCase }}
+                      </ds-text>
                     </template>
                     <hr>
-                    <ds-menu :routes="routes" :matcher="matcher">
+                    <ds-menu
+                      :routes="routes"
+                      :matcher="matcher"
+                    >
                       <ds-menu-item
                         slot="menuitem"
                         slot-scope="item"
@@ -55,13 +81,16 @@
                         :parents="item.parents"
                         @click.native="closeMenu(false)"
                       >
-                        <ds-icon :name="item.route.icon"/>
+                        <ds-icon :name="item.route.icon" />
                         {{ item.route.name }}
                       </ds-menu-item>
                     </ds-menu>
                     <hr>
-                    <nuxt-link class="logout-link" :to="{ name: 'logout'}">
-                      <ds-icon name="sign-out"/>
+                    <nuxt-link
+                      class="logout-link"
+                      :to="{ name: 'logout'}"
+                    >
+                      <ds-icon name="sign-out" />
                       {{ $t('login.logout') }}
                     </nuxt-link>
                   </div>
@@ -74,12 +103,12 @@
     </div>
     <ds-container>
       <div style="padding: 6rem 2rem 5rem;">
-        <nuxt/>
+        <nuxt />
       </div>
     </ds-container>
-    <div id="overlay"/>
+    <div id="overlay" />
     <no-ssr>
-      <modal/>
+      <modal />
     </no-ssr>
   </div>
 </template>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 0c14cfa19..7ea0e1b3b 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -3,14 +3,23 @@
     <ds-card v-if="user && user.image">
       <p>PROFILE IMAGE</p>
     </ds-card>
-    <ds-space/>
-    <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
+    <ds-space />
+    <ds-flex
+      v-if="user"
+      :width="{ base: '100%' }"
+      gutter="base"
+    >
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
         <ds-card
           :class="{'disabled-content': user.disabled}"
           style="position: relative; height: auto;"
         >
-          <ds-avatar :image="user.avatar" :name="userName()" class="profile-avatar" size="120px"/>
+          <ds-avatar
+            :image="user.avatar"
+            :name="userName()"
+            class="profile-avatar"
+            size="120px"
+          />
           <no-ssr>
             <content-menu
               placement="bottom-end"
@@ -40,7 +49,9 @@
               align="center"
               color="soft"
               size="small"
-            >{{ $t('profile.memberSince') }} {{ user.createdAt | date('MMMM yyyy') }}</ds-text>
+            >
+              {{ $t('profile.memberSince') }} {{ user.createdAt | date('MMMM yyyy') }}
+            </ds-text>
           </ds-space>
           <ds-space
             v-if="user.badges && user.badges.length"
@@ -52,14 +63,20 @@
             <ds-flex-item>
               <no-ssr>
                 <ds-number :label="$t('profile.followers')">
-                  <hc-count-to slot="count" :end-val="followedByCount"/>
+                  <hc-count-to
+                    slot="count"
+                    :end-val="followedByCount"
+                  />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
             <ds-flex-item>
               <no-ssr>
                 <ds-number :label="$t('profile.following')">
-                  <hc-count-to slot="count" :end-val="Number(user.followingCount) || 0"/>
+                  <hc-count-to
+                    slot="count"
+                    :end-val="Number(user.followingCount) || 0"
+                  />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
@@ -75,56 +92,114 @@
           </ds-space>
           <template v-if="user.about">
             <hr>
-            <ds-space margin-top="small" margin-bottom="small">
-              <ds-text color="soft" size="small">{{ user.about }}</ds-text>
+            <ds-space
+              margin-top="small"
+              margin-bottom="small"
+            >
+              <ds-text
+                color="soft"
+                size="small"
+              >
+                {{ user.about }}
+              </ds-text>
             </ds-space>
           </template>
         </ds-card>
-        <ds-space/>
-        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">Netzwerk</ds-heading>
+        <ds-space />
+        <ds-heading
+          tag="h3"
+          soft
+          style="text-align: center; margin-bottom: 10px;"
+        >
+          Netzwerk
+        </ds-heading>
         <ds-card style="position: relative; height: auto;">
-          <ds-space v-if="user.following && user.following.length" margin="x-small">
-            <ds-text tag="h5" color="soft">Wem folgt {{ userName(15) }}?</ds-text>
+          <ds-space
+            v-if="user.following && user.following.length"
+            margin="x-small"
+          >
+            <ds-text
+              tag="h5"
+              color="soft"
+            >
+              Wem folgt {{ userName(15) }}?
+            </ds-text>
           </ds-space>
           <template v-if="user.following && user.following.length">
-            <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
+            <ds-space
+              v-for="follow in uniq(user.following)"
+              :key="follow.id"
+              margin="x-small"
+            >
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
-                <user :user="follow" :trunc="15"/>
+                <user
+                  :user="follow"
+                  :trunc="15"
+                />
               </no-ssr>
             </ds-space>
-            <ds-space v-if="user.followingCount - user.following.length" margin="small">
+            <ds-space
+              v-if="user.followingCount - user.following.length"
+              margin="small"
+            >
               <ds-text
                 size="small"
                 color="softer"
-              >und {{ user.followingCount - user.following.length }} weitere</ds-text>
+              >
+                und {{ user.followingCount - user.following.length }} weitere
+              </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">{{ userName() }} folgt niemandem</p>
+            <p style="text-align: center; opacity: .5;">
+              {{ userName() }} folgt niemandem
+            </p>
           </template>
         </ds-card>
-        <ds-space/>
+        <ds-space />
         <ds-card style="position: relative; height: auto;">
-          <ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
-            <ds-text tag="h5" color="soft">Wer folgt {{ userName(15) }}?</ds-text>
+          <ds-space
+            v-if="user.followedBy && user.followedBy.length"
+            margin="x-small"
+          >
+            <ds-text
+              tag="h5"
+              color="soft"
+            >
+              Wer folgt {{ userName(15) }}?
+            </ds-text>
           </ds-space>
           <template v-if="user.followedBy && user.followedBy.length">
-            <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
+            <ds-space
+              v-for="follow in uniq(user.followedBy)"
+              :key="follow.id"
+              margin="x-small"
+            >
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
-                <user :user="follow" :trunc="15"/>
+                <user
+                  :user="follow"
+                  :trunc="15"
+                />
               </no-ssr>
             </ds-space>
-            <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
+            <ds-space
+              v-if="user.followedByCount - user.followedBy.length"
+              margin="small"
+            >
               <ds-text
                 size="small"
                 color="softer"
-              >und {{ user.followedByCount - user.followedBy.length }} weitere</ds-text>
+              >
+                und {{ user.followedByCount - user.followedBy.length }} weitere
+              </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">niemand folgt {{ userName() }}</p>
+            <p style="text-align: center; opacity: .5;">
+              niemand folgt {{ userName() }}
+            </p>
           </template>
         </ds-card>
         <ds-space 
@@ -160,7 +235,10 @@
         </ds-space>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-        <ds-flex :width="{ base: '100%' }" gutter="small">
+        <ds-flex
+          :width="{ base: '100%' }"
+          gutter="small"
+        >
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
               <ds-flex>
@@ -169,7 +247,10 @@
                     <!-- TODO: find better solution for rendering errors -->
                     <no-ssr>
                       <ds-number :label="$t('common.post', null, user.contributionsCount)">
-                        <hc-count-to slot="count" :end-val="user.contributionsCount"/>
+                        <hc-count-to
+                          slot="count"
+                          :end-val="user.contributionsCount"
+                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -221,11 +302,18 @@
           </template>
           <template v-else>
             <ds-flex-item :width="{ base: '100%' }">
-              <hc-empty margin="xx-large" icon="file"/>
+              <hc-empty
+                margin="xx-large"
+                icon="file"
+              />
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions"/>
+        <hc-load-more
+          v-if="hasMore"
+          :loading="$apollo.loading"
+          @click="showMoreContributions"
+        />
       </ds-flex-item>
     </ds-flex>
   </div>
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index b73e830d0..a3b2298c3 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <ds-form v-model="form" @submit="submit">
+  <ds-form
+    v-model="form"
+    @submit="submit"
+  >
     <ds-card :header="$t('settings.data.name')">
       <ds-input
         id="name"
@@ -35,7 +38,9 @@
           type="submit"
           :loading="loadingData"
           primary
-        >{{ $t('actions.save') }}</ds-button>
+        >
+          {{ $t('actions.save') }}
+        </ds-button>
       </template>
     </ds-card>
   </ds-form>