From 72249d910520880c44c77445eb0b556280ea967b Mon Sep 17 00:00:00 2001
From: Thiago Chaves <thiago.coh@gmail.com>
Date: Thu, 14 Jul 2022 13:00:34 +0300
Subject: [PATCH] Style fixes

* Fix missing navigation shadow
* Switch to grid organization at top level
* Force calc() sizes to guarantee elements occupy right size
---
 .../ExpressionCard/ExpressionCard.tsx         | 10 ++-
 .../ExpressionSetCard/ExpressionSetCard.tsx   |  8 +-
 .../ExpressionSetInfo/ExpressionSetInfo.tsx   | 12 +--
 src/pages/expression-sets/details.tsx         | 49 ++++++-----
 src/pages/expression-sets/index.tsx           |  2 +-
 src/pages/expression-sets/practice.tsx        | 39 ++++++---
 src/styles/components.css                     | 83 ++++++++++++-------
 7 files changed, 125 insertions(+), 78 deletions(-)

diff --git a/src/components/ExpressionCard/ExpressionCard.tsx b/src/components/ExpressionCard/ExpressionCard.tsx
index 4d5db1f..b58b912 100644
--- a/src/components/ExpressionCard/ExpressionCard.tsx
+++ b/src/components/ExpressionCard/ExpressionCard.tsx
@@ -15,10 +15,14 @@ export function ExpressionCard({
 }: ExpressionCardProps) {
   return (
     <article className="content-card">
-      <h2 className="content-row text-title">{prompt}</h2>
-      <span className="content-row text-meta">{categories.join(", ")}</span>
+      <h2 className="content-row text-title margin-small">{prompt}</h2>
+      <span className="content-row text-meta margin-small">
+        {categories.join(", ")}
+      </span>
       {show_description ? (
-        <div className="content-paragraph text-details">{description}</div>
+        <div className="content-row text-details margin-paragraph">
+          {description}
+        </div>
       ) : null}
     </article>
   );
diff --git a/src/components/ExpressionSetCard/ExpressionSetCard.tsx b/src/components/ExpressionSetCard/ExpressionSetCard.tsx
index 909779a..0585d57 100644
--- a/src/components/ExpressionSetCard/ExpressionSetCard.tsx
+++ b/src/components/ExpressionSetCard/ExpressionSetCard.tsx
@@ -11,9 +11,11 @@ export function ExpressionSetCard({
 }: ExpressionSetCardProps) {
   return (
     <article className="content-card">
-      <h2 className="content-row text-title">{name}</h2>
-      <span className="content-row text-meta">{word_count} word(s)</span>
-      <p className="content-paragraph text-details">{description}</p>
+      <h2 className="content-row text-title margin-small">{name}</h2>
+      <span className="content-row text-meta margin-small">
+        {word_count} word(s)
+      </span>
+      <p className="content-row text-details margin-paragraph">{description}</p>
     </article>
   );
 }
diff --git a/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx b/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx
index 7d1f93c..b7a573c 100644
--- a/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx
+++ b/src/components/ExpressionSetInfo/ExpressionSetInfo.tsx
@@ -15,8 +15,8 @@ export function ExpressionSetInfo({
   word_count,
 }: ExpressionSetInfo) {
   return (
-    <section className="expression-set-info">
-      <h2 className="content-row">
+    <section>
+      <h2 className="content-row margin-small">
         <span className="text-title grow">{name}</span>
         <Link
           href={{
@@ -27,7 +27,7 @@ export function ExpressionSetInfo({
           }}
           passHref
         >
-          <a className="icon-button justify-end">
+          <a className="icon-button">
             <Image
               src="/icons/settings.svg"
               width="24"
@@ -37,8 +37,10 @@ export function ExpressionSetInfo({
           </a>
         </Link>
       </h2>
-      <span className="content-row text-meta">{word_count} word(s)</span>
-      <p className="content-paragraph text-details">{description}</p>
+      <span className="content-row text-meta margin-small">
+        {word_count} word(s)
+      </span>
+      <p className="content-row text-details margin-paragraph">{description}</p>
     </section>
   );
 }
diff --git a/src/pages/expression-sets/details.tsx b/src/pages/expression-sets/details.tsx
index c669e61..8d0a3af 100644
--- a/src/pages/expression-sets/details.tsx
+++ b/src/pages/expression-sets/details.tsx
@@ -17,18 +17,20 @@ const ExpressionSetDetailsPage: NextPage = () => {
   if (!expression_set)
     return (
       <Page>
-        <p className="details">Expression set not found</p>
+        <div className="page-with-padding scroll">
+          <p className="text-details">Expression set not found</p>
+        </div>
       </Page>
     );
 
-  // Fallback for expression set empty
+  // Fallback for expression set empty TODO fix style
   const word_count = expression_to_expression_set.filter(
     (item) => item.expression_set_id === expression_set.id
   ).length;
   if (!word_count)
     return (
       <Page>
-        <div className="expression-set-page">
+        <div className="page-with-padding scroll">
           <ExpressionSetInfo
             id={expression_set.id}
             name={expression_set.name}
@@ -42,25 +44,28 @@ const ExpressionSetDetailsPage: NextPage = () => {
 
   return (
     <Page>
-      <div className="expression-set-page">
-        <ExpressionSetInfo
-          id={expression_set.id}
-          name={expression_set.name}
-          description={expression_set.description}
-          word_count={word_count}
-        />
-        <p className="text-details grow">{/* TODO other details */}</p>
-        <Link
-          href={{
-            pathname: "/expression-sets/practice",
-            query: { "set-id": expression_set.id },
-          }}
-          passHref
-        >
-          <a className="navigation-item text-navigation">
-            <span>Practice this set</span>
-          </a>
-        </Link>
+      <div className="page-with-bottom-navigation">
+        <section className="padding-small scroll">
+          <ExpressionSetInfo
+            id={expression_set.id}
+            name={expression_set.name}
+            description={expression_set.description}
+            word_count={word_count}
+          />
+        </section>
+        <section className="navigation-bottom">
+          <Link
+            href={{
+              pathname: "/expression-sets/practice",
+              query: { "set-id": expression_set.id },
+            }}
+            passHref
+          >
+            <a className="navigation-item-bottom text-navigation grow">
+              <span>Practice this set</span>
+            </a>
+          </Link>
+        </section>
       </div>
     </Page>
   );
diff --git a/src/pages/expression-sets/index.tsx b/src/pages/expression-sets/index.tsx
index ab56714..ec09738 100644
--- a/src/pages/expression-sets/index.tsx
+++ b/src/pages/expression-sets/index.tsx
@@ -9,7 +9,7 @@ const ExpressionSetListPage: NextPage = () => {
 
   return (
     <Page>
-      <div className="content-list">
+      <div className="page-with-padding content-list scroll">
         {expression_sets.map(({ id, name, description }) => (
           <Link
             key={id}
diff --git a/src/pages/expression-sets/practice.tsx b/src/pages/expression-sets/practice.tsx
index 6c5fbd4..0ce6dfb 100644
--- a/src/pages/expression-sets/practice.tsx
+++ b/src/pages/expression-sets/practice.tsx
@@ -1,4 +1,5 @@
 import type { NextPage } from "next";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import { ExpressionCard } from "../../components";
 import { Page } from "../../components/Page";
@@ -10,7 +11,7 @@ import {
 } from "../../util/data-utils";
 
 const ExpressionSetListPage: NextPage = () => {
-  const { query } = useRouter();
+  const { query, pathname } = useRouter();
   const {
     expressions,
     categories,
@@ -26,7 +27,7 @@ const ExpressionSetListPage: NextPage = () => {
   if (!expression_set)
     return (
       <Page>
-        <p className="details">Expression set not found</p>
+        <p className="text-details">Expression set not found</p>
       </Page>
     );
 
@@ -40,7 +41,7 @@ const ExpressionSetListPage: NextPage = () => {
   if (expression_candidates.length === 0) {
     return (
       <Page>
-        <p className="details">No expressions left in this set</p>
+        <p className="text-details">No expressions left in this set</p>
       </Page>
     );
   }
@@ -54,18 +55,30 @@ const ExpressionSetListPage: NextPage = () => {
     expression_to_category,
   });
 
-  console.log("Expressions", expressions);
-  console.log("Categories", expression_categories);
-  console.log("Expression", expression);
-
   return (
     <Page>
-      <ExpressionCard
-        prompt={expression.prompt}
-        categories={expression_categories.map((category) => category.name)}
-        description={expression.description}
-        show_description
-      />
+      <div className="page-with-bottom-navigation">
+        <section className="padding-small scroll">
+          <ExpressionCard
+            prompt={expression.prompt}
+            categories={expression_categories.map((category) => category.name)}
+            description={expression.description}
+            show_description
+          />
+        </section>
+        <section className="navigation-bottom">
+          <Link href={{ pathname, query }} passHref>
+            <a className="navigation-item-bottom text-navigation grow">
+              <div>wrong</div>
+            </a>
+          </Link>
+          <Link href={{ pathname, query }} passHref>
+            <a className="navigation-item-bottom text-navigation grow">
+              <div>right</div>
+            </a>
+          </Link>
+        </section>
+      </div>
     </Page>
   );
 };
diff --git a/src/styles/components.css b/src/styles/components.css
index 4c59818..73c1f1c 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -42,9 +42,11 @@
 /* Page */
 
 .page {
-  display: flex;
-  flex-direction: column;
-
+  background-color: lavender;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 64px calc(100vh - 72px); /* Is there a keyword solution for this? */
+  grid-gap: 8px;
   height: 100vh;
   margin: auto;
   max-width: 800px;
@@ -53,19 +55,8 @@
 .page > main {
   background-color: lavender;
   display: block;
-  flex: 1;
   position: relative;
-
-  /* Will it conflict with overlays? Move elsewhere? */
-  padding: 16px;
   height: 100%;
-  overflow-y: auto;
-}
-
-.content-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 16px;
 }
 
 /* Navigation */
@@ -76,6 +67,12 @@
   box-shadow: 0px 5px 5px -5px darkslategray;
 }
 
+.navigation-bottom {
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0px 5px 5px 5px darkslategray;
+}
+
 .navigation > .navigation-li {
   flex: 1;
 }
@@ -96,6 +93,18 @@
   height: 64px;
 }
 
+.navigation-item-bottom {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: lavenderblush;
+  border: 1px solid darkslategray;
+  height: 80px;
+}
+
 .navigation-item:hover {
   background-color: antiquewhite;
 }
@@ -119,21 +128,8 @@
   border: 1px solid slategray;
 }
 
-/* tofix */
-
-.details {
-  color: darkslategray;
-  font-size: 15px;
-  margin: 20px 0px;
-  overflow-y: auto;
-}
-
 /* Content organization */
 
-.content-page {
-  padding: 16px;
-}
-
 .content-card {
   background-color: lavender;
   border: 1px solid darkslategray;
@@ -145,17 +141,42 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+}
+
+.content-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content-list > * + * {
+  margin-top: 16px;
+}
+
+/* Margins and paddings */
+
+.padding-small {
+  padding: 8px 16px;
+}
+
+.margin-small {
   margin: 10px 0px;
 }
 
-.content-paragraph {
+.margin-paragraph {
   margin: 20px 0px 10px;
 }
 
 /* Expression set page */
 
-.expression-set-page {
-  display: flex;
-  flex-direction: column;
+.page-with-padding {
+  padding: 8px 16px 16px;
+}
+
+.page-with-bottom-navigation {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: calc(100% - 88px) 80px;
+  grid-gap: 8px;
   height: 100%;
 }