From 6c18f041f4049e40c7b8c63f910e99e7999485b6 Mon Sep 17 00:00:00 2001 From: hlbmtc Date: Tue, 26 Nov 2024 18:21:32 +0000 Subject: [PATCH 1/5] Updated Post Page UI components --- .../questions/[id]/[[...slug]]/page.tsx | 55 ++++------------ .../components/forecast_maker/container.tsx | 6 +- .../questions/[id]/components/post_header.tsx | 12 ++-- .../[id]/components/sidebar/index.tsx | 62 +++++++++++-------- .../sidebar/news_match/news_match_drawer.tsx | 62 ++++++++++--------- .../sidebar/sidebar_question_tags.tsx | 4 +- .../similar_questions_drawer.tsx | 2 +- .../src/components/comment_feed/index.tsx | 2 +- .../src/components/ui/expandable_content.tsx | 2 +- .../src/components/ui/section_toggle.tsx | 60 +++++++++++------- 10 files changed, 133 insertions(+), 134 deletions(-) diff --git a/front_end/src/app/(main)/questions/[id]/[[...slug]]/page.tsx b/front_end/src/app/(main)/questions/[id]/[[...slug]]/page.tsx index 6ba55cd36..19166d7e7 100644 --- a/front_end/src/app/(main)/questions/[id]/[[...slug]]/page.tsx +++ b/front_end/src/app/(main)/questions/[id]/[[...slug]]/page.tsx @@ -135,25 +135,6 @@ export default async function IndividualQuestion({ const preselectedGroupQuestionId = extractPreselectedGroupQuestionId(searchParams); - const t = await getTranslations(); - - let typeLabel = t("notebook"); - if (postData.group_of_questions) { - typeLabel = t("group"); - } else if (postData.conditional) { - typeLabel = t("conditional"); - } else if (postData.question) { - typeLabel = t("question"); - } - - let edit_type = "question"; - if (postData.group_of_questions) { - edit_type = "group"; - } else if (postData.conditional) { - edit_type = "conditional"; - } else if (postData.notebook) { - edit_type = "notebook"; - } const allowModifications = postData.user_permission === ProjectPermissions.ADMIN || @@ -171,23 +152,10 @@ export default async function IndividualQuestion({ ) : (
)} -
-
- - {typeLabel} - - {allowModifications && ( - - {t("edit")} - - )} -
+
-
+
{!postData.conditional && (
@@ -251,16 +219,17 @@ export default async function IndividualQuestion({ preselectedQuestionId={preselectedGroupQuestionId} /> )} - - - - +
+ + +
+ > = ({
-

- {t("makePrediction")} -

+

{t("makePrediction")}

{children}
{resolutionCriteria.map((criteria, index) => ( diff --git a/front_end/src/app/(main)/questions/[id]/components/post_header.tsx b/front_end/src/app/(main)/questions/[id]/components/post_header.tsx index 95f246324..316eb0d22 100644 --- a/front_end/src/app/(main)/questions/[id]/components/post_header.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/post_header.tsx @@ -5,7 +5,8 @@ import { useRouter } from "next/navigation"; import { useLocale, useTranslations } from "next-intl"; import { useEffect, useState } from "react"; -import { SharePostMenu, PostDropdownMenu } from "@/components/post_actions/"; +import { useContentTranslatedBannerProvider } from "@/app/providers"; +import { PostDropdownMenu, SharePostMenu } from "@/components/post_actions/"; import Button from "@/components/ui/button"; import { PostStatus, @@ -17,7 +18,6 @@ import { TournamentType } from "@/types/projects"; import PostApprovalModal from "./post_approval_modal"; import PostSubscribeButton from "./subscribe_button"; import { draftPost, submitPostForReview } from "../../actions"; -import { useContentTranslatedBannerProvider } from "@/app/providers"; export default function PostHeader({ post, @@ -83,18 +83,18 @@ export default function PostHeader({ return (
-
+
{typeLabel} {allowModifications && ( <> - + {post.curation_status === PostStatus.APPROVED && [ProjectPermissions.CURATOR, ProjectPermissions.ADMIN].includes( post.user_permission diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx index ea4de95cc..ee45e16f3 100644 --- a/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx @@ -1,4 +1,5 @@ -import { FC, Suspense } from "react"; +import { usePathname } from "next/navigation"; +import React, { FC, Suspense } from "react"; import PostSubscribeButton from "@/app/(main)/questions/[id]/components/subscribe_button"; import { PostDropdownMenu, SharePostMenu } from "@/components/post_actions"; @@ -10,6 +11,14 @@ import SidebarQuestionTags from "./sidebar_question_tags"; import SimilarQuestions from "./similar_questions"; import QuestionEmbedButton from "../question_embed_button"; +function SidebarContainer({ children }: { children: React.ReactNode }) { + return ( +
+ {children} +
+ ); +} + type Props = { postData: PostWithForecasts; allowModifications: boolean; @@ -25,23 +34,22 @@ const Sidebar: FC = ({ }) => { if (layout === "mobile") { return ( -
-
-
+
+ + + -
+ {postData.curation_status === PostStatus.APPROVED && ( <> -
- -
+ @@ -54,34 +62,36 @@ const Sidebar: FC = ({ } return ( -
-
-
- {postData.curation_status == PostStatus.APPROVED && ( - - )} - -
+
+ +
+
+ {postData.curation_status == PostStatus.APPROVED && ( + + )} + +
-
- - +
+ + +
-
- -
+ + + -
+ {postData.curation_status === PostStatus.APPROVED && ( <> diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx index fc028d4bb..ba1d7fea3 100644 --- a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx @@ -21,35 +21,39 @@ const NewsMatchDrawer: FC = ({ questionId, articles }) => { return (
- - {articles.slice(0, articleDisplayLimit).map((article: NewsArticle) => ( - - ))} -
- {articles.length > articleDisplayLimit && ( - - )} -
- {t.rich("learnMoreAboutNewsMatch", { - link: (chunks) => ( - - {chunks} - - ), - })} + +
+ {articles + .slice(0, articleDisplayLimit) + .map((article: NewsArticle) => ( + + ))} +
+ {articles.length > articleDisplayLimit && ( + + )} +
+ {t.rich("learnMoreAboutNewsMatch", { + link: (chunks) => ( + + {chunks} + + ), + })} +
diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_question_tags.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_question_tags.tsx index 8d1f58c57..930fcbd13 100644 --- a/front_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_question_tags.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/sidebar_question_tags.tsx @@ -52,8 +52,8 @@ const SidebarQuestionTags: FC = ({ const router = useRouter(); return ( -
-
+
+
{tournament.map((element) => ( = ({ questions }) => { return (
- +
{questions .slice(0, questionsDisplayLimit) diff --git a/front_end/src/components/comment_feed/index.tsx b/front_end/src/components/comment_feed/index.tsx index fcac7db24..da9618d2e 100644 --- a/front_end/src/components/comment_feed/index.tsx +++ b/front_end/src/components/comment_feed/index.tsx @@ -305,7 +305,7 @@ const CommentFeed: FC = ({
> = ({ expandLabel: _expandLabel, collapseLabel: _collapseLabel, maxCollapsedHeight = 128, - gradientClassName = "from-gray-0 dark:from-gray-0-dark", + gradientClassName = "from-blue-200 dark:from-blue-200-dark", className, children, }) => { diff --git a/front_end/src/components/ui/section_toggle.tsx b/front_end/src/components/ui/section_toggle.tsx index df9dddc3e..7c8aa2f9e 100644 --- a/front_end/src/components/ui/section_toggle.tsx +++ b/front_end/src/components/ui/section_toggle.tsx @@ -1,6 +1,6 @@ "use client"; -import { faCaretRight } from "@fortawesome/free-solid-svg-icons"; +import { faChevronUp } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Disclosure, @@ -10,41 +10,59 @@ import { import classNames from "classnames"; import { FC, PropsWithChildren } from "react"; +export type SectionVariant = "primary" | "light"; + type Props = { title?: string; defaultOpen?: boolean; className?: string; + variant?: SectionVariant; }; const SectionToggle: FC> = ({ + variant = "primary", title, defaultOpen, className, children, }) => { return ( - - - {({ open }) => ( - <> - + + + {({ open }) => ( +
- {title} - - )} - - {children} - + > + + {title} +
+ )} + + {children} + +
); }; From 72505f067a104d66e43908cb651daf0b24760eb7 Mon Sep 17 00:00:00 2001 From: hlbmtc Date: Tue, 26 Nov 2024 18:24:17 +0000 Subject: [PATCH 2/5] Small adjustment --- front_end/src/components/ui/section_toggle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front_end/src/components/ui/section_toggle.tsx b/front_end/src/components/ui/section_toggle.tsx index 7c8aa2f9e..bdf8cc36a 100644 --- a/front_end/src/components/ui/section_toggle.tsx +++ b/front_end/src/components/ui/section_toggle.tsx @@ -52,7 +52,7 @@ const SectionToggle: FC> = ({ From bc792315a2153f0da1393999d0f55feae074c54e Mon Sep 17 00:00:00 2001 From: hlbmtc Date: Tue, 26 Nov 2024 18:53:59 +0000 Subject: [PATCH 3/5] Small nits --- .../[id]/components/sidebar/index.tsx | 2 +- .../src/components/ui/section_toggle.tsx | 39 +++++++++++-------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx index ee45e16f3..77e42ff43 100644 --- a/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/index.tsx @@ -13,7 +13,7 @@ import QuestionEmbedButton from "../question_embed_button"; function SidebarContainer({ children }: { children: React.ReactNode }) { return ( -
+
{children}
); diff --git a/front_end/src/components/ui/section_toggle.tsx b/front_end/src/components/ui/section_toggle.tsx index bdf8cc36a..17eb98372 100644 --- a/front_end/src/components/ui/section_toggle.tsx +++ b/front_end/src/components/ui/section_toggle.tsx @@ -27,18 +27,16 @@ const SectionToggle: FC> = ({ children, }) => { return ( -
- - - {({ open }) => ( + + {({ open }) => ( +
+
> = ({ { "text-blue-700 dark:text-blue-700-dark": open, "text-blue-600 dark:text-blue-600-dark": !open, + "xs:px-4": variant === "light", } )} > @@ -58,11 +57,17 @@ const SectionToggle: FC> = ({ /> {title}
- )} - - {children} - -
+ + + {children} + +
+ )} + ); }; From 00170ecc2401ee7630e60a6278c61d4c13fd97c9 Mon Sep 17 00:00:00 2001 From: hlbmtc Date: Tue, 26 Nov 2024 18:55:34 +0000 Subject: [PATCH 4/5] Small nits --- .../[id]/components/sidebar/news_match/news_match_drawer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx index ba1d7fea3..0066ced8b 100644 --- a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/news_match_drawer.tsx @@ -42,7 +42,7 @@ const NewsMatchDrawer: FC = ({ questionId, articles }) => { {t("showMoreNews")} )} -
+
{t.rich("learnMoreAboutNewsMatch", { link: (chunks) => ( Date: Wed, 27 Nov 2024 11:18:10 +0000 Subject: [PATCH 5/5] PR review fixes --- .../questions/[id]/components/post_header.tsx | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/front_end/src/app/(main)/questions/[id]/components/post_header.tsx b/front_end/src/app/(main)/questions/[id]/components/post_header.tsx index 316eb0d22..16f971a2b 100644 --- a/front_end/src/app/(main)/questions/[id]/components/post_header.tsx +++ b/front_end/src/app/(main)/questions/[id]/components/post_header.tsx @@ -89,25 +89,12 @@ export default function PostHeader({ {allowModifications && ( <> - {t("edit")} - - {post.curation_status === PostStatus.APPROVED && - [ProjectPermissions.CURATOR, ProjectPermissions.ADMIN].includes( - post.user_permission - ) && - post.forecasts_count! < 1 ? ( - - ) : null} + )} {!post.notebook && (