#770 Fix padding issue

Author: Polleps

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

@@ -8,13 +8,14 @@ import {
 } from '../../components/ExternalLink';
 import { CardViewProps } from './CardViewProps';
 import { ResourceCardTitle } from './ResourceCardTitle';
+import { Column } from '../../components/Row';
 
 export function BookmarkCard({ resource }: CardViewProps): JSX.Element {
   const [url] = useString(resource, urls.properties.bookmark.url);
   const [preview] = useString(resource, urls.properties.bookmark.preview);
 
   return (
-    <>
+    <Column gap='0.5rem'>
       <ResourceCardTitle resource={resource} />
       <ExternalLink to={url!} variant={ExternalLinkVariant.Button}>
         Open site
@@ -24,7 +25,7 @@ export function BookmarkCard({ resource }: CardViewProps): JSX.Element {
           <Markdown maxLength={1000} renderGFM text={preview} />
         </MarkdownWrapper>
       )}
-    </>
+    </Column>
   );
 }
 

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

@@ -1,12 +1,14 @@
 import { useArray, useString, core, collections } from '@tomic/react';
-import { useState } from 'react';
+import { FC, PropsWithChildren, useState } from 'react';
 
 import Markdown from '../../components/datatypes/Markdown';
 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;
 
@@ -27,31 +29,43 @@ function CollectionCard({ resource, small }: CardViewProps): JSX.Element {
   }
 
   return (
-    <>
+    <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;

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

@@ -3,6 +3,7 @@ import { urls, useResource, useString } from '@tomic/react';
 import Markdown from '../../components/datatypes/Markdown';
 import { CardViewProps } from './CardViewProps';
 import { ResourceCardTitle } from './ResourceCardTitle';
+import { Column } from '../../components/Row';
 
 export function ElementCard({ resource }: CardViewProps): JSX.Element {
   const [documentSubject] = useString(resource, urls.properties.parent);
@@ -11,9 +12,9 @@ export function ElementCard({ resource }: CardViewProps): JSX.Element {
   const [text] = useString(resource, urls.properties.description);
 
   return (
-    <>
+    <Column gap='0.5rem'>
       <ResourceCardTitle resource={document} />
       <Markdown text={text ?? ''} />
-    </>
+    </Column>
   );
 }

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

@@ -8,6 +8,7 @@ import {
   server,
   dataBrowser,
   collections,
+  useArray,
 } from '@tomic/react';
 import AllProps from '../../components/AllProps';
 import { AtomicLink } from '../../components/AtomicLink';
@@ -24,6 +25,7 @@ import { ElementCard } from './ElementCard';
 import { ArticleCard } from '../Article';
 import { styled } from 'styled-components';
 import { ResourceCardTitle } from './ResourceCardTitle';
+import { Column } from '../../components/Row';
 
 interface ResourceCardProps extends CardViewPropsBase {
   /** The subject URL - the identifier of the resource. */
@@ -117,9 +119,14 @@ export function ResourceCardDefault({
   resource,
   small,
 }: CardViewProps): JSX.Element {
+  const [isA] = useArray(resource, core.properties.isA);
+  const isAResource = useResource(isA[0]);
+
   return (
-    <>
-      <ResourceCardTitle resource={resource} />
+    <Column gap='0.5rem'>
+      <ResourceCardTitle resource={resource}>
+        <ClassName>{isAResource.title}</ClassName>
+      </ResourceCardTitle>
       <DescriptionWrapper>
         <ValueForm
           resource={resource}
@@ -134,7 +141,7 @@ export function ResourceCardDefault({
           editable
         />
       )}
-    </>
+    </Column>
   );
 }
 
@@ -144,3 +151,7 @@ const DescriptionWrapper = styled.div`
   max-height: 10rem;
   overflow: hidden;
 `;
+
+const ClassName = styled.span`
+  margin-left: auto;
+`;

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

@@ -39,7 +39,6 @@ const TitleRow = styled(Row)`
   max-width: 100%;
   height: 2rem;
   overflow: hidden;
-  margin-bottom: ${({ theme }) => theme.margin}rem;
   color: ${({ theme }) => theme.colors.textLight};
 
   svg {

browser/data-browser/src/views/File/FileCard.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+import { AtomicLink } from '../../components/AtomicLink';
 import { Row } from '../../components/Row';
 import { useFileInfo } from '../../hooks/useFile';
 import { CardViewProps } from '../Card/CardViewProps';
@@ -7,6 +9,23 @@ import { DownloadIconButton } from './DownloadButton';
 import { FilePreview } from './FilePreview';
 
 function FileCard(props: CardViewProps): JSX.Element {
+  const FileError = useMemo(() => {
+    const Temp = () => {
+      return (
+        <>
+          <AtomicLink subject={props.resource.getSubject()}>
+            {props.resource.title}
+          </AtomicLink>
+          <div>Can not show file due to invalid data.</div>
+        </>
+      );
+    };
+
+    Temp.displayName = 'FileError';
+
+    return Temp;
+  }, [props.resource.getSubject(), props.resource.title]);
+
   return (
     <ErrorBoundary FallBackComponent={FileError}>
       <FileCardInner {...props} />
@@ -16,10 +35,6 @@ function FileCard(props: CardViewProps): JSX.Element {
 
 export default FileCard;
 
-const FileError = () => {
-  return <div>Can not show file due to invalid data.</div>;
-};
-
 function FileCardInner({ resource }: CardViewProps): JSX.Element {
   const { downloadFile, bytes } = useFileInfo(resource);
 

browser/data-browser/src/views/File/isTextFile.ts

@@ -1,3 +1,12 @@
+const supportedApplicationFormats = new Set([
+  'application/json',
+  'application/ld+json',
+  'application/json-ad',
+  'application/x-httpd-php',
+  'application/xhtml+xml',
+  'application/xml',
+  'application/x-sh',
+]);
+
 export const isTextFile = (mimeType: string): boolean =>
-  mimeType !== 'application/pdf' &&
-  (mimeType?.startsWith('text/') || mimeType?.startsWith('application/'));
+  mimeType?.startsWith('text/') || supportedApplicationFormats.has(mimeType);