improve layout

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`) }}>

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>
+  
   </>
 )
 

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>

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>

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>
 

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>

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>
 

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>

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:

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}/>
+            <PageHeader super={'Publication#' + publicationId} heading={publicationData.title} url="/publication" id={publicationId} />
-            <div>
+            <div id="page-info-container">
-            Link: 
+                <div>
-            <a href={publicationData.link}>{publicationData.link}</a>
+                    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>
         </>
     )
 }

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}/>
+        <PageHeader super={'Story#' + storyId} heading={storyData.title} url="/story" id={storyId} />
-        <div>Wordcount: {storyData.word_count}</div>
+        <div id="page-info-container">
+          <div>Wordcount: {storyData.word_count}</div>
+
+        </div>
         <Table
           data={storyData.submissions}
           filterList={[...filterList, 'story']}

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;
+
 }

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)

src/styles/index.css

@@ -87,3 +87,9 @@ html {
     width: fit-content;
     margin:auto;
   }
+  #page-info-container{
+    margin: 4rem 0;
+  }
+  .vertical-center{
+    padding-top: 20rem;
+  }