From 8f365a60ceffbfe421dd1a1866acd0f2721cc51f Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Wed, 23 Oct 2019 14:07:41 +0200
Subject: [PATCH] Hide shout count on user profile unless my profile

- we were asked to hide the shouts from other users by Dennis Hack, he
believes people will be more likely to shout a post if it is anonymous.
This only works from our UI to our backend... further steps would need
to be taken to truly make it anonymous. Also, we were asked to implement
it in such a way as to give the user the choice to show their shouts to
others.

Co-authored-by: Alina Beck <alina.beck@mail.com>
---
 webapp/pages/profile/_id/_slug.vue | 50 +++++++++---------------------
 1 file changed, 15 insertions(+), 35 deletions(-)

diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index d56aec446..8c6741f82 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -172,7 +172,7 @@
           <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
             <ds-card class="ds-tab-nav">
               <ul class="Tabs">
-                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
+                <li class="Tabs__tab pointer" :class="{ active: tabActive === 'post' }">
                   <a @click="handleTab('post')">
                     <ds-space margin="small">
                       <client-only placeholder="Loading...">
@@ -183,7 +183,7 @@
                     </ds-space>
                   </a>
                 </li>
-                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }">
+                <li class="Tabs__tab pointer" :class="{ active: tabActive === 'comment' }">
                   <a @click="handleTab('comment')">
                     <ds-space margin="small">
                       <client-only placeholder="Loading...">
@@ -194,7 +194,11 @@
                     </ds-space>
                   </a>
                 </li>
-                <li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }">
+                <li
+                  class="Tabs__tab pointer"
+                  :class="{ active: tabActive === 'shout' }"
+                  v-if="myProfile"
+                >
                   <a @click="handleTab('shout')">
                     <ds-space margin="small">
                       <client-only placeholder="Loading...">
@@ -205,7 +209,6 @@
                     </ds-space>
                   </a>
                 </li>
-                <li class="Tabs__presentation-slider" role="presentation"></li>
               </ul>
             </ds-card>
           </ds-grid-item>
@@ -501,51 +504,28 @@ export default {
 .pointer {
   cursor: pointer;
 }
-.Tab {
-  border-collapse: collapse;
-  padding-bottom: 5px;
-}
-.Tab:hover {
-  border-bottom: 2px solid #c9c6ce;
-}
+
 .Tabs {
   position: relative;
   background-color: #fff;
   height: 100%;
-
-  &:after {
-    content: ' ';
-    display: table;
-    clear: both;
-  }
+  display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
 
   &__tab {
-    float: left;
-    width: 33.333%;
     text-align: center;
     height: 100%;
+    flex-grow: 1;
 
-    &:first-child.active ~ .Tabs__presentation-slider {
-      left: 0;
+    &:hover {
+      border-bottom: 2px solid #c9c6ce;
     }
-    &:nth-child(2).active ~ .Tabs__presentation-slider {
-      left: 33.333%;
+
+    &.active {
+      border-bottom: 2px solid #17b53f;
     }
-    &:nth-child(3).active ~ .Tabs__presentation-slider {
-      left: calc(33.333% * 2);
-    }
-  }
-  &__presentation-slider {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 33.333%;
-    height: 2px;
-    background-color: #17b53f;
-    transition: left 0.25s;
   }
 }
 .profile-avatar.ds-avatar {