From 8ecb0f45b5ec6e20452d285b00a4fb6d15c43281 Mon Sep 17 00:00:00 2001
From: Scott Coffrin <scott.coffrin@gmail.com>
Date: Fri, 8 Jul 2022 14:49:22 -0600
Subject: [PATCH] Modal responsive improvements (#14087)

* stack profile actions on smaller screens

* stack avatar and stats for even smaller screens

* remove unnecessary classes to keep profile nav on the same line

* adjust media query width

* refactor stats removing unnecessary classes and simplifying with less elements and relying more on flexbox

* adjust breakpoints for modal vs pofile page

* more margin for avatar

* handle allocation on middle size more gracefully

Co-authored-by: scoffrin <scoffrin@indeed.com>
---
 .../client/src/components/memberDetails.vue   |   6 +-
 .../src/components/userMenu/profile.vue       |  25 +++-
 .../src/components/userMenu/profileStats.vue  | 114 +++++++++++-------
 3 files changed, 102 insertions(+), 43 deletions(-)

diff --git a/website/client/src/components/memberDetails.vue b/website/client/src/components/memberDetails.vue
index 730c273ea6..844e599935 100644
--- a/website/client/src/components/memberDetails.vue
+++ b/website/client/src/components/memberDetails.vue
@@ -4,7 +4,7 @@
     :class="{ condensed, expanded, 'd-flex': isHeader, row: !isHeader, }"
     @click="showMemberModal(member)"
   >
-    <div :class="{ 'col-4': !isHeader }">
+    <div class="avatar-container" :class="{ 'col-4': !isHeader }">
       <avatar
         :member="member"
         :hide-class-badge="classBadgePosition !== 'under-avatar'"
@@ -92,6 +92,10 @@
   .member-details {
     white-space: nowrap;
     transition: all 0.15s ease-out;
+
+    .avatar-container {
+      margin-bottom: 20px;
+    }
   }
 
   .member-stats {
diff --git a/website/client/src/components/userMenu/profile.vue b/website/client/src/components/userMenu/profile.vue
index 83a7f308fb..0f7be55d50 100644
--- a/website/client/src/components/userMenu/profile.vue
+++ b/website/client/src/components/userMenu/profile.vue
@@ -126,7 +126,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="col-12 col-md-6 offset-md-3 text-center nav">
+      <div class="text-center nav">
         <div
           class="nav-item"
           :class="{active: selectedPage === 'profile'}"
@@ -470,6 +470,7 @@
   .gift-icon svg {
     height: 14px;
   }
+
 </style>
 
 <style lang="scss" scoped>
@@ -538,6 +539,7 @@
   }
 
   .nav {
+    width: 100%;
     font-weight: bold;
     min-height: 40px;
     justify-content: center;
@@ -710,6 +712,27 @@
       }
     }
   }
+
+  @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;
+    }
+    .member-details .avatar {
+      margin-bottom: 15px;
+    }
+  }
 </style>
 
 <script>
diff --git a/website/client/src/components/userMenu/profileStats.vue b/website/client/src/components/userMenu/profileStats.vue
index 291ab110b1..3b6efae101 100644
--- a/website/client/src/components/userMenu/profileStats.vue
+++ b/website/client/src/components/userMenu/profileStats.vue
@@ -4,7 +4,7 @@
     class="standard-page"
   >
     <div class="row">
-      <div class="col-12 col-md-6">
+      <div class="stats-section-equipment col-12 col-md-6">
         <h2 class="text-center">
           {{ $t('equipment') }}
         </h2>
@@ -12,7 +12,7 @@
           <div
             v-for="(label, key) in equipTypes"
             :key="key"
-            class="col-12 col-md-4 item-wrapper"
+            class="item-wrapper"
           >
             <div
               v-if="label !== 'skip'"
@@ -48,7 +48,7 @@
           </div>
         </div>
       </div>
-      <div class="col-12 col-md-6">
+      <div class="stats-section-costume col-12 col-md-6">
         <h2 class="text-center">
           {{ $t('costume') }}
         </h2>
@@ -57,7 +57,7 @@
           <div
             v-for="(label, key) in equipTypes"
             :key="key"
-            class="col-12 col-md-4 item-wrapper"
+            class="item-wrapper"
           >
             <!-- Append a "C" to the key name since HTML IDs have to be unique.-->
             <div
@@ -111,7 +111,7 @@
       </div>
     </div>
     <div class="row pet-mount-row">
-      <div class="col-12 col-md-6">
+      <div class="stats-section-pets col-12 col-md-6">
         <h2
           v-once
           class="text-center"
@@ -119,8 +119,7 @@
           {{ $t('pets') }}
         </h2>
         <div class="well pet-mount-well">
-          <div class="row col-12">
-            <div class="col-12 col-md-4">
+          <div class="pet-mount-well-image">
               <div
                 class="box"
                 :class="{white: user.items.currentPet}"
@@ -131,7 +130,7 @@
                 ></div>
               </div>
             </div>
-            <div class="col-12 col-md-8">
+            <div class="pet-mount-well-text">
               <div>{{ formatAnimal(user.items.currentPet, 'pet') }}</div>
               <div>
                 <strong>{{ $t('petsFound') }}:</strong>
@@ -142,10 +141,9 @@
                 {{ beastMasterProgress(user.items.pets) }}
               </div>
             </div>
-          </div>
         </div>
       </div>
-      <div class="col-12 col-md-6">
+      <div class="stats-section-mounts col-12 col-md-6">
         <h2
           v-once
           class="text-center"
@@ -153,28 +151,26 @@
           {{ $t('mounts') }}
         </h2>
         <div class="well pet-mount-well">
-          <div class="row col-12">
-            <div class="col-12 col-md-4">
+          <div class="pet-mount-well-image">
+            <div
+              class="box"
+              :class="{white: user.items.currentMount}"
+            >
               <div
-                class="box"
-                :class="{white: user.items.currentMount}"
-              >
-                <div
-                  class="mount"
-                  :class="`Mount_Icon_${user.items.currentMount}`"
-                ></div>
-              </div>
+                class="mount"
+                :class="`Mount_Icon_${user.items.currentMount}`"
+              ></div>
             </div>
-            <div class="col-12 col-md-8">
-              <div>{{ formatAnimal(user.items.currentMount, 'mount') }}</div>
-              <div>
-                <strong>{{ $t('mountsTamed') }}:</strong>
-                <span>{{ totalCount(user.items.mounts) }}</span>
-              </div>
-              <div>
-                <strong>{{ $t('mountMasterProgress') }}:</strong>
-                <span>{{ mountMasterProgress(user.items.mounts) }}</span>
-              </div>
+          </div>
+          <div class="pet-mount-well-text">
+            <div>{{ formatAnimal(user.items.currentMount, 'mount') }}</div>
+            <div>
+              <strong>{{ $t('mountsTamed') }}:</strong>
+              <span>{{ totalCount(user.items.mounts) }}</span>
+            </div>
+            <div>
+              <strong>{{ $t('mountMasterProgress') }}:</strong>
+              <span>{{ mountMasterProgress(user.items.mounts) }}</span>
             </div>
           </div>
         </div>
@@ -309,15 +305,13 @@
         v-if="showStatsSave"
         class="row save-row"
       >
-        <div class="col-12 col-md-6 offset-md-3 text-center">
-          <button
-            class="btn btn-primary"
-            :disabled="loading"
-            @click="saveAttributes()"
-          >
-            {{ loading ? $t('loading') : $t('save') }}
-          </button>
-        </div>
+        <button
+          class="btn btn-primary"
+          :disabled="loading"
+          @click="saveAttributes()"
+        >
+          {{ loading ? $t('loading') : $t('save') }}
+        </button>
       </div>
     </div>
   </div>
@@ -650,10 +644,17 @@ export default {
     border-radius: 2px;
     padding: 0.4em;
     padding-top: 1em;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 15px;
   }
 
   .well.pet-mount-well {
+    padding-left: 15px;
     padding-bottom: 1em;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
 
     strong {
       margin-right: .2em;
@@ -690,12 +691,13 @@ export default {
   }
 
   .save-row {
-    margin-top: 1em;
+    margin: 2em 0 1em 0;
+    justify-content: center;
   }
 
     .gear.box {
       vertical-align: top;
-      margin: 0 auto;
+      // margin: 0 auto;
     }
 
     .gear-label {
@@ -721,4 +723,34 @@ export default {
       // breaks the long words without a space
       word-break: break-word;
     }
+
+  @media (max-width: 850px) {
+    #stats .col-md-6 {
+      flex: none;
+      max-width: 100%;
+    }
+  }
+  @media(max-width: 990px) {
+    .modal-body #stats .col-md-6 {
+      flex: none;
+      max-width: 100%;
+    }
+
+    [class^="stats-section-"] {
+      margin-bottom: 30px;
+    }
+    #allocation {
+      .box {
+        width: 100%;
+        height: 100%;
+        .col-9 {
+          padding: 0;
+          margin: 0;
+        }
+        .col-9 div:first-child {
+          font-size: 13px;
+        }
+      }
+    }
+  }
 </style>