refactor(profiles): remove email feature

also still more visual cleanup of profile modal

website/client/src/components/memberDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="member-details"
-    :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }"
+    class="member-details d-flex"
+    :class="{ condensed, expanded }"
     @click="showMemberModal(member)"
   >
-    <div class="avatar-container" :class="{ 'col-4': !isHeader }">
+    <div class="avatar-container">
       <avatar
         :member="member"
         :hide-class-badge="classBadgePosition !== 'under-avatar'"
@@ -15,14 +15,17 @@
     </div>
     <div
       class="member-stats"
-      :class="{'col-8': !expanded && !isHeader}"
+      :class="{ 'mt-2': !isHeader }"
     >
       <div class="d-flex align-items-center profile-first-row">
         <class-badge
           v-if="classBadgePosition === 'next-to-name'"
           :member-class="member.stats.class"
         />
-        <div class="d-flex flex-column profile-name-character">
+        <div
+          class="d-flex flex-column"
+          :class="{ 'ml-2': classBadgePosition === 'next-to-name' }"
+        >
           <h3 class="character-name">
             <span v-if="member.contributor && member.contributor.level > 0 && !disableNameStyling">
               <user-link
@@ -30,18 +33,22 @@
                 :name="member.profile.name"
                 :backer="member.backer"
                 :contributor="member.contributor"
+                :showBuffed="isBuffed"
+                :context="'profile'"
               />
             </span>
-            <span v-else>{{ member.profile.name }}</span>
-            <div
-              v-if="isBuffed"
-              v-b-tooltip.hover.bottom="$t('buffed')"
-              class="is-buffed"
-            >
+            <div v-else>
+              <span>{{ member.profile.name }}</span>
               <div
-                class="svg-icon"
-                v-html="icons.buff"
-              ></div>
+                v-if="isBuffed"
+                v-b-tooltip.hover.bottom="$t('buffed')"
+                class="is-buffed ml-2 mt-n1"
+              >
+                <div
+                  class="svg-icon"
+                  v-html="icons.buff"
+                ></div>
+              </div>
             </div>
           </h3>
           <div class="small-text character-level">
@@ -98,6 +105,10 @@
     }
   }
 
+  .standard-page .member-details {
+    padding-left: 24px;
+  }
+
   .member-stats {
     padding-left: 12px;
     padding-right: 24px;
@@ -114,10 +125,6 @@
     color: $header-color;
   }
 
-  .profile-name-character {
-    margin-left: 12px;
-  }
-
   .character-name {
     margin-bottom: 1px;
     color: $white;
@@ -133,7 +140,6 @@
     height: 20px;
     background: $header-dark-background;
     display: inline-block;
-    margin-left: 16px;
     vertical-align: middle;
     padding-top: 4px;
 

website/client/src/components/userLink.vue

@@ -9,8 +9,19 @@
     {{ displayName }}
     <div
       class="svg-icon icon-12"
+      :class="{ 'margin-bump': context === 'profile' }"
       v-html="tierIcon()"
     ></div>
+    <div
+      v-if="showBuffed"
+      v-b-tooltip.hover.bottom="$t('buffed')"
+      class="is-buffed ml-2 d-flex align-items-center"
+    >
+      <div
+        class="svg-icon m-auto"
+        v-html="icons.buff"
+      ></div>
+    </div>
   </router-link>
 </template>
 
@@ -39,7 +50,12 @@
 
     &[class*="tier"] .svg-icon {
       margin-top: 5px;
+
+      &.margin-bump {
+        margin-top: 7px;
+      }
     }
+
     &.npc .svg-icon {
       margin-top: 4px;
     }
@@ -52,6 +68,21 @@
       }
     }
   }
+
+  .is-buffed {
+    width: 20px;
+    height: 20px;
+    background: $header-dark-background;
+    display: inline-block;
+    margin-top: 2px;
+
+    .svg-icon {
+      display: block;
+      width: 10px;
+      height: 12px;
+      margin: 0 auto;
+    }
+  }
 </style>
 
 <script>
@@ -70,6 +101,7 @@ import tier7 from '@/assets/svg/tier-7.svg';
 import tier8 from '@/assets/svg/tier-mod.svg';
 import tier9 from '@/assets/svg/tier-staff.svg';
 import tierNPC from '@/assets/svg/tier-npc.svg';
+import buffIcon from '@/assets/svg/buff.svg';
 
 export default {
   mixins: [styleHelper],
@@ -81,6 +113,8 @@ export default {
     'contributor',
     'hideTooltip',
     'smallerStyle',
+    'showBuffed',
+    'context',
   ],
   data () {
     return {
@@ -95,6 +129,7 @@ export default {
         tier8,
         tier9,
         tierNPC,
+        buff: buffIcon,
       }),
     };
   },

website/client/src/components/userMenu/profile.vue

@@ -7,19 +7,18 @@
     </div>
     <div
       v-else-if="userLoaded"
-      class="profile"
+      class="profile mt-n3"
     >
       <!-- HEADER -->
       <div class="header">
-        <div class="profile-actions d-flex">
-        </div>
-        <div class="row">
-          <div class="avatar">
-            <member-details
-              :member="user"
-              :class-badge-position="'hidden'"
-            />
-          </div>
+        <div
+          class="avatar mx-auto"
+        >
+          <member-details
+            :member="user"
+            :class-badge-position="'hidden'"
+            class="mx-4"
+          />
         </div>
       </div>
       <!-- PAGE STATE CHANGES -->
@@ -70,7 +69,7 @@
             <div class="about mb-0">
               <h2>{{ $t('about') }}</h2>
             </div>
-            <div class="flex-left>">
+            <div class="flex-left">
               <div class="about profile-section">
                 <p
                   v-if="user.profile.blurb"
@@ -94,7 +93,7 @@
               </p>
             </div>
           </div>
-          <div class="flex-right">
+          <div class="ml-auto">
             <button
               v-if="user._id === userLoggedIn._id"
               class="btn btn-primary flex-right edit-profile"
@@ -357,21 +356,6 @@
                   {{ nextIncentive }}
                 </div>
               </div>
-              <div class="info-item">
-                {{ getProgressDisplay() }}
-                <div class="progress">
-                  <div
-                    class="progress-bar"
-                    role="progressbar"
-                    :aria-valuenow="incentivesProgress"
-                    aria-valuemin="0"
-                    aria-valuemax="100"
-                    :style="{width: incentivesProgress + '%'}"
-                  >
-                    <span class="sr-only">{{ incentivesProgress }}% {{ $t('complete') }}</span>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </div>
@@ -442,7 +426,7 @@
         <div
           v-for="(category, key) in achievements"
           :key="key"
-          class="row category-row"
+          class="row category-row d-flex flex-column"
         >
           <h3 class="text-center">
             {{ $t(`${key}Achievs`) }}
@@ -626,13 +610,10 @@
   .profile {
     .member-details {
       background-color: $white;
-      margin-left: 24px;
-    //       display: flex;
-    // justify-content: center;
+    }
 
     .avatar-container {
       padding-top: 16px;
-      margin-right: -60px;
     }
 
     .progress-container > .progress {
@@ -658,11 +639,12 @@
     .progress-container {
       margin-left: 4px;
       margin-top: 4px;
+
+      .small-text {
+        color: $gray-50;
+      }
     }
 
-    .small-text {
-      color: $gray-50;
-    }
 
     .character-name {
       color: $gray-50;
@@ -679,15 +661,15 @@
     }
   }
 
-  .profile-name-character {
-      margin-left: 4px !important;
-    }
-  }
 </style>
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
+  .avatar {
+    width: fit-content;
+  }
+
   .header {
     width: 100%;
   }
@@ -726,16 +708,6 @@
     }
   }
 
-  .profile-actions {
-    float: right;
-    margin-right: 16px;
-
-    button {
-      margin-right: 8px;
-      padding: 8px;
-    }
-  }
-
   .svg-icon {
     color: $gray-50 !important;
     display: block;
@@ -912,16 +884,6 @@
         float: right;
       }
     }
-
-    .progress {
-      border-radius: 1px;
-      height: 8px;
-
-      .progress-bar {
-        background-color: $green-10 !important;
-        border-radius: 1px;
-      }
-    }
   }
 
   .achievement {
@@ -1006,18 +968,6 @@
     }
   }
 
-  @media (max-width: 990px) {
-    .profile-actions {
-      flex-direction: column;
-    }
-    .profile-actions :not(:last-child) {
-      margin-bottom: 15px;
-    }
-    .profile-actions {
-      margin-right: 0;
-    }
-  }
-
   @media (max-width: 550px) {
     .member-details {
       flex-direction: column;
@@ -1132,9 +1082,6 @@ export default {
     costumeItems () {
       return this.user.items.gear.costume;
     },
-    incentivesProgress () {
-      return this.getIncentivesProgress();
-    },
     nextIncentive () {
       return this.getNextIncentive();
     },
@@ -1275,33 +1222,10 @@ export default {
         subSection: this.$t(this.startingPage),
       });
     },
-
-    getProgressDisplay () {
-      // let currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
-      // if (!currentLoginDay) return this.$t('checkinReceivedAllRewardsMessage');
-      // let nextRewardAt = currentLoginDay.nextRewardAt;
-      // if (!nextRewardAt) return this.$t('moreIncentivesComingSoon');
-      // // if we are on a reward day, let's show progress relative to this
-      // if (currentLoginDay.reward) currentLoginDay.prevRewardKey = this.user.loginIncentives;
-      // if (!currentLoginDay.prevRewardKey) currentLoginDay.prevRewardKey = 0;
-      //
-      // let start = this.user.loginIncentives - currentLoginDay.prevRewardKey;
-      // let end = nextRewardAt - currentLoginDay.prevRewardKey;
-      // return `${this.$t('checkinProgressTitle')} ${start}/${end}`;
-    },
-
-    getIncentivesProgress () {
-      const currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
-      if (!currentLoginDay) return 0;
-      const previousRewardDay = currentLoginDay.prevRewardKey;
-      const { nextRewardAt } = currentLoginDay;
-      return ((this.user.loginIncentives - previousRewardDay)
-        / (nextRewardAt - previousRewardDay)) * 100;
-    },
     getNextIncentive () {
       const currentLoginDay = Content.loginIncentives[this.user.loginIncentives];
       if (!currentLoginDay) return 0;
-      const previousRewardDay = currentLoginDay.prevRewardKey;
+      const previousRewardDay = currentLoginDay.prevRewardKey || 0;
       const { nextRewardAt } = currentLoginDay;
       return ((nextRewardAt - previousRewardDay));
     },