#770 better search result styling

browser/CHANGELOG.md

@@ -7,6 +7,7 @@ This changelog covers all three packages, as they are (for now) updated as a who
 ### Atomic Browser
 
 - [#747](https://github.com/atomicdata-dev/atomic-server/issues/747) Show ontology classes on new resource page.
+- [#770](https://github.com/atomicdata-dev/atomic-server/issues/770) Display more info on search result page.
 - Fix server not rebuilding client when files changed.
 
 ## v0.36.2

browser/data-browser/src/components/Card.tsx

@@ -11,17 +11,19 @@ type CardProps = {
 /** A Card with a border. */
 export const Card = styled.div<CardProps>`
   background-color: ${props => props.theme.colors.bg};
-  /** Don't put side margins in this component - use a wrapping component */
-  border: solid 1px ${props => props.theme.colors.bg2};
-  box-shadow: ${props => props.theme.boxShadow};
+
+  border: solid 1px
+    ${props =>
+      props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
+  box-shadow: ${props =>
+    props.highlight
+      ? `0 0 0 1px ${props.theme.colors.main}, ${props.theme.boxShadow}`
+      : props.theme.boxShadow};
+
   padding: ${props => props.theme.margin}rem;
-  /* margin-bottom: ${props => props.theme.margin}rem; */
-  padding-bottom: 0;
   border-radius: ${props => props.theme.radius};
   max-height: ${props => (props.small ? '10rem' : 'none')};
   overflow: ${props => (props.small ? 'hidden' : 'visible')};
-  border-color: ${props =>
-    props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
 
   ${p => transitionName('resource-page', p.about)};
 `;

browser/data-browser/src/components/Navigation.tsx

@@ -166,7 +166,6 @@ const NavBarBase = styled.div<NavBarStyledProps>`
 /** Width of the floating navbar in rem */
 const NavBarFloating = styled(NavBarBase)`
   box-shadow: ${props => props.theme.boxShadow};
-  box-sizing: border-box;
   border-radius: 999px;
   overflow: hidden;
   max-width: calc(100% - 2rem);
@@ -179,6 +178,11 @@ const NavBarFloating = styled(NavBarBase)`
   top: ${props => (props.top ? '2rem' : 'auto')};
   bottom: ${props => (props.top ? 'auto' : '1rem')};
 
+  &:has(input:focus) {
+    box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.main};
+    border-color: ${props => props.theme.colors.main};
+  }
+
   @media (max-width: ${props => props.theme.containerWidth}rem) {
     max-width: calc(100% - 1rem);
     left: auto;
@@ -198,6 +202,10 @@ const NavBarFixed = styled(NavBarBase)`
     props.top ? 'solid 1px ' + props.theme.colors.bg2 : 'none'};
   border-top: ${props =>
     !props.top ? 'solid 1px ' + props.theme.colors.bg2 : 'none'};
+
+  &:has(input:focus) {
+    box-shadow: 0px 0px 0px 2px ${props => props.theme.colors.main};
+  }
 `;
 
 const SideBarWrapper = styled('div')`

browser/data-browser/src/components/PropVal.tsx

@@ -61,7 +61,7 @@ function PropVal({
         </PropertyLabel>
       </AtomicLink>
       {editable ? (
-        <ValueForm resource={resource} propertyURL={propertyURL} noMargin />
+        <ValueForm resource={resource} propertyURL={propertyURL} />
       ) : (
         <ValueComp
           datatype={property.datatype}

browser/data-browser/src/components/Searchbar.tsx

@@ -159,7 +159,8 @@ const Input = styled.input`
   flex: 1;
   min-width: 1rem;
   background-color: ${props => props.theme.colors.bg};
-  outline: 0;
+  // Outline is handled by the Navbar.
+  outline: none;
   color: ${p => p.theme.colors.textLight};
 `;
 
@@ -172,9 +173,7 @@ const Form = styled.form`
   border-radius: 999px;
 
   :hover {
-    box-shadow: inset 0 0 0 2px
-      ${props => transparentize(0.6, props.theme.colors.main)};
-
+    ${props => transparentize(0.6, props.theme.colors.main)};
     ${Input} {
       color: ${p => p.theme.colors.text};
     }
@@ -183,8 +182,9 @@ const Form = styled.form`
     ${Input} {
       color: ${p => p.theme.colors.text};
     }
+
+    // Outline is handled by the Navbar.
     outline: none;
-    box-shadow: inset 0 0 0 2px ${props => props.theme.colors.main};
   }
 `;
 

browser/data-browser/src/components/ValueComp.tsx

@@ -16,11 +16,10 @@ import { ErrMessage } from './forms/InputStyles';
 type Props = {
   value: JSONValue;
   datatype: Datatype;
-  noMargin?: boolean;
 };
 
 /** Renders a value in a fitting way, depending on its DataType */
-function ValueComp({ value, datatype, noMargin }: Props): JSX.Element {
+function ValueComp({ value, datatype }: Props): JSX.Element {
   try {
     switch (datatype) {
       case Datatype.ATOMIC_URL: {
@@ -36,7 +35,7 @@ function ValueComp({ value, datatype, noMargin }: Props): JSX.Element {
       case (Datatype.DATE, Datatype.TIMESTAMP):
         return <DateTime date={valToDate(value)} />;
       case Datatype.MARKDOWN:
-        return <Markdown text={valToString(value)} noMargin={noMargin} />;
+        return <Markdown text={valToString(value)} />;
       case Datatype.RESOURCEARRAY:
         return <ResourceArray subjects={valToArray(value)} />;
       default:

browser/data-browser/src/components/datatypes/Markdown.tsx

@@ -3,30 +3,21 @@ import { styled } from 'styled-components';
 import remarkGFM from 'remark-gfm';
 import { Button } from '../Button';
 import { truncateMarkdown } from '../../helpers/markdown';
-import { useState } from 'react';
+import { FC, useState } from 'react';
 
 type Props = {
   text: string;
-  /**
-   * By default, all bottom Markdown elements have some margin (e.g. the last
-   * paragraph). If you set noMargin, this is corrected.
-   */
-  noMargin?: boolean;
   renderGFM?: boolean;
   /**
    * If this is set, and the markdown is more characters than this number, the
    * text will be truncated and a button will be shown
    */
   maxLength?: number;
+  className?: string;
 };
 
 /** Renders a markdown value */
-function Markdown({
-  text,
-  noMargin,
-  renderGFM,
-  maxLength,
-}: Props): JSX.Element | null {
+const Markdown: FC<Props> = ({ text, renderGFM, maxLength, className }) => {
   const [collapsed, setCollapsed] = useState(true);
 
   maxLength = maxLength || 5000;
@@ -36,7 +27,7 @@ function Markdown({
   }
 
   return (
-    <MarkdownWrapper noMargin={noMargin}>
+    <MarkdownWrapper className={className}>
       <ReactMarkdown remarkPlugins={renderGFM ? [remarkGFM] : []}>
         {collapsed ? truncateMarkdown(text, maxLength) : text}
       </ReactMarkdown>
@@ -47,19 +38,14 @@ function Markdown({
       )}
     </MarkdownWrapper>
   );
-}
+};
 
 Markdown.defaultProps = {
   renderGFM: true,
 };
 
-interface MarkdownWrapperProps {
-  noMargin?: boolean;
-}
-
-const MarkdownWrapper = styled.div<MarkdownWrapperProps>`
+const MarkdownWrapper = styled.div`
   /* Corrects the margin added by <p> and other HTML elements */
-  margin-bottom: -${p => (p.noMargin ? p.theme.margin : 0)}rem;
 
   width: 100%;
   overflow-x: hidden;

browser/data-browser/src/components/forms/ValueForm.tsx

@@ -26,19 +26,13 @@ interface ValueFormProps {
    * also override it manually
    */
   datatype?: Datatype;
-  noMargin?: boolean;
 }
 
 /**
  * A form for a single Value. Presents a normal value, but let's the user click
  * on a button to turn it into an input.
  */
-export function ValueForm({
-  resource,
-  noMargin,
-  propertyURL,
-  datatype,
-}: ValueFormProps) {
+export function ValueForm({ resource, propertyURL, datatype }: ValueFormProps) {
   const [editMode, setEditMode] = useState(false);
   const property = useProperty(propertyURL);
   const [value] = useValue(resource, propertyURL);
@@ -86,11 +80,7 @@ export function ValueForm({
   if (!editMode) {
     return (
       <ValueFormWrapper>
-        <ValueComp
-          value={value}
-          datatype={datatype || property.datatype}
-          noMargin={noMargin}
-        />
+        <ValueComp value={value} datatype={datatype || property.datatype} />
         <EditButton title='Edit value'>
           <FaEdit onClick={() => setEditMode(!editMode)} />
         </EditButton>

browser/data-browser/src/routes/SearchRoute.tsx

@@ -142,7 +142,6 @@ export function Search(): JSX.Element {
               {results.map((subject, index) => (
                 <ResourceCard
                   initialInView={index < 5}
-                  small
                   subject={subject}
                   key={subject}
                   highlight={index === selectedIndex}

browser/data-browser/src/views/Card/BookmarkCard.tsx

@@ -1,24 +1,22 @@
-import { urls, useString, useTitle } from '@tomic/react';
+import { urls, useString } from '@tomic/react';
 
 import { styled } from 'styled-components';
-import { AtomicLink } from '../../components/AtomicLink';
 import Markdown from '../../components/datatypes/Markdown';
 import {
   ExternalLink,
   ExternalLinkVariant,
 } from '../../components/ExternalLink';
 import { CardViewProps } from './CardViewProps';
+import { ResourceCardTitle } from './ResourceCardTitle';
+import { Column } from '../../components/Row';
 
 export function BookmarkCard({ resource }: CardViewProps): JSX.Element {
-  const [title] = useTitle(resource);
   const [url] = useString(resource, urls.properties.bookmark.url);
   const [preview] = useString(resource, urls.properties.bookmark.preview);
 
   return (
-    <>
-      <AtomicLink subject={resource.getSubject()}>
-        <Title>{title}</Title>
-      </AtomicLink>
+    <Column gap='0.5rem'>
+      <ResourceCardTitle resource={resource} />
       <ExternalLink to={url!} variant={ExternalLinkVariant.Button}>
         Open site
       </ExternalLink>
@@ -27,17 +25,10 @@ export function BookmarkCard({ resource }: CardViewProps): JSX.Element {
           <Markdown maxLength={1000} renderGFM text={preview} />
         </MarkdownWrapper>
       )}
-    </>
+    </Column>
   );
 }
 
-const Title = styled.h2`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.2;
-`;
-
 const MarkdownWrapper = styled.div`
   margin-top: ${p => p.theme.margin}rem;
   margin-inline: -${p => p.theme.margin}rem;

browser/data-browser/src/views/Card/CollectionCard.tsx

@@ -1,12 +1,14 @@
-import { useArray, useString, useTitle, properties } from '@tomic/react';
-import { useState } from 'react';
+import { useArray, useString, core, collections } from '@tomic/react';
+import { FC, PropsWithChildren, useState } from 'react';
 
 import Markdown from '../../components/datatypes/Markdown';
-import { AtomicLink } from '../../components/AtomicLink';
 import { CardInsideFull, CardRow } from '../../components/Card';
 import { ResourceInline } from '../ResourceInline';
 import { CardViewProps } from './CardViewProps';
 import { Button } from '../../components/Button';
+import { ResourceCardTitle } from './ResourceCardTitle';
+import { Column } from '../../components/Row';
+import { styled } from 'styled-components';
 
 const MAX_COUNT = 5;
 
@@ -15,9 +17,8 @@ const MAX_COUNT = 5;
  * (shortname) is rendered prominently at the top.
  */
 function CollectionCard({ resource, small }: CardViewProps): JSX.Element {
-  const [title] = useTitle(resource);
-  const [description] = useString(resource, properties.description);
-  const [members] = useArray(resource, properties.collection.members);
+  const [description] = useString(resource, core.properties.description);
+  const [members] = useArray(resource, collections.properties.members);
   const [showAll, setShowMore] = useState(false);
 
   const tooMany = members.length > MAX_COUNT;
@@ -28,33 +29,43 @@ function CollectionCard({ resource, small }: CardViewProps): JSX.Element {
   }
 
   return (
-    <>
-      <AtomicLink subject={resource.getSubject()}>
-        <h2>{title}</h2>
-      </AtomicLink>
+    <Column gap='0.5rem'>
+      <ResourceCardTitle resource={resource} />
       {description && <Markdown text={description} />}
-      {!small && (
-        <CardInsideFull>
-          {subjects.map(member => {
-            return (
-              <CardRow key={member}>
-                <ResourceInline subject={member} />
+      <Show show={!small}>
+        {subjects.length === 0 ? (
+          <Empty>No resources</Empty>
+        ) : (
+          <CardInsideFull>
+            {subjects.map(member => {
+              return (
+                <CardRow key={member}>
+                  <ResourceInline subject={member} />
+                </CardRow>
+              );
+            })}
+            {tooMany && (
+              <CardRow>
+                <Button clean onClick={() => setShowMore(!showAll)}>
+                  {showAll
+                    ? 'show less'
+                    : `show ${members.length - MAX_COUNT} more`}
+                </Button>
               </CardRow>
-            );
-          })}
-          {tooMany && (
-            <CardRow>
-              <Button clean onClick={() => setShowMore(!showAll)}>
-                {showAll
-                  ? 'show less'
-                  : `show ${members.length - MAX_COUNT} more`}
-              </Button>
-            </CardRow>
-          )}
-        </CardInsideFull>
-      )}
-    </>
+            )}
+          </CardInsideFull>
+        )}
+      </Show>
+    </Column>
   );
 }
 
+const Show: FC<PropsWithChildren<{ show: boolean }>> = ({ show, children }) => {
+  return show ? children : null;
+};
+
+const Empty = styled.span`
+  color: ${({ theme }) => theme.colors.textLight};
+`;
+
 export default CollectionCard;