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

edit selectors and styling

This commit is contained in:
Andrzej Stepien 2023-09-13 11:50:57 +02:00
parent 93085ab2c7
commit 2b533febc4
14 changed files with 221 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/Components/PageHeader.jsx
View File

@ -1,8 +1,9 @@
import plus from '../assets/plus.svg'
import pencil from '../assets/pencil.svg'
import trash from '../assets/trash.svg'
import { Link } from 'react-router-dom'
import { Link, Form, useNavigate } from 'react-router-dom'
export default function (props) {
const navigate = useNavigate()
return (
<header id="page-header">
<h2>
@ -12,17 +13,36 @@ export default function (props){
{props.heading}
</h1>
<span id="icon-container">
<Link to={`${props.url}/create`} >
<button onClick={() => { navigate(`${props.url}/create`) }}>
<img src={plus} />
</Link>
<Link to={`${props.url}${props?.id?`/${props.id}`:""}/edit`} >
</button>
<button onClick={() => { navigate(`${props.url}${props?.id ? `/${props.id}` : ""}/edit`) }}>
<img src={pencil} />
</Link>
<Link to={`${props.url}${props?.id?`/${props.id}`:""}/delete`} >
<img src={trash}/>
</Link>
</button>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit"
><img src={trash} /></button>
</Form>
</span>
</header>
)
}

23
src/main.jsx
View File

@ -16,6 +16,9 @@ import { action as deleteStoryAction } from './routes/deleteStory';
import { action as deletePublicationAction } from './routes/deletePublication';
import EditSubmission, {action as editSubmissionAction} from './routes/editSubmission';
import CreateSubmission, {action as createSubmissionAction} from './routes/createSubmission';
import EditStoryRoot from './routes/editStoryRoot';
import EditPublicationRoot from './routes/editPublicationRoot';
import EditSubmissionRoot from './routes/editSubmissionRoot';
import './styles/index.css'
import {
createBrowserRouter,
@ -28,6 +31,11 @@ const router = createBrowserRouter([
element: <Root/>,
errorElement: <ErrorPage />,
children:[
{
index:true,
element:<Submissions/>,
loader:submissionsLoader
},
{
path: "/stories",
element: <Stories/>,
@ -61,18 +69,33 @@ const router = createBrowserRouter([
loader: storiesLoader,
action: editStoryAction
},
{
path:"/story/edit",
element: <EditStoryRoot/>,
loader: storiesLoader
},
{
path:"/publication/:publicationId/edit",
element: <EditPublication/>,
loader: publicationsLoader,
action: editPublicationAction
},
{
path:"/publication/edit",
element: <EditPublicationRoot/>,
loader: publicationsLoader
},
{
path:"/submission/:submissionId/edit",
element: <EditSubmission/>,
loader: editSubmissionLoader,
action: editSubmissionAction
},
{
path:"/submission/edit",
element: <EditSubmissionRoot/>,
loader: submissionsLoader
},
{
path:"/story/create",
element: <CreateStory/>,

10
src/routes/createPublication.jsx
View File

@ -20,6 +20,7 @@ export default function CreatePublication(){
<div id="page-container">
<PageHeader super={`Publication`} heading="CREATE"/>
<Form method="post" id="new-story-form">
<label>Title:
<input
placeholder='title'
aria-label="Title"
@ -27,6 +28,8 @@ export default function CreatePublication(){
name="title"
defaultValue=""
/>
</label>
<label>Website:
<input
placeholder='website'
aria-label="Website:"
@ -35,6 +38,8 @@ export default function CreatePublication(){
name="link"
defaultValue=""
/>
</label>
<label>Query after (days):
<input
placeholder='1000'
aria-label="Query after:"
@ -43,6 +48,11 @@ export default function CreatePublication(){
name="query_after_days"
defaultValue=""
/>
</label>
<button type="submit">SAVE</button>
<button type="button">CANCEL</button>
</Form>

26
src/routes/editPublicationRoot.jsx Normal file
View File

@ -0,0 +1,26 @@
import { Form, Link, useLoaderData } from "react-router-dom";
import Dropdown from "../Components/Dropdown";
import { useState } from "react";
export default function EditPublicationRoot (){
const {publications} = useLoaderData()
const publicationsOptions = publications?.map(row=>[row.id,row.title])
const [id,setId]=useState(1)
const handleChange = (event) => {
const value = event.target.value
console.log(value)
setId(value)
}
return(
<>
<div id="page-container">
<Form >
<h2>Which publication would you like to edit?</h2>
<Dropdown name="pub_id" value={id} options={publicationsOptions} handleChange={handleChange}/>
<br/>
<Link to={`/publication/${id}/edit`}>OK</Link>
</Form>
</div>
</>
)
}

26
src/routes/editStoryRoot.jsx Normal file
View File

@ -0,0 +1,26 @@
import { Form, Link, useLoaderData } from "react-router-dom";
import Dropdown from "../Components/Dropdown";
import { useState } from "react";
export default function EditStoryRoot (){
const {stories} = useLoaderData()
const storiesOptions = stories?.map(row=>[row.id,row.title])
const [id,setId]=useState(1)
const handleChange = (event) => {
const value = event.target.value
console.log(value)
setId(value)
}
return(
<>
<div id="page-container">
<Form >
<h2>Which story would you like to edit?</h2>
<Dropdown name="story_id" value={id} options={storiesOptions} handleChange={handleChange}/>
<br/>
<Link to={`/story/${id}/edit`}>OK</Link>
</Form>
</div>
</>
)
}

28
src/routes/editSubmissionRoot.jsx Normal file
View File

@ -0,0 +1,28 @@
import { Form, Link, useLoaderData } from "react-router-dom";
import Dropdown from "../Components/Dropdown";
import { useState } from "react";
export default function EditSubmissionRoot (){
const {submissions} = useLoaderData()
const submissionsOptions = submissions?.map(row=>[row.id,row.date_submitted])
const [id,setId]=useState(1)
const handleChange = (event) => {
const value = event.target.value
console.log(value)
setId(value)
}
return(
<>
<div id="page-container">
<Form >
<h2>Which submission would you like to edit?</h2>
<label>Date submitted:
<Dropdown name="sub_id" value={id} options={submissionsOptions} handleChange={handleChange}/>
</label>
<br/>
<Link to={`/submission/${id}/edit`}>OK</Link>
</Form>
</div>
</>
)
}

17
src/routes/publication.jsx
View File

@ -22,22 +22,7 @@ export default function Publication() {
sortByDefault='date_submitted'
header='Submissions:'
></Table>
<Link to={`/publication/${publicationData.id}/edit`}>EDIT</Link>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
</div>
</>
)

1
src/routes/root.jsx
View File

@ -11,6 +11,7 @@ export function Root() {
<div id="container">
{navigation==="loading"?<Loader/>:""}
<div id="sidebar">
<h1>Submission <br/> Manager</h1> version 1.0
<ul>
<li>
<Link to={`stories`}>STORIES</Link>

20
src/routes/story.jsx
View File

@ -24,24 +24,8 @@ export default function Story() {
header='Submissions:'
></Table>
<Form
method="post"
action="delete"
onSubmit={(event) => {
if (
!confirm(
"Please confirm you want to delete this record."
)
) {
event.preventDefault();
}
}}
>
<button type="submit">Delete</button>
</Form>
<Form>
<Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
</Form>
</div>
</>
)

8
src/styles/Form.css
View File

@ -8,6 +8,7 @@ form{
padding:2rem;
width:max-content;
margin:auto;
text-align: center;
}
@ -44,8 +45,8 @@ input,select {
background-color: var(--fg-color);
box-shadow: var(--box-shadow-light);
}
form button, form a{
float:right;
form button, form a, #page-header button{
display:inline;
font-size: 3.2rem;
padding: 1rem;
border-radius: 2rem;
@ -53,8 +54,9 @@ form button, form a{
margin:1rem;
margin-top: 4rem;
background-color: hsl(var(--color-3),var(--light));
}
form button:hover{
form button:hover, form a:hover, #page-header button:hover{
background-color: hsl(var(--color-3),var(--lightest));
}

21
src/styles/PageHeader.css
View File

@ -2,16 +2,33 @@
width: 5rem;
height: 5rem;
margin: 1rem;
filter: invert(83%) sepia(12%) saturate(387%) hue-rotate(129deg) brightness(89%) contrast(89%);}
filter: invert(83%) sepia(12%) saturate(387%) hue-rotate(129deg) brightness(89%) contrast(89%);
}
#page-header h1 {
display: inline;
}
#page-header form {
padding: 0;
background-color: transparent;
box-shadow: none;
display:inline;
}
#page-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
#icon-container{
#icon-container a{
padding:0;
}
#page-header h1{
font-size:6rem;
text-shadow: var(--text-shadow-light);
margin-right: 5rem;
}

17
src/styles/Sidebar.css Normal file
View File

@ -0,0 +1,17 @@
#sidebar{
padding: 3rem;
background-image: linear-gradient(to right,hsl(var(--color-3),var(--medium))85%,hsla(var(--color-2),var(--light),0%));
color: white;
min-height: 100vh;
}
#sidebar a{
color:white;
}
#sidebar h1{
text-shadow: var(--text-shadow-dark);
font-size:4.5rem;
}
#sidebar a:hover{
text-shadow:
0 0 1em hsla(var(--accent),var(--off-white),50%);
}

3
src/styles/Variables.css
View File

@ -9,11 +9,14 @@
--off-white:98%;
--lightest:90%;
--light:85%;
--medium:60%;
--dark:50%;
--darkest:20%;
--box-shadow:10px 10px 30px 0px hsla(var(--color-5),var(--dark));
--box-shadow-light:5px 5px 30px 0px hsla(var(--color-5),var(--light));
--text-shadow-light: 5px 5px 4px hsla(var(--color-5),var(--light));
--text-shadow-dark: 3px 3px 15px hsla(var(--color-5),var(--dark),70%);
}

17
src/styles/index.css
View File

@ -2,6 +2,7 @@
@import 'Variables.css';
@import 'Form.css';
@import 'PageHeader.css';
@import 'Sidebar.css';
*,
*::before,
*::after {
@ -24,6 +25,20 @@ article ol,
article ul {
list-style-position: inside;
}
a{
text-decoration: none;
}
a:visited,a:link{
text-decoration: none;
color: black;
font-weight: bold;
}
a:hover{
text-shadow:
1px 1px 2px white,
0 0 3em white,
0 0 1em hsl(var(--accent),var(--off-white));
}
html {
font-size: 62.5%;
-webkit-text-size-adjust: none;
@ -45,7 +60,7 @@ html {
#container{
display:grid;
grid-template-columns: 20rem 1fr ;
grid-template-columns: 35rem 1fr ;
}
#sidebar{
font-size: 3.2rem;