Added mobile style fixes (#9741)

website/client/components/appFooter.vue

@@ -69,8 +69,8 @@
             a.social-circle(href='https://www.facebook.com/Habitica', target='_blank')
               .social-icon.facebook.svg-icon(v-html='icons.facebook')
         .row
-          .col-10 {{ $t('donateText3') }}
+          .col-12.col-md-10 {{ $t('donateText3') }}
-          .col-2
+          .col-12.col-md-2
             button.btn.btn-contribute(@click="donate()", v-if="user")
               .svg-icon.heart(v-html="icons.heart")
               .text {{ $t('companyDonate') }}
@@ -82,7 +82,7 @@
       .col-12
         hr
     .row
-      .col-5
+      .col-12.col-md-5
         | © 2017 Habitica. All rights reserved.
         .debug.float-left(v-if="!IS_PRODUCTION && isUserLoaded")
           button.btn.btn-primary(@click="debugMenuShown = !debugMenuShown") Toggle Debug Menu
@@ -102,9 +102,9 @@
             a.btn.btn-default(@click="addQuestProgress()", tooltip="+1000 to boss quests. 300 items to collection quests") Quest Progress Up
             a.btn.btn-default(@click="makeAdmin()") Make Admin
             a.btn.btn-default(@click="openModifyInventoryModal()") Modify Inventory
-      .col-2.text-center
+      .col-12.col-md-2.text-center
         .logo.svg-icon(v-html='icons.gryphon')
-      .col-5.text-right
+      .col-12.col-md-5.text-right
         template(v-if="!isExpandedFooter")
           span
             a(:href="getDataDisplayToolUrl", target='_blank') {{ $t('dataDisplayTool') }}

website/client/components/auth/registerLoginReset.vue

@@ -4,8 +4,8 @@
     .seamless_stars_varied_opacity_repeat
 
   form#login-form(
-    @submit.prevent='handleSubmit', 
+    @submit.prevent='handleSubmit',
-    @keyup.enter="handleSubmit", 
+    @keyup.enter="handleSubmit",
     v-if="!forgotPassword && !resetPasswordSetNewOne",
   )
     .text-center
@@ -14,11 +14,11 @@
       div
         .svg-icon.habitica-logo(v-html="icons.habiticaIcon")
     .form-group.row.text-center
-      .col-6
+      .col-12.col-md-6
         .btn.btn-secondary.social-button(@click='socialAuth("facebook")')
           .svg-icon.social-icon(v-html="icons.facebookIcon")
           .text {{registering ? $t('signUpWithSocial', {social: 'Facebook'}) : $t('loginWithSocial', {social: 'Facebook'})}}
-      .col-6
+      .col-12.col-md-6
         .btn.btn-secondary.social-button(@click='socialAuth("google")')
           .svg-icon.social-icon(v-html="icons.googleIcon")
           span {{registering ? $t('signUpWithSocial', {social: 'Google'}) : $t('loginWithSocial', {social: 'Google'})}}
@@ -79,7 +79,7 @@
       input#confirmPasswordInput.form-control(type='password', :placeholder='$t("confirmPasswordPlaceholder")', v-model='passwordConfirm')
     .text-center
       .btn.btn-info(
-        @click='resetPasswordSetNewOneLink()', 
+        @click='resetPasswordSetNewOneLink()',
         :enabled="!resetPasswordSetNewOneData.hasError"
       )  {{$t('setNewPass')}}
 
@@ -121,6 +121,17 @@
     }
   }
 
+  @media only screen and (max-width: 768px) {
+    #login-form {
+      width: 100% !important;
+    }
+
+    .form-group {
+      padding-left: .5em;
+      padding-right: .5em;
+    }
+  }
+
   .form-wrapper {
     background-color: $purple-200;
     background: $purple-200; /* For browsers that do not support gradients */

website/client/components/challenges/challengeDetail.vue

@@ -4,10 +4,9 @@
   leave-challenge-modal(:challengeId='challenge._id')
   close-challenge-modal(:members='members', :challengeId='challenge._id')
   challenge-member-progress-modal(:memberId='progressMemberId', :challengeId='challenge._id')
-
+  .col-12.col-md-8.standard-page
-  .col-8.standard-page
     .row
-      .col-8
+      .col-12.col-md-8
         h1(v-markdown='challenge.name')
         div
           strong(v-once) {{$t('createdBy')}}:
@@ -20,7 +19,7 @@
           // span {{challenge.endDate}}
         .tags
           span.tag(v-for='tag in challenge.tags') {{tag}}
-      .col-4
+      .col-12.col-md-4
         .box(@click="showMemberModal()")
           .svg-icon.member-icon(v-html="icons.memberIcon")
           | {{challenge.memberCount}}
@@ -30,7 +29,7 @@
           | {{challenge.prize}}
           .details(v-once) {{$t('prize')}}
     .row.challenge-actions
-      .col-7.offset-5
+      .col-12.col-md-7.offset-md-5
         span.view-progress
           strong {{ $t('viewProgressOf') }}
         member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
@@ -56,7 +55,7 @@
         :taskListOverride='tasksByType[column]',
         v-on:editTask="editTask",
         v-if='tasksByType[column].length > 0')
-  .col-4.sidebar.standard-page
+  .col-12.col-md-4.sidebar.standard-page
     .acitons
       div(v-if='canJoin')
         button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}

website/client/components/challenges/findChallenges.vue

@@ -2,8 +2,7 @@
 .row
   challenge-modal(v-on:createChallenge='challengeCreated')
   sidebar(v-on:search="updateSearch", v-on:filter="updateFilters")
-
+  .col-12.col-md-10.standard-page
-  .col-10.standard-page
     .row.header-row
       .col-md-8.text-left
         h1(v-once) {{$t('findChallenges')}}

website/client/components/challenges/sidebar.vue

@@ -2,7 +2,6 @@
 .standard-sidebar.d-none.d-sm-block
   .form-group
     input.form-control.search(type="text", :placeholder="$t('search')", v-model='searchTerm')
-
   form
     h2(v-once) {{ $t('filter') }}
     .form-group

website/client/components/groups/group.vue

@@ -7,11 +7,11 @@
   group-gems-modal
   .col-12.col-sm-8.standard-page
     .row
-      .col-6.title-details
+      .col-12.col-md-6.title-details
         h1 {{group.name}}
         strong.float-left(v-once) {{$t('groupLeader')}}
         span.leader.float-left(v-if='group.leader.profile', @click='showMemberProfile(group.leader)') : {{group.leader.profile.name}}
-      .col-6
+      .col-12.col-md-6
         .row.icon-row
           .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
             .item-with-icon(@click="showMemberModal()")

website/client/components/groups/myGuilds.vue

@@ -60,6 +60,12 @@
       }
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    .no-guilds-wrapper {
+      width: 100% !important;
+    }
+  }
 </style>
 
 <script>

website/client/components/header/index.vue

@@ -11,7 +11,7 @@ div
     .view-party.d-flex.align-items-center(
       v-if="user.party && user.party._id && partyMembers && partyMembers.length > 1",
     )
-      button.btn.btn-primary(@click='openPartyModal()') {{ $t('viewParty') }}
+      button.btn.btn-primary.view-party-button(@click='openPartyModal()') {{ $t('viewParty') }}
     .party-members.d-flex(
       v-if="partyMembers && partyMembers.length > 1",
       v-resize="1500",
@@ -98,6 +98,12 @@ div
       margin-top: 16px;
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    .view-party-button {
+      display: none;
+    }
+  }
 </style>
 
 <script>

website/client/components/shops/market/index.vue

@@ -61,10 +61,10 @@
       h1.mb-4.page-header(v-once) {{ $t('market') }}
 
       .clearfix(v-if="viewOptions['equipment'].selected")
-        h2.float-left.mb-3
+        h2.float-left.mb-3.filters-title
           | {{ $t('equipment') }}
 
-        div.float-right
+        .filters.float-right
           span.dropdown-label {{ $t('class') }}
           b-dropdown(right=true)
             span.dropdown-icon-item(slot="text")
@@ -328,6 +328,20 @@
     right: -.5em;
     top: -.5em;
   }
+
+  @media only screen and (max-width: 768px) {
+    .featuredItems .content {
+      display: none !important;
+    }
+
+    .filters, .filters-title {
+      float: none;
+      button {
+        margin-right: 4em;
+        margin-bottom: 1em;
+      }
+    }
+  }
 </style>
 
 

website/client/components/static/faq.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .container-fluid
     .row
-      .col-md-6.offset-3
+      .col-12.col-md-6.offset-md-3
         h1 {{ $t('frequentlyAskedQuestions') }}
         .faq-question(v-for='(heading, index) in headings')
           h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
@@ -14,6 +14,12 @@
   .faq-question {
     margin-bottom: 1em;
   }
+
+  @media only screen and (max-width: 768px) {
+    .container-fluid {
+      margin: auto;
+    }
+  }
 </style>
 
 <script>

website/client/components/static/home.vue

@@ -37,7 +37,7 @@
         .pixel-horizontal.svg-icon(v-html='icons.pixelHorizontal')
       .container
         .row
-          .col-12.col-sm-6.col-md-6.col-lg-6.offset-3.text-center
+          .col-12.col-sm-6.col-md-6.col-lg-6.offset-sm-3.text-center
             h2 {{$t('gamifyYourLife')}}
             p.section-main {{$t('aboutHabitica')}}
         .row
@@ -502,6 +502,19 @@
       opacity: .5;
     }
   }
+
+
+  @media only screen and (max-width: 768px) {
+    #call-to-action .btn-primary {
+      width: 95%;
+    }
+
+    #call-to-action .featured .svg-icon {
+      display: block;
+      margin: 0 auto;
+      margin-bottom: .5em;
+    }
+  }
 </style>
 
 <script>

website/client/components/tasks/taskModal.vue

@@ -514,6 +514,12 @@
       width: 57px;
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    .option-item {
+      margin-right: 12px !important;
+    }
+  }
 </style>
 
 <style lang="scss" scoped>

website/client/components/tasks/user.vue

@@ -9,7 +9,7 @@
   )
   .col-12
     .row.tasks-navigation
-      .col-4.offset-4
+      .col-12.col-md-4.offset-md-4
         .d-flex
           input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
           button.btn.btn-secondary.dropdown-toggle.ml-2.d-flex.align-items-center(
@@ -288,6 +288,13 @@
       }
     }
   }
+
+  @media only screen and (max-width: 768px) {
+    .filter-panel {
+      max-width: none;
+      left: 0px;
+    }
+  }
 </style>
 
 <script>

website/client/components/userMenu/profile.vue

@@ -17,22 +17,22 @@ div
         .col-12
           member-details(:member="user")
     .row
-      .col-6.offset-3.text-center.nav
+      .col-12.col-md-6.offset-md-3.text-center.nav
         .nav-item(@click='selectPage("profile")', :class="{active: selectedPage === 'profile'}") {{ $t('profile') }}
         .nav-item(@click='selectPage("stats")', :class="{active: selectedPage === 'stats'}") {{ $t('stats') }}
         .nav-item(@click='selectPage("achievements")', :class="{active: selectedPage === 'achievements'}") {{ $t('achievements') }}
     #userProfile.standard-page(v-show='selectedPage === "profile"', v-if='user.profile')
       .row
-        .col-8
+        .col-12.col-md-8
           .header
             h1 {{user.profile.name}}
             h4
               strong {{ $t('userId') }}:
               | {{user._id}}
-        .col-4
+        .col-12.col-md-4
           button.btn.btn-secondary(v-if='user._id === userLoggedIn._id', @click='editing = !editing') {{ $t('edit') }}
       .row(v-if='!editing')
-        .col-8
+        .col-12.col-md-8
           .about
             h2 {{ $t('about') }}
             p(v-if='user.profile.blurb', v-markdown='user.profile.blurb')
@@ -42,7 +42,7 @@ div
             img.img-rendering-auto(v-if='user.profile.imageUrl', :src='user.profile.imageUrl')
             p(v-else) {{ $t('noPhoto') }}
 
-        .col-4
+        .col-12.col-md-4
           .info
             h2 {{ $t('info') }}
             div
@@ -93,7 +93,7 @@ div
     #achievements.standard-page.container(v-show='selectedPage === "achievements"', v-if='user.achievements')
       .row(v-for='(category, key) in achievements')
         h2.col-12.text-center {{ $t(key+'Achievs') }}
-        .col-3.text-center(v-for='(achievement, key) in category.achievements')
+        .col-12.col-md-3.text-center(v-for='(achievement, key) in category.achievements')
           .box.achievement-container(:id='key + "-achievement"', :class='{"achievement-unearned": !achievement.earned}')
             b-popover(
               :target="'#' + key + '-achievement'",
@@ -107,103 +107,103 @@ div
             .achievement.achievement-unearned(class='achievement-unearned2x', v-if='!achievement.earned')
       hr.col-12
       .row
-        .col-6(v-if='user.achievements.challenges')
+        .col-12.col-md-6(v-if='user.achievements.challenges')
           .achievement-icon.achievement-karaoke
           h2.text-center {{$t('challengesWon')}}
           div(v-for='chal in user.achievements.challenges')
             span(v-markdown='chal')
             hr
-        .col-6(v-if='user.achievements.quests')
+        .col-12.col-md-6(v-if='user.achievements.quests')
           .achievement-icon.achievement-alien
           h2.text-center {{$t('questsCompleted')}}
           div(v-for='(value, key) in user.achievements.quests')
             span {{ content.quests[key].text() }} ({{ value }})
     #stats.standard-page(v-show='selectedPage === "stats"', v-if='user.preferences')
       .row
-        .col-6
+        .col-12.col-md-6
           h2.text-center {{$t('equipment')}}
           .well
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.eyewear && equippedItems.eyewear.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.eyewear}`")
               h3 {{$t('eyewear')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.head && equippedItems.head.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.head}`")
               h3 {{$t('headgearCapitalized')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.headAccessory && equippedItems.headAccessory.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.headAccessory}`")
               h3 {{$t('headAccess')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.back && equippedItems.back.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.back}`")
               h3 {{$t('backAccess')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.armor && equippedItems.armor.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.armor}`")
               h3 {{$t('armorCapitalized')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.body && equippedItems.body.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.body}`")
               h3 {{$t('bodyAccess')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.weapon && equippedItems.weapon.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.weapon}`")
               h3 {{$t('mainHand')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: equippedItems.shield && equippedItems.shield.indexOf("base_0") === -1}')
                 div(:class="`shop_${equippedItems.shield}`")
               h3 {{$t('offHand')}}
-        .col-6
+        .col-12.col-md-6
           h2.text-center {{$t('costume')}}
           .well
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.eyewear && costumeItems.eyewear.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.eyewear}`")
               h3 {{$t('eyewear')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.head && costumeItems.head.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.head}`")
               h3 {{$t('headgearCapitalized')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.headAccessory && costumeItems.headAccessory.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.headAccessory}`")
               h3 {{$t('headAccess')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.back && costumeItems.back.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.back}`")
               h3 {{$t('backAccess')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.armor && costumeItems.armor.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.armor}`")
               h3 {{$t('armorCapitalized')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.body && costumeItems.body.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.body}`")
               h3 {{$t('bodyAccess')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.weapon && costumeItems.weapon.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.weapon}`")
               h3 {{$t('mainHand')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: user.preferences.background}', style="overflow:hidden")
                 div(:class="'icon_background_' + user.preferences.background")
               h3 {{$t('background')}}
-            .col-4.item-wrapper
+            .col-12.col-md-4.item-wrapper
               .box(:class='{white: costumeItems.shield && costumeItems.shield.indexOf("base_0") === -1}')
                 div(:class="`shop_${costumeItems.shield}`")
               h3 {{$t('offHand')}}
       .row.pet-mount-row
-        .col-6
+        .col-12.col-md-6
           h2.text-center(v-once) {{ $t('pets') }}
           .well.pet-mount-well
             .row.col-12
-              .col-4
+              .col-12.col-md-4
                 .box(:class='{white: user.items.currentPet}')
                   .pet(:class="`Pet-${user.items.currentPet}`")
-              .col-8
+              .col-12.col-md-8
                 div
                   | {{ formatAnimal(user.items.currentPet, 'pet') }}
                 div
@@ -212,14 +212,14 @@ div
                 div
                   strong {{ $t('beastMasterProgress') }}:
                   | {{ beastMasterProgress(user.items.pets) }}
-        .col-6
+        .col-12.col-md-6
           h2.text-center(v-once) {{ $t('mounts') }}
           .well.pet-mount-well
             .row.col-12
-              .col-4
+              .col-12.col-md-4
                 .box(:class='{white: user.items.currentMount}')
                   .mount(:class="`Mount_Icon_${user.items.currentMount}`")
-              .col-8
+              .col-12.col-md-8
                 div
                   | {{ formatAnimal(user.items.currentMount, 'mount') }}
                 div
@@ -231,14 +231,14 @@ div
       #attributes.row
         hr.col-12
         h2.col-12 {{$t('attributes')}}
-        .col-6(v-for="(statInfo, stat) in stats")
+        .col-12.col-md-6(v-for="(statInfo, stat) in stats")
           .row.col-12.stats-column
-            .col-4.attribute-label
+            .col-12.col-md-4.attribute-label
               span.hint(:popover-title='$t(statInfo.title)', popover-placement='right',
                 :popover='$t(statInfo.popover)', popover-trigger='mouseenter')
               .stat-title(:class='stat') {{ $t(statInfo.title) }}
               strong.number {{ statsComputed[stat] }}
-            .col-6
+            .col-12.col-md-6
               ul.bonus-stats
                 li
                   strong {{$t('level')}}:
@@ -257,26 +257,26 @@ div
                   | {{user.stats.buffs[stat]}}
       #allocation(v-if='user._id === userLoggedIn._id')
         .row.title-row
-          .col-6
+          .col-12.col-md-6
             h3(v-if='userLevel100Plus', v-once, v-html="$t('noMoreAllocate')")
             h3(v-if='user.stats.points || userLevel100Plus')
               | {{$t('pointsAvailable')}}
               .counter.badge(v-if='user.stats.points || userLevel100Plus')
                 | {{user.stats.points}} 
-          .col-6
+          .col-12.col-md-6
             .float-right
               toggle-switch(:label="$t('autoAllocation')",
                 v-model='user.preferences.automaticAllocation',
                 @change='userset({"preferences.automaticAllocation": Boolean(user.preferences.automaticAllocation), "preferences.allocationMode": "taskbased"})')
 
         .row
-          .col-3(v-for='(statInfo, stat) in allocateStatsList')
+          .col-12.col-md-3(v-for='(statInfo, stat) in allocateStatsList')
             .box.white.row.col-12
               .col-12
                 div(:class='stat') {{ $t(stats[stat].title) }}
                 .number {{ user.stats[stat] }}
                 .points {{$t('pts')}}
-              .col-4
+              .col-12.col-md-4
                 .up(v-if='user.stats.points', @click='allocate(stat)')
   send-gems-modal(:userReceivingGems='userReceivingGems')
 </template>