Skip to content

Commit

Permalink
fix: make highlight card responsive (#2043)
Browse files Browse the repository at this point in the history 
Co-authored-by: Nick Taylor <[email protected]>
Co-authored-by: Brandon Roberts <[email protected]>
  • Loading branch information
@5hraddha @nickytonline @brandonroberts
3 people authored Nov 7, 2023
1 parent f2d118e commit 1a904f2
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 53 deletions.
10 changes: 4 additions & 6 deletions components/molecules/ContributorHighlight/contributor-highlight-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,17 +597,15 @@ const ContributorHighlightCard = ({
</div>

{/* Highlight body section */}
<div className="w-full ">
<p className="text-sm font-normal break-words text-light-slate-12 lg:text-base">{desc}</p>
</div>
{/* Highlight Link section */}
<p className="text-sm font-normal break-words text-light-slate-12 lg:text-base">{desc}</p>

<div>
{/* Highlight Link section */}
<div className="flex">
<a
href={highlightLink}
target="_blank"
rel="noreferrer"
className="underline break-words cursor-pointer text-sauced-orange"
className="inline-block flex-1 underline text-sauced-orange truncate cursor-pointer"
>
{highlightLink}
</a>
Expand Down
4 changes: 2 additions & 2 deletions components/molecules/Dialog/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={clsx(
className,
"fixed z-50 grid w-full pb-3 gap-4 bg-light-slate-2 lg:p-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 md:w-max rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0"
"fixed z-50 w-full pb-3 gap-4 bg-light-slate-2 lg:p-6 animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 md:w-max rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
className
)}
{...props}
>
Expand Down
74 changes: 32 additions & 42 deletions components/molecules/HighlightInput/highlight-input-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,7 +527,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
}}
open={isDivFocused}
>
<DialogContent className="p-4 w-[33vw]" style={{ maxHeight: "80vh", overflow: "auto" }}>
<DialogContent className="p-4 w-full md:w-[33rem] xs:w-[25rem] max-h-[80vh]">
<DialogHeader>
<DialogTitle>Post a highlight</DialogTitle>
</DialogHeader>
Expand All @@ -540,7 +540,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
</span>
)}
</p>
<div className="flex flex-col gap-2 p-2 overflow-hidden text-sm bg-white border rounded-lg">
<div className="flex flex-col gap-2 p-2 text-sm bg-white border rounded-lg">
<TypeWriterTextArea
className={`resize-y min-h-[80px] max-h-99 font-normal placeholder:text-slate-400 text-light-slate-12 placeholder:font-normal placeholder:text-sm transition focus:outline-none rounded-lg ${
!isDivFocused ? "hidden" : ""
Expand Down Expand Up @@ -643,27 +643,20 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
Post
</Button>

<h1 className="text-md font-semibold text-slate-900">
<h2 className="text-md font-semibold text-slate-900">
Highlight suggestions
<span className="text-sm font-semibold text-light-slate-9 ml-2">Based on your latest activity</span>
</h1>
</h2>

{loadingSuggestions ? (
<div className="lg:w-[33vw] md:w-[50vw]">
<Skeleton
count={3}
height={40}
style={{
margin: "0.5rem auto",
}}
className="w-full"
/>
<div className="w-full">
<Skeleton count={3} height={40} className="w-full my-[0.5rem] mx-auto" />
</div>
) : (
<Swiper
spaceBetween={8}
slidesPerView={1}
className="lg:w-[33vw] md:w-[50vw]"
className="w-full"
modules={[Pagination, A11y]}
pagination={{
clickable: true,
Expand All @@ -687,17 +680,17 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
key={suggestion.url}
className="flex items-center justify-between w-full gap-0.5 text-sm bg-white border rounded-lg p-2"
>
<div className="flex w-full gap-2">
<div className="flex w-full gap-2 items-center">
{suggestion.type === "pull_request" && (
<BiGitMerge
className={`text-xl${
className={`text-base xs:text-xl ${
suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"
}`}
/>
)}
{suggestion.type === "issue" && (
<VscIssues
className={`text-xl${
className={`text-base xs:text-xl ${
suggestion.status === "open"
? "text-green-600"
: suggestion.status_reason === "not_planned"
Expand All @@ -707,7 +700,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
/>
)}
<p
className="text-light-slate-11 truncate max-w-[16rem] cursor-pointer hover:text-orange-600 transition"
className="text-light-slate-11 truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm cursor-pointer hover:text-orange-600 transition"
onClick={() => {
window.open(suggestion.url, "_blank");
}}
Expand All @@ -725,7 +718,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
disabled={isSummaryButtonDisabled}
className="p-2 rounded-full hover:bg-light-slate-3 text-light-slate-11 transition"
>
<FiEdit2 className="text-xl" />
<FiEdit2 className="text-base xs:text-xl" />
</button>
</Tooltip>

Expand All @@ -741,7 +734,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
disabled={isSummaryButtonDisabled}
className="p-2 rounded-full hover:bg-light-slate-3 text-light-slate-11 transition disabled:cursor-not-allowed disabled:animate-pulse disabled:text-light-orange-9"
>
<HiOutlineSparkles className="text-xl" />
<HiOutlineSparkles className="text-base xs:text-xl" />
</button>
</Tooltip>
</div>
Expand All @@ -759,15 +752,10 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
{/* Add Repo Popup Form */}

<Dialog open={addTaggedRepoFormOpen} onOpenChange={setAddTaggedRepoFormOpen}>
<DialogContent
className="p-2"
style={{
width: "33vw",
}}
>
<DialogContent className="w-full md:w-[30rem] xs:w-[25rem] p-4 flex flex-col gap-4">
<DialogHeader>
<DialogTitle>Add a repo</DialogTitle>
<DialogDescription>Add a Repository to tag with this highlight.</DialogDescription>
<DialogDescription className="mt-2">Add a Repository to tag with this highlight.</DialogDescription>
</DialogHeader>
<Search
isLoading={tagRepoSearchLoading}
Expand Down Expand Up @@ -878,7 +866,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
/>
</div>
</div>
<h1 className="text-md font-semibold text-slate-900 my-2">Highlight suggestions</h1>
<h2 className="text-md font-semibold text-slate-900 my-2">Highlight suggestions</h2>
<Swiper
spaceBetween={8}
slidesPerView={1}
Expand Down Expand Up @@ -906,30 +894,32 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
key={suggestion.url}
className="flex items-center justify-between w-full text-sm bg-white border rounded-lg p-2"
>
<div className="flex w-full gap-2">
<div className="flex w-full gap-2 items-center">
{suggestion.type === "pull_request" && (
<BiGitMerge
className={`
text-xl
${suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"}
`}
text-base xs:text-xl
${suggestion.status_reason === "open" ? "text-green-600" : "text-purple-600"}
`}
/>
)}
{suggestion.type === "issue" && (
<VscIssues
className={`
text-xl
${
suggestion.status === "open"
? "text-green-600"
: suggestion.status_reason === "not_planned"
? "text-red-600"
: "text-purple-600"
}
text-base xs:text-xl
${
suggestion.status === "open"
? "text-green-600"
: suggestion.status_reason === "not_planned"
? "text-red-600"
: "text-purple-600"
}
`}
/>
)}
<p className="text-light-slate-11 truncate max-w-[16rem]">{suggestion.title}</p>
<p className="text-light-slate-11 truncate max-w-[14rem] xs:max-w-[16rem] text-xs xs:text-sm">
{suggestion.title}
</p>
</div>
<Tooltip className="text-xs modal-tooltip" direction="top" content="Fill content">
<button
Expand All @@ -941,7 +931,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
disabled={isSummaryButtonDisabled}
className="p-2 rounded-full hover:bg-light-slate-3 text-light-slate-11 transition"
>
<FiEdit2 className="text-xl" />
<FiEdit2 className="text-base xs:text-xl" />
</button>
</Tooltip>

Expand Down
6 changes: 3 additions & 3 deletions pages/feed/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,10 +248,10 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
}
}}
>
<DialogContent className="w-4/5 sm:max-h-screen">
<DialogContent className="sm:max-h-screen">
<div className="flex flex-col gap-8 mx-auto mt-10">
<div className="flex flex-col gap-6 px-3 ">
<div className="flex items-center gap-3 ">
<div className="flex flex-col gap-6 px-3">
<div className="flex items-center gap-3">
<Link href={`/user/${singleHighlight.login}`} className="flex items-center gap-3">
<Avatar
alt="user profile avatar"
Expand Down

0 comments on commit 1a904f2

Please sign in to comment.