style: improve spacing and result listing widget layout

acdh-oeaw · Dec 16, 2024 · 7fcc222 · 7fcc222
1 parent 54ebcc3
commit 7fcc222
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 23 deletions.
diff --git a/app/[locale]/translators/page.tsx b/app/[locale]/translators/page.tsx
@@ -57,7 +57,7 @@ export default function TranslatorsPage() {
 					<SingleRefinementDropdown
 						allLabel={t("all languages")}
 						attribute={"language"}
-						className="lowercase"
+						itemClassName="lowercase"
 						refinementArgs={{
 							transformItems: (items) => {
 								return items

diff --git a/app/[locale]/works/[id_or_category]/page.tsx b/app/[locale]/works/[id_or_category]/page.tsx
@@ -27,7 +27,7 @@ export default function WorksPage(props: WorksPageProps) {
 			queryArgsToMenuFields={{ language: "language", work: "contains.work.yeartitle" }}
 		>
 			<MainContent>
-				<div className="grid h-full grid-cols-[25%_75%] gap-6 p-2">
+				<div className="grid h-full grid-cols-[25%_75%] gap-6 px-2">
 					<div className="relative h-full">
 						<SingleRefinementList
 							allLabel={categoryLabel}
@@ -53,6 +53,7 @@ export default function WorksPage(props: WorksPageProps) {
 						<SingleRefinementDropdown
 							allLabel={`${t("all")} ${t("filter_by.language")}`}
 							attribute={"language"}
+							className="min-w-40"
 							refinementArgs={{
 								transformItems: (items: Array<RefinementListItem>) => {
 									return items

diff --git a/components/instantsearch-view.tsx b/components/instantsearch-view.tsx
@@ -31,12 +31,14 @@ export function InstantSearchView(props: InstantSearchProps): ReactNode {
 			filters={props.filters}
 			queryArgsToMenuFields={props.queryArgsToMenuFields}
 		>
-			<div className="grid h-full grid-cols-[12rem_1fr] gap-6 p-2">
+			<div className="grid h-full grid-cols-[12rem_1fr] gap-6 px-2">
 				<div className="relative h-full">{props.children}</div>
 				<div className="h-full">
-					<div className="flex place-content-between items-center">
-						<InstantSearchStats />
+					<div className="flex place-content-between items-center gap-6">
 						<SearchBox placeholder={t("query_placeholder")} />
+						<span className="grow">
+							<InstantSearchStats />
+						</span>
 						{props.refinementDropdowns
 							? Object.keys(props.refinementDropdowns).map((attribute) => {
 									return (

diff --git a/components/instantsearch/results.tsx b/components/instantsearch/results.tsx
@@ -24,12 +24,24 @@ export function Results(props: ResultsProps): ReactNode {
 
 	return (
 		<div className="grid h-full grid-rows-[auto_1fr] overflow-y-auto">
-			<div className="mt-1 flex place-content-between items-center">
-				<InstantSearchStats />
-				<SearchBox placeholder={t("query_placeholder")} />
+			<div className="flex place-content-between items-center gap-6 py-3 pl-1 pr-6">
+				<SearchBox
+					className="pr-4"
+					placeholder={t("query_placeholder")}
+					resetIconComponent={() => {
+						return null;
+					}}
+					submitIconComponent={() => {
+						return null;
+					}}
+				/>
+				<span className="grow">
+					<InstantSearchStats />
+				</span>
 				<InstantSearchSortBy sortOptions={["year:asc", "year:desc", "title:asc"]} />
 				{props.children}
 				<Switch
+					className="react-aria-Switch"
 					isSelected={view === "detail"}
 					onChange={(isSelected) => {
 						setView(isSelected ? "detail" : "covers");

diff --git a/components/instantsearch/single-refinement-dropdown.tsx b/components/instantsearch/single-refinement-dropdown.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { cn } from "@acdh-oeaw/style-variants";
 import type { RefinementListItem } from "instantsearch.js/es/connectors/refinement-list/connectRefinementList";
 import { Label } from "react-aria-components";
 import { useMenu, type UseMenuProps } from "react-instantsearch";
@@ -10,6 +11,7 @@ interface SingleRefinementDropdownProps {
 	allLabel: string;
 	refinementArgs?: Partial<UseMenuProps>;
 	className?: string;
+	itemClassName?: string;
 }
 
 const defaultTransformItems = (items: Array<RefinementListItem>) => {
@@ -38,21 +40,30 @@ export function SingleRefinementDropdown(props: SingleRefinementDropdownProps) {
 			}}
 		>
 			<Label className="sr-only">sort order</Label>
-			<SelectTrigger className={props.className}>
+			<SelectTrigger
+				className={(defaultClassName) => {
+					return cn(defaultClassName, props.className, props.itemClassName);
+				}}
+			>
 				{items.find((i) => {
 					return i.isRefined;
 				})?.label ?? props.allLabel}
 			</SelectTrigger>
 			<SelectPopover>
 				<SelectContent>
-					<SelectItem key={"all"} className="lowercase" id={"all"} textValue={props.allLabel}>
+					<SelectItem
+						key={"all"}
+						className={props.itemClassName}
+						id={"all"}
+						textValue={props.allLabel}
+					>
 						{props.allLabel}
 					</SelectItem>
 					{items.map((o) => {
 						return (
 							<SelectItem
 								key={o.value}
-								className={props.className}
+								className={props.itemClassName}
 								id={o.value}
 								textValue={o.label}
 							>

diff --git a/components/instantsearch/single-refinement-list.tsx b/components/instantsearch/single-refinement-list.tsx
@@ -28,7 +28,7 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 	});
 
 	return (
-		<div className="absolute grid h-full grid-rows-[auto_1fr] overflow-y-auto">
+		<div className="absolute grid size-full grid-rows-[auto_1fr] overflow-y-auto">
 			{props.allLabel ? (
 				<div className="mt-1 px-2">
 					<label
@@ -52,11 +52,11 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 						<span
 							className={cn(
 								"text-xl hover:cursor-pointer hover:text-[--color-link-hover]",
-								items.every((i) => {
-									return !i.isRefined;
+								items.some((i) => {
+									return i.isRefined;
 								})
-									? "font-medium text-[--color-link-active]"
-									: "text-[--color-link]",
+									? "text-[--color-link]"
+									: "text-[--color-link-active]",
 							)}
 						>
 							{props.allLabel}
@@ -70,7 +70,7 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 						<label
 							key={item.label}
 							className={cn(
-								"block py-1 text-right leading-tight focus-within:outline focus-within:outline-2",
+								"block p-1 text-right leading-tight focus-within:outline focus-within:outline-2",
 								props.className,
 							)}
 						>
@@ -86,7 +86,7 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 							<span
 								className={cn(
 									"hover:cursor-pointer hover:text-[--color-link-hover]",
-									item.isRefined ? "font-medium text-[--color-link-active]" : "text-[--color-link]",
+									item.isRefined ? "text-[--color-link-active]" : "text-[--color-link]",
 								)}
 							>
 								{item.label}

diff --git a/components/instantsearch/sortby.tsx b/components/instantsearch/sortby.tsx
@@ -64,13 +64,13 @@ export function InstantSearchSortBy(props: InstantSearchSortByProps): ReactNode
 					/>
 				}
 			</SelectTrigger>
-			<SelectPopover>
+			<SelectPopover className="w-fit">
 				<SelectContent>
 					{options.map((o) => {
 						return (
-							<SelectItem key={o.value} id={o.value} textValue={o.label}>
+							<SelectItem key={o.value} className="gap-2" id={o.value} textValue={o.label}>
 								<SortIcon field={o.value} size={20} />
-								<span className="sr-only">{o.label}</span>
+								<span>{o.label}</span>
 							</SelectItem>
 						);
 					})}

diff --git a/components/main-content.tsx b/components/main-content.tsx
@@ -11,7 +11,11 @@ export function MainContent(props: MainContentProps): ReactNode {
 	const { children, className } = props;
 
 	return (
-		<main className={className ?? "mx-auto w-screen max-w-screen-xl p-6"} id={id} tabIndex={-1}>
+		<main
+			className={className ?? "mx-auto w-screen max-w-screen-xl p-4 pb-0"}
+			id={id}
+			tabIndex={-1}
+		>
 			{children}
 		</main>
 	);

diff --git a/components/publication-grid.tsx b/components/publication-grid.tsx
@@ -10,7 +10,7 @@ interface PublicationGridProps {
 
 export function PublicationGrid(props: PublicationGridProps): ReactNode {
 	return (
-		<ol className="m-4 grid grid-cols-1 justify-items-center md:grid-cols-4">
+		<ol className="m-4 grid h-fit grid-cols-1 justify-items-center md:grid-cols-4">
 			{props.publications.map((pub) => {
 				return (
 					<li key={pub.id} className="m-4 block size-44">