CS_learn/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2026-04-02 10:31:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

[questions][ui] improve browse mobile ui

Browse Source
This commit is contained in:
Jeff Sieu
2022-11-07 23:08:49 +08:00
parent 4a1e95a777
commit 7b044e11c3
3 changed files with 91 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/portal/src/components/questions/QuestionSearchBar.tsx
View File

@@ -20,32 +20,44 @@ export default function QuestionSearchBar({
...sortOptionsSelectProps
}: QuestionSearchBarProps) {
return (
<div className="flex flex-col items-stretch gap-x-4 gap-y-2 lg:flex-row lg:items-end">
<div className="flex-1 ">
<TextInput
isLabelHidden={true}
label="Search by content"
placeholder="Search by content"
startAddOn={MagnifyingGlassIcon}
startAddOnType="icon"
value={query}
onChange={(value) => {
onQueryChange(value);
}}
/>
</div>
<div className="flex items-end justify-end gap-4">
<SortOptionsSelect {...sortOptionsSelectProps} />
<div className="lg:hidden">
<div className="flex flex-col items-stretch gap-x-4 gap-y-4 lg:flex-row lg:items-end">
<div className="flex flex-1 gap-2">
<div className="flex-1">
<TextInput
isLabelHidden={true}
label="Search by content"
placeholder="Search by content"
startAddOn={MagnifyingGlassIcon}
startAddOnType="icon"
value={query}
onChange={(value) => {
onQueryChange(value);
}}
/>
</div>
<div className="sm:hidden">
<Button
addonPosition="start"
icon={AdjustmentsHorizontalIcon}
label="Filter options"
isLabelHidden={true}
label="Filters"
variant="tertiary"
onClick={onFilterOptionsToggle}
/>
</div>
<div className="hidden sm:block lg:hidden">
<Button
addonPosition="start"
icon={AdjustmentsHorizontalIcon}
label="Filters"
variant="tertiary"
onClick={onFilterOptionsToggle}
/>
</div>
</div>
<div className="flex items-end justify-end gap-4">
<SortOptionsSelect {...sortOptionsSelectProps} />
</div>
</div>
);
}

80
apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
View File

@@ -177,12 +177,26 @@ export default function BaseQuestionCard({
const cardContent = (
<>
{showVoteButtons && (
<VotingButtons
upvoteCount={upvoteCount}
vote={vote}
onDownvote={handleDownvote}
onUpvote={handleUpvote}
/>
<>
<div className="md:hidden">
<VotingButtons
size="sm"
upvoteCount={upvoteCount}
vote={vote}
onDownvote={handleDownvote}
onUpvote={handleUpvote}
/>
</div>
<div className="hidden md:block">
<VotingButtons
size="md"
upvoteCount={upvoteCount}
vote={vote}
onDownvote={handleDownvote}
onUpvote={handleUpvote}
/>
</div>
</>
)}
<div className="flex flex-1 flex-col items-start gap-2">
<div className="flex items-baseline justify-between self-stretch">
@@ -230,22 +244,48 @@ export default function BaseQuestionCard({
showCreateEncounterButton) && (
<div className="flex gap-2">
{showAnswerStatistics && (
<Button
addonPosition="start"
icon={ChatBubbleBottomCenterTextIcon}
label={`${answerCount} answers`}
size="sm"
variant="tertiary"
/>
<>
<div className="sm:hidden">
<Button
addonPosition="start"
icon={ChatBubbleBottomCenterTextIcon}
label={`${answerCount}`}
size="sm"
variant="tertiary"
/>
</div>
<div className="hidden sm:block">
<Button
addonPosition="start"
icon={ChatBubbleBottomCenterTextIcon}
label={`${answerCount} answers`}
size="sm"
variant="tertiary"
/>
</div>
</>
)}
{showReceivedStatistics && (
<Button
addonPosition="start"
icon={EyeIcon}
label={`${receivedCount} received this`}
size="sm"
variant="tertiary"
/>
<>
<div className="sm:hidden">
<Button
addonPosition="start"
icon={EyeIcon}
label={`${receivedCount}`}
size="sm"
variant="tertiary"
/>
</div>
<div className="hidden sm:block">
<Button
addonPosition="start"
icon={EyeIcon}
label={`${receivedCount} received this`}
size="sm"
variant="tertiary"
/>
</div>
</>
)}
{showCreateEncounterButton && (
<Button

2
apps/portal/src/pages/questions/browse.tsx
View File

@@ -503,7 +503,7 @@ export default function QuestionsBrowsePage() {
<main className="flex h-[calc(100vh_-_64px)] flex-1 flex-col items-stretch">
<div className="flex h-full flex-1">
<section className="min-h-0 flex-1 overflow-auto">
<div className="my-4 mx-auto flex max-w-3xl flex-col items-stretch justify-start gap-6">
<div className="my-4 mx-auto flex max-w-3xl flex-col items-stretch justify-start gap-6 p-4">
<ContributeQuestionCard
onSubmit={(data) => {
const { cityId, countryId, stateId } = data.location;