From 2b533febc4f5d94a460490f80e14f7d7d83c77ea Mon Sep 17 00:00:00 2001 From: Andrzej Stepien Date: Wed, 13 Sep 2023 11:50:57 +0200 Subject: [PATCH] edit selectors and styling --- src/Components/PageHeader.jsx | 46 +++++++++++++++++++++--------- src/main.jsx | 23 +++++++++++++++ src/routes/createPublication.jsx | 10 +++++++ src/routes/editPublicationRoot.jsx | 26 +++++++++++++++++ src/routes/editStoryRoot.jsx | 26 +++++++++++++++++ src/routes/editSubmissionRoot.jsx | 28 ++++++++++++++++++ src/routes/publication.jsx | 17 +---------- src/routes/root.jsx | 1 + src/routes/story.jsx | 20 ++----------- src/styles/Form.css | 8 ++++-- src/styles/PageHeader.css | 43 +++++++++++++++++++--------- src/styles/Sidebar.css | 17 +++++++++++ src/styles/Variables.css | 3 ++ src/styles/index.css | 17 ++++++++++- 14 files changed, 221 insertions(+), 64 deletions(-) create mode 100644 src/routes/editPublicationRoot.jsx create mode 100644 src/routes/editStoryRoot.jsx create mode 100644 src/routes/editSubmissionRoot.jsx create mode 100644 src/styles/Sidebar.css diff --git a/src/Components/PageHeader.jsx b/src/Components/PageHeader.jsx index 3452369..b71cd8f 100644 --- a/src/Components/PageHeader.jsx +++ b/src/Components/PageHeader.jsx @@ -1,9 +1,10 @@ import plus from '../assets/plus.svg' import pencil from '../assets/pencil.svg' import trash from '../assets/trash.svg' -import { Link } from 'react-router-dom' -export default function (props){ - return( +import { Link, Form, useNavigate } from 'react-router-dom' +export default function (props) { + const navigate = useNavigate() + return ( ) } \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index b6dfd52..8b3b503 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -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: , errorElement: , children:[ + { + index:true, + element:, + loader:submissionsLoader + }, { path: "/stories", element: , @@ -61,18 +69,33 @@ const router = createBrowserRouter([ loader: storiesLoader, action: editStoryAction }, + { + path:"/story/edit", + element: , + loader: storiesLoader + }, { path:"/publication/:publicationId/edit", element: , loader: publicationsLoader, action: editPublicationAction }, + { + path:"/publication/edit", + element: , + loader: publicationsLoader + }, { path:"/submission/:submissionId/edit", element: , loader: editSubmissionLoader, action: editSubmissionAction }, + { + path:"/submission/edit", + element: , + loader: submissionsLoader + }, { path:"/story/create", element: , diff --git a/src/routes/createPublication.jsx b/src/routes/createPublication.jsx index 89a7424..4a2cde8 100644 --- a/src/routes/createPublication.jsx +++ b/src/routes/createPublication.jsx @@ -20,6 +20,7 @@ export default function CreatePublication(){
+ + + + + + +
diff --git a/src/routes/editPublicationRoot.jsx b/src/routes/editPublicationRoot.jsx new file mode 100644 index 0000000..ca24e6d --- /dev/null +++ b/src/routes/editPublicationRoot.jsx @@ -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( + <> +
+
+

Which publication would you like to edit?

+ + +
+ OK + +
+ + ) +} \ No newline at end of file diff --git a/src/routes/editStoryRoot.jsx b/src/routes/editStoryRoot.jsx new file mode 100644 index 0000000..8227417 --- /dev/null +++ b/src/routes/editStoryRoot.jsx @@ -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( + <> +
+
+

Which story would you like to edit?

+ + +
+ OK + +
+ + ) +} \ No newline at end of file diff --git a/src/routes/editSubmissionRoot.jsx b/src/routes/editSubmissionRoot.jsx new file mode 100644 index 0000000..3aee883 --- /dev/null +++ b/src/routes/editSubmissionRoot.jsx @@ -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( + <> +
+
+

Which submission would you like to edit?

+ +
+ OK +
+
+ + ) +} \ No newline at end of file diff --git a/src/routes/publication.jsx b/src/routes/publication.jsx index f6e6198..09498c7 100644 --- a/src/routes/publication.jsx +++ b/src/routes/publication.jsx @@ -22,22 +22,7 @@ export default function Publication() { sortByDefault='date_submitted' header='Submissions:' > - EDIT -
{ - if ( - !confirm( - "Please confirm you want to delete this record." - ) - ) { - event.preventDefault(); - } - }} -> - -
+
) diff --git a/src/routes/root.jsx b/src/routes/root.jsx index 6e314f6..e1e9dbd 100644 --- a/src/routes/root.jsx +++ b/src/routes/root.jsx @@ -11,6 +11,7 @@ export function Root() {
{navigation==="loading"?:""} ) diff --git a/src/styles/Form.css b/src/styles/Form.css index b7cace7..6809447 100644 --- a/src/styles/Form.css +++ b/src/styles/Form.css @@ -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)); } diff --git a/src/styles/PageHeader.css b/src/styles/PageHeader.css index 418fd3b..e0f11bb 100644 --- a/src/styles/PageHeader.css +++ b/src/styles/PageHeader.css @@ -1,17 +1,34 @@ -#page-header img{ - width:5rem; +#page-header img { + width: 5rem; height: 5rem; - margin:1rem; - filter: invert(83%) sepia(12%) saturate(387%) hue-rotate(129deg) brightness(89%) contrast(89%);} -#page-header h1{ - display: inline; -} - -#page-header{ - display:flex; - width:100%; - justify-content:space-between; + margin: 1rem; + filter: invert(83%) sepia(12%) saturate(387%) hue-rotate(129deg) brightness(89%) contrast(89%); } -#icon-container{ +#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 a{ + padding:0; +} +#page-header h1{ + font-size:6rem; + text-shadow: var(--text-shadow-light); + margin-right: 5rem; } \ No newline at end of file diff --git a/src/styles/Sidebar.css b/src/styles/Sidebar.css new file mode 100644 index 0000000..55e326e --- /dev/null +++ b/src/styles/Sidebar.css @@ -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%); + } \ No newline at end of file diff --git a/src/styles/Variables.css b/src/styles/Variables.css index fc1c70c..d5069ca 100644 --- a/src/styles/Variables.css +++ b/src/styles/Variables.css @@ -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%); } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 8915bcd..cdf7322 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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;