diff --git a/client/package-lock.json b/client/package-lock.json index dacd357c..fac9a460 100644 --- a/client/package-lock.json +++ b/client/package-lock.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" @@ -9151,6 +9152,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "license": "MIT" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -14438,6 +14445,23 @@ "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz", "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA==" }, + "node_modules/sass": { + "version": "1.77.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", + "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "license": "MIT", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/sass-loader": { "version": "12.6.0", "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz", diff --git a/client/package.json b/client/package.json index 94a78dc5..b9e408ed 100644 --- a/client/package.json +++ b/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" diff --git a/client/src/app/App.css b/client/src/app/App.scss similarity index 100% rename from client/src/app/App.css rename to client/src/app/App.scss 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..8e11bdc1 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; + } +} 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..363be26f --- /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; + } +} 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..052875ae 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"; @@ -67,11 +67,13 @@ export const SidebarFilterWidget = (props: Props) => { return (
-
- -
-
- +
+
+ +
+
+ +
@@ -108,12 +110,14 @@ export const SidebarFilterWidget = (props: Props) => {
-
- -
+
+
+ +
-
- +
+ +
{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) => ( - id.instrument_id) - .includes(instrument.instrument_id.instrument_id)} - /> +
+ id.instrument_id) + .includes(instrument.instrument_id.instrument_id)} + /> +
))}
); 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..902ea1df --- /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%; + } +}