hide all unfunctional content - fixes https://github.com/Human-Connection/Human-Connection/issues/429

webapp/pages/admin.vue

@@ -1,20 +1,12 @@
 <template>
   <div>
-    <ds-heading tag="h1">
+    <ds-heading tag="h1">{{ $t('admin.name') }}</ds-heading>
-      {{ $t('admin.name') }}
-    </ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-menu
+        <ds-menu :routes="routes" :is-exact="() => true"/>
-          :routes="routes"
-          :is-exact="() => true"
-        />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-        <transition
+        <transition name="slide-up" appear>
-          name="slide-up"
-          appear
-        >
           <nuxt-child/>
         </transition>
       </ds-flex-item>
@@ -32,22 +24,26 @@ export default {
           name: this.$t('admin.dashboard.name'),
           path: `/admin`
         },
-        {
+        // TODO implement
+        /* {
           name: this.$t('admin.users.name'),
           path: `/admin/users`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('admin.organizations.name'),
           path: `/admin/organizations`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('admin.pages.name'),
           path: `/admin/pages`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('admin.notifications.name'),
           path: `/admin/notifications`
-        },
+        }, */
         {
           name: this.$t('admin.categories.name'),
           path: `/admin/categories`
@@ -55,11 +51,12 @@ export default {
         {
           name: this.$t('admin.tags.name'),
           path: `/admin/tags`
-        },
+        }
-        {
+        // TODO implement
+        /* {
           name: this.$t('admin.settings.name'),
           path: `/admin/settings`
-        }
+        } */
       ]
     }
   }

webapp/pages/post/_id.vue

@@ -2,10 +2,7 @@
   <div>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <transition
+        <transition name="slide-up" appear>
-          name="slide-up"
-          appear
-        >
           <nuxt-child/>
         </transition>
       </ds-flex-item>
@@ -55,25 +52,28 @@ export default {
             {
               name: this.$t('common.comment', null, 2),
               path: `/post/${id}/${slug}#comments`
-            },
+            }
-            {
+            // TODO implement
+            /* {
               name: this.$t('common.letsTalk'),
               path: `/post/${id}/${slug}#lets-talk`
-            },
+            }, */
-            {
+            // TODO implement
+            /* {
               name: this.$t('common.versus'),
               path: `/post/${id}/${slug}#versus`
-            }
+            } */
           ]
         },
         {
           name: this.$t('common.moreInfo'),
           path: `/post/${id}/${slug}/more-info`
-        },
+        }
-        {
+        // TODO implement
+        /* {
           name: this.$t('common.takeAction'),
           path: `/post/${id}/${slug}/take-action`
-        }
+        } */
       ]
     }
   }

webapp/pages/post/_id/_slug/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <transition
+  <transition name="fade" appear>
-    name="fade"
-    appear
-  >
     <ds-card
       v-if="post && ready"
       :image="post.image"
@@ -22,19 +19,14 @@
       <!-- Content -->
       <!-- eslint-disable vue/no-v-html -->
       <!-- TODO: replace editor content with tiptap render view -->
-      <div
+      <div class="content hc-editor-content" v-html="post.content"/>
-        class="content hc-editor-content"
-        v-html="post.content"
-      />
       <ds-space>
         <ds-text
           v-if="post.createdAt"
           align="right"
           size="small"
           color="soft"
-        >
+        >{{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}</ds-text>
-          {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
-        </ds-text>
       </ds-space>
       <!-- eslint-enable vue/no-v-html -->
       <!-- Shout Button -->
@@ -67,11 +59,10 @@
       <template v-if="post.tags && post.tags.length">
         <ds-space margin="xx-small"/>
         <div class="tags">
-          <ds-icon name="tags" /> <ds-tag
+          <ds-icon name="tags"/>
-            v-for="tag in post.tags"
+          <ds-tag v-for="tag in post.tags" :key="tag.id">
-            :key="tag.id"
+            <ds-icon name="tag"/>
-          >
+            {{ tag.name }}
-            <ds-icon name="tag" /> {{ tag.name }}
           </ds-tag>
         </div>
       </template>
@@ -87,27 +78,14 @@
               color="primary"
               size="small"
               round
-            >
+            >{{ post.commentsCount }}</ds-tag>&nbsp; Comments
-              {{ post.commentsCount }}
-            </ds-tag> &nbsp; Comments
           </span>
         </h3>
         <ds-space margin-bottom="large"/>
-        <div
+        <div v-if="post.comments" id="comments" class="comments">
-          v-if="post.comments"
+          <comment v-for="comment in post.comments" :key="comment.id" :comment="comment"/>
-          id="comments"
-          class="comments"
-        >
-          <comment
-            v-for="comment in post.comments"
-            :key="comment.id"
-            :comment="comment"
-          />
         </div>
-        <hc-empty
+        <hc-empty v-else icon="messages"/>
-          v-else
-          icon="messages"
-        />
       </ds-section>
     </ds-card>
   </transition>

webapp/pages/profile/_id/_slug.vue

@@ -4,11 +4,7 @@
       <p>PROFILE IMAGE</p>
     </ds-card>
     <ds-space/>
-    <ds-flex
+    <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
-      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}"
@@ -29,62 +25,37 @@
             />
           </no-ssr>
           <ds-space margin="small">
-            <ds-heading
+            <ds-heading tag="h3" align="center" no-margin>{{ user.name }}</ds-heading>
-              tag="h3"
+            <ds-text v-if="user.location" align="center" color="soft" size="small">
-              align="center"
+              <ds-icon name="map-marker"/>
-              no-margin
+              {{ user.location.name }}
-            >
-              {{ user.name }}
-            </ds-heading>
-            <ds-text
-              v-if="user.location"
-              align="center"
-              color="soft"
-              size="small"
-            >
-              <ds-icon name="map-marker" /> {{ user.location.name }}
             </ds-text>
             <ds-text
               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
+          <ds-space v-if="user.badges && user.badges.length" margin="x-small">
-            v-if="user.badges && user.badges.length"
+            <hc-badges :badges="user.badges"/>
-            margin="x-small"
-          >
-            <hc-badges
-              :badges="user.badges"
-            />
           </ds-space>
           <ds-flex>
             <ds-flex-item>
               <no-ssr>
                 <ds-number :label="$t('profile.followers')">
-                  <hc-count-to
+                  <hc-count-to slot="count" :end-val="followedByCount"/>
-                    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
+                  <hc-count-to slot="count" :end-val="Number(user.followingCount) || 0"/>
-                    slot="count"
-                    :end-val="Number(user.followingCount) || 0"
-                  />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
           </ds-flex>
-          <ds-space
+          <ds-space margin="small">
-            margin="small"
-          >
             <hc-follow-button
               v-if="!myProfile"
               :follow-id="user.id"
@@ -95,122 +66,61 @@
           </ds-space>
           <template v-if="user.about">
             <hr>
-            <ds-space
+            <ds-space margin-top="small" margin-bottom="small">
-              margin-top="small"
+              <ds-text color="soft" size="small">{{ user.about }}</ds-text>
-              margin-bottom="small"
-            >
-              <ds-text
-                color="soft"
-                size="small"
-              >
-                {{ user.about }}
-              </ds-text>
             </ds-space>
           </template>
         </ds-card>
         <ds-space/>
-        <ds-heading
+        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">Netzwerk</ds-heading>
-          tag="h3"
-          soft
-          style="text-align: center; margin-bottom: 10px;"
-        >
-          Netzwerk
-        </ds-heading>
         <ds-card style="position: relative; height: auto;">
-          <ds-space
+          <ds-space v-if="user.following && user.following.length" margin="x-small">
-            v-if="user.following && user.following.length"
+            <ds-text tag="h5" color="soft">Wem folgt {{ user.name | truncate(15) }}?</ds-text>
-            margin="x-small"
-          >
-            <ds-text
-              tag="h5"
-              color="soft"
-            >
-              Wem folgt {{ user.name | truncate(15) }}?
-            </ds-text>
           </ds-space>
           <template v-if="user.following && user.following.length">
-            <ds-space
+            <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
-              v-for="follow in uniq(user.following)"
-              :key="follow.id"
-              margin="x-small"
-            >
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
-                <user
+                <user :user="follow" :trunc="15"/>
-                  :user="follow"
-                  :trunc="15"
-                />
               </no-ssr>
             </ds-space>
-            <ds-space
+            <ds-space v-if="user.followingCount - user.following.length" margin="small">
-              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;">
+            <p style="text-align: center; opacity: .5;">{{ user.name }} folgt niemandem</p>
-              {{ user.name }} folgt niemandem
-            </p>
           </template>
         </ds-card>
         <ds-space/>
         <ds-card style="position: relative; height: auto;">
-          <ds-space
+          <ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
-            v-if="user.followedBy && user.followedBy.length"
+            <ds-text tag="h5" color="soft">Wer folgt {{ user.name | truncate(15) }}?</ds-text>
-            margin="x-small"
-          >
-            <ds-text
-              tag="h5"
-              color="soft"
-            >
-              Wer folgt {{ user.name | truncate(15) }}?
-            </ds-text>
           </ds-space>
           <template v-if="user.followedBy && user.followedBy.length">
-            <ds-space
+            <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
-              v-for="follow in uniq(user.followedBy)"
-              :key="follow.id"
-              margin="x-small"
-            >
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
-                <user
+                <user :user="follow" :trunc="15"/>
-                  :user="follow"
-                  :trunc="15"
-                />
               </no-ssr>
             </ds-space>
-            <ds-space
+            <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
-              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;">
+            <p style="text-align: center; opacity: .5;">niemand folgt {{ user.name }}</p>
-              niemand folgt {{ user.name }}
-            </p>
           </template>
         </ds-card>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-        <ds-flex
+        <ds-flex :width="{ base: '100%' }" gutter="small">
-          :width="{ base: '100%' }"
-          gutter="small"
-        >
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
               <ds-flex>
@@ -219,40 +129,33 @@
                     <!-- TODO: find better solution for rendering errors -->
                     <no-ssr>
                       <ds-number :label="$t('common.post', null, user.contributionsCount)">
-                        <hc-count-to
+                        <hc-count-to slot="count" :end-val="user.contributionsCount"/>
-                          slot="count"
-                          :end-val="user.contributionsCount"
-                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
                 </ds-flex-item>
-                <ds-flex-item class="ds-tab-nav-item">
+                <!--<ds-flex-item class="ds-tab-nav-item">
-                  <ds-space margin="small">
+                <ds-space margin="small">-->
                 <!-- TODO: find better solution for rendering errors -->
+                <!--
                     <no-ssr>
                       <ds-number :label="$t('profile.commented')">
-                        <hc-count-to
+                        <hc-count-to slot="count" :end-val="user.commentsCount"/>
-                          slot="count"
-                          :end-val="user.commentsCount"
-                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
                 </ds-flex-item>
-                <ds-flex-item class="ds-tab-nav-item">
+                -->
-                  <ds-space margin="small">
+                <!--<ds-flex-item class="ds-tab-nav-item">
+                <ds-space margin="small">-->
                 <!-- TODO: find better solution for rendering errors -->
-                    <no-ssr>
+                <!--<no-ssr>
                       <ds-number :label="$t('profile.shouted')">
-                        <hc-count-to
+                        <hc-count-to slot="count" :end-val="user.shoutedCount"/>
-                          slot="count"
-                          :end-val="user.shoutedCount"
-                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
-                </ds-flex-item>
+                </ds-flex-item>-->
               </ds-flex>
             </ds-card>
           </ds-flex-item>
@@ -273,25 +176,16 @@
               :key="post.id"
               :width="{ base: '100%', md: '100%', xl: '50%' }"
             >
-              <hc-post-card
+              <hc-post-card :post="post"/>
-                :post="post"
-              />
             </ds-flex-item>
           </template>
           <template v-else>
             <ds-flex-item :width="{ base: '100%' }">
-              <hc-empty
+              <hc-empty margin="xx-large" icon="file"/>
-                margin="xx-large"
-                icon="file"
-              />
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more
+        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions"/>
-          v-if="hasMore"
-          :loading="$apollo.loading"
-          @click="showMoreContributions"
-        />
       </ds-flex-item>
     </ds-flex>
   </div>

webapp/pages/settings.vue

@@ -1,20 +1,12 @@
 <template>
   <div>
-    <ds-heading tag="h1">
+    <ds-heading tag="h1">{{ $t('settings.name') }}</ds-heading>
-      {{ $t('settings.name') }}
-    </ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-menu
+        <ds-menu :routes="routes" :is-exact="() => true"/>
-          :routes="routes"
-          :is-exact="() => true"
-        />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-        <transition
+        <transition name="slide-up" appear>
-          name="slide-up"
-          appear
-        >
           <nuxt-child/>
         </transition>
       </ds-flex-item>
@@ -34,27 +26,32 @@ export default {
         {
           name: this.$t('settings.security.name'),
           path: `/settings/security`
-        },
+        }
-        {
+        // TODO implement
+        /* {
           name: this.$t('settings.invites.name'),
           path: `/settings/invites`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('settings.download.name'),
           path: `/settings/data-download`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('settings.delete.name'),
           path: `/settings/delete-account`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('settings.organizations.name'),
           path: `/settings/my-organizations`
-        },
+        }, */
-        {
+        // TODO implement
+        /* {
           name: this.$t('settings.languages.name'),
           path: `/settings/languages`
-        }
+        } */
       ]
     }
   }