From 9ebf435c823d4aa4b307ab6f26d49fa720ab5a42 Mon Sep 17 00:00:00 2001
From: Vipul Khandelwal <44499187+VipulKhandelwal1999@users.noreply.github.com>
Date: Sun, 13 Dec 2020 23:09:31 +0530
Subject: [PATCH] Fixed footer layout (#12840)

* Fixed footer layout

* Fixed footer layout using bootstrap responsive typography
---
 website/client/src/components/appFooter.vue | 554 ++++++++------------
 1 file changed, 219 insertions(+), 335 deletions(-)

diff --git a/website/client/src/components/appFooter.vue b/website/client/src/components/appFooter.vue
index 3fba630b31..4303b1ad3a 100644
--- a/website/client/src/components/appFooter.vue
+++ b/website/client/src/components/appFooter.vue
@@ -6,16 +6,12 @@
       <div class="row">
         <div class="col-12 col-md-2">
           <h3>
-            <a
-              href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
-              target="_blank"
-            >{{ $t('mobileIOS') }}</a>
+            <a href="https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8"
+               target="_blank">{{ $t('mobileIOS') }}</a>
           </h3>
           <h3>
-            <a
-              href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
-              target="_blank"
-            >{{ $t('mobileAndroid') }}</a>
+            <a href="https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica"
+               target="_blank">{{ $t('mobileAndroid') }}</a>
           </h3>
         </div>
         <div class="col-12 col-md-2">
@@ -27,16 +23,12 @@
               </router-link>
             </li>
             <li>
-              <a
-                href="https://habitica.wordpress.com/"
-                target="_blank"
-              >{{ $t('companyBlog') }}</a>
+              <a href="https://habitica.wordpress.com/"
+                 target="_blank">{{ $t('companyBlog') }}</a>
             </li>
             <li>
-              <a
-                href="http://blog.habitrpg.com/"
-                target="_blank"
-              >{{ $t('tumblr') }}</a>
+              <a href="http://blog.habitrpg.com/"
+                 target="_blank">{{ $t('tumblr') }}</a>
             </li>
             <li>
               <router-link to="/static/faq">
@@ -44,10 +36,8 @@
               </router-link>
             </li>
             <li>
-              <a
-                href="http://habitica.fandom.com/wiki/Whats_New"
-                target="_blank"
-              >{{ $t('oldNews') }}</a>
+              <a href="http://habitica.fandom.com/wiki/Whats_New"
+                 target="_blank">{{ $t('oldNews') }}</a>
             </li>
             <!-- Commenting out merch page see https://github.com/HabitRPG/habitica/issues/12039
             <li>
@@ -72,10 +62,8 @@
           <h3>{{ $t('footerCommunity') }}</h3>
           <ul>
             <li>
-              <a
-                target="_blank"
-                href="/static/community-guidelines"
-              >{{ $t('communityGuidelines') }}</a>
+              <a target="_blank"
+                 href="/static/community-guidelines">{{ $t('communityGuidelines') }}</a>
             </li>
             <li>
               <router-link to="/hall/contributors">
@@ -83,31 +71,23 @@
               </router-link>
             </li>
             <li>
-              <router-link
-                to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac"
-              >
+              <router-link to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac">
                 {{ $t('reportBug') }}
               </router-link>
             </li>
             <li>
-              <a
-                href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
-                target="_blank"
-              >{{ $t('requestFeature') }}</a>
+              <a href="https://docs.google.com/forms/d/e/1FAIpQLScPhrwq_7P1C6PTrI3lbvTsvqGyTNnGzp1ugi1Ml0PFee_p5g/viewform?usp=sf_link"
+                 target="_blank">{{ $t('requestFeature') }}</a>
             </li>
             <li v-html="$t('communityExtensions')"></li>
             <li v-html="$t('communityForum')"></li>
             <li>
-              <a
-                href="https://www.facebook.com/Habitica"
-                target="_blank"
-              >{{ $t('communityFacebook') }}</a>
+              <a href="https://www.facebook.com/Habitica"
+                 target="_blank">{{ $t('communityFacebook') }}</a>
             </li>
             <li>
-              <a
-                href="https://www.instagram.com/habitica"
-                target="_blank"
-              >{{ $t('communityInstagram') }}</a>
+              <a href="https://www.instagram.com/habitica"
+                 target="_blank">{{ $t('communityInstagram') }}</a>
             </li>
           </ul>
         </div>
@@ -117,57 +97,39 @@
               <h3>{{ $t('footerDevs') }}</h3>
               <ul>
                 <li>
-                  <a
-                    href="/apidoc"
-                    target="_blank"
-                  >{{ $t('APIv3') }}</a>
+                  <a href="/apidoc"
+                     target="_blank">{{ $t('APIv3') }}</a>
                 </li>
                 <li>
-                  <a
-                    :href="getDataDisplayToolUrl"
-                    target="_blank"
-                  >{{ $t('dataDisplayTool') }}</a>
+                  <a :href="getDataDisplayToolUrl"
+                     target="_blank">{{ $t('dataDisplayTool') }}</a>
                 </li>
                 <li>
-                  <a
-                    href="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
-                    target="_blank"
-                  >{{ $t('guidanceForBlacksmiths') }}</a>
+                  <a href="http://habitica.fandom.com/wiki/Guidance_for_Blacksmiths"
+                     target="_blank">{{ $t('guidanceForBlacksmiths') }}</a>
                 </li>
               </ul>
             </div>
             <div class="col-6 social">
               <h3>{{ $t('footerSocial') }}</h3>
               <div class="icons">
-                <a
-                  class="social-circle"
-                  href="https://twitter.com/habitica"
-                  target="_blank"
-                >
-                  <div
-                    class="social-icon svg-icon"
-                    v-html="icons.twitter"
-                  ></div>
+                <a class="social-circle"
+                   href="https://twitter.com/habitica"
+                   target="_blank">
+                  <div class="social-icon svg-icon"
+                       v-html="icons.twitter"></div>
                 </a>
-                <a
-                  class="social-circle"
-                  href="https://www.instagram.com/habitica/"
-                  target="_blank"
-                >
-                  <div
-                    class="social-icon svg-icon instagram"
-                    v-html="icons.instagram"
-                  ></div>
+                <a class="social-circle"
+                   href="https://www.instagram.com/habitica/"
+                   target="_blank">
+                  <div class="social-icon svg-icon instagram"
+                       v-html="icons.instagram"></div>
                 </a>
-                <a
-                  class="social-circle"
-                  href="https://www.facebook.com/Habitica"
-                  target="_blank"
-                >
-                  <div
-                    class="social-icon facebook svg-icon"
-                    v-html="icons.facebook"
-                  ></div>
+                <a class="social-circle"
+                   href="https://www.facebook.com/Habitica"
+                   target="_blank">
+                  <div class="social-icon facebook svg-icon"
+                       v-html="icons.facebook"></div>
                 </a>
               </div>
             </div>
@@ -177,31 +139,21 @@
               {{ $t('donateText3') }}
             </div>
             <div class="col-12 col-md-4">
-              <button
-                v-if="user"
-                class="btn btn-contribute btn-front btn-flat"
-                @click="donate()"
-              >
-                <div
-                  class="svg-icon heart"
-                  v-html="icons.heart"
-                ></div>
+              <button v-if="user"
+                      class="btn btn-contribute btn-front btn-flat"
+                      @click="donate()">
+                <div class="svg-icon heart"
+                     v-html="icons.heart"></div>
                 <div class="text">
                   {{ $t('companyDonate') }}
                 </div>
               </button>
-              <div
-                v-else
-                class="btn btn-contribute btn-front btn-flat"
-              >
-                <a
-                  href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
-                  target="_blank"
-                >
-                  <div
-                    class="svg-icon heart"
-                    v-html="icons.heart"
-                  ></div>
+              <div v-else
+                   class="btn btn-contribute btn-front btn-flat">
+                <a href="http://habitica.fandom.com/wiki/Contributing_to_Habitica"
+                   target="_blank">
+                  <div class="svg-icon heart"
+                       v-html="icons.heart"></div>
                   <div class="text">{{ $t('companyContribute') }}</div>
                 </a>
               </div>
@@ -215,108 +167,64 @@
         </div>
       </div>
       <div class="row">
-        <div class="col-12 col-md-5">
+        <div class="col-12 col-md-5 text-center text-md-left">
           © 2020 Habitica. All rights reserved.
-          <div
-            v-if="!IS_PRODUCTION && isUserLoaded"
-            class="debug float-left"
-          >
-            <button
-              class="btn btn-primary"
-              @click="debugMenuShown = !debugMenuShown"
-            >
+          <div v-if="IS_PRODUCTION && isUserLoaded"
+               class="debug float-left">
+            <button class="btn btn-primary"
+                    @click="debugMenuShown = !debugMenuShown">
               Toggle Debug Menu
             </button>
-            <div
-              v-if="debugMenuShown"
-              class="debug-group"
-            >
-              <a
-                class="btn btn-secondary"
-                @click="setHealthLow()"
-              >Health = 1</a>
-              <a
-                class="btn btn-secondary"
-                @click="addMissedDay(1)"
-              >+1 Missed Day</a>
-              <a
-                class="btn btn-secondary"
-                @click="addMissedDay(2)"
-              >+2 Missed Days</a>
-              <a
-                class="btn btn-secondary"
-                @click="addMissedDay(8)"
-              >+8 Missed Days</a>
-              <a
-                class="btn btn-secondary"
-                @click="addMissedDay(32)"
-              >+32 Missed Days</a>
-              <a
-                class="btn btn-secondary"
-                @click="addTenGems()"
-              >+10 Gems</a>
-              <a
-                class="btn btn-secondary"
-                @click="addHourglass()"
-              >+1 Mystic Hourglass</a>
-              <a
-                class="btn btn-secondary"
-                @click="addGold()"
-              >+500GP</a>
-              <a
-                class="btn btn-secondary"
-                @click="plusTenHealth()"
-              >+ 10HP</a>
-              <a
-                class="btn btn-secondary"
-                @click="addMana()"
-              >+MP</a>
-              <a
-                class="btn btn-secondary"
-                @click="addLevelsAndGold()"
-              >+Exp +GP +MP</a>
-              <a
-                class="btn btn-secondary"
-                @click="addExp()"
-              >+Exp</a>
-              <a
-                class="btn btn-secondary"
-                @click="addOneLevel()"
-              >+1 Level</a>
-              <a
-                class="btn btn-secondary"
-                tooltip="+1000 to boss quests. 300 items to collection quests"
-                @click="addQuestProgress()"
-              >Quest Progress Up</a>
-              <a
-                class="btn btn-secondary"
-                @click="makeAdmin()"
-              >Make Admin</a>
-              <a
-                class="btn btn-secondary"
-                @click="openModifyInventoryModal()"
-              >Modify Inventory</a>
+            <div v-if="debugMenuShown"
+                 class="debug-group">
+              <a class="btn btn-secondary"
+                 @click="setHealthLow()">Health = 1</a>
+              <a class="btn btn-secondary"
+                 @click="addMissedDay(1)">+1 Missed Day</a>
+              <a class="btn btn-secondary"
+                 @click="addMissedDay(2)">+2 Missed Days</a>
+              <a class="btn btn-secondary"
+                 @click="addMissedDay(8)">+8 Missed Days</a>
+              <a class="btn btn-secondary"
+                 @click="addMissedDay(32)">+32 Missed Days</a>
+              <a class="btn btn-secondary"
+                 @click="addTenGems()">+10 Gems</a>
+              <a class="btn btn-secondary"
+                 @click="addHourglass()">+1 Mystic Hourglass</a>
+              <a class="btn btn-secondary"
+                 @click="addGold()">+500GP</a>
+              <a class="btn btn-secondary"
+                 @click="plusTenHealth()">+ 10HP</a>
+              <a class="btn btn-secondary"
+                 @click="addMana()">+MP</a>
+              <a class="btn btn-secondary"
+                 @click="addLevelsAndGold()">+Exp +GP +MP</a>
+              <a class="btn btn-secondary"
+                 @click="addExp()">+Exp</a>
+              <a class="btn btn-secondary"
+                 @click="addOneLevel()">+1 Level</a>
+              <a class="btn btn-secondary"
+                 tooltip="+1000 to boss quests. 300 items to collection quests"
+                 @click="addQuestProgress()">Quest Progress Up</a>
+              <a class="btn btn-secondary"
+                 @click="makeAdmin()">Make Admin</a>
+              <a class="btn btn-secondary"
+                 @click="openModifyInventoryModal()">Modify Inventory</a>
             </div>
           </div>
         </div>
         <div class="col-12 col-md-2 text-center">
-          <div
-            class="logo svg-icon"
-            v-html="icons.gryphon"
-          ></div>
+          <div class="logo svg-icon"
+               v-html="icons.gryphon"></div>
         </div>
-        <div class="col-12 col-md-5 text-right">
+        <div class="col-12 col-md-5 text-center text-md-right my-1">
           <span class="ml-4">
-            <a
-              target="_blank"
-              href="/static/privacy"
-            >{{ $t('privacy') }}</a>
+            <a target="_blank"
+               href="/static/privacy">{{ $t('privacy') }}</a>
           </span>
           <span class="ml-4">
-            <a
-              target="_blank"
-              href="/static/terms"
-            >{{ $t('terms') }}</a>
+            <a target="_blank"
+               href="/static/terms">{{ $t('terms') }}</a>
           </span>
         </div>
       </div>
@@ -325,154 +233,140 @@
 </template>
 
 <style lang="scss" scoped>
-  .footer-row {
-    margin: 0;
-    flex: 0 1 auto;
-    z-index: 10;
+.footer-row {
+  margin: 0;
+  flex: 0 1 auto;
+  z-index: 10;
+}
+footer {
+  color: #c3c0c7;
+  padding-bottom: 3em;
+  a {
+    color: #2995cd;
   }
-
-  footer {
-    color: #c3c0c7;
-    padding-bottom: 3em;
-
-    a {
-      color: #2995cd;
-    }
-  }
-
+}
+h3 {
+  color: #878190;
+}
+ul {
+  padding-left: 0;
+  list-style-type: none;
+}
+li {
+  margin-bottom: 0.5em;
+}
+.social {
   h3 {
-    color: #878190;
+    text-align: right;
   }
-
-  ul {
-    padding-left: 0;
-    list-style-type: none;
-  }
-
-  li {
-    margin-bottom: .5em;
-  }
-
-  .social {
-    h3 {
-      text-align: right;
-    }
-  }
-
-  .icons {
-    display: flex;
-    justify-content: flex-end;
-    flex-shrink: 1;
-  }
-
-  // smaller than desktop
-  @media only screen and (max-width: 992px) {
-    .social-circle {
-      height: 32px !important;
-      width: 32px !important;
-
-      margin-left: 0.75em !important;
-    }
-  }
-
+}
+.icons {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 1;
+}
+// smaller than desktop
+@media only screen and (max-width: 992px) {
   .social-circle {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    background-color: #c3c0c7;
+    height: 32px !important;
+    width: 32px !important;
+    margin-left: 0.75em !important;
+  }
+}
+//mobile view
+@media screen and (max-width: 770px) {
+  .footer-main {
     display: flex;
-    margin-left: 1em;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:hover {
-      background-color: #a5a1ac;
-    }
-
-    .social-icon {
-      color: #e1e0e3;
-      width: 16px;
-      margin: auto;
-    }
+    flex-direction: column;
   }
-
-  .logo {
-    width: 24px;
-    height: 24px;
-    margin: 0 auto;
+  .logo-container {
+    order: 1;
+  }
+}
+.social-circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: #c3c0c7;
+  display: flex;
+  margin-left: 1em;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:hover {
+    background-color: #a5a1ac;
+  }
+  .social-icon {
     color: #e1e0e3;
+    width: 16px;
+    margin: auto;
   }
-
-  .debug-group {
-    position: absolute;
-    background: #fff;
-    top: -300px;
-    border-radius: 2px;
-    padding: 2em;
-  }
-
-  .btn-contribute {
-    background: #c3c0c7;
-    box-shadow: none;
-    border-radius: 4px;
-    font-family: Roboto Condensed,sans-serif;
-
-    &:hover {
-      background: #a5a1ac;
-
-      .text {
-        color: white;
-      }
-    }
-
-    a {
-      display: flex;
-    }
-
-    .heart {
-      max-height: 25px;
-      width: 18px;
-      margin-right: .5em;
-      margin-bottom: .2em;
-    }
-
-    .text, .heart {
-      display: inline-block;
-      vertical-align: bottom;
+}
+.logo {
+  width: 24px;
+  height: 24px;
+  margin: 0 auto;
+  color: #e1e0e3;
+}
+.debug-group {
+  position: absolute;
+  background: #fff;
+  top: -300px;
+  border-radius: 2px;
+  padding: 2em;
+}
+.btn-contribute {
+  background: #c3c0c7;
+  box-shadow: none;
+  border-radius: 4px;
+  font-family: Roboto Condensed, sans-serif;
+  &:hover {
+    background: #a5a1ac;
+    .text {
+      color: white;
     }
   }
+  a {
+    display: flex;
+  }
+  .heart {
+    max-height: 25px;
+    width: 18px;
+    margin-right: 0.5em;
+    margin-bottom: 0.2em;
+  }
+  .text,
+  .heart {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
 </style>
 
 <style lang="scss">
-  .heart svg {
-    margin-top: .1em;
-  }
-
-  .facebook svg {
-    width: 10px;
-    margin: 0 auto;
-  }
-
-  footer {
-    &.expanded {
-      padding-left: 6em;
-      padding-right: 6em;
-      padding-top: 3em;
-      background: #e1e0e3;
+.heart svg {
+  margin-top: 0.1em;
+}
+.facebook svg {
+  width: 10px;
+  margin: 0 auto;
+}
+footer {
+  &.expanded {
+    padding-left: 6em;
+    padding-right: 6em;
+    padding-top: 3em;
+    background: #e1e0e3;
+    color: #878190;
+    min-height: 408px;
+    a {
       color: #878190;
-      min-height: 408px;
-
-      a {
-        color: #878190;
-      }
-
-      .logo {
-        color: #c3c0c7;
-      }
+    }
+    .logo {
+      color: #c3c0c7;
     }
   }
+}
 </style>
 
 <script>
@@ -480,17 +374,14 @@ import axios from 'axios';
 import moment from 'moment';
 import { mapState } from '@/libs/store';
 import * as Analytics from '@/libs/analytics';
-
 import gryphon from '@/assets/svg/gryphon.svg';
 import twitter from '@/assets/svg/twitter.svg';
 import facebook from '@/assets/svg/facebook.svg';
 import instagram from '@/assets/svg/instagram.svg';
 import heart from '@/assets/svg/heart.svg';
-
-import buyGemsModal from './payments/buyGemsModal';
+import buyGemsModal from './payments/buyGemsModal.vue';
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production'; // eslint-disable-line no-process-env
-
 export default {
   components: {
     buyGemsModal,
@@ -514,7 +405,6 @@ export default {
     getDataDisplayToolUrl () {
       const base = 'https://oldgods.net/habitrpg/habitrpg_user_data_display.html';
       if (!this.user) return null;
-
       return `${base}?uuid=${this.user._id}`;
     },
   },
@@ -531,13 +421,10 @@ export default {
     },
     async addMissedDay (numberOfDays) {
       if (!window.confirm(`Are you sure you want to reset the day by ${numberOfDays} day(s)?`)) return; // eslint-disable-line no-alert
-
       const date = moment(this.user.lastCron).subtract(numberOfDays, 'days').toDate();
-
       await axios.post('/api/v4/debug/set-cron', {
         lastCron: date,
       });
-
       // @TODO: Notification.text('-' + numberOfDays + ' day(s), remember to refresh');
       // @TODO: Sync user?
     },
@@ -576,7 +463,6 @@ export default {
       const two = three / 10;
       const one = Math.round(two) * 10;
       exp = this.user.stats.exp + one;
-
       this.$store.dispatch('user:set', {
         'stats.exp': exp,
       });
@@ -588,18 +474,16 @@ export default {
     },
     async addQuestProgress () {
       await axios.post('/api/v4/debug/quest-progress');
-
       //  @TODO:  Notification.text('Quest progress increased');
       //  @TODO:  User.sync();
     },
-    async makeAdmin  () {
+    async makeAdmin () {
       await axios.post('/api/v4/debug/make-admin');
-
       // @TODO: Notification.text('You are now an admin!
       // Go to the Hall of Heroes to change your contributor level.');
       // @TODO: sync()
     },
-    openModifyInventoryModal  () {
+    openModifyInventoryModal () {
       this.$root.$emit('bv::show::modal', 'modify-inventory');
     },
     donate () {