feat: column layout ui and responsiveness

Author: HiDeoo

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
+  "css.validate": false,
   "eslint.validate": ["typescript", "astro"]
 }

packages/astro-content-devtools/src/components/Devtools.tsx

@@ -12,7 +12,7 @@ import { Toggle } from './Toggle'
 
 export const Devtools: Component = () => {
   const { collections, isOverlayOpened } = useDevtools()
-  const { collectionName, entrySlug, previewType } = useSelection()
+  const { collectionName, previewType } = useSelection()
 
   const shouldShowPreviewTypesPanel = () => {
     const activeCollectionName = collectionName()
@@ -31,24 +31,10 @@ export const Devtools: Component = () => {
   }
   const shouldShowSchemaPanel = () => shouldShowPreviewTypesPanel() && previewType() === 'schema'
   const shouldShowEntriesPanel = () => shouldShowPreviewTypesPanel() && previewType() === 'data'
-  const shouldShowDataPanel = () =>
-    shouldShowPreviewTypesPanel() && previewType() === 'data' && entrySlug() !== undefined
-
-  const columnCount = () => {
-    if (!shouldShowPreviewTypesPanel()) {
-      return 1
-    }
-
-    if (!shouldShowSchemaPanel() && !shouldShowEntriesPanel()) {
-      return 2
-    }
-
-    return shouldShowDataPanel() ? 4 : 3
-  }
 
   return (
     <aside>
-      <Panels columns={columnCount()}>
+      <Panels>
         <CollectionsPanel />
         <Show when={shouldShowPreviewTypesPanel()}>
           <PreviewTypesPanel />

packages/astro-content-devtools/src/components/data/DataFrontmatter.tsx

@@ -5,11 +5,13 @@ import { type FrontmatterProperty, getFrontmatterProperties } from '../../libs/f
 import styles from './DataFrontmatter.module.css'
 
 export const DataFrontmatter: Component<DataFrontmatterProps> = (props) => {
-  const properties = getFrontmatterProperties(props.frontmatter)
+  const properties = () => getFrontmatterProperties(props.frontmatter)
 
   return (
     <ul class={styles.properties}>
-      <For each={properties}>{(property) => <DataFrontmatterProperty key={property.key} value={property.value} />}</For>
+      <For each={properties()}>
+        {(property) => <DataFrontmatterProperty key={property.key} value={property.value} />}
+      </For>
     </ul>
   )
 }

packages/astro-content-devtools/src/components/panels/CollectionsPanel.tsx

@@ -17,7 +17,7 @@ export const CollectionsPanel: Component = () => {
   const collectionNames = Object.keys(collections)
 
   return (
-    <Panel>
+    <Panel name="collections">
       <Toggle />
       <ul>
         <For each={collectionNames}>

packages/astro-content-devtools/src/components/panels/DataPanel.tsx

@@ -27,7 +27,7 @@ export const DataPanel: Component = () => {
   const [entry] = createResource(collectionNameAndEntrySlyg, fetchCollectionEntry)
 
   return (
-    <Panel style={{ 'background-color': 'var(--acd-color-gray-700)' }}>
+    <Panel name="data" style={{ 'background-color': 'var(--acd-color-gray-700)' }}>
       <Show when={entry() !== undefined} fallback="// TODO(HiDeoo) pelase select a valid entry">
         <DataSection title="Details">
           <DataVariable key="ID" value={entry()?.id} />

packages/astro-content-devtools/src/components/panels/EntriesPanel.tsx

@@ -15,7 +15,7 @@ export const EntriesPanel: Component = () => {
 
   return (
     <>
-      <Panel>
+      <Panel name="entries">
         <ul>
           <For each={entries()}>
             {(panelEntry: CollectionEntry) => {

packages/astro-content-devtools/src/components/panels/Panel.tsx

@@ -4,12 +4,13 @@ import styles from './Panel.module.css'
 
 export const Panel: ParentComponent<PanelProps> = (props) => {
   return (
-    <div class={styles.panel} style={props.style}>
+    <div class={styles.panel} classList={{ [`acd-panel-${props.name}`]: true }} style={props.style}>
       {props.children}
     </div>
   )
 }
 
 interface PanelProps {
+  name: string
   style?: JSX.CSSProperties | string
 }

packages/astro-content-devtools/src/components/panels/Panels.module.css

@@ -21,18 +21,52 @@
   pointer-events: all;
 }
 
-.column1 {
+.devtools:has(> :last-child:nth-child(1)) {
   grid-template-columns: 1fr;
 }
 
-.column2 {
-  grid-template-columns: 1fr 1fr;
+.devtools:has(> :last-child:nth-child(2)) {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 1fr;
 }
 
-.columns3 {
-  grid-template-columns: 20% 20% 1fr;
+.devtools:has(> :last-child:nth-child(3):not(:global(.acd-panel-entries))) {
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: auto 1fr;
+
+  & > div:nth-child(3) {
+    grid-column: 1 / span 2;
+  }
+
+  @media (min-width: 800px) {
+    grid-template-columns: var(--acd-panel-width) var(--acd-panel-width) 1fr;
+    grid-template-rows: 1fr;
+
+    & > div:nth-child(3) {
+      grid-column: 3;
+    }
+  }
+}
+
+.devtools:has(> :last-child:nth-child(3):global(.acd-panel-entries)) {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
 }
 
-.columns4 {
-  grid-template-columns: 20% 20% 20% 1fr;
+.devtools:has(> :last-child:nth-child(4)) {
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: auto 1fr;
+
+  & > div:nth-child(4) {
+    grid-column: 1 / span 3;
+  }
+
+  @media (min-width: 800px) {
+    grid-template-columns: var(--acd-panel-width) var(--acd-panel-width) var(--acd-panel-width) 1fr;
+    grid-template-rows: 1fr;
+
+    & > div:nth-child(4) {
+      grid-column: 4;
+    }
+  }
 }

packages/astro-content-devtools/src/components/panels/Panels.tsx

@@ -5,25 +5,12 @@ import { ErrorBoundary } from '../ErrorBoundary'
 
 import styles from './Panels.module.css'
 
-export const Panels: ParentComponent<PanelsProps> = (props) => {
+export const Panels: ParentComponent = (props) => {
   const { isOverlayOpened } = useDevtools()
 
   return (
-    <div
-      class={styles.devtools}
-      classList={{
-        [styles.opened!]: isOverlayOpened(),
-        [styles.column1!]: props.columns === 1,
-        [styles.column2!]: props.columns === 2,
-        [styles.columns3!]: props.columns === 3,
-        [styles.columns4!]: props.columns === 4,
-      }}
-    >
+    <div class={styles.devtools} classList={{ [styles.opened!]: isOverlayOpened() }}>
       <ErrorBoundary>{props.children}</ErrorBoundary>
     </div>
   )
 }
-
-interface PanelsProps {
-  columns: 1 | 2 | 3 | 4
-}

packages/astro-content-devtools/src/components/panels/PreviewTypesPanel.tsx

@@ -11,7 +11,7 @@ export const PreviewTypesPanel: Component = () => {
   const { previewType, setPreviewType } = useSelection()
 
   return (
-    <Panel>
+    <Panel name="previewType">
       <ul>
         <For each={PREVIEW_TYPES}>
           {(panelPreviewType: PreviewType) => {

packages/astro-content-devtools/src/components/panels/SchemaPanel.tsx

@@ -27,7 +27,7 @@ export const SchemaPanel: Component = () => {
   }
 
   return (
-    <Panel>
+    <Panel name="schema">
       <Schema root schema={schema()} />
     </Panel>
   )

packages/astro-content-devtools/src/components/schemas/SchemaType.module.css

@@ -1,14 +1,11 @@
 .type {
-  align-items: center;
+  align-items: flex-start;
   display: flex;
-  min-width: 0;
 }
 
 .details {
   display: block;
   font-size: var(--acd-text-sm);
+  margin-top: 1px;
   margin-left: var(--acd-size-1-5);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }

packages/astro-content-devtools/src/components/schemas/TabularSchema.module.css

@@ -58,7 +58,7 @@
 .propertyName {
   color: var(--acd-color-white);
   font-weight: var(--acd-font-medium);
-  white-space: pre;
+  white-space: nowrap;
 }
 
 .object > .propertyName:not(.required) {

packages/astro-content-devtools/src/styles/theme.css

@@ -32,4 +32,6 @@
   --acd-size-5: 1.25rem;
 
   --acd-duration-150: 150ms;
+
+  --acd-panel-width: min(17rem, 15%);
 }