colin/redwood-tutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adds styling

Browse Source
This commit is contained in:
Rob Cameron
2020-10-07 16:12:09 -07:00
parent b00bd8bba6
commit 1e1166978b
7 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/BlogPost/BlogPost.js
View File

@@ -1,14 +1,14 @@
import { Link,routes } from '@redwoodjs/router' import { Link, routes } from '@redwoodjs/router'
const BlogPost = ({ post }) => { const BlogPost = ({ post }) => {
return ( return (
<article> <article className="mt-10">
<header> <header>
<h2> <h2 className="text-xl text-blue-700 font-semibold">
<Link to={routes.blogPost({ id: post.id })}>{post.title}</Link> <Link to={routes.blogPost({ id: post.id })}>{post.title}</Link>
</h2> </h2>
</header> </header>
<div>{post.body}</div> <div className="mt-2 text-gray-900 font-light">{post.body}</div>
</article> </article>
) )
} }

10
web/src/components/BlogPostsCell/BlogPostsCell.js
View File

@@ -1,4 +1,4 @@
import { Link,routes } from '@redwoodjs/router' import { Link, routes } from '@redwoodjs/router'
import BlogPost from 'src/components/BlogPost' import BlogPost from 'src/components/BlogPost'
export const QUERY = gql` export const QUERY = gql`
@@ -19,5 +19,11 @@ export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => <div>Error: {error.message}</div> export const Failure = ({ error }) => <div>Error: {error.message}</div>
export const Success = ({ posts }) => { export const Success = ({ posts }) => {
return posts.map((post) => <BlogPost key={post.id} post={post} />) return (
<div className="-mt-12">
{posts.map((post) => (
<BlogPost key={post.id} post={post} />
))}
</div>
)
} }

16
web/src/index.css
View File

@@ -11,19 +11,3 @@
/** /**
* END --- TAILWIND GENERATOR EDIT * END --- TAILWIND GENERATOR EDIT
*/ */
button, input, label, textarea {
display: block;
outline: none;
}
label {
margin-top: 1rem;
}
.error {
color: red;
}
input.error, textarea.error {
border: 1px solid red;
}

4
web/src/index.html
View File

@@ -1,12 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="h-full">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body class="h-full bg-gray-200">
<div id="redwood-app"></div> <div id="redwood-app"></div>
</body> </body>
</html> </html>

43
web/src/layouts/BlogLayout/BlogLayout.js
View File

@@ -6,28 +6,53 @@ const BlogLayout = ({ children }) => {
return ( return (
<> <>
<header> <header className="flex justify-between items-center py-4 px-8 bg-blue-700 text-white">
<h1> <h1 className="text-5xl font-semibold tracking-tight">
<Link to={routes.home()}>Redwood Blog</Link> <Link
className="text-blue-400 hover:text-blue-100 transition duration-100"
to={routes.home()}
>
Redwood Blog
</Link>
</h1> </h1>
<nav> <nav>
<ul> <ul className="relative flex items-center font-light">
<li> <li>
<Link to={routes.about()}>About</Link> <Link
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
to={routes.about()}
>
About
</Link>
</li> </li>
<li> <li>
<Link to={routes.contact()}>Contact</Link> <Link
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
to={routes.contact()}
>
Contact
</Link>
</li> </li>
<li> <li>
<a href="#" onClick={isAuthenticated ? logOut : logIn}> <a
className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
href="#"
onClick={isAuthenticated ? logOut : logIn}
>
{isAuthenticated ? 'Log Out' : 'Log In'} {isAuthenticated ? 'Log Out' : 'Log In'}
</a> </a>
</li> </li>
{isAuthenticated && <li>{currentUser.email}</li>} {isAuthenticated && (
<li className="absolute top-0 right-0 -mt-8 px-4 text-xs text-blue-300">
{currentUser.email}
</li>
)}
</ul> </ul>
</nav> </nav>
</header> </header>
<main>{children}</main> <main className="max-w-4xl mx-auto p-12 bg-white shadow rounded-b">
{children}
</main>
</> </>
) )
} }

4
web/src/pages/BlogPostPage/BlogPostPage.js
View File

@@ -4,7 +4,9 @@ import BlogPostCell from 'src/components/BlogPostCell'
const BlogPostPage = ({ id }) => { const BlogPostPage = ({ id }) => {
return ( return (
<BlogLayout> <BlogLayout>
<BlogPostCell id={id} /> <div className="-mt-12">
<BlogPostCell id={id} />
</div>
</BlogLayout> </BlogLayout>
) )
} }

58
web/src/pages/ContactPage/ContactPage.js
View File

@@ -7,7 +7,7 @@ import {
Label, Label,
FormError, FormError,
} from '@redwoodjs/forms' } from '@redwoodjs/forms'
import { Flash,useFlash,useMutation } from '@redwoodjs/web' import { Flash, useFlash, useMutation } from '@redwoodjs/web'
import { useForm } from 'react-hook-form' import { useForm } from 'react-hook-form'
import BlogLayout from 'src/layouts/BlogLayout' import BlogLayout from 'src/layouts/BlogLayout'
@@ -23,10 +23,10 @@ const ContactPage = () => {
const formMethods = useForm() const formMethods = useForm()
const { addMessage } = useFlash() const { addMessage } = useFlash()
const [create,{ loading,error }] = useMutation(CREATE_CONTACT,{ const [create, { loading, error }] = useMutation(CREATE_CONTACT, {
onCompleted: () => { onCompleted: () => {
addMessage('Thank you for your submission!',{ addMessage('Thank you for your submission!', {
style: { backgroundColor: 'green',color: 'white',padding: '1rem' }, style: { backgroundColor: 'green', color: 'white', padding: '1rem' },
}) })
formMethods.reset() formMethods.reset()
}, },
@@ -39,7 +39,7 @@ const ContactPage = () => {
return ( return (
<BlogLayout> <BlogLayout>
<Flash timeout={1000} /> <Flash timeout={1000} className="bg-green-100 text-green-700" />
<Form <Form
onSubmit={onSubmit} onSubmit={onSubmit}
validation={{ mode: 'onBlur' }} validation={{ mode: 'onBlur' }}
@@ -48,45 +48,63 @@ const ContactPage = () => {
> >
<FormError <FormError
error={error} error={error}
wrapperStyle={{ color: 'red',backgroundColor: 'lavenderblush' }} wrapperClassName="py-4 px-6 rounded-lg bg-red-100 text-red-700"
listClassName="list-disc ml-4"
listItemClassName=""
/> />
<Label name="name" errorClassName="error"> <Label
name="name"
className="block text-gray-700 uppercase text-sm"
errorClassName="block uppercase text-sm text-red-700"
>
Name Name
</Label> </Label>
<TextField <TextField
name="name" name="name"
validation={{ required: true }} validation={{ required: true }}
errorClassName="error" className="border rounded-sm px-2 py-1 outline-none"
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
/> />
<FieldError name="name" className="error" /> <FieldError name="name" className="block text-red-700" />
<Label name="name" errorClassName="error"> <Label
name="name"
className="block mt-8 text-gray-700 uppercase text-sm"
errorClassName="block mt-8 text-red-700 uppercase text-sm"
>
Email Email
</Label> </Label>
<TextField <TextField
name="email" name="email"
validation={{ validation={{
required: true, required: true,
pattern: {
value: /[^@]+@[^.]+\..+/,
message: 'Please enter a valid email address',
},
}} }}
errorClassName="error" className="border rounded-sm px-2 py-1"
errorClassName="border rounded-sm px-2 py-1 border-red-700 outline-none"
/> />
<FieldError name="email" className="error" /> <FieldError name="email" className="block text-red-700" />
<Label name="name" errorClassName="error"> <Label
name="name"
className="block mt-8 text-gray-700 uppercase text-sm"
errorClassName="block mt-8 text-red-700 uppercase text-sm"
>
Message Message
</Label> </Label>
<TextAreaField <TextAreaField
name="message" name="message"
validation={{ required: true }} validation={{ required: true }}
errorClassName="error" className="block border rounded-sm px-2 py-1"
errorClassName="block border rounded-sm px-2 py-1 border-red-700 outline-none"
/> />
<FieldError name="message" className="error" /> <FieldError name="message" className="block text-red-700" />
<Submit disabled={loading}>Save</Submit> <Submit
className="block bg-blue-700 text-white mt-8 px-4 py-2 rounded"
disabled={loading}
>
Save
</Submit>
</Form> </Form>
</BlogLayout> </BlogLayout>
) )