From 9f1b6faa4f6b8187c3f719fdd33173502fc030c9 Mon Sep 17 00:00:00 2001
From: skywalker <baskirill.an@gmail.com>
Date: Sun, 25 Aug 2024 13:36:41 +0300
Subject: [PATCH] feat(catalogue): flexible design

---
 client/src/app/{App.css => App.scss}          |  1 +
 client/src/app/App.tsx                        |  2 +-
 .../src/pages/catalogue/ui/Catalogue.page.tsx |  2 +-
 .../catalogue/ui/SearchBarInput.field.tsx     |  2 +-
 ....module.css => Catalogue.page.module.scss} |  8 ++++-
 .../styles/Catalogue.page.queries.module.css  |  5 ---
 .../ui/styles/SearchBarInput.field.module.css |  5 ---
 .../styles/SearchBarInput.field.module.scss   | 13 +++++++
 client/src/pages/home/ui/Home.page.tsx        |  2 +-
 ....page.module.css => Home.page.module.scss} |  4 ++-
 .../ui/styles/InstrumentCard.module.css       |  2 +-
 client/src/shared/styles/vars.scss            |  1 +
 .../ui/SidebarFilter.widget.tsx               | 35 +++++++++++--------
 ...e.css => SidebarFilter.widget.module.scss} | 13 +++++++
 .../widgets/catalogue-serp/ui/Serp.widget.tsx | 18 +++++-----
 .../ui/styles/Serp.widget.module.css          |  9 -----
 .../ui/styles/Serp.widget.module.scss         | 25 +++++++++++++
 17 files changed, 98 insertions(+), 49 deletions(-)
 rename client/src/app/{App.css => App.scss} (99%)
 rename client/src/pages/catalogue/ui/styles/{Catalogue.page.module.css => Catalogue.page.module.scss} (66%)
 delete mode 100644 client/src/pages/catalogue/ui/styles/Catalogue.page.queries.module.css
 delete mode 100644 client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.css
 create mode 100644 client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.scss
 rename client/src/pages/home/ui/styles/{Home.page.module.css => Home.page.module.scss} (94%)
 create mode 100644 client/src/shared/styles/vars.scss
 rename client/src/widgets/catalogue-filter/ui/styles/{SidebarFilter.widget.module.css => SidebarFilter.widget.module.scss} (53%)
 delete mode 100644 client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.css
 create mode 100644 client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.scss

diff --git a/client/src/app/App.css b/client/src/app/App.scss
similarity index 99%
rename from client/src/app/App.css
rename to client/src/app/App.scss
index a191d3b9..78fa89aa 100644
--- a/client/src/app/App.css
+++ b/client/src/app/App.scss
@@ -1,5 +1,6 @@
 :root {
   box-sizing: border-box;
+
 }
 
 body {
diff --git a/client/src/app/App.tsx b/client/src/app/App.tsx
index c4ca7280..497d6f08 100644
--- a/client/src/app/App.tsx
+++ b/client/src/app/App.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import "./App.css";
+import "./App.scss";
 import {
   createBrowserRouter,
   createRoutesFromElements,
diff --git a/client/src/pages/catalogue/ui/Catalogue.page.tsx b/client/src/pages/catalogue/ui/Catalogue.page.tsx
index ced9000c..4ddcebe0 100644
--- a/client/src/pages/catalogue/ui/Catalogue.page.tsx
+++ b/client/src/pages/catalogue/ui/Catalogue.page.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import styles from "./styles/Catalogue.page.module.css";
+import styles from "./styles/Catalogue.page.module.scss";
 import { HeaderWidget } from "widgets/header";
 import { FooterWidget } from "widgets/footer";
 import { useLoaderData } from "react-router-dom";
diff --git a/client/src/pages/catalogue/ui/SearchBarInput.field.tsx b/client/src/pages/catalogue/ui/SearchBarInput.field.tsx
index 9056c20f..9ff23483 100644
--- a/client/src/pages/catalogue/ui/SearchBarInput.field.tsx
+++ b/client/src/pages/catalogue/ui/SearchBarInput.field.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./styles/SearchBarInput.field.module.css";
+import styles from "./styles/SearchBarInput.field.module.scss";
 import { InstrumentName } from "generated/model";
 import { Filters } from "widgets/catalogue-filter";
 
diff --git a/client/src/pages/catalogue/ui/styles/Catalogue.page.module.css b/client/src/pages/catalogue/ui/styles/Catalogue.page.module.scss
similarity index 66%
rename from client/src/pages/catalogue/ui/styles/Catalogue.page.module.css
rename to client/src/pages/catalogue/ui/styles/Catalogue.page.module.scss
index ea52503c..9f0a8f78 100644
--- a/client/src/pages/catalogue/ui/styles/Catalogue.page.module.css
+++ b/client/src/pages/catalogue/ui/styles/Catalogue.page.module.scss
@@ -1,4 +1,4 @@
-@import "./Catalogue.page.queries.module.css";
+@use "shared/styles/vars" as vars;
 
 .catalogue__wrapper {
   display: flex;
@@ -20,3 +20,9 @@
   display: flex;
   flex-direction: column;
 }
+
+@media (max-width: vars.$media_threshold) {
+  .catalogue__filters__serp__navbar__wrapper {
+    flex-direction: column;
+  }
+}
\ No newline at end of file
diff --git a/client/src/pages/catalogue/ui/styles/Catalogue.page.queries.module.css b/client/src/pages/catalogue/ui/styles/Catalogue.page.queries.module.css
deleted file mode 100644
index bb3c9db1..00000000
--- a/client/src/pages/catalogue/ui/styles/Catalogue.page.queries.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@media (max-width: 570px) {
-  .catalogue__wrapper {
-    background-color: black !important;
-  }
-}
diff --git a/client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.css b/client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.css
deleted file mode 100644
index 8e724b04..00000000
--- a/client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.search_bar__input {
-  font-size: 2em;
-  text-align: start;
-  border: 1px #dee2e6 solid;
-}
diff --git a/client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.scss b/client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.scss
new file mode 100644
index 00000000..f98cb758
--- /dev/null
+++ b/client/src/pages/catalogue/ui/styles/SearchBarInput.field.module.scss
@@ -0,0 +1,13 @@
+@use "shared/styles/vars" as vars;
+
+.search_bar__input {
+  font-size: 2em;
+  text-align: start;
+  border: 1px #dee2e6 solid;
+}
+
+@media (max-width: vars.$media_threshold) {
+  .search_bar__input {
+    font-size: 1.5em;
+  }
+}
\ No newline at end of file
diff --git a/client/src/pages/home/ui/Home.page.tsx b/client/src/pages/home/ui/Home.page.tsx
index 5fa7f81a..5bba9607 100644
--- a/client/src/pages/home/ui/Home.page.tsx
+++ b/client/src/pages/home/ui/Home.page.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./styles/Home.page.module.css";
+import styles from "./styles/Home.page.module.scss";
 import "react-slideshow-image/dist/styles.css";
 import { HeaderWidget } from "widgets/header";
 import { FooterWidget } from "widgets/footer";
diff --git a/client/src/pages/home/ui/styles/Home.page.module.css b/client/src/pages/home/ui/styles/Home.page.module.scss
similarity index 94%
rename from client/src/pages/home/ui/styles/Home.page.module.css
rename to client/src/pages/home/ui/styles/Home.page.module.scss
index 92db889f..8281f378 100644
--- a/client/src/pages/home/ui/styles/Home.page.module.css
+++ b/client/src/pages/home/ui/styles/Home.page.module.scss
@@ -1,3 +1,5 @@
+@use "shared/styles/vars" as vars;
+
 .home {
   display: flex;
   flex-direction: column;
@@ -64,7 +66,7 @@
   margin: 0 15px;
 }
 
-@media (max-width: 570px) {
+@media (max-width: vars.$media_threshold) {
   .home {
     display: flex;
     flex-direction: column;
diff --git a/client/src/shared/instrument-card/ui/styles/InstrumentCard.module.css b/client/src/shared/instrument-card/ui/styles/InstrumentCard.module.css
index 945ba76e..e7638d26 100644
--- a/client/src/shared/instrument-card/ui/styles/InstrumentCard.module.css
+++ b/client/src/shared/instrument-card/ui/styles/InstrumentCard.module.css
@@ -1,5 +1,5 @@
 .instrument_card {
-  width: 50%;
+  /*width: 50%;*/
   display: flex;
   flex-direction: column;
   border: 1px #dee2e6 solid;
diff --git a/client/src/shared/styles/vars.scss b/client/src/shared/styles/vars.scss
new file mode 100644
index 00000000..83bd9820
--- /dev/null
+++ b/client/src/shared/styles/vars.scss
@@ -0,0 +1 @@
+$media_threshold: 570px;
diff --git a/client/src/widgets/catalogue-filter/ui/SidebarFilter.widget.tsx b/client/src/widgets/catalogue-filter/ui/SidebarFilter.widget.tsx
index 4277bb1e..5cd6b9e8 100644
--- a/client/src/widgets/catalogue-filter/ui/SidebarFilter.widget.tsx
+++ b/client/src/widgets/catalogue-filter/ui/SidebarFilter.widget.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import styles from "./styles/SidebarFilter.widget.module.css";
+import styles from "./styles/SidebarFilter.widget.module.scss";
 import { Filters } from "widgets/catalogue-filter";
 import { Role } from "domain/model/role";
 import Jwt from "domain/model/jwt";
@@ -9,7 +9,7 @@ import {
   Country,
   ManufactureDate,
   ManufacturerName,
-  ReleaseDate,
+  ReleaseDate
 } from "generated/model";
 import { InstrumentTypeFilter } from "widgets/catalogue-filter/ui/filters/InstrumentType.filter";
 import { ManufacturerNameFilter } from "widgets/catalogue-filter/ui/filters/ManufacturerName.filter";
@@ -35,7 +35,7 @@ export const SidebarFilterWidget = (props: Props) => {
   const [manufactureDateTo, setManufactureDateTo] =
     useState<ManufactureDate | null>(null);
   const [releaseDateFrom, setReleaseDateFrom] = useState<ReleaseDate | null>(
-    null,
+    null
   );
   const [releaseDateTo, setReleaseDateTo] = useState<ReleaseDate | null>(null);
   const [countries, setCountries] = useState<Country[] | null>(null);
@@ -52,7 +52,7 @@ export const SidebarFilterWidget = (props: Props) => {
       releaseDateTo: releaseDateTo,
       countries: countries,
       materials: materials,
-      instrumentIds: null, // there is no such form field to search by instrument ids
+      instrumentIds: null // there is no such form field to search by instrument ids
     });
   }, [
     instrumentTypes,
@@ -62,18 +62,21 @@ export const SidebarFilterWidget = (props: Props) => {
     releaseDateFrom,
     releaseDateTo,
     countries,
-    materials,
+    materials
   ]);
 
   return (
     <div className={styles.filter_sidebar}>
-      <div className={styles.filter__wrapper}>
-        <InstrumentTypeFilter onValueChange={setInstrumentTypes} />
-      </div>
-      <div className={styles.filter__wrapper}>
-        <ManufacturerNameFilter onValueChange={setManufacturerNames} />
+      <div className={styles.filter__type_manufacturer__wrapper}>
+        <div className={styles.filter__wrapper}>
+          <InstrumentTypeFilter onValueChange={setInstrumentTypes} />
+        </div>
+        <div className={styles.filter__wrapper}>
+          <ManufacturerNameFilter onValueChange={setManufacturerNames} />
+        </div>
       </div>
 
+
       <div className={styles.filter__wrapper}>
         <legend style={{ padding: "0" }}>Manufacture Date</legend>
 
@@ -108,12 +111,14 @@ export const SidebarFilterWidget = (props: Props) => {
         </div>
       </div>
 
-      <div className={styles.filter__wrapper}>
-        <CountryFilter onValueChange={setCountries} />
-      </div>
+      <div className={styles.filter__type_manufacturer__wrapper}>
+        <div className={styles.filter__wrapper}>
+          <CountryFilter onValueChange={setCountries} />
+        </div>
 
-      <div className={styles.filter__wrapper}>
-        <MaterialFilter onValueChange={setMaterials} />
+        <div className={styles.filter__wrapper}>
+          <MaterialFilter onValueChange={setMaterials} />
+        </div>
       </div>
 
       {Jwt.extractFromCookie()?.toRole() === Role.Editor && (
diff --git a/client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.css b/client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.scss
similarity index 53%
rename from client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.css
rename to client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.scss
index 538d9cbc..e4b9f727 100644
--- a/client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.css
+++ b/client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.scss
@@ -1,3 +1,5 @@
+@use "shared/styles/vars" as vars;
+
 .filter_sidebar {
   padding: 0.2em;
   background-color: #e0e0e0;
@@ -5,6 +7,7 @@
 }
 
 .filter__wrapper {
+  flex: 1;
   margin-bottom: 0.5em;
 }
 
@@ -15,3 +18,13 @@
 .vertical__wrapper {
   display: flex;
 }
+
+@media (max-width: vars.$media_threshold) {
+  .filter__type_manufacturer__wrapper {
+    display: flex;
+  }
+
+  .filter_sidebar {
+    //display: none;
+  }
+}
diff --git a/client/src/widgets/catalogue-serp/ui/Serp.widget.tsx b/client/src/widgets/catalogue-serp/ui/Serp.widget.tsx
index 8d434e1e..b0a2aa45 100644
--- a/client/src/widgets/catalogue-serp/ui/Serp.widget.tsx
+++ b/client/src/widgets/catalogue-serp/ui/Serp.widget.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./styles/Serp.widget.module.css";
+import styles from "./styles/Serp.widget.module.scss";
 import { InstrumentDetail, InstrumentId } from "generated/model";
 import { InstrumentCard } from "shared/instrument-card";
 
@@ -17,13 +17,15 @@ export const SerpWidget = (props: Props) => {
 
       {props.instruments.length > 0 &&
         props.instruments.map((instrument) => (
-          <InstrumentCard
-            key={instrument.instrument_id.instrument_id}
-            instrument={instrument}
-            favorite={props.favoriteInstrumentIds
-              .map((id) => id.instrument_id)
-              .includes(instrument.instrument_id.instrument_id)}
-          />
+          <div className={styles.serp__instrument_card_wrapper}>
+            <InstrumentCard
+              key={instrument.instrument_id.instrument_id}
+              instrument={instrument}
+              favorite={props.favoriteInstrumentIds
+                .map((id) => id.instrument_id)
+                .includes(instrument.instrument_id.instrument_id)}
+            />
+          </div>
         ))}
     </div>
   );
diff --git a/client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.css b/client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.css
deleted file mode 100644
index 1a1e7352..00000000
--- a/client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.serp {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.not_found {
-  font-size: 2em;
-  margin: 0.5em;
-}
diff --git a/client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.scss b/client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.scss
new file mode 100644
index 00000000..8db68fff
--- /dev/null
+++ b/client/src/widgets/catalogue-serp/ui/styles/Serp.widget.module.scss
@@ -0,0 +1,25 @@
+@use "shared/styles/vars" as vars;
+
+.serp {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.serp__instrument_card_wrapper {
+  width: 50%;
+}
+
+.not_found {
+  font-size: 2em;
+  margin: 0.5em;
+}
+
+@media (max-width: vars.$media_threshold) {
+  .serp {
+    flex-direction: column;
+  }
+
+  .serp__instrument_card_wrapper {
+    width: 100%;
+  }
+}
\ No newline at end of file