From fe7beeff858289b49dc39e4583f39bbe8e8ce39a Mon Sep 17 00:00:00 2001
From: "maxim.gorbatyuk" <maxim.gorbatyuk@outlook.com>
Date: Fri, 16 May 2025 18:13:48 +0500
Subject: [PATCH] Adjusted front for mobile

---
 .../companies-page.component.html             |  11 +-
 .../company-page/company-page.component.html  |   8 +-
 src/index.html                                | 168 +++++++++---------
 src/styles.scss                               |  38 ++++
 4 files changed, 133 insertions(+), 92 deletions(-)

diff --git a/src/app/modules/companies/components/companies-page/companies-page.component.html b/src/app/modules/companies/components/companies-page/companies-page.component.html
index 02ab0a04..ff5911ee 100644
--- a/src/app/modules/companies/components/companies-page/companies-page.component.html
+++ b/src/app/modules/companies/components/companies-page/companies-page.component.html
@@ -2,7 +2,7 @@
 
 <div class="container my-5" *ngIf="companies; else dataLoading">
   <div class="card">
-    <div class="card-body px-5 py-5">
+    <div class="card-body mobile-px-5 mobile-py-5">
       <div class="company-list mb-3">
         <div class="row">
           <div class="col-md-6 mb-1">
@@ -15,8 +15,8 @@
               (keyup)="onKeyupEvent($event)"
             />
           </div>
-          <div class="col-md-6 mb-1">
-            <div class="d-inline-block w-50 me-2">
+          <div class="col-md-3 mb-1">
+            <div class="">
               <select
                 class="form-select"
                 id="withRating"
@@ -27,7 +27,8 @@
                 <option value="true">Только с рейтингом</option>
               </select>
             </div>
-
+          </div>
+          <div class="col-md-3 mb-1">
             <button
               type="button"
               class="btn btn-outline-primary"
@@ -117,7 +118,7 @@
         <div class="mt-3 d-flex justify-content-center">
           <img
             src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/company_reviews_1000.png"
-            class="img-fluid w-30"
+            class="img-fluid mobile-w-30"
             alt="logo"
             title="Кот Магеллан, который любит оставлять отзывы о компаниях"
           />
diff --git a/src/app/modules/companies/components/company-page/company-page.component.html b/src/app/modules/companies/components/company-page/company-page.component.html
index 2267711d..a1435f54 100644
--- a/src/app/modules/companies/components/company-page/company-page.component.html
+++ b/src/app/modules/companies/components/company-page/company-page.component.html
@@ -2,7 +2,7 @@
 
 <div class="container my-5" *ngIf="company; else dataLoading">
   <div class="card">
-    <div class="card-body p-5">
+    <div class="card-body mobile-px-5 mobile-py-5">
       <div class="mb-3">
         <div class="h2 mb-2">
           <div class="" *ngIf="company.reviewsCount > 0">
@@ -83,7 +83,7 @@
   <div class="h3 mt-5">Отзывы</div>
 
   <div class="card mt-3" *ngIf="company.reviews.length > 0; else nothingToShow">
-    <div class="card-body p-5">
+    <div class="card-body mobile-px-5 mobile-py-5">
       <div *ngFor="let review of company.reviews" class="mb-5">
         <div class="mb-2">
           <button
@@ -200,7 +200,7 @@
         <div class="mt-3 d-flex justify-content-center">
           <img
             src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/company_reviews_1000.png"
-            class="img-fluid w-30"
+            class="img-fluid mobile-w-30"
             alt="logo"
             title="Кот Магеллан, который любит оставлять отзывы о компаниях"
           />
@@ -228,7 +228,7 @@
       <div class="mt-2 mb-1 d-flex justify-content-center">
         <img
           src="https://techinterview.fra1.cdn.digitaloceanspaces.com/images/cat_reviewing_transparent_1000.png"
-          class="img-fluid w-30"
+          class="img-fluid mobile-w-30"
           alt="logo"
           title="Кот Магеллан, который любит оставлять отзывы о компаниях"
         />
diff --git a/src/index.html b/src/index.html
index a88df4a3..08d1fa5b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -56,95 +56,97 @@
 
     <div class="footer mt-auto d-block">
       <div class="py-5 footer-wrapper">
-        <div class="container d-flex justify-content-between">
-          <div class="d-inline-block">
-            <div class="h4">
-              <a class="footer-link" href="/">Techinterview.space</a>
-            </div>
-            <div class="mt-3">Алматы, Казахстан</div>
-            <div class="mt-3">
-              2025,
-              <a
-                class="footer-link"
-                href="https://mgorbatyuk.dev"
-                target="_blank"
-                >© maximgorbatyuk</a
-              >
-            </div>
-          </div>
-
-          <div class="d-inline-block">
-            <div class="h4">Наши друзья</div>
-            <ul class="mt-3 no-bullets">
-              <li>
-                <a
-                  class="footer-link"
-                  href="https://maximgorbatyuk.notion.site/e7e9dbadcbf54030b3b92105d96cd98d?utm_source=techinterview.space"
-                  target="_blank"
-                  title="База знаний по ИП в Казахстане"
-                  rel="noopener noreferrer"
-                >
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2">База знаний по ИП в Казахстане</span>
-                </a>
-              </li>
-              <li>
+        <div class="container">
+          <div class="row">
+            <div class="col-md-4 mobile-mb-3">
+              <div class="h4">
+                <a class="footer-link" href="/">Techinterview.space</a>
+              </div>
+              <div class="mt-3">Алматы, Казахстан</div>
+              <div class="mt-3">
+                2025,
                 <a
                   class="footer-link"
-                  href="https://t.me/Projects_KZ"
+                  href="https://mgorbatyuk.dev"
                   target="_blank"
-                  title="Сообщество проектных менеджеров в Телеграм"
-                  rel="noopener noreferrer"
+                  >© maximgorbatyuk</a
                 >
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2">ТГ-канал @Projects_KZ</span>
-                </a>
-              </li>
-              <li>
-                <a
-                  class="footer-link"
-                  href="https://t.me/backenderskz"
-                  target="_blank"
-                  title="Сообщество бэкендеров в Телеграм"
-                  rel="noopener noreferrer"
-                >
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2"
-                    >ТГ-канал @backenderskz (Kolesa Group)</span
+              </div>
+            </div>
+
+            <div class="col-md-4 mobile-mb-3">
+              <div class="h4">Наши друзья</div>
+              <ul class="mt-3 no-bullets">
+                <li>
+                  <a
+                    class="footer-link"
+                    href="https://maximgorbatyuk.notion.site/e7e9dbadcbf54030b3b92105d96cd98d?utm_source=techinterview.space"
+                    target="_blank"
+                    title="База знаний по ИП в Казахстане"
+                    rel="noopener noreferrer"
                   >
-                </a>
-              </li>
-            </ul>
-          </div>
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2">База знаний по ИП в Казахстане</span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="footer-link"
+                    href="https://t.me/Projects_KZ"
+                    target="_blank"
+                    title="Сообщество проектных менеджеров в Телеграм"
+                    rel="noopener noreferrer"
+                  >
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2">ТГ-канал @Projects_KZ</span>
+                  </a>
+                </li>
+                <li>
+                  <a
+                    class="footer-link"
+                    href="https://t.me/backenderskz"
+                    target="_blank"
+                    title="Сообщество бэкендеров в Телеграм"
+                    rel="noopener noreferrer"
+                  >
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2"
+                      >ТГ-канал @backenderskz (Kolesa Group)</span
+                    >
+                  </a>
+                </li>
+              </ul>
+            </div>
 
-          <div class="d-inline-block">
-            <div class="h4">Ссылки</div>
-            <ul class="mt-3 no-bullets">
-              <li>
-                <a class="footer-link" href="/about-us">
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2">О нас</span>
-                </a>
-              </li>
-              <li>
-                <a class="footer-link" href="/about-telegram-bot">
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2">О телеграм боте</span>
-                </a>
-              </li>
-              <li>
-                <a class="footer-link" href="/agreements/privacy-policy">
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2">Пользовательское соглашение</span>
-                </a>
-              </li>
-              <li>
-                <a class="footer-link" href="/?uwu=true">
-                  <i class="bi bi-chevron-right"></i
-                  ><span class="ms-2">UwU?</span>
-                </a>
-              </li>
-            </ul>
+            <div class="col-md-4">
+              <div class="h4">Ссылки</div>
+              <ul class="mt-3 no-bullets">
+                <li>
+                  <a class="footer-link" href="/about-us">
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2">О нас</span>
+                  </a>
+                </li>
+                <li>
+                  <a class="footer-link" href="/about-telegram-bot">
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2">О телеграм боте</span>
+                  </a>
+                </li>
+                <li>
+                  <a class="footer-link" href="/agreements/privacy-policy">
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2">Пользовательское соглашение</span>
+                  </a>
+                </li>
+                <li>
+                  <a class="footer-link" href="/?uwu=true">
+                    <i class="bi bi-chevron-right"></i
+                    ><span class="ms-2">UwU?</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/styles.scss b/src/styles.scss
index 2095599e..0d8a511e 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -161,6 +161,44 @@ ul.no-bullets {
   width: 80%;
 }
 
+.mobile-mb-3 {
+  margin-bottom: inherit;
+}
+
+@media (max-width: 768px) {
+  .mobile-mb-3 {
+    margin-bottom: 36px;
+  }
+}
+
+.mobile-px-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+
+  @media (max-width: 768px) {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+}
+
+.mobile-py-5 {
+  padding-left: 3rem !important;
+  padding-right: 3rem !important;
+
+  @media (max-width: 768px) {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+}
+
+.mobile-w-30 {
+  width: 30% !important;
+
+  @media (max-width: 768px) {
+    width: 100% !important;
+  }
+}
+
 /* ng-select bootstrap-like styles. Start */
 /* https://github.com/ng-select/ng-select/issues/1955#issuecomment-1240459808 */
 /*.form-floating {