From 0d0b38391d4fbb4407eb626918f4a25ce9ef2ac1 Mon Sep 17 00:00:00 2001 From: Thiago Chaves Date: Thu, 14 Jul 2022 01:07:43 +0300 Subject: [PATCH] Simplify CSS styles A lingering problem exists where the content is allowed to expand indefinitely vertically. This might be an issue with the stacks of flex elements near the root of the DOM. Since the value fixing this is still uncertain I'll leave as it is for now. --- .../ExpressionCard/ExpressionCard.tsx | 14 +- .../ExpressionSetCard/ExpressionSetCard.tsx | 12 +- .../ExpressionSetInfo/ExpressionSetInfo.tsx | 10 +- src/components/Navigation/NavigationItem.tsx | 6 +- src/pages/expression-sets/details.tsx | 10 +- src/styles/components.css | 172 +++++------------- 6 files changed, 64 insertions(+), 160 deletions(-) diff --git a/src/components/ExpressionCard/ExpressionCard.tsx b/src/components/ExpressionCard/ExpressionCard.tsx index 1e3afbc..4d5db1f 100644 --- a/src/components/ExpressionCard/ExpressionCard.tsx +++ b/src/components/ExpressionCard/ExpressionCard.tsx @@ -14,14 +14,12 @@ export function ExpressionCard({ show_description, }: ExpressionCardProps) { return ( -
-

{prompt}

- - {categories.join(", ")} - - {show_description && ( -
{description}
- )} +
+

{prompt}

+ {categories.join(", ")} + {show_description ? ( +
{description}
+ ) : null}
); } diff --git a/src/components/ExpressionSetCard/ExpressionSetCard.tsx b/src/components/ExpressionSetCard/ExpressionSetCard.tsx index 640b519..909779a 100644 --- a/src/components/ExpressionSetCard/ExpressionSetCard.tsx +++ b/src/components/ExpressionSetCard/ExpressionSetCard.tsx @@ -10,14 +10,10 @@ export function ExpressionSetCard({ word_count, }: ExpressionSetCardProps) { return ( -
-

- {name} - - {word_count} word(s) - -

-

{description}

+
+

{name}

+ {word_count} word(s) +

{description}

); } diff --git a/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx b/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx index 2603d36..7d1f93c 100644 --- a/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx +++ b/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx @@ -16,8 +16,8 @@ export function ExpressionSetInfo({ }: ExpressionSetInfo) { return (
-

- {name} +

+ {name}

- - {word_count} word(s) - -

{description}

+ {word_count} word(s) +

{description}

); } diff --git a/src/components/Navigation/NavigationItem.tsx b/src/components/Navigation/NavigationItem.tsx index 07c4593..d39b619 100644 --- a/src/components/Navigation/NavigationItem.tsx +++ b/src/components/Navigation/NavigationItem.tsx @@ -17,11 +17,11 @@ export function NavigationItem({ text, iconUrl, href }: NavigationItemProps) { if (href !== "/" && router.pathname.startsWith(href)) active = true; return ( -
  • +
  • - + {iconUrl && } - {text} + {text}
    • diff --git a/src/pages/expression-sets/details.tsx b/src/pages/expression-sets/details.tsx index 09d4261..1e7a5a7 100644 --- a/src/pages/expression-sets/details.tsx +++ b/src/pages/expression-sets/details.tsx @@ -34,9 +34,7 @@ const ExpressionSetDetailsPage: NextPage = () => { description={expression_set.description} word_count={word_count} /> -

    - No expressions left in this set. -

    +

    No expressions left in this set.

    ); @@ -50,7 +48,7 @@ const ExpressionSetDetailsPage: NextPage = () => { description={expression_set.description} word_count={word_count} /> -

    {/* TODO add details */}

    +

    {/* TODO other details */}

    { }} passHref > - - Practice + + Practice this set diff --git a/src/styles/components.css b/src/styles/components.css index 2f34a41..4c59818 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -13,6 +13,32 @@ overflow-y: auto; } +/* Typography */ + +.text-navigation { + color: black; + font-size: 16px; + font-weight: bold; +} + +.text-title { + color: darkslategray; + font-size: 18px; + font-weight: bold; +} + +.text-meta { + color: slategray; + font-family: monospace; + font-size: 11px; + text-transform: uppercase; +} + +.text-details { + color: darkslategray; + font-size: 15px; +} + /* Page */ .page { @@ -32,6 +58,7 @@ /* Will it conflict with overlays? Move elsewhere? */ padding: 16px; + height: 100%; overflow-y: auto; } @@ -46,55 +73,37 @@ .navigation { display: flex; flex-direction: row; + box-shadow: 0px 5px 5px -5px darkslategray; } -.navigation > .navigation-item { +.navigation > .navigation-li { flex: 1; } -.navigation-item { +.navigation-li { list-style: none; } -.navigation-item > a { +.navigation-item { display: flex; + flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; background-color: lavenderblush; border: 1px solid darkslategray; - font-weight: bold; height: 64px; } -.navigation-item > a:hover { +.navigation-item:hover { background-color: antiquewhite; } -.navigation-item.active > a { +.navigation-item.active { background-color: bisque; - cursor: default; } -.navigation-item-button { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - background-color: lavenderblush; - border: 1px solid darkslategray; - font-weight: bold; - height: 64px; -} - -.navigation-item-button:hover { - background-color: antiquewhite; -} - -/* Misc classes */ - .icon-button { display: flex; align-items: center; @@ -110,6 +119,8 @@ border: 1px solid slategray; } +/* tofix */ + .details { color: darkslategray; font-size: 15px; @@ -117,95 +128,28 @@ overflow-y: auto; } -/* Expression cards */ +/* Content organization */ -.expression-card { - display: flex; - flex-direction: column; +.content-page { + padding: 16px; +} +.content-card { background-color: lavender; border: 1px solid darkslategray; box-shadow: 0px 5px 5px -5px darkslategray; padding: 16px; - word-wrap: break-word; } -.expression-card-prompt { - color: darkslategray; - font-size: 18px; - font-weight: bold; - margin: 10px 0px; -} - -.expression-card-categories { - color: slategray; - font-family: monospace; - font-size: 12px; - margin: 10px 0px; -} - -.expression-card-details { - color: darkslategray; - font-size: 15px; - margin: 20px 0px 10px; - overflow-y: auto; -} - -.expression-card-details::-webkit-scrollbar-track { - background-color: lightslategray; - border-radius: 4px; -} - -.expression-card-details::-webkit-scrollbar { - border-radius: 4px; - width: 8px; - padding-left: 14px; -} - -.expression-card-details::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: darkslategray; -} - -/* Expression set card */ - -.expression-set-card { - display: flex; - flex-direction: column; - - background-color: lavender; - border: 1px solid darkslategray; - box-shadow: 0px 5px 5px -5px darkslategray; - padding: 16px; - word-wrap: break-word; -} - -.expression-set-card-header { +.content-row { display: flex; flex-direction: row; align-items: center; -} - -.expression-set-card-name { - color: darkslategray; - font-size: 18px; - font-weight: bold; margin: 10px 0px; - text-transform: capitalize; } -.expression-set-card-word-count { - color: slategray; - font-family: monospace; - font-size: 12px; - margin: 10px; -} - -.expression-set-card-description { - color: darkslategray; - font-size: 15px; +.content-paragraph { margin: 20px 0px 10px; - overflow-y: auto; } /* Expression set page */ @@ -215,33 +159,3 @@ flex-direction: column; height: 100%; } - -.expression-set-info-header { - display: flex; - flex-direction: row; - align-items: center; -} - -.expression-set-info-name { - flex: 1; - color: darkslategray; - font-size: 24px; - font-weight: bold; - margin: 10px 0px; - text-transform: capitalize; - word-wrap: break-word; -} - -.expression-set-info-word-count { - flex: 1; - color: slategray; - font-family: monospace; - font-size: 12px; -} - -.expression-set-info-description { - color: darkslategray; - font-size: 15px; - margin: 20px 0px 10px; - overflow-y: auto; -}