#762 Allign rows in data and default view

Author: Polleps

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

@@ -2,6 +2,7 @@ import { Resource } from '@tomic/react';
 
 import { styled, css } from 'styled-components';
 import PropVal from './PropVal';
+import { ALL_PROPS_CONTAINER } from '../helpers/containers';
 
 type Props = {
   resource: Resource;
@@ -46,6 +47,8 @@ function AllProps({ resource, except = [], editable, columns, basic }: Props) {
 }
 
 const AllPropsWrapper = styled.div<{ basic: boolean | undefined }>`
+  container: ${ALL_PROPS_CONTAINER} / inline-size;
+
   display: flex;
   flex-direction: column;
   border-radius: ${p => p.theme.radius};

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

@@ -4,6 +4,7 @@ import { styled } from 'styled-components';
 import { transitionName } from '../helpers/transitionName';
 import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
 import { PARENT_PADDING_BLOCK } from './Parent';
+import { MAIN_CONTAINER } from '../helpers/containers';
 
 /** Main landmark. Every page should have one of these.
  * If the pages shows a resource a subject can be passed that enables view transitions to work. */
@@ -24,7 +25,7 @@ export function Main({
 }
 
 const StyledMain = memo(styled.main<ViewTransitionProps>`
-  container-type: inline-size;
+  container: ${MAIN_CONTAINER} / inline-size;
   /* Makes the contents fit the entire page */
   /* height: calc(
     100% - (${p => p.theme.heights.breadCrumbBar} + ${PARENT_PADDING_BLOCK} * 2)

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

@@ -5,6 +5,7 @@ import { AtomicLink } from './AtomicLink';
 import { ErrorLook } from './ErrorLook';
 import { ValueForm } from './forms/ValueForm';
 import ValueComp from './ValueComp';
+import { ALL_PROPS_CONTAINER } from '../helpers/containers';
 
 type Props = {
   propertyURL: string;
@@ -15,25 +16,6 @@ type Props = {
   className?: string;
 };
 
-interface PropValRowProps {
-  columns?: boolean;
-}
-
-export const PropValRow = styled.div<PropValRowProps>`
-  word-break: break-word;
-
-  @media screen and (min-width: 500px) {
-    flex-direction: ${p => (p.columns ? 'row' : 'column')};
-    display: ${p => (p.columns ? 'flex' : 'block')};
-  }
-`;
-
-export const PropertyLabel = styled.span`
-  font-weight: bold;
-  display: block;
-  min-width: 8rem;
-`;
-
 /**
  * A single Property / Value renderer that shows a label on the left, and the
  * value on the right. The value is editable.
@@ -75,12 +57,7 @@ function PropVal({
     <PropValRow columns={columns} className={className}>
       <AtomicLink subject={propertyURL}>
         <PropertyLabel title={property.description}>
-          {property.error ? (
-            <ErrorLook>{truncated}</ErrorLook>
-          ) : (
-            property.shortname || truncated
-          )}
-          :
+          {property.shortname || truncated}
         </PropertyLabel>
       </AtomicLink>
       {editable ? (
@@ -96,3 +73,23 @@ function PropVal({
 }
 
 export default PropVal;
+
+export const PropValRow = styled.div<PropValRowProps>`
+  word-break: break-word;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+
+  @container ${ALL_PROPS_CONTAINER} (min-width: 500px) {
+    grid-template-columns: 23ch auto;
+    grid-template-rows: 1fr;
+  }
+`;
+
+export const PropertyLabel = styled.span`
+  font-weight: bold;
+`;
+
+interface PropValRowProps {
+  columns?: boolean;
+}

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

@@ -15,6 +15,7 @@ import { ErrMessage } from './InputStyles';
 import InputSwitcher from './InputSwitcher';
 import { useSettings } from '../../helpers/AppSettings';
 import toast from 'react-hot-toast';
+import { Column, Row } from '../Row';
 
 interface ValueFormProps {
   // Maybe pass Value instead of Resource?
@@ -55,6 +56,25 @@ export function ValueForm({
   const [err, setErr] = useState<Error | undefined>(undefined);
   const haveAgent = agent !== undefined;
 
+  function handleCancel() {
+    setErr(undefined);
+    setEditMode(false);
+    // Should this maybe also remove the edits to the resource?
+    // https://github.com/atomicdata-dev/atomic-data-browser/issues/36
+  }
+
+  async function handleSave() {
+    try {
+      await resource.save(store);
+      setEditMode(false);
+      toast.success('Resource saved');
+    } catch (e) {
+      setErr(e);
+      setEditMode(true);
+      toast.error('Could not save resource...');
+    }
+  }
+
   if (value === undefined) {
     return null;
   }
@@ -78,48 +98,33 @@ export function ValueForm({
     );
   }
 
-  function handleCancel() {
-    setErr(undefined);
-    setEditMode(false);
-    // Should this maybe also remove the edits to the resource?
-    // https://github.com/atomicdata-dev/atomic-data-browser/issues/36
-  }
-
-  async function handleSave() {
-    try {
-      await resource.save(store);
-      setEditMode(false);
-      toast.success('Resource saved');
-    } catch (e) {
-      setErr(e);
-      setEditMode(true);
-      toast.error('Could not save resource...');
-    }
-  }
-
   return (
     <ValueFormWrapper>
-      <InputSwitcher
-        data-test={`input-${property.subject}`}
-        resource={resource}
-        property={property}
-        autoFocus
-      />
-      {err && <ErrMessage>{err.message}</ErrMessage>}
-      <Button
-        disabled={!haveAgent}
-        title={
-          haveAgent
-            ? 'Save the edits'
-            : 'You cannot save - there is no Agent set. Go to settings.'
-        }
-        onClick={handleSave}
-      >
-        save
-      </Button>
-      <Button subtle onClick={handleCancel}>
-        cancel
-      </Button>
+      <Column gap='0.5rem'>
+        <InputSwitcher
+          data-test={`input-${property.subject}`}
+          resource={resource}
+          property={property}
+          autoFocus
+        />
+        {err && <ErrMessage>{err.message}</ErrMessage>}
+        <Row gap='0.5rem'>
+          <Button subtle onClick={handleCancel}>
+            cancel
+          </Button>
+          <Button
+            disabled={!haveAgent}
+            title={
+              haveAgent
+                ? 'Save the edits'
+                : 'You cannot save - there is no Agent set. Go to settings.'
+            }
+            onClick={handleSave}
+          >
+            save
+          </Button>
+        </Row>
+      </Column>
     </ValueFormWrapper>
   );
 }

browser/data-browser/src/helpers/containers.ts

@@ -0,0 +1,2 @@
+export const MAIN_CONTAINER = 'main';
+export const ALL_PROPS_CONTAINER = 'all-props';