From 558d7ce770af5c7a82c58b89a9b4a7e36fc13a9e Mon Sep 17 00:00:00 2001
From: Andrzej Stepien <andrzejjamesstepien@gmail.com>
Date: Wed, 13 Sep 2023 14:26:38 +0200
Subject: [PATCH] improve layout

---
 src/Components/PageHeader.jsx      |  4 ++++
 src/Components/Table.jsx           |  3 +++
 src/assets/magnifying-glass.svg    |  4 ++++
 src/routes/editPublication.jsx     |  5 +++--
 src/routes/editPublicationRoot.jsx |  2 +-
 src/routes/editStory.jsx           |  5 +++--
 src/routes/editStoryRoot.jsx       |  2 +-
 src/routes/editSubmission.jsx      |  5 +++--
 src/routes/editSubmissionRoot.jsx  |  2 +-
 src/routes/publication.jsx         | 17 ++++++++++-------
 src/routes/story.jsx               | 11 +++++++----
 src/styles/PageHeader.css          | 16 ++++++++++++++++
 src/styles/Table.css               |  8 ++++++--
 src/styles/index.css               |  6 ++++++
 14 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 src/assets/magnifying-glass.svg

diff --git a/src/Components/PageHeader.jsx b/src/Components/PageHeader.jsx
index b71cd8f..d17aee3 100644
--- a/src/Components/PageHeader.jsx
+++ b/src/Components/PageHeader.jsx
@@ -6,12 +6,16 @@ export default function (props) {
     const navigate = useNavigate()
     return (
         <header id="page-header">
+            <div id="h-container">
             <h2>
                 {props.super}
             </h2>
             <h1>
                 {props.heading}
             </h1>
+            </div>
+            
+            
             <span id="icon-container">
                 
                     <button onClick={() => { navigate(`${props.url}/create`) }}>
diff --git a/src/Components/Table.jsx b/src/Components/Table.jsx
index b6aa372..a9725bb 100644
--- a/src/Components/Table.jsx
+++ b/src/Components/Table.jsx
@@ -139,6 +139,7 @@ export default function Table(props) {
   
   return (
   <>
+  <div id="table-container">
   <h2>{props.header}</h2>
   <table>
     <tbody>
@@ -146,6 +147,8 @@ export default function Table(props) {
       {renderRows(data)}
     </tbody>
   </table>
+  </div>
+  
   </>
 )
 
diff --git a/src/assets/magnifying-glass.svg b/src/assets/magnifying-glass.svg
new file mode 100644
index 0000000..1e4ffb6
--- /dev/null
+++ b/src/assets/magnifying-glass.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path d="M3.5 0c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5c.59 0 1.17-.14 1.66-.41a1 1 0 0 0 .13.13l1 1a1.02 1.02 0 1 0 1.44-1.44l-1-1a1 1 0 0 0-.16-.13c.27-.49.44-1.06.44-1.66 0-1.93-1.57-3.5-3.5-3.5zm0 1c1.39 0 2.5 1.11 2.5 2.5 0 .66-.24 1.27-.66 1.72-.01.01-.02.02-.03.03a1 1 0 0 0-.13.13c-.44.4-1.04.63-1.69.63-1.39 0-2.5-1.11-2.5-2.5s1.11-2.5 2.5-2.5z"
+  />
+</svg>
\ No newline at end of file
diff --git a/src/routes/editPublication.jsx b/src/routes/editPublication.jsx
index 5f0c2a1..eabf882 100644
--- a/src/routes/editPublication.jsx
+++ b/src/routes/editPublication.jsx
@@ -1,4 +1,4 @@
-import { Form, useLoaderData, useParams, redirect } from "react-router-dom";
+import { Form, useLoaderData, useParams, redirect, useNavigate } from "react-router-dom";
 import PageHeader from "../Components/PageHeader";
 import { requestEdit } from "../APIcalls.mjs";
 
@@ -14,6 +14,7 @@ export async function action({request,params}){
 
 
 export default function EditPublication(){
+    const navigate = useNavigate()
     const { publicationId } = useParams()
     const { publications } = useLoaderData()
     const publicationData = publications.find(row=>row.id==publicationId)
@@ -44,7 +45,7 @@ export default function EditPublication(){
             </label>
             <div id="bottom-button-container">
             <button type="submit">SAVE</button>
-            <button type="button">CANCEL</button>
+            <button type="button" onClick={()=>{navigate("/publications")}}>CANCEL</button>
             </div>
         
         </Form>
diff --git a/src/routes/editPublicationRoot.jsx b/src/routes/editPublicationRoot.jsx
index ca24e6d..1ea5484 100644
--- a/src/routes/editPublicationRoot.jsx
+++ b/src/routes/editPublicationRoot.jsx
@@ -12,7 +12,7 @@ const handleChange = (event) => {
 }
     return(
         <>
-        <div id="page-container">
+        <div id="page-container" className="vertical-center">
         <Form >
         <h2>Which publication would you like to edit?</h2>
 
diff --git a/src/routes/editStory.jsx b/src/routes/editStory.jsx
index 60cd020..c51dc7b 100644
--- a/src/routes/editStory.jsx
+++ b/src/routes/editStory.jsx
@@ -1,4 +1,4 @@
-import { Form, useLoaderData, useParams, redirect } from "react-router-dom";
+import { Form, useLoaderData, useParams, redirect, useNavigate } from "react-router-dom";
 import PageHeader from "../Components/PageHeader";
 import { requestEdit } from "../APIcalls.mjs";
 
@@ -14,6 +14,7 @@ export async function action({request,params}){
 
 
 export default function EditStory(){
+    const navigate = useNavigate()
     const { storyId } = useParams()
     const { stories } = useLoaderData()
     const storyData = stories.find(row=>row.id==storyId)
@@ -44,7 +45,7 @@ export default function EditStory(){
             </label>
         <div id="bottom-button-container">
         <button type="submit">SAVE</button>
-        <button type="button">CANCEL</button>
+        <button type="button" onClick={()=>{navigate("/stories")}}>CANCEL</button>
         </div>
         
         </Form>
diff --git a/src/routes/editStoryRoot.jsx b/src/routes/editStoryRoot.jsx
index 8227417..3a238a3 100644
--- a/src/routes/editStoryRoot.jsx
+++ b/src/routes/editStoryRoot.jsx
@@ -12,7 +12,7 @@ const handleChange = (event) => {
 }
     return(
         <>
-        <div id="page-container">
+        <div id="page-container" className="vertical-center">
         <Form >
         <h2>Which story would you like to edit?</h2>
 
diff --git a/src/routes/editSubmission.jsx b/src/routes/editSubmission.jsx
index e938158..5ffbb46 100644
--- a/src/routes/editSubmission.jsx
+++ b/src/routes/editSubmission.jsx
@@ -1,4 +1,4 @@
-import { Form, useLoaderData, useParams, redirect } from "react-router-dom";
+import { Form, useLoaderData, useParams, redirect, useNavigate } from "react-router-dom";
 import PageHeader from "../Components/PageHeader";
 import { requestEdit } from "../APIcalls.mjs";
 import Dropdown from "../Components/Dropdown";
@@ -17,6 +17,7 @@ export async function action({request,params}){
 
 
 export default function EditSubmission(){
+    const navigate = useNavigate()
     const { submissionId } = useParams()
     const { submissions, stories, publications, responses } = useLoaderData()
     const submissionData = submissions.find(row=>row.id==submissionId)
@@ -64,7 +65,7 @@ export default function EditSubmission(){
             </label>
             <div id="bottom-button-container">
             <button type="submit">SAVE</button>
-        <button type="button">CANCEL</button>
+        <button type="button" onClick={()=>{navigate("/submissions")}}>CANCEL</button>
             </div>
         
         </Form>
diff --git a/src/routes/editSubmissionRoot.jsx b/src/routes/editSubmissionRoot.jsx
index 3aee883..1036add 100644
--- a/src/routes/editSubmissionRoot.jsx
+++ b/src/routes/editSubmissionRoot.jsx
@@ -12,7 +12,7 @@ const handleChange = (event) => {
 }
     return(
         <>
-        <div id="page-container">
+        <div id="page-container" className="vertical-center">
         <Form >
         <h2>Which submission would you like to edit?</h2>
         <label>Date submitted:
diff --git a/src/routes/publication.jsx b/src/routes/publication.jsx
index 09498c7..3b9a79e 100644
--- a/src/routes/publication.jsx
+++ b/src/routes/publication.jsx
@@ -10,20 +10,23 @@ export default function Publication() {
     const publicationData = publications.find(row => row.id == publicationId)
     return (
         <>  <div id="page-container">
-            <PageHeader super={'Publication#' + publicationId} heading={publicationData.title} url="/publication" id={publicationId}/>
-            <div>
-            Link: 
-            <a href={publicationData.link}>{publicationData.link}</a>
+            <PageHeader super={'Publication#' + publicationId} heading={publicationData.title} url="/publication" id={publicationId} />
+            <div id="page-info-container">
+                <div>
+                    Link:
+                    <a href={publicationData.link}>{publicationData.link}</a>
+                </div>
             </div>
+
             <Table data={publicationData.submissions}
-                filterList={[...filterList,'publication']}
+                filterList={[...filterList, 'publication']}
                 highlights={highlights}
                 clickables={clickables}
                 sortByDefault='date_submitted'
                 header='Submissions:'
             ></Table>
-           
-            </div>
+
+        </div>
         </>
     )
 }
\ No newline at end of file
diff --git a/src/routes/story.jsx b/src/routes/story.jsx
index 53c29f2..2bc05c9 100644
--- a/src/routes/story.jsx
+++ b/src/routes/story.jsx
@@ -13,8 +13,11 @@ export default function Story() {
   return (
     <>
       <div id="page-container">
-        <PageHeader super={'Story#' + storyId} heading={storyData.title} url="/story" id={storyId}/>
-        <div>Wordcount: {storyData.word_count}</div>
+        <PageHeader super={'Story#' + storyId} heading={storyData.title} url="/story" id={storyId} />
+        <div id="page-info-container">
+          <div>Wordcount: {storyData.word_count}</div>
+
+        </div>
         <Table
           data={storyData.submissions}
           filterList={[...filterList, 'story']}
@@ -24,8 +27,8 @@ export default function Story() {
           header='Submissions:'
         ></Table>
 
-        
-        
+
+
       </div>
     </>
   )
diff --git a/src/styles/PageHeader.css b/src/styles/PageHeader.css
index e0f11bb..7592a2c 100644
--- a/src/styles/PageHeader.css
+++ b/src/styles/PageHeader.css
@@ -27,8 +27,24 @@
 #icon-container a{
     padding:0;
 }
+#h-container{
+    display: flex;
+    flex-direction: column;
+    align-content:center;
+}
+#page-header h2{
+display:block;
+max-width: fit-content;
+}
 #page-header h1{
+    line-height: 1em;
+    display:block;
     font-size:6rem;
     text-shadow: var(--text-shadow-light);
     margin-right: 5rem;
+    max-width:20ch;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+
 }
\ No newline at end of file
diff --git a/src/styles/Table.css b/src/styles/Table.css
index a1f7d07..cb7c092 100644
--- a/src/styles/Table.css
+++ b/src/styles/Table.css
@@ -1,8 +1,12 @@
+#table-container{
+  width: fit-content;
+  margin: auto;
+  margin-top: 5rem;
+}
 
 table{
     font-size: 1.6rem;
-    width: fit-content;
-    margin: auto;
+    
     --odd-color:var(--color-2);
     --even-color:var(--color-3);
     --alert-color:var(--accent)
diff --git a/src/styles/index.css b/src/styles/index.css
index cdf7322..9b776c2 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -86,4 +86,10 @@ html {
     font-size: 1.6rem;
     width: fit-content;
     margin:auto;
+  }
+  #page-info-container{
+    margin: 4rem 0;
+  }
+  .vertical-center{
+    padding-top: 20rem;
   }
\ No newline at end of file