Merge pull request #80 from recepcaoimeusp/fix/mobileVisualBugs

Fix final mobile bugs
recepcaoimeusp · Feb 7, 2024 · 68c6abc · 68c6abc
2 parents d1b521a + 3937032
commit 68c6abc
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 50 deletions.
diff --git a/components/GuiaDeBixe.vue b/components/GuiaDeBixe.vue
@@ -15,8 +15,10 @@
     </template>
     <template v-else>
       <div class="d-flex flex-column align-center" :style="{ width: pdfWidth }">
-        <v-icon size="100">fa-solid fa-lock</v-icon>
-        <h1 class="mt-8 text-center">
+        <v-icon :size="lockSize" class="text--disabled"
+          >fa-solid fa-lock</v-icon
+        >
+        <h1 class="title mt-8 text-center text-h5 text-md-h4 text--disabled">
           O Guia de Bixe será disponibilizado em breve!
         </h1>
       </div>
@@ -58,13 +60,16 @@ export default {
           return '701.6px'
       }
     },
+    lockSize() {
+      return this.$vuetify.breakpoint.mdAndDown ? 60 : 90
+    },
   },
 }
 </script>
 
 <style scoped>
-h1 {
-  font-family: Gang of Three;
+.title {
+  font-family: Gang of Three !important;
 }
 .downloadButton {
   font-size: 16px;

diff --git a/components/SocialMedia.vue b/components/SocialMedia.vue
@@ -4,7 +4,7 @@
       <v-icon
         v-for="icon in icons"
         :key="icon.name"
-        class="mx-5"
+        class="mx-3 mx-sm-4 mx-md-5"
         tag="a"
         :href="icon.link"
         target="_blank"

diff --git a/pages/guia.vue b/pages/guia.vue
@@ -2,7 +2,9 @@
   <v-container class="pa-md-16 py-16">
     <Frame red>
       <div class="d-flex flex-column align-center pa-4 pa-md-6">
-        <h1 class="mb-md-10 mb-4 txtWhite">Guia de Bixe</h1>
+        <h1 class="title mb-md-10 mb-6 txtWhite text-center text-h5 text-md-h4">
+          Guia de Bixe
+        </h1>
         <GuiaDeBixe />
       </div>
     </Frame>
@@ -21,7 +23,7 @@ export default {
 </script>
 
 <style scoped>
-h1 {
-  font-family: Gang of Three;
+.title {
+  font-family: Gang of Three !important;
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,46 +1,48 @@
 <template>
-  <v-row xs-12>
-    <v-col>
-      <div class="d-flex px-8 py-10 py-md-16 justify-center">
-        <Logo />
-      </div>
-      <PageBar
-        single-col
-        background-colored
-        min-height-row="400px"
-        align-row="start"
-        align-col="start"
-        border-top
-      >
-        <template #center>
-          <v-row class="px-5 py-5 py-md-10">
-            <v-col align="center">
-              <img :width="widthPo" src="~@/assets/images/po.svg" />
-            </v-col>
-            <v-col
-              class="d-flex flex-column text-center text-md-left"
-              cols="12"
-              md="6"
-            >
-              <h1 class="my-5 welcomeTitle txtWhite">Bem-vinde ao IME!</h1>
-              <p class="welcomeParagraph txtWhite">
-                Ser aprovado(a) na USP não é uma tarefa fácil. E é uma honra,
-                para nós, recebê-lo(a) no nosso queridíssimo e incrível
-                instituto. Agora é hora de comemorar, porque, daqui em diante,
-                você é oficialmente um IMEane!
-              </p>
-            </v-col>
-          </v-row>
-          <main class="mt-5">
-            <h1 align="center" class="timelineTitle py-5 txtWhite">
-              Passei! E agora?
-            </h1>
-            <EventosTimeline :eventos="eventos" />
-          </main>
-        </template>
-      </PageBar>
-    </v-col>
-  </v-row>
+  <div>
+    <PageBar single-col align-row="center" align-col="center">
+      <template #center>
+        <div class="d-flex px-8 py-10 py-md-16 justify-center">
+          <Logo />
+        </div>
+      </template>
+    </PageBar>
+    <PageBar
+      single-col
+      background-colored
+      min-height-row="400px"
+      align-row="start"
+      align-col="start"
+      border-top
+    >
+      <template #center>
+        <v-row class="px-5 py-5 py-md-10">
+          <v-col align="center">
+            <img :width="widthPo" src="~@/assets/images/po.svg" />
+          </v-col>
+          <v-col
+            class="d-flex flex-column text-center text-md-left"
+            cols="12"
+            md="6"
+          >
+            <h1 class="my-5 welcomeTitle txtWhite">Bem-vinde ao IME!</h1>
+            <p class="welcomeParagraph txtWhite">
+              Ser aprovado(a) na USP não é uma tarefa fácil. E é uma honra, para
+              nós, recebê-lo(a) no nosso queridíssimo e incrível instituto.
+              Agora é hora de comemorar, porque, daqui em diante, você é
+              oficialmente um IMEane!
+            </p>
+          </v-col>
+        </v-row>
+        <main class="mt-5">
+          <h1 align="center" class="timelineTitle py-5 txtWhite">
+            Passei! E agora?
+          </h1>
+          <EventosTimeline :eventos="eventos" />
+        </main>
+      </template>
+    </PageBar>
+  </div>
 </template>
 
 <script>