feat(catalogue): flexible design on scss

client/package.json

@@ -24,6 +24,7 @@
     "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
     "react-slideshow-image": "^4.3.1",
+    "sass": "^1.77.8",
     "typescript": "^4.9.5",
     "typescript-cookie": "^1.0.6",
     "web-vitals": "^2.1.4"

client/src/app/App.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./App.css";
+import "./App.scss";
 import {
   createBrowserRouter,
   createRoutesFromElements,

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";

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";
 

client/src/pages/catalogue/ui/styles/Catalogue.page.module.css → 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;
+  }
+}

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;
+  }
+}

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";

client/src/pages/home/ui/styles/Home.page.module.css → 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;

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;

client/src/shared/styles/vars.scss

@@ -0,0 +1 @@
+$media_threshold: 570px;

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";
@@ -67,11 +67,13 @@ export const SidebarFilterWidget = (props: Props) => {
 
   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}>
@@ -108,12 +110,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 && (

client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.css → client/src/widgets/catalogue-filter/ui/styles/SidebarFilter.widget.module.scss

@@ -1,10 +1,13 @@
+@use "shared/styles/vars" as vars;
+
 .filter_sidebar {
   padding: 0.2em;
   background-color: #e0e0e0;
   border: 1px #cccccc solid;
 }
 
 .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;
+  }
+}

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>
   );

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%;
+  }
+}