From 616865bdc7f258bf179f81c6c5260ee8dedabbad Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Fri, 17 Mar 2023 17:04:05 +0000
Subject: [PATCH] Fixed issues with absolute positioning
---
.../src/components/navigation/NavBar.tsx | 2 +-
.../src/components/post/AnswerCard.tsx | 21 +++++++++++++++++--
.../src/styles/AnswerCard.module.css | 18 ++++++++++++++++
3 files changed, 38 insertions(+), 3 deletions(-)
create mode 100644 daily-thought-frontend/src/styles/AnswerCard.module.css
diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index 74d2c4ea..452b85c3 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -34,7 +34,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
return (
<>
<div className="min-h-full min-w-full">
- <Disclosure as="nav" className="bg-c-pink fixed w-full">
+ <Disclosure as="nav" className="bg-c-pink fixed w-full z-10">
{({ open }) => (
<>
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
diff --git a/daily-thought-frontend/src/components/post/AnswerCard.tsx b/daily-thought-frontend/src/components/post/AnswerCard.tsx
index 1d03dfc9..c184ae7f 100644
--- a/daily-thought-frontend/src/components/post/AnswerCard.tsx
+++ b/daily-thought-frontend/src/components/post/AnswerCard.tsx
@@ -1,8 +1,9 @@
import { Post } from "@/types/post"
import { FC, PropsWithChildren } from "react"
-import { Bars3Icon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
+import { EyeSlashIcon, HeartIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline'
import LikeStack from "./LikeStack"
import Comment from "../comments/Comment"
+import styles from '../../styles/AnswerCard.module.css'
type AnswerCardProps = {
post: Post;
@@ -15,7 +16,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
}) => {
return (
- <div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden">
+ <div className="flex-1 rounded-3xl bg-white text-lg shadow-lg overflow-hidden relative">
<div className="p-4">
<p className="text-sm text-gray-600">{`${post.User.Name}'s answer`}</p>
<div>
@@ -41,6 +42,7 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
<LikeStack Users={[post.User, post.User, post.User, post.User, post.User, post.User]} />
</div>
</div>
+
@@ -48,6 +50,21 @@ const AnswerCard: FC<PropsWithChildren<AnswerCardProps>> = ({
<p className="text-xs text-gray-500 hover:text-c-pink">View all 3 comments</p>
<Comment Comment={{Data: "asdfg", User: post.User}} />
</div>
+
+ {/* <div className={styles.hidden}>
+ <div className="flex justify-center flex-col items-center">
+ <EyeSlashIcon className="h-10 w-10 text-c-pink"/>
+ <p className="text-sm text-c-pink">This post is hidden</p>
+
+ <button
+ className="rounded-md bg-white px-3.5 py-2 mt-2 text-xs font-semibold text-c-pink shadow-sm hover:bg-c-pink hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-400"
+ >
+ Post your daily
+ </button>
+ </div>
+ </div> */}
+
+
</div>
)
}
diff --git a/daily-thought-frontend/src/styles/AnswerCard.module.css b/daily-thought-frontend/src/styles/AnswerCard.module.css
new file mode 100644
index 00000000..88c1c6ed
--- /dev/null
+++ b/daily-thought-frontend/src/styles/AnswerCard.module.css
@@ -0,0 +1,18 @@
+.hidden {
+/* From https://css.glass */
+background: rgba(180, 180, 180, 0.18);
+border-radius: 16px;
+box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+backdrop-filter: blur(20px);
+-webkit-backdrop-filter: blur(8.1px);
+
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
\ No newline at end of file
--
GitLab