Sept 26 fixes (#9081)

* Fixed layering of avatar

* Fixed navbar padding on small screens

* Dropdowns go left

* Adjusted member details styles

* Fixed task tag display

* Added toggle to buy gems

* Began moving presskit

* Fixed easing and validating immediately

* Added hover state to login and fixed transitions for social buttons

* Fixed more style issues

* Fixed overflow

* Added email warning

* Show login button on mobile

* Some column adjustments for mobile

* Fixed email/username confusion

website/client/components/appHeader.vue

@@ -3,11 +3,12 @@ div
   create-party-modal
   #app-header.row(:class="{'hide-header': $route.name === 'groupPlan'}")
     members-modal(:hide-badge="true")
-    member-details(:member="user")
+    .col-6
+      member-details(:member="user")
     .view-party(v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1")
       // TODO button should open the party members modal
       button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
-    .party-members.d-flex(
+    .party-members.col-6.d-flex(
       v-if="partyMembers && partyMembers.length > 1",
       v-resize="1500",
       @resized="setPartyMembersWidth($event)"
@@ -21,7 +22,7 @@ div
         @onHover="expandMember(member._id)",
         :expanded="member._id === expandedMember",
       )
-    .no-party.d-flex.justify-content-center.text-center(v-else)
+    .no-party.col-6.d-flex.justify-content-center.text-center(v-else)
       .align-self-center(v-once)
         h3 {{ $t('battleWithFriends') }}
         span.small-text(v-html="$t('inviteFriendsParty')")

website/client/components/appMenu.vue

@@ -105,6 +105,12 @@ div
         padding: .5em !important;
       }
     }
+
+    .dropdown-menu {
+      position: absolute !important;
+      left: -10em;
+      top: -.5em;
+    }
   }
 
   @media only screen and (max-width : 1224px) and (min-width: 1200px) {
@@ -133,6 +139,12 @@ div
     }
   }
 
+  @media only screen and (max-width: 1280px) {
+    .nav-link {
+      padding: .8em 1em !important;
+    }
+  }
+
   nav.navbar {
     background: $purple-100 url(~assets/svg/for-css/bits.svg) right no-repeat;
     padding-left: 25px;

website/client/components/auth/registerLogin.vue

@@ -279,6 +279,11 @@ export default {
   },
   methods: {
     async register () {
+      if (!this.email) {
+        alert('Email is required');
+        return;
+      }
+
       if (this.password !== this.passwordConfirm) {
         alert('Passwords must match');
         return;
@@ -314,6 +319,11 @@ export default {
       window.location.href = '/';
     },
     async login () {
+      if (!this.username) {
+        alert('Email is required');
+        return;
+      }
+
       await this.$store.dispatch('auth:login', {
         username: this.username,
         // email: this.email,

website/client/components/avatar.vue

@@ -18,9 +18,9 @@
       span(:class="'chair_' + member.preferences.chair")
       span(:class="getGearClass('back')")
       span(:class="skinClass")
-      span.head_0
       span(:class="member.preferences.size + '_shirt_' + member.preferences.shirt")
       span(:class="member.preferences.size + '_' + getGearClass('armor')")
+      span.head_0
       span(:class="getGearClass('back_collar')")
       span(:class="getGearClass('body')")
       template(v-for="type in ['base', 'bangs', 'mustache', 'beard']")

website/client/components/memberDetails.vue

@@ -1,6 +1,5 @@
 <template lang="pug">
-div
-  .row.member-details(:class="{ condensed, expanded }", @click='showMemberModal(member)')
+.row.member-details(:class="{ condensed, expanded }", @click='showMemberModal(member)')
     .col-4
       avatar(:member="member",
         @click.native="$emit('click')",
@@ -13,17 +12,17 @@ div
         .is-buffed(v-if="isBuffed")
           .svg-icon(v-html="icons.buff")
       span.small-text.character-level {{ characterLevel }}
-      .progress-container.d-flex
+      .progress-container
         .svg-icon(v-html="icons.health")
         .progress
           .progress-bar.bg-health(:style="{width: `${percent(member.stats.hp, MAX_HEALTH)}%`}")
         span.small-text {{member.stats.hp | statFloor}} / {{MAX_HEALTH}}
-      .progress-container.d-flex
+      .progress-container
         .svg-icon(v-html="icons.experience")
         .progress
           .progress-bar.bg-experience(:style="{width: `${percent(member.stats.exp, toNextLevel)}%`}")
         span.small-text {{member.stats.exp | statFloor}} / {{toNextLevel}}
-      .progress-container.d-flex(v-if="hasClass")
+      .progress-container(v-if="hasClass")
         .svg-icon(v-html="icons.mana")
         .progress
           .progress-bar.bg-mana(:style="{width: `${percent(member.stats.mp, maxMP)}%`}")
@@ -111,7 +110,7 @@ div
   .character-level {
     display: block;
     font-style: normal;
-    margin-bottom: 16px;
+    margin-bottom: .5em;
   }
 
   .is-buffed {
@@ -136,7 +135,7 @@ div
   }
 
   .progress-container {
-    margin-bottom: 12px;
+    margin-bottom: .5em;
   }
 
   .progress-container > span {
@@ -149,11 +148,12 @@ div
     width: 24px;
     height: 24px;
     margin-right: 8px;
-    margin-top: -4px;
+    padding-top: .3em;
   }
 
   .progress-container > .progress {
-    width: 303px;
+    width: 80%;
+    min-width: 200px;
     margin: 0px;
     border-radius: 2px;
     height: 16px;
@@ -165,6 +165,11 @@ div
     height: 16px;
     min-width: 0px;
   }
+
+  .progress-container .svg-icon, .progress-container .progress {
+    display: inline-block;
+    vertical-align: bottom;
+  }
 </style>
 
 <script>

website/client/components/payments/buyGemsModal.vue

@@ -39,14 +39,14 @@
                 .gem-text {{ $t('gems') }}
                 .divider
                 button.btn.btn-primary(@click='gemAmount = 4') {{gemAmount === 4 ? $t('selected') : '$1.00'}}
-            .card.text-center.col-3(:class="{active: gemAmount === 21}")
+            .card.text-center.col-3(:class="{active: gemAmount === 21 }")
               .card-img-top
                 .mx-auto(v-html='icons.twentyOneGems', style='"height: 55px; width: 47.5px; margin-top: 1.85em;"')
               .card-body
                 .gem-count 20
                 .gem-text {{ $t('gems') }}
                 .divider
-                button.btn.btn-primary(@click='gemAmount = 21') {{gemAmount === 21 ? $t('selected') : '$5.00'}}
+                button.btn.btn-primary(@click='gemAmount === 21 ? gemAmount = 0 : gemAmount = 21') {{gemAmount === 21 ? $t('selected') : '$5.00'}}
             //.card.text-center(:class="{active: gemAmount === 42}")
               .card-img-top
                 .mx-auto(v-html='icons.fortyTwoGems', style='"height: 49.5px; width: 51px; margin-top: 1.9em;"')

website/client/components/static/header.vue

@@ -28,12 +28,19 @@
             router-link.dropdown-item(to='/static/faq') {{ $t('faq') }}
             router-link.dropdown-item(to='/static/plans') {{ $t('groupPlans') }}
       button.btn.btn-primary.pull-right(@click='playButtonClick()', v-if='$route.name !== "home"') {{ $t('playButtonFull') }}
-      router-link.btn.btn-primary.login-button.pull-right(to='/login', v-else) {{ $t('login') }}
+    router-link.btn.btn-primary.login-button.pull-right(to='/login', v-if='$route.name === "home"') {{ $t('login') }}
 </template>
 
 <style lang='scss' scoped>
   @import '~client/assets/scss/colors.scss';
 
+  @media only screen and (max-width : 750px) {
+    .login-button {
+      margin: 0 auto !important;
+      margin-top: 1.8em !important;
+    }
+  }
+
   .btn-primary.pull-right {
     height: 2.5em;
     margin: auto 0px auto auto;

website/client/components/static/home.vue

@@ -7,11 +7,11 @@
     #intro-signup.purple-1
       .container
         .row
-          .col-6
+          .col-12.col-sm-6.col-md-6.col-lg-6
             img(src='~assets/images/home/home-main@3x.png', width='357px')
             h1 {{$t('motivateYourself')}}
             p.section-main {{$t('timeToGetThingsDone')}}
-          .col-6
+          .col-12.col-sm-6.col-md-6.col-lg-6
             h3.text-center {{$t('singUpForFree')}}
             div.text-center
               button.social-button(@click='socialAuth("facebook")')
@@ -23,9 +23,9 @@
             .strike
               span {{$t('or')}}
             .form
-              input.form-control(type='text', placeholder='Login Name', v-model='username', :class='{"input-valid": username.length > 0}')
+              input.form-control(type='text', placeholder='Login Name', v-model='username', :class='{"input-valid": username.length > 3}')
               input.form-control(type='email', placeholder='Email', v-model='email', :class='{"input-invalid": emailInvalid, "input-valid": emailValid}')
-              input.form-control(type='password', placeholder='Password', v-model='password', :class='{"input-valid": password.length > 0}')
+              input.form-control(type='password', placeholder='Password', v-model='password', :class='{"input-valid": password.length > 3}')
               input.form-control(type='password', placeholder='Confirm Password', v-model='passwordConfirm', :class='{"input-invalid": passwordConfirmInvalid, "input-valid": passwordConfirmValid}')
               p.form-text(v-once, v-html="$t('termsAndAgreement')")
               button.sign-up(@click='register()') {{$t('signup')}}
@@ -37,19 +37,19 @@
         .pixel-horizontal.svg-icon(v-html='icons.pixelHorizontal')
       .container
         .row
-          .col-6.offset-3.text-center
+          .col-12.col-sm-6.col-md-6.col-lg-6.offset-3.text-center
             h2 {{$t('gamifyYourLife')}}
             p.section-main {{$t('aboutHabitica')}}
         .row
-          .col-4
+          .col-12.col-sm-4
             img.track-habits(src='~assets/images/home/track-habits@3x.png', width='354px', height='228px')
             strong {{$t('trackYourGoals')}}
             p {{$t('trackYourGoalsDesc')}}
-          .col-4
+          .col-12.col-sm-4
             img(src='~assets/images/home/earn-rewards@3x.png', width='316px', height='244px')
             strong {{$t('earnRewards')}}
             p {{$t('earnRewardsDesc')}}
-          .col-4
+          .col-12.col-sm-4
             img(src='~assets/images/home/battle-monsters@3x.png', width='303px', height='244px')
             strong {{$t('battleMonsters')}}
             p {{$t('battleMonstersDesc')}}
@@ -62,15 +62,15 @@
           .col-12
             h2 {{$t('playersUseToImprove')}}
         .row
-          .col-4
+          .col-12.col-sm-4
             img(src='~assets/images/home/health-fitness@3x.png', width='300px', height='300px')
             strong {{$t('healthAndFitness')}}
             p {{$t('healthAndFitnessDesc')}}
-          .col-4
+          .col-12.col-sm-4
             img(src='~assets/images/home/school-work@3x.png', width='300px', height='300px')
             strong {{$t('schoolAndWork')}}
             p {{$t('schoolAndWorkDesc')}}
-          .col-4
+          .col-12.col-sm-4
             img(src='~assets/images/home/much-more@3x.png', width='300px', height='300px')
             strong {{$t('muchmuchMore')}}
             p {{$t('muchmuchMoreDesc')}}
@@ -82,9 +82,9 @@
     #level-up-anywhere.purple-3
       .container
         .row
-          .col-6
+          .col-12.col-sm-6.col-md-6.col-lg-6
             .iphones
-          .col-6.text-column
+          .col-12.col-sm-6.col-md-6.col-lg-6.text-column
             h2 {{ $t('levelUpAnywhere') }}
             p {{ $t('levelUpAnywhereDesc') }}
             a.app.svg-icon(v-html='icons.googlePlay', href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank')
@@ -118,6 +118,11 @@
 </template>
 
 <style lang="scss">
+  #app  {
+    overflow: hidden;
+    height: auto !important;
+  }
+
   .form-text a {
     color: #fff !important;
   }
@@ -240,6 +245,11 @@
       background: transparent;
       margin-right: .5em;
       color: #bda8ff;
+      transition: .5s;
+
+      span {
+        transition: none;
+      }
     }
 
     .social-button:hover {
@@ -304,7 +314,7 @@
       color: $purple-400;
       border: solid 2px transparent;
       transition-timing-function: ease;
-      transition: .5s;
+      transition: border .5s, color .5s;
     }
 
     .input-valid {
@@ -329,6 +339,7 @@
       border-radius: 2px;
       background-color: #2995cd;
       font-size: 16px;
+      transition: all .5s ease;
     }
 
     .sign-up:hover {
@@ -588,19 +599,19 @@
     },
     computed: {
       emailValid () {
-        if (this.email.length === 0) return false;
+        if (this.email.length <= 3) return false;
         return this.validateEmail(this.email);
       },
       emailInvalid () {
-        if (this.email.length === 0) return false;
+        if (this.email.length <= 3) return false;
         return !this.validateEmail(this.email);
       },
       passwordConfirmValid () {
-        if (this.passwordConfirm.length === 0) return false;
+        if (this.passwordConfirm.length <= 3) return false;
         return this.passwordConfirm === this.password;
       },
       passwordConfirmInvalid () {
-        if (this.passwordConfirm.length === 0) return false;
+        if (this.passwordConfirm.length <= 3) return false;
         return this.passwordConfirm !== this.password;
       },
     },

website/client/components/static/pressKit.vue

@@ -3,18 +3,18 @@
     h1 {{ $t('presskit') }}
       p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
       p
-        a.btn.btn-lg.btn-success(href='/presskit/presskit.zip') presskit.zip
+        a.btn.btn-lg.btn-success(href='~assets/images/presskit/presskit.zip') presskit.zip
 
     div(v-for='(images, category) in imgs')
       h2 {{ $t('pk' + category) }}
       div(v-if='Array.isArray(images)')
         div(v-for='img in images')
-          img.img-rendering-auto.press-img(:src="`/presskit/${category}/${img}.png`")
+          img.img-rendering-auto.press-img(:src="`assets/images/presskit/${category}/${img}.png`")
       div(v-else)
         div(v-for='(images, category) in images')
           h3 {{ $t('pk' + category) }}
           div(v-for='img in images')
-            img.img-rendering-auto.press-img(:src="`/presskit/#$category}/${cat}/${img}.png`")
+            img.img-rendering-auto.press-img(:src="~`assets/images/presskit/${category}/${img}.png`")
 </template>
 
 <script>

website/client/components/static/staticWrapper.vue

@@ -38,11 +38,15 @@
       color: #fff !important;
     }
 
+    .nav-item .nav-link {
+      transition: color .5s ease;
+    }
+
     .login-button {
       padding-right: 1em;
       margin-top: 1.8em !important;
       border-radius: 2px;
-      background-color: #b288ff;
+      background-color: #9a62ff;
     }
 
     .login-button:hover {

website/client/components/tasks/taskModal.vue

@@ -114,7 +114,8 @@
           label(v-once) {{ $t('tags') }}
           .category-wrap(@click="showTagsSelect = !showTagsSelect")
             span.category-select(v-if='task.tags && task.tags.length === 0') {{$t('none')}}
-            span.category-select(v-else) {{getTagsFor(task)[0]}}
+            span.category-select(v-else)
+              .category-label(v-for='tagName in getTagsFor(task)') {{tagName}}
           .category-box(v-if="showTagsSelect")
             .container
               .row

website/client/store/getters/tasks.js

@@ -2,9 +2,11 @@ import { shouldDo } from 'common/script/cron';
 
 // Return all the tags belonging to an user task
 export function getTagsFor (store) {
-  return (task) => store.state.user.data.tags
-    .filter(tag => task.tags && task.tags.indexOf(tag.id) !== -1)
-    .map(tag => tag.name);
+  return (task) => {
+    return store.state.user.data.tags
+      .filter(tag => task.tags && task.tags.indexOf(tag.id) !== -1)
+      .map(tag => tag.name);
+  };
 }
 
 function getTaskColorByValue (value) {