Merge pull request #35 from torontojs/feat/report_input

Feat/report input
torontojs · Jul 26, 2024 · b12ae5f · b12ae5f
2 parents 412aab0 + f4cf525
commit b12ae5f
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 18 deletions.
diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css
@@ -2,6 +2,7 @@
 	width: auto;
 	margin: 1.25rem auto;
 	padding: 0 1rem;
+	text-align: center;
 
 	@media (min-width: 1024px) {
     .desktop\:px-9 {
@@ -11,4 +12,5 @@
 		font-weight: 300;
     }
 }
+
 }
diff --git a/src/components/PostCard/index.astro b/src/components/PostCard/index.astro
@@ -3,6 +3,8 @@ import { Picture } from 'astro:assets';
 
 import TagList from '../TagList/index.astro';
 
+import './styles.css';
+
 interface Props {
 	url: string,
 	title: string,
@@ -19,24 +21,16 @@ const BLOG_URL = Astro.site?.href;
 const IMAGE_WIDTHS = [256, 512, 768, image?.width ?? 1024];
 const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'short' });
 ---
-<article
-	class:list={[
-		'post-card bg-gradient-to-t rounded-3xl p-4 hover:from-yellow to-transparent grid gap-2 shadow-md',
-		{
-			'grid-cols-[auto] desktop:grid-cols-[min-content_auto] grid-rows-[auto_auto_auto_auto_auto] desktop:grid-rows-[auto_1fr_auto_auto]': image,
-			'grid-cols-[auto] grid-rows-[auto_auto_auto]': !image
-		}
-	]}
->
+<article class="post-card">
 
-	<header class:list={['col-start-1', { 'desktop:col-span-2': image }]}>
-		<h2 class="text-2xl font-light">
+	<header>
+		<h2>
 			<a href={url}>
 				<slot name="title"></slot>
 			</a>
 		</h2>
 
-		<span class="text-sm"><time datetime={new Date(createdAt).toISOString()}>{formatter.format(new Date(createdAt))}</time></span>
+		<span><time datetime={new Date(createdAt).toISOString()}>{formatter.format(new Date(createdAt))}</time></span>
 	</header>
 
 	{image && (
@@ -50,13 +44,13 @@ const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyl
 		/>
 	)}
 
-	<div class:list={['post-card-content row-start-3 desktop:row-start-2', { 'col-start-1 desktop:col-start-2': image }]}>
+	<div>
 		<slot></slot>
 	</div>
 
-	<a class:list={['read-more-link row-start-4 desktop:row-start-3 underline underline-offset-2 decoration-2 decoration-mainRed hover:decoration-lightRed hover:decoration-4', { 'col-start-1 desktop:col-start-2': image }]} href={url}><span class="sr-only">({title}) </span>Read more...</a>
+	<a href={url}><span class="sr-only">({title}) </span>Read more...</a>
 
-	<footer class:list={['col-start-1 row-start-5 desktop:row-start-4', { 'desktop:col-span-2': image }]}>
+	<footer>
 		{tags && tags.length > 0 && (
 			<TagList
 				tags={Object.fromEntries(tags.map((tag) => [tag, `${BLOG_URL}tags/${tag}`]))}

diff --git a/src/components/PostCard/styles.css b/src/components/PostCard/styles.css
@@ -0,0 +1,14 @@
+.post-card {
+  border-radius: 5px;
+  border: 5px solid #ED342F;
+  padding: 20px;
+  width: 75%;
+  margin: 2rem auto;
+   text-align: center;
+}
+
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -7,6 +7,7 @@ import PostHeader from '../components/PostHeader/index.astro';
 import SkipToContent from '../components/SkipToContent/index.astro';
 import TagList from '../components/TagList/index.astro';
 import BaseLayout from './Base/index.astro';
+import './styles.css';
 
 interface Props {
 	title: string,

diff --git a/src/layouts/BlogPosts.astro b/src/layouts/BlogPosts.astro
@@ -1,11 +1,11 @@
 ---
-import type { Post } from '../utils/post';
 
 import PageHeader from '../components/PageHeader/index.astro';
 import Pagination from '../components/Pagination/index.astro';
 import PostCard from '../components/PostCard/index.astro';
 import SiteNav from '../components/SiteNav/index.astro';
 import SkipToContent from '../components/SkipToContent/index.astro';
+import type { Post } from '../utils/post';
 import BaseLayout from './Base/index.astro';
 
 

diff --git a/src/pages/report.astro b/src/pages/report.astro
@@ -35,7 +35,7 @@ const BLOG_URL = Astro.site?.href;
 			</div>
 		</div>
 
-		<div>
+		<div id="report-form">
 			<form>
 				<label for="name">
 					Name

diff --git a/src/styles/report.css b/src/styles/report.css
@@ -1,4 +1,3 @@
-
 .fullWidth  {
 	display: flex;
 	justify-content: center;
@@ -30,3 +29,36 @@ h1 {
 	border-radius: 10px;
 	border: 2px solid black;
 }
+
+#report-form {
+  border-radius: 5px;
+  border: 5px solid #ED342F;
+  padding: 20px;
+  width: 75%;
+  margin: 0 auto;
+}
+
+#report-form :is(input, textarea) {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  resize: vertical;
+}
+
+#report-form label {
+  padding: 12px 12px 12px 0;
+  display: inline-block;
+}
+
+#report-form input {
+	margin-block-start: 20px;
+}
+
+#report-form button[type="submit"]{
+	background: #ED342F;
+}
+
+#report-form button[type="submit"]:hover{
+	background: #A8569A;
+}