Merge pull request #83 from canopas/fixes-in-jobs-page

UI fixes in jobs page
canopas · Mar 4, 2022 · 48b4889 · 48b4889
2 parents 193ae63 + ae852a7
commit 48b4889
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 93 deletions.
diff --git a/vue-frontend/src/App.vue b/vue-frontend/src/App.vue
@@ -86,17 +86,17 @@ a {
 .jobs-normal-text {
   font-style: normal;
   font-weight: 400;
-  font-size: 1.1rem;
+  font-size: 1.15rem;
   line-height: 1.5rem;
   color: rgba(61, 61, 61, 0.8);
-  letter-spacing: 0.5px;
+  letter-spacing: 0.3px;
 }
 
 .normal-2-text {
   font-style: normal;
   font-weight: 400;
-  font-size: 0.9rem;
-  line-height: 1rem;
+  font-size: 1.1rem;
+  line-height: 1.3rem;
   color: rgba(61, 61, 61, 0.8);
 }
 
@@ -111,7 +111,7 @@ a {
   font-weight: bold;
   font-size: 1.25rem;
   line-height: 1.6rem;
-  letter-spacing: 0.1rem;
+  letter-spacing: 0.5px;
 }
 
 .underline-text {
@@ -219,15 +219,10 @@ a {
 
   .normal-text,
   .jobs-normal-text {
-    font-size: 1.125rem;
+    font-size: 1.2rem;
     line-height: 1.375rem;
   }
 
-  .normal-2-text {
-    font-size: 1rem;
-    line-height: 1.18rem;
-  }
-
   .underline-text {
     text-decoration: underline solid rgba(61, 61, 61, 0.8) 3px;
   }
@@ -252,7 +247,7 @@ a {
 
   .normal-2-text {
     font-size: 1.1875rem;
-    line-height: 1.437rem;
+    line-height: 1.4rem;
   }
 
   .gradient-btn {

diff --git a/vue-frontend/src/components/CareerDetails.vue b/vue-frontend/src/components/CareerDetails.vue
@@ -364,6 +364,7 @@ export default {
   font-size: 1.5rem !important;
   line-height: 2rem !important;
   letter-spacing: 0.05rem;
+  padding: 12px 0;
 }
 
 :deep(h2 > .bullet) {

diff --git a/vue-frontend/src/components/jobs/FaqSection.vue b/vue-frontend/src/components/jobs/FaqSection.vue
@@ -201,7 +201,7 @@ export default {
           : this.sliceTo - TOTAL_FAQ_IN_SLIDE;
 
       this.isActivePrev = this.sliceFrom >= TOTAL_FAQ_IN_SLIDE;
-      this.isActiveNext = this.sliceTo <= this.faqs.length;
+      this.isActiveNext = this.sliceTo < this.faqs.length;
       this.current = this.getRoundedIndex(dir);
     },
     getRoundedIndex(diff) {
@@ -248,6 +248,7 @@ export default {
 .faq-header {
   display: flex;
   flex-direction: row;
+  align-items: center;
 }
 
 .faq-icon {

diff --git a/vue-frontend/src/components/jobs/PerksAndBenifits.vue b/vue-frontend/src/components/jobs/PerksAndBenifits.vue
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="flex-div">
-      <div v-for="perk in perks" :key="perk.id" class="padding flex-elements">
+      <div v-for="perk in perks" :key="perk.id" class="flex-elements">
         <aspect-ratio height="120%" v-if="perk.image">
           <img
             class="image"
@@ -20,18 +20,13 @@
             alt="perks-and-benefits-image"
           />
         </aspect-ratio>
-        <aspect-ratio
-          height="90%"
-          v-else
-          class="padding"
-          :style="{ backgroundColor: perk.bgColor }"
-        >
-          <div class="details padding">
+        <aspect-ratio v-else :style="{ backgroundColor: perk.bgColor }">
+          <div class="details">
             <div class="normal-2-text title">
               <img :src="perk.icon" loading="lazy" />
               <span>{{ perk.title }}</span>
             </div>
-            <div class="normal-2-text desc-text">
+            <div class="normal-2-text text-center">
               <div v-html="perk.description" @click="scrollToCareer"></div>
             </div>
           </div>
@@ -193,17 +188,14 @@ export default {
 <style lang="scss" scoped>
 .container {
   margin: 100px auto;
+  padding: 0 10%;
 }
 
 .description {
   margin: 30px 10px;
   color: rgba(61, 61, 61, 0.8);
 }
 
-.padding {
-  padding: 10px;
-}
-
 .flex-div {
   display: flex;
   flex-direction: column;
@@ -215,8 +207,14 @@ export default {
   border-radius: 10px;
 }
 
+.flex-elements {
+  padding: 20px;
+}
+
 .flex-elements:nth-child(even) {
-  padding: 10px 30px;
+  .vue-aspect-ratio {
+    padding-top: 120% !important;
+  }
 }
 
 .image {
@@ -229,36 +227,65 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   height: 100%;
+  padding: 16px;
+
+  div {
+    flex: none !important;
+  }
+
+  .text-center {
+    margin-top: 10px;
+  }
 }
 
 .title {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
   color: #3d3d3d;
   font-weight: 700;
 
   span {
     margin-left: 10px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 }
 
-.desc-text {
-  text-align: center;
-  padding-top: 10px;
-}
-
-@include media-breakpoint-up(sm) {
+@media (min-width: 440px) {
   .flex-elements:nth-child(even) {
-    padding: 10px 35px;
+    padding: 10px 40px;
   }
+
   .details {
     padding: 40px;
   }
+
+  .flex-elements:nth-child(even) {
+    .vue-aspect-ratio {
+      padding-top: 100% !important;
+    }
+  }
+}
+
+@include media-breakpoint-only(md) {
+  .container {
+    max-width: 760px;
+  }
+
+  .flex-elements:nth-child(even) {
+    .vue-aspect-ratio {
+      padding-top: 120% !important;
+    }
+  }
 }
 
 @include media-breakpoint-up(md) {
+  .container {
+    padding: 0;
+  }
+
   .description {
     margin: 50px 80px;
   }
@@ -273,38 +300,28 @@ export default {
     }
   }
 
-  .flex-elements:nth-child(even),
-  .details {
-    padding: 9px;
+  .flex-elements,
+  .flex-elements:nth-child(even) {
+    padding: 10px;
   }
 
   .details {
-    height: auto;
-  }
-
-  .title {
-    justify-content: unset;
-  }
-
-  .desc-text {
-    text-align: left;
+    padding: 16px;
   }
 }
 
 @include media-breakpoint-up(lg) {
-  .padding {
+  .flex-elements,
+  .flex-elements:nth-child(even) {
     padding: 20px;
   }
-}
 
-@include media-breakpoint-up(xl) {
-  .title,
-  .desc-text {
-    padding-top: 20px;
+  .details {
+    padding: 30px;
   }
 }
 
-@include media-breakpoint-up(xxl) {
+@include media-breakpoint-up(xl) {
   .details {
     padding: 40px;
   }