andrzej
/
sub-manager-frontend
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve layout

This commit is contained in:
Andrzej Stepien 2023-09-13 14:26:38 +02:00
parent 2b533febc4
commit 558d7ce770
14 changed files with 68 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/Components/PageHeader.jsx
View File

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

3
src/Components/Table.jsx
View File

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

4
src/assets/magnifying-glass.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

5
src/routes/editPublication.jsx
View File

@ -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>

2
src/routes/editPublicationRoot.jsx
View File

@ -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>

5
src/routes/editStory.jsx
View File

@ -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>

2
src/routes/editStoryRoot.jsx
View File

@ -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>

5
src/routes/editSubmission.jsx
View File

@ -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>

2
src/routes/editSubmissionRoot.jsx
View File

@ -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:

15
src/routes/publication.jsx
View File

@ -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>
</>
)
}

7
src/routes/story.jsx
View File

@ -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']}

16
src/styles/PageHeader.css
View File

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

8
src/styles/Table.css
View File

@ -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)

6
src/styles/index.css
View File

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