feat: Refine code and design (886f4e30) · Commits · Research Enablement / Sites / Research

src/components/Catalog.astro

+70 −71

Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ const { items } = Astro.props;
		<style is:inline>
		:root {
		--item-logo-size: 30px;
		--label-container-left-padding: 40px;
		}
		h3 {
		font-size: 1.7rem;
		@@ -33,6 +34,20 @@ const { items } = Astro.props;
		border-left: 6px solid var(--primary);
		}
		}
		.item-container>.label-container>.label {
		border: 1px solid #AAA;
		border-radius: 6px;
		color: #999;
		padding: 1px 10px 0px 10px;
		&:hover {
		background-color: var(--primary);
		border: 1px solid var(--primary);
		color: white;
		}
		}
		.item-container>.label-container>.label:first-of-type {
		margin-left: var(--label-container-left-padding);
		}
		.item-title-container>h4::before {
		content: url("/assets/logo_ornl_leaf.svg");
		width: var(--item-logo-size);
		@@ -42,6 +57,58 @@ const { items } = Astro.props;
		position: relative;
		top: 5px;
		}
		.label-container {
		display: flex;
		flex-direction: row;
		margin: 10px 10px 10px 20px;
		padding-left: 0;
		& + p {
		font-size: 1rem;
		padding: 0 var(--label-container-left-padding);
		}
		}
		.label-container>.label {
		border: none;
		color: #999;
		cursor: pointer;
		font-size: 0.9rem;
		margin: 0 2px;
		padding: 1px 5px 0px 5px;
		white-space: nowrap;
		&:hover {
		color: red;
		}
		}
		.search-score {
		color: #666;
		margin-left: 25px;
		}
		.selected-container {
		display: block;
		position: relative;
		margin-left: 4rem;
		top: 0px;
		& .selected-label {
		display: inline-block;
		padding: 10px;
		border: 1px solid #666;
		border-radius: 5px;
		color: #666;
		cursor: pointer;
		font-size: 1rem;
		margin: 0 4px;
		padding: 2px 10px 2px 10px;
		&::after {
		content: "✗";
		padding: 0 4px;
		}
		&:hover {
		background-color: red;
		border-color: red;
		color: white;
		}
		}
		}
		#catalog-title-container {
		display: flex;
		}
		@@ -69,17 +136,16 @@ const { items } = Astro.props;
		}
		}
		#catalog-search-input {
		width: 350px;
		display: inline;
		outline: none;
		position: relative;
		width: 350px;
		&:active, &:focus, &:focus-visible {
		border: 2px solid var(--primary);
		color: var(--primary);
		}
		}
		#catalog-search-button {
		width: 100px;
		background: none;
		border: 2px solid #CCC;
		border-radius: 5px;
		@@ -88,81 +154,14 @@ const { items } = Astro.props;
		cursor: pointer;
		display: inline;
		font-size: 1.2rem;
		margin: 0 5px;
		outline: none;
		padding: 9px 24px 10px 17px;
		margin: 0 5px;
		position: relative;
		width: 100px;
		&:hover {
		border: 2px solid var(--primary);
		color: var(--primary);
		}
		}
		.label-container {
		display: flex;
		flex-direction: row;
		margin: 10px 10px 10px 20px;
		& + p {
		padding: 0 40px;
		font-size: 1rem;
		}
		}
		.label-container>.label {
		border: none;
		color: #999;
		cursor: pointer;
		font-size: 0.9rem;
		margin: 0 2px;
		padding: 1px 5px 0px 5px;
		white-space: nowrap;
		&:hover {
		color: red;
		}
		}
		.item-container>.label-container>.label {
		border: 1px solid #AAA;
		border-radius: 5px;
		color: #999;
		cursor: pointer;
		font-size: 0.9rem;
		margin: 0 2px;
		padding: 1px 10px 0px 10px;
		&:hover {
		border: 1px solid green;
		background-color: green;
		color: white;
		}
		}
		.search-score {
		color: #666;
		margin-left: 25px;
		}
		.selected-container {
		display: block;
		position: relative;
		margin-left: 4rem;
		top: 0px;
		& .selected-label {
		display: inline-block;
		padding: 10px;
		border: 1px solid #666;
		border-radius: 5px;
		color: #666;
		cursor: pointer;
		font-size: 1rem;
		margin: 0 4px;
		padding: 2px 10px 2px 10px;
		&::after {
		content: "✗";
		padding: 0 4px;
		}
		&:hover {
		background-color: red;
		border-color: red;
		color: white;
		}
		}
		}
		.spacer {
		margin-top: 50px;
		}
		</style>

src/components/Controls.tsx

+14 −38

Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ import { BsQrCode } from 'react-icons/bs';
		import { Button } from '@/components/ui/button';
		import { Input } from '@/components/ui/input';
		import QrCode from './QrCode.jsx';
		import { updateLocation } from '@/lib/utils';

		interface MenuItem {
		/* eslint-disable-next-line */
		@@ -19,37 +20,12 @@ interface MenuItem {
		shortcut ?: string
		onSelect ?: (value : string) => void
		}
		const getParameters = key => {
		const search = window.location.search;
		const params = new URLSearchParams(search);
		return params?.getAll(key) \|\| [];
		};
		const removeItem = (arr, value) => {
		const index = arr.indexOf(value);
		if (index > -1) {
		arr.splice(index, 1);
		}
		return arr;
		};
		const updateLocation = key => {
		return value => {
		const queryParameters = getParameters(key);
		const values = !queryParameters.includes(value)
		? [...queryParameters, value]
		: removeItem(queryParameters, value);
		const location
		= values.length > 0
		? `${origin}?${key}=${values.sort((a, b) => a.localeCompare(b)).join(`&${key}=`)}`
		: origin;
		window.location.href = location;
		};
		};
		const ToggleButton = ({ onClick }) => {
		const Item = ({ children, shortcut, onSelect = () => undefined } : MenuItem) => {
		return (
		<Button id="catalog-toggle-palette" onClick={onClick}>
		Explore & Share
		<Command />
		</Button>
		<CommandItem onSelect={onSelect}>
		{children}
		{shortcut && <div cmdk-vercel-shortcuts="">{shortcut.split(' ').map(key => <kbd key={key}>{key}</kbd>)}</div>}
		</CommandItem>
		);
		};
		const SearchInput = () => {
		@@ -61,7 +37,7 @@ const SearchInput = () => {
		const onClick = e => {
		e.preventDefault();
		if (input.length > 0) {
		updateLocation('search')(input);
		updateLocation('search', input)();
		}
		};
		useEffect(() => {
		@@ -69,7 +45,7 @@ const SearchInput = () => {
		if (e.key === 'Enter') {
		e.preventDefault();
		if (input.length > 0) {
		updateLocation('search')(input);
		updateLocation('search', input)();
		}
		}
		};
		@@ -85,14 +61,14 @@ const SearchInput = () => {
		</div>
		);
		};
		function Item({ children, shortcut, onSelect = () => undefined } : MenuItem) {
		const ToggleButton = ({ onClick }) => {
		return (
		<CommandItem onSelect={onSelect}>
		{children}
		{shortcut && <div cmdk-vercel-shortcuts="">{shortcut.split(' ').map(key => <kbd key={key}>{key}</kbd>)}</div>}
		</CommandItem>
		<Button id="catalog-toggle-palette" onClick={onClick}>
		Explore & Share
		<Command />
		</Button>
		);
		}
		};
		const Projects = ({ items }) => {
		return (
		<CommandGroup heading="Research Activity Data">

src/components/Footer.astro

+3 −3

Original line number	Diff line number	Diff line
		@@ -61,17 +61,17 @@ const { contact } = Astro.props;
		}
		.email::before {
		margin: 0 5px;
		font-family: "FontAwesome";
		font-family: var(--icon-font-family);
		content: "\f0e0";
		}
		.phone::before {
		margin: 0 5px;
		font-family: "FontAwesome";
		font-family: var(--icon-font-family);
		content: "\f095";
		}
		.name::before {
		margin: 0 5px;
		font-family: "FontAwesome";
		font-family: var(--icon-font-family);
		content: "\f007";
		}
		}

src/components/Listing.tsx

+7 −25

Original line number	Diff line number	Diff line
		import { ChartNoAxesCombined, SquareX } from 'lucide-react';
		import { alphabetically, negate, removeItem } from '@/lib/utils';
		import { alphabetically, getParameters, negate, updateLocation } from '@/lib/utils';
		import { useEffect, useState } from 'react';
		import { type CSSProperties } from 'react';
		import Fuse from 'fuse.js';
		@@ -22,29 +22,6 @@ const SEARCH_KEYS = [
		'contact.organization',
		'contact.affiliation',
		];
		const getParameters = key => {
		const search = window.location.search;
		const params = new URLSearchParams(search);
		return params?.getAll(key) \|\| [];
		};
		const hasSelectedKeywords = item => {
		const keywords = item.meta?.keywords;
		const isSelectedKeyword = value => keywords.map(x => x.toLowerCase()).includes(value.toLowerCase());
		return getParameters('q').every(isSelectedKeyword);
		};
		const updateLocation = (value, key) => {
		return () => {
		const queryParameters = getParameters(key);
		const values = !queryParameters.includes(value)
		? [...queryParameters, value]
		: removeItem(queryParameters, value);
		const location
		= values.length > 0
		? `${origin}?${key}=${values.sort(alphabetically).join(`&${key}=`)}`
		: origin;
		window.location.href = location;
		};
		};
		const Details = ({ items = [] }) => {
		const count = items.length;
		const [visibleItems, setVisibleItems] = useState(count);
		@@ -64,7 +41,7 @@ const Labels = ({ item = { meta: { identifier: '', keywords: [] } } }) => {
		const searchParameters = getParameters('search');
		const margin = isItemLabel ? '20px 0px' : '10px 10px 10px 20px';
		const style : CSSProperties = { margin, display: 'flex', flexDirection: 'row' };
		const onClick = keyword => updateLocation(keyword, searchParameters.length > 0 ? 'search' : 'q');
		const onClick = keyword => updateLocation(searchParameters.length > 0 ? 'search' : 'q', keyword);
		const isSelectedKeyword = value => queryParameters.map(x => x.toLowerCase()).includes(value.toLowerCase());
		const labels = isItemLabel
		? item?.meta?.keywords.filter(negate(isSelectedKeyword)).sort(alphabetically)
		@@ -104,6 +81,11 @@ export default ({ items }) => {
		return results;
		};
		const formatScoreText = value => value ? `Relevancy = ${(1.0 - value).toFixed(4)}` : '';
		const hasSelectedKeywords = item => {
		const keywords = item.meta?.keywords;
		const isSelectedKeyword = value => keywords.map(x => x.toLowerCase()).includes(value.toLowerCase());
		return getParameters('q').every(isSelectedKeyword);
		};
		const html = item => {
		return (
		<div className="item-container">

src/components/Section.astro

+2 −2

Original line number	Diff line number	Diff line
		@@ -29,10 +29,10 @@ const isCallout = !Boolean(title);
		margin-left: 20px;
		}
		.section-callout {
		color: #333;
		background-color: var(--background-first-section);
		font-weight: 100;
		border-left: 5px solid var(--primary);
		color: #333;
		font-weight: 100;
		margin-bottom: 10px;
		padding: 20px;
		}