Dvorak/2563 footer for small screens fix (#2589)

ita-social-projects · Jul 6, 2024 · 8adc405 · 8adc405
1 parent d81d53c
commit 8adc405
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
@@ -1,21 +1,24 @@
 <div class="trial-message">
   <span>{{ 'TRIAL_MESSAGE' | translate }}</span>
 </div>
-<div class="footer" fxLayout="row" fxLayoutAlign="flex-start center" fxLayoutGap="3rem" fxLayoutGap.lt-md="1rem">
+<div class="footer" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="3rem" fxLayoutGap.lt-md="1rem">
   <div fxLayout="row" fxLayoutAlign="flex-start center" fxLayoutGap.gt-sm="3rem" fxLayoutGap.lt-md="1rem" fxFlex="1 1 auto">
     <a target="_blank" rel="noreferrer" href="https://mon.gov.ua/">
       <img class="min-logo" src="assets/images/MES.png" alt="Ministry of Education and Science of Ukraine" />
     </a>
-    <a target="_blank" rel="noreferrer" href="https://mkip.gov.ua/">
+    <a target="_blank" rel="noreferrer" href="https://mkip.gov.ua/" class="mincult">
       <img class="min-logo" src="assets/images/MinCultInfoPolicy.png" alt="Ministry of Culture and Information Policy of Ukraine" />
     </a>
-    <a target="_blank" rel="noreferrer" href="https://mms.gov.ua/">
+    <a target="_blank" rel="noreferrer" href="https://mms.gov.ua/" class="min-molodi-full">
       <img class="min-logo" src="assets/images/MinMolodSport.png" alt="Ministry of Youth and Sports of Ukraine" />
     </a>
   </div>
   <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap.gt-sm="2rem" fxLayoutGap.lt-md="1rem" fxFlex="1 1 auto">
     <a target="_blank" rel="noreferrer" href="https://www.softserveinc.com/uk-ua/">
       <img class="company-logo" src="assets/images/SoftServeLogo.svg" alt="SoftServe" />
     </a>
+    <a target="_blank" rel="noopener noreferrer" href="https://mms.gov.ua/" class="min-molodi-mobile">
+      <img class="min-logo" src="assets/images/MinMolodSport.png" alt="Ministry of Youth and Sports of Ukraine" />
+    </a>
   </div>
 </div>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
@@ -22,6 +22,14 @@
     height: 41px;
   }
 
+  .min-molodi-mobile {
+    display: none;
+  }
+
+  .min-molodi-full {
+    display: block;
+  }
+
   @media (max-width: 1000px) {
     padding: 1.5rem 3rem;
     flex-direction: column !important;
@@ -61,4 +69,24 @@
       height: 12px;
     }
   }
+
+  @media (max-width: 450px) {
+    .min-molodi-mobile {
+      display: block;
+      margin-right: 105px;
+    }
+
+    & > div {
+      margin-right: 0 !important;
+      justify-content: space-between !important;
+    }
+
+    .min-molodi-full {
+      display: none;
+    }
+
+    .mincult {
+      margin-right: 0 !important;
+    }
+  }
 }