msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[questions][ui] reduce gap

Browse Source
pull/470/head
wlren 3 years ago
parent b7a2efb8c1
commit 65c2eef3fc
1 changed files with 58 additions and 56 deletions
Show Stats Download Patch File Download Diff File

114
apps/portal/src/pages/questions/browse.tsx
Unescape View File

@ -486,7 +486,7 @@ export default function QuestionsBrowsePage() {
<main className="flex flex-1 flex-col items-stretch"> <main className="flex flex-1 flex-col items-stretch">
<div className="flex h-full flex-1"> <div className="flex h-full flex-1">
<section className="flex min-h-0 flex-1 flex-col items-center overflow-auto"> <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
<div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-8"> <div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-6">
<ContributeQuestionCard <ContributeQuestionCard
onSubmit={(data) => { onSubmit={(data) => {
const { cityId, countryId, stateId } = data.location; const { cityId, countryId, stateId } = data.location;
@ -502,62 +502,64 @@ export default function QuestionsBrowsePage() {
}); });
}} }}
/> />
<div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4"> <div className="flex flex-col items-stretch gap-4">
<QuestionSearchBar <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
sortOrderValue={sortOrder} <QuestionSearchBar
sortTypeValue={sortType} sortOrderValue={sortOrder}
onFilterOptionsToggle={() => { sortTypeValue={sortType}
setFilterDrawerOpen(!filterDrawerOpen); onFilterOptionsToggle={() => {
}} setFilterDrawerOpen(!filterDrawerOpen);
onSortOrderChange={setSortOrder} }}
onSortTypeChange={setSortType} onSortOrderChange={setSortOrder}
/> onSortTypeChange={setSortType}
</div> />
<div className="flex flex-col gap-2 pb-4"> </div>
{(questionsQueryData?.pages ?? []).flatMap( <div className="flex flex-col gap-2 pb-4">
({ data: questions }) => {(questionsQueryData?.pages ?? []).flatMap(
questions.map((question) => { ({ data: questions }) =>
const { companyCounts, countryCounts, roleCounts } = questions.map((question) => {
relabelQuestionAggregates( const { companyCounts, countryCounts, roleCounts } =
question.aggregatedQuestionEncounters, relabelQuestionAggregates(
); question.aggregatedQuestionEncounters,
);
return ( return (
<QuestionOverviewCard <QuestionOverviewCard
key={question.id} key={question.id}
answerCount={question.numAnswers} answerCount={question.numAnswers}
companies={companyCounts} companies={companyCounts}
content={question.content} content={question.content}
countries={countryCounts} countries={countryCounts}
href={`/questions/${question.id}/${createSlug( href={`/questions/${question.id}/${createSlug(
question.content, question.content,
)}`} )}`}
questionId={question.id} questionId={question.id}
receivedCount={question.receivedCount} receivedCount={question.receivedCount}
roles={roleCounts} roles={roleCounts}
timestamp={question.seenAt.toLocaleDateString( timestamp={question.seenAt.toLocaleDateString(
undefined, undefined,
{ {
month: 'short', month: 'short',
year: 'numeric', year: 'numeric',
}, },
)} )}
type={question.type} type={question.type}
upvoteCount={question.numVotes} upvoteCount={question.numVotes}
/> />
); );
}), }),
)} )}
{questionCount !== 0 && ( {questionCount !== 0 && (
<PaginationLoadMoreButton query={questionsInfiniteQuery} /> <PaginationLoadMoreButton query={questionsInfiniteQuery} />
)} )}
{questionCount === 0 && ( {questionCount === 0 && (
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600"> <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
<NoSymbolIcon className="h-6 w-6" /> <NoSymbolIcon className="h-6 w-6" />
<p>Nothing found.</p> <p>Nothing found.</p>
{hasFilters && <p>Try changing your search criteria.</p>} {hasFilters && <p>Try changing your search criteria.</p>}
</div> </div>
)} )}
</div>
</div> </div>
</div> </div>
</section> </section>

Write Preview
Loading…
Cancel
Save