From f9fd46f0aa8a2a33548e5deee7fa45353914919a Mon Sep 17 00:00:00 2001 From: Artur Janas Date: Fri, 11 Aug 2023 13:26:53 +0100 Subject: [PATCH] fix: naming --- .../{GlossaryTerm.css => GlossaryCard.css} | 55 ------------------- .../{GlossaryTerm.tsx => GlossaryCard.tsx} | 4 +- .../{GlossarySearch.tsx => index.tsx} | 2 +- .../GlossaryTermPage/GlossaryTermPage.css | 54 ++++++++++++++++++ .../GlossaryTermPageAside.tsx | 2 +- .../GlossaryTermPageContent.tsx | 2 +- .../GlossaryTermPageIntro.tsx | 0 .../index.tsx} | 2 + src/pages/glossary.tsx | 2 +- src/pages/glossary/finops.tsx | 8 +-- 10 files changed, 66 insertions(+), 65 deletions(-) rename src/components/GlossarySearch/{GlossaryTerm.css => GlossaryCard.css} (62%) rename src/components/GlossarySearch/{GlossaryTerm.tsx => GlossaryCard.tsx} (90%) rename src/components/GlossarySearch/{GlossarySearch.tsx => index.tsx} (98%) create mode 100644 src/components/GlossaryTermPage/GlossaryTermPage.css rename src/components/{GlossaryTerm => GlossaryTermPage}/GlossaryTermPageAside.tsx (84%) rename src/components/{GlossaryTerm => GlossaryTermPage}/GlossaryTermPageContent.tsx (89%) rename src/components/{GlossaryTerm => GlossaryTermPage}/GlossaryTermPageIntro.tsx (100%) rename src/components/{GlossaryTerm/GlossaryTermPage.tsx => GlossaryTermPage/index.tsx} (90%) diff --git a/src/components/GlossarySearch/GlossaryTerm.css b/src/components/GlossarySearch/GlossaryCard.css similarity index 62% rename from src/components/GlossarySearch/GlossaryTerm.css rename to src/components/GlossarySearch/GlossaryCard.css index 21b1080b..a8441d8d 100644 --- a/src/components/GlossarySearch/GlossaryTerm.css +++ b/src/components/GlossarySearch/GlossaryCard.css @@ -1,7 +1,5 @@ /* GLOSSARY TERM CARD */ -/* Wrapper */ - .glossary-term__card { display: flex; flex-direction: column; @@ -69,59 +67,6 @@ animation: slideRight 0.5s ease-in-out; } -.glossary-term__page { - display: grid; - grid-template-columns: 3fr 1fr; -} - -.glossary-term__article { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 4rem 1.5rem; -} - -.glossary-term__content { - display: flex; - flex-direction: column; - gap: 2rem; - padding: 0 4rem 4rem 0; -} - -.glossary-term__aside { - display: flex; - flex-direction: column; - padding: 1.5rem; - background-color: var(--nu10); - border: 1px solid var(--border-light); - border-radius: 8px; - height: fit-content; -} - -.glossary-term__header { - display: flex; - align-items: baseline; - gap: 0.5rem; -} - - -@media (max-width: 1080px) { - .glossary-term__page { - grid-template-columns: 1fr; - } - .glossary-term__content { - padding: 1.5rem; - } - .glossary-term__aside { - order: -1; - margin: 0; - } - .glossary-term__content, - .glossary-term__aside { - margin-top: 1.5rem; - } -} - @keyframes slideRight { 50% { transform: translateX(5px); diff --git a/src/components/GlossarySearch/GlossaryTerm.tsx b/src/components/GlossarySearch/GlossaryCard.tsx similarity index 90% rename from src/components/GlossarySearch/GlossaryTerm.tsx rename to src/components/GlossarySearch/GlossaryCard.tsx index 8b551a90..8ea6fc15 100644 --- a/src/components/GlossarySearch/GlossaryTerm.tsx +++ b/src/components/GlossarySearch/GlossaryCard.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { GlossaryTermType } from "./GlossarySearch"; -import "./GlossaryTerm.css"; +import { GlossaryTermType } from "./index"; +import "./GlossaryCard.css"; import ArrowIcon from "../icons/ArrowIcon"; import BookIcon from "../icons/BookIcon"; diff --git a/src/components/GlossarySearch/GlossarySearch.tsx b/src/components/GlossarySearch/index.tsx similarity index 98% rename from src/components/GlossarySearch/GlossarySearch.tsx rename to src/components/GlossarySearch/index.tsx index cc14812c..3acbc82c 100644 --- a/src/components/GlossarySearch/GlossarySearch.tsx +++ b/src/components/GlossarySearch/index.tsx @@ -3,7 +3,7 @@ import terms from "./glossaryTerms.json"; import "./GlossarySearch.css"; import SearchIcon from "../icons/SearchIcon"; import useSearch from "../utils/UseSearch"; -import GlossaryTerm from "./GlossaryTerm"; +import GlossaryTerm from "./GlossaryCard"; import Kbd from "../Kbd"; type GlossaryPageSection = { diff --git a/src/components/GlossaryTermPage/GlossaryTermPage.css b/src/components/GlossaryTermPage/GlossaryTermPage.css new file mode 100644 index 00000000..4d21cdb5 --- /dev/null +++ b/src/components/GlossaryTermPage/GlossaryTermPage.css @@ -0,0 +1,54 @@ +/* GLOSSARY TERM PAGE */ + +.glossary-term__page { + display: grid; + grid-template-columns: 3fr 1fr; +} + +.glossary-term__article { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 4rem 1.5rem; +} + +.glossary-term__content { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 0 4rem 4rem 0; +} + +.glossary-term__aside { + display: flex; + flex-direction: column; + padding: 1.5rem; + background-color: var(--nu10); + border: 1px solid var(--border-light); + border-radius: 8px; + height: fit-content; +} + +.glossary-term__header { + display: flex; + align-items: baseline; + gap: 0.5rem; +} + + +@media (max-width: 1080px) { + .glossary-term__page { + grid-template-columns: 1fr; + } + .glossary-term__content { + padding: 1.5rem; + } + .glossary-term__aside { + order: -1; + margin: 0; + } + .glossary-term__content, + .glossary-term__aside { + margin-top: 1.5rem; + } +} \ No newline at end of file diff --git a/src/components/GlossaryTerm/GlossaryTermPageAside.tsx b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx similarity index 84% rename from src/components/GlossaryTerm/GlossaryTermPageAside.tsx rename to src/components/GlossaryTermPage/GlossaryTermPageAside.tsx index 7bff0cae..05deeb50 100644 --- a/src/components/GlossaryTerm/GlossaryTermPageAside.tsx +++ b/src/components/GlossaryTermPage/GlossaryTermPageAside.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { GlossaryTermType } from "../GlossarySearch/GlossarySearch"; +import { GlossaryTermType } from "../GlossarySearch"; import BookIcon from "../icons/BookIcon"; const GlossaryTermPageAside = ({ term }: { term: GlossaryTermType }) => { diff --git a/src/components/GlossaryTerm/GlossaryTermPageContent.tsx b/src/components/GlossaryTermPage/GlossaryTermPageContent.tsx similarity index 89% rename from src/components/GlossaryTerm/GlossaryTermPageContent.tsx rename to src/components/GlossaryTermPage/GlossaryTermPageContent.tsx index 67fb9abe..9adcc0cb 100644 --- a/src/components/GlossaryTerm/GlossaryTermPageContent.tsx +++ b/src/components/GlossaryTermPage/GlossaryTermPageContent.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { GlossaryTermType } from "../GlossarySearch/GlossarySearch"; +import { GlossaryTermType } from "../GlossarySearch"; const GlossaryTermPageContent = ({ term }: { term: GlossaryTermType }) => (
diff --git a/src/components/GlossaryTerm/GlossaryTermPageIntro.tsx b/src/components/GlossaryTermPage/GlossaryTermPageIntro.tsx similarity index 100% rename from src/components/GlossaryTerm/GlossaryTermPageIntro.tsx rename to src/components/GlossaryTermPage/GlossaryTermPageIntro.tsx diff --git a/src/components/GlossaryTerm/GlossaryTermPage.tsx b/src/components/GlossaryTermPage/index.tsx similarity index 90% rename from src/components/GlossaryTerm/GlossaryTermPage.tsx rename to src/components/GlossaryTermPage/index.tsx index 49563500..4eaea687 100644 --- a/src/components/GlossaryTerm/GlossaryTermPage.tsx +++ b/src/components/GlossaryTermPage/index.tsx @@ -1,5 +1,7 @@ import React, { ReactElement } from "react"; +import "./GlossaryTermPage.css"; + const GlossaryTermPage = ({ children, }: { diff --git a/src/pages/glossary.tsx b/src/pages/glossary.tsx index e100e6b6..b8d6126f 100644 --- a/src/pages/glossary.tsx +++ b/src/pages/glossary.tsx @@ -1,6 +1,6 @@ import React from "react"; import PageLayout from "../components/PageLayout"; -import GlossarySearch from "../components/GlossarySearch/GlossarySearch"; +import GlossarySearch from "../components/GlossarySearch"; const Finops = () => { return ( diff --git a/src/pages/glossary/finops.tsx b/src/pages/glossary/finops.tsx index 20de204b..bedc835c 100644 --- a/src/pages/glossary/finops.tsx +++ b/src/pages/glossary/finops.tsx @@ -1,10 +1,10 @@ import React from "react"; import PageLayout from "../../components/PageLayout"; -import GlossaryTermPageIntro from "../../components/GlossaryTerm/GlossaryTermPageIntro"; -import GlossaryTermPage from "../../components/GlossaryTerm/GlossaryTermPage"; +import GlossaryTermPageIntro from "../../components/GlossaryTermPage/GlossaryTermPageIntro"; +import GlossaryTermPage from "../../components/GlossaryTermPage"; import terms from "../../components/GlossarySearch/glossaryTerms.json"; -import GlossaryTermPageAside from "../../components/GlossaryTerm/GlossaryTermPageAside"; -import GlossaryTermPageContent from "../../components/GlossaryTerm/GlossaryTermPageContent"; +import GlossaryTermPageAside from "../../components/GlossaryTermPage/GlossaryTermPageAside"; +import GlossaryTermPageContent from "../../components/GlossaryTermPage/GlossaryTermPageContent"; const Finops = () => { const finops = terms.filter((term) => term.key === "FinOps")[0];