Bug/bug#138 fix footer position

src/app/app.component.html

@@ -1,3 +1,5 @@
-<app-header></app-header>
-<app-shell></app-shell>
-<app-footer></app-footer>
+<div class="app-wrapper">
+  <app-header></app-header>
+  <app-shell></app-shell>
+  <app-footer></app-footer>
+</div>

src/app/app.component.scss

@@ -0,0 +1,6 @@
+.app-wrapper {
+  min-height: 100%;
+  position: relative;
+  padding-bottom: 117px;
+  box-sizing: border-box;
+}

src/app/footer/footer.component.html

@@ -1,7 +1,15 @@
 <div class="footer" fxLayoutAlign="space-between center">
-    <a target="_blank" rel="noreferrer" href="https://mon.gov.ua/">
-      <img src="../../assets/images/MES.png" alt="Ministry of Education">
-    </a>
+    <div fxLayoutGap="3rem" fxLayoutAlign=" center">
+      <a target="_blank" rel="noreferrer" href="https://mon.gov.ua/">
+        <img id="mon-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/">
+        <img id="mkip-logo" src="../../assets/images/MinCultInfoPolicy.png" alt="Ministry of Culture and Information Policy of Ukraine">
+      </a>
+      <a target="_blank" rel="noreferrer" href="https://sport.gov.ua/">
+        <img id="min-sport-logo" src="../../assets/images/MinMolodSport.png" alt="Ministry of Youth and Sports of Ukraine">
+      </a>
+    </div>
     <a target="_blank" rel="noreferrer" href="https://www.softserveinc.com/">
       <img src="../../assets/images/SoftServeLogo.png" alt="SoftServe">
     </a>

src/app/footer/footer.component.scss

@@ -1,6 +1,23 @@
 .footer {
   background-color: #EBEBEB;
-  padding: 2rem 5rem;
+  padding: 0 5rem;
+  height: 117px;
+  position: absolute;
+  bottom: 0;
+  z-index: 1;
+  width: 100%;
+  #mon-logo {
+    width: 230px;
+    height: 41px;
+  }
+  #mkip-logo {
+    width: 323px;
+    height: 96px;
+  }
+  #min-sport-logo {
+    width: 83px;
+    height: 41px;
+  }
 }
 @media(max-width: 415px) {
   .footer {

src/app/shared/components/category-card/category-card.component.html

@@ -4,7 +4,7 @@
     <h3 class="title">{{ categoryCard.title }}</h3>
     <div class="link">
       <a routerLink="/result" (click)="selectCategory(categoryCard.id)">
-        254 гуртки <span class="material-icons arrow">arrow_forward</span>
+        {{ workshopsAmount }} {{ getWord() }} <span class="material-icons arrow">arrow_forward</span>
       </a>
     </div>
   </div>

src/app/shared/components/category-card/category-card.component.ts

@@ -13,13 +13,35 @@ export class CategoryCardComponent implements OnInit {
 
   @Input() categoryCard: Category;
   @Input() icons: {};
+  workshopsAmount = Math.floor(Math.random()*300);
 
   constructor(private store: Store) { }
 
   ngOnInit(): void {
+    this.getWord();
   }
 
   selectCategory(id: number){
     this.store.dispatch(new SetCategory(id));
   }
+
+  /**
+   * Returns correct form of the ukrainian word "гурток" depending on the amount of workshops by category.
+   *
+   * @returns correct form of the word
+   *
+   */
+  getWord() : string {
+    if(this.workshopsAmount % 100 >= 10 && this.workshopsAmount % 100 <= 20){
+      return "гуртків";
+    } else {
+      if(this.workshopsAmount % 10 === 0 || this.workshopsAmount % 10 > 4){
+        return "гуртків";
+      } else if(this.workshopsAmount % 10 === 1){
+        return "гурток";
+      } else if(this.workshopsAmount % 10 > 1 && this.workshopsAmount % 10 < 5){
+        return "гуртки";
+      }
+    }
+  }
 }

src/app/shell/main/main.component.html

@@ -8,7 +8,7 @@ <h3>Найпопулярніші напрямки</h3>
     </div>
     <div class="categories-wrapper" fxLayout="row" fxLayoutAlign="space-between" fxLayoutGap="1.5rem grid">
       <app-category-card  *ngFor="let categoryCard of categoriesCards$ | async "  
-                          [categoryCard]=categoryCard
+                          [categoryCard]="categoryCard"
                           [icons]="icons$ | async">
       </app-category-card>
     </div>

src/app/shell/result/ordering/ordering.component.scss

@@ -7,6 +7,7 @@
   border-radius: 20px;
   border: none;
   font-weight: bold;
+  font-family: "Open Sans", sans-serif;
 }
 .options{
   position: absolute;

src/app/shell/result/organization-cards-list/organization-cards-list.component.scss

@@ -1,6 +1,9 @@
 .placeholder {
   min-width: 285px;
 }
+.pagination-wrapper {
+  margin-bottom: 62px;
+}
 pagination-controls {
   font-family: "Innerspace";
   font-weight: bold;
@@ -19,6 +22,8 @@ pagination-controls {
   display: flex;
   align-items: center;
   padding-inline-start: 0px;
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 
 .pagination ::ng-deep .ngx-pagination a {