#704 responsive breadcrumbs

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

@@ -1,14 +1,7 @@
 import { styled, css } from 'styled-components';
-import {
-  useResource,
-  useString,
-  useTitle,
-  properties,
-  Resource,
-  useCanWrite,
-} from '@tomic/react';
+import { useResource, useString, useTitle, Resource, core } from '@tomic/react';
 import { constructOpenURL } from '../helpers/navigation';
-import { FaEdit, FaSearch } from 'react-icons/fa';
+import { FaSearch } from 'react-icons/fa';
 import { Row } from './Row';
 import { useQueryScopeHandler } from '../hooks/useQueryScope';
 import { IconButton } from './IconButton/IconButton';
@@ -24,9 +17,7 @@ export const PARENT_PADDING_BLOCK = '0.2rem';
 
 /** Breadcrumb list. Recursively renders parents. */
 function Parent({ resource }: ParentProps): JSX.Element {
-  const [parent] = useString(resource, properties.parent);
-  const [title, setTitle] = useTitle(resource);
-  const [canEdit] = useCanWrite(resource);
+  const [parent] = useString(resource, core.properties.parent);
   const { enableScope } = useQueryScopeHandler(resource.getSubject());
 
   return (
@@ -37,21 +28,11 @@ function Parent({ resource }: ParentProps): JSX.Element {
         ) : (
           <DriveMismatch subject={resource.getSubject()} />
         )}
-        {canEdit ? (
-          <BreadCrumbInputWrapper>
-            <BreadCrumbInput
-              value={title}
-              onChange={e => setTitle(e.target.value)}
-            />
-            <FaEdit />
-          </BreadCrumbInputWrapper>
-        ) : (
-          <BreadCrumbCurrent>{title}</BreadCrumbCurrent>
-        )}
+        <BreadCrumbCurrent>{resource.title}</BreadCrumbCurrent>
         <Spacer />
         <ScopedSearchButton
           onClick={enableScope}
-          title={`Search in ${title}`}
+          title={`Search in ${resource.title}`}
           color='textLight'
         >
           <FaSearch />
@@ -113,7 +94,7 @@ function DriveMismatch({ subject }: { subject: string }) {
 /** The actually recursive part */
 function NestedParent({ subject, depth }: NestedParentProps): JSX.Element {
   const resource = useResource(subject, { allowIncomplete: true });
-  const [parent] = useString(resource, properties.parent);
+  const [parent] = useString(resource, core.properties.parent);
   const navigate = useNavigateWithTransition();
   const [title] = useTitle(resource);
 
@@ -151,36 +132,17 @@ const BreadCrumbBase = css`
   font-family: ${props => props.theme.fontFamily};
   padding: 0.1rem 0.5rem;
   color: ${p => p.theme.colors.textLight};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
-const BreadCrumbCurrent = styled.div`
-  ${BreadCrumbBase}
-`;
-
-const BreadCrumbInput = styled.input`
+const BreadCrumbCurrent = styled.span`
   ${BreadCrumbBase}
-  background: none;
-  outline: none;
-  border: none;
-`;
-
-const BreadCrumbInputWrapper = styled.div`
-  display: flex;
-
-  &:hover svg {
-    display: flex;
-  }
-
-  svg {
-    display: none;
-  }
 `;
 
 const Breadcrumb = styled.a`
   ${BreadCrumbBase}
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   align-self: center;
   cursor: 'pointer';
   text-decoration: none;

browser/data-browser/src/views/FolderPage/ListView.tsx

@@ -28,7 +28,7 @@ export function ListView({
               <th>
                 <TitleHeaderWrapper>Title</TitleHeaderWrapper>
               </th>
-              <th>Class</th>
+              <ClassCell as='th'>Class</ClassCell>
               <AlignRight as='th'>Last Modified</AlignRight>
             </tr>
           </thead>
@@ -38,9 +38,9 @@ export function ListView({
                 <td>
                   <Title resource={resource} />
                 </td>
-                <td>
+                <ClassCell>
                   <ClassType resource={resource} />
-                </td>
+                </ClassCell>
                 <AlignRight>
                   <LastCommit resource={resource} />
                 </AlignRight>
@@ -176,6 +176,12 @@ const TableRow = styled.tr`
   }
 `;
 
+const ClassCell = styled.td`
+  @container (max-width: 500px) {
+    display: none;
+  }
+`;
+
 const NewButton = styled(Button)`
   margin-top: 1rem;
   margin-inline-start: calc(