diff --git a/frontend/coverage/MyMatchesPage.css.html b/frontend/coverage/MyMatchesPage.css.html new file mode 100644 index 00000000..ea43f1d1 --- /dev/null +++ b/frontend/coverage/MyMatchesPage.css.html @@ -0,0 +1,420 @@ + + +
++ Press n or j to go to the next uncovered block, + b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | .my-matches-page {
+ margin-left: var(--sidebar-width);
+ width: calc(100% - var(--sidebar-width));
+ min-height: 100vh;
+ padding: 40px;
+ box-sizing: border-box;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 30px;
+
+ font-family: Georgia, serif;
+}
+
+.plant-scroll-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+}
+
+.scroll-bar {
+ display: flex;
+ flex-direction: row;
+ gap: 20px;
+
+ overflow-x: scroll;
+ scroll-behavior: smooth;
+
+ padding: 10px;
+ padding-bottom: 25px;
+
+ flex: 1;
+}
+
+.scroll-bar::-webkit-scrollbar {
+ height: 8px;
+}
+
+.scroll-bar::-webkit-scrollbar-thumb {
+ background: var(--accent-green);
+ border-radius: 10px;
+}
+
+.plant-card-placeholder {
+ flex: 0 0 350px;
+ height: 500px;
+
+ border-radius: 12px;
+ overflow: hidden;
+
+ background-color: var(--background);
+}
+.scroll-button {
+ height: 50px;
+ width: 50px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ background-color: transparent;
+ border: none;
+
+ color: var(--accent-green);
+ font-size: 30px;
+
+ cursor: pointer;
+}
+
+.scroll-button:hover {
+ transform: scale(1.1);
+}
+
+@media (max-width: 767px) {
+ .my-matches-page {
+ margin-left: 0;
+ width: 100%;
+ padding: 20px;
+ gap: 20px;
+ }
+
+ .my-matches-page h2 {
+ font-size: 28px;
+ text-align: center;
+ white-space: nowrap;
+ font-family: Georgia, serif;
+ }
+
+ .plant-scroll-container {
+ width: 100%;
+ gap: 5px;
+ }
+
+ .scroll-bar {
+ gap: 15px;
+ padding: 5px;
+ padding-bottom: 20px;
+ }
+
+ .plant-card-placeholder {
+ flex: 0 0 200px;
+ height: 300px;
+ }
+
+ .scroll-button {
+ width: 35px;
+ height: 35px;
+ font-size: 22px;
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, + b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 | + + + +4x + +4x + + + + + + + + +4x +1x + + + + + +4x +1x + + + + + +4x + + + + + + + + + + + + +24x + + + + + + + + + + + + + + + | import { useTranslation } from "react-i18next";
+import "./MyMatchesPage.css";
+
+function MyMatchesPage() {
+ const { t } = useTranslation();
+
+ const plants = [
+ { name: "Hydrangea" },
+ { name: "Orchid" },
+ { name: "Fig Tree" },
+ { name: "Monstera" },
+ { name: "Peony" },
+ { name: "Lily" },
+ ];
+
+ const scrollLeft = () => {
+ document.querySelector(".scroll-bar")?.scrollBy({
+ left: -300,
+ behavior: "smooth",
+ });
+ };
+
+ const scrollRight = () => {
+ document.querySelector(".scroll-bar")?.scrollBy({
+ left: 300,
+ behavior: "smooth",
+ });
+ };
+
+ return (
+ <main className="my-matches-page">
+ <section>
+ <h2>{t("myMatchesPage.guide")}</h2>
+ </section>
+
+ <section className="plant-scroll-container">
+ <button className="scroll-button left-button" onClick={scrollLeft}>
+ ❮
+ </button>
+
+ <div className="scroll-bar">
+ {plants.map((plant) => (
+ <div className="plant-card-placeholder" key={plant.name}>
+ <p>{plant.name}</p>
+ </div>
+ ))}
+ </div>
+
+ <button className="scroll-button right-button" onClick={scrollRight}>
+ ❯
+ </button>
+ </section>
+ </main>
+ );
+}
+
+export default MyMatchesPage;
+ |
+ Press n or j to go to the next uncovered block, + b, p or k for the previous block. +
+ +| + File + | ++ | + Statements + | ++ | + Branches + | ++ | + Functions + | ++ | + Lines + | ++ |
|---|---|---|---|---|---|---|---|---|---|
| + MyMatchesPage.css + | +
+
+
+
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
| + MyMatchesPage.tsx + | +
+
+
+
+
+ |
+ 100% | +8/8 | +100% | +0/0 | +100% | +4/4 | +100% | +8/8 | +