do not use CardsGrid component for embedded cards (#2053)

cardstack · Jan 17, 2025 · cc54e6e · cc54e6e
1 parent 5b3d1aa
commit cc54e6e
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 167 deletions.
diff --git a/packages/experiments-realm/blog-app.gts b/packages/experiments-realm/blog-app.gts
@@ -25,7 +25,8 @@ import {
   sortByCardTitleAsc,
   SortMenu,
 } from './components/sort';
-import { type ViewOption, CardsGrid } from './components/grid';
+import { CardList } from './components/card-list';
+import { CardsGrid } from './components/grid';
 import { TitleGroup, Layout, type LayoutFilter } from './components/layout';
 
 import {
@@ -45,6 +46,8 @@ import AuthorIcon from '@cardstack/boxel-icons/square-user';
 
 import type { BlogPost } from './blog-post';
 
+type ViewOption = 'card' | 'strip' | 'grid';
+
 export const toISOString = (datetime: Date) => datetime.toISOString();
 
 export const formatDatetime = (
@@ -215,27 +218,32 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
       </:contentHeader>
       <:grid>
         {{#if this.query}}
-          <CardsGrid
-            @selectedView={{this.selectedView}}
-            @context={{@context}}
-            @format={{if (eq this.selectedView 'card') 'embedded' 'fitted'}}
-            @query={{this.query}}
-            @realms={{this.realms}}
-            class={{this.gridClass}}
-          >
-            <:meta as |card|>
-              {{#if this.showAdminData}}
-                <BlogAdminData @cardId={{card.url}} />
-              {{/if}}
-            </:meta>
-          </CardsGrid>
+          {{#if (eq this.selectedView 'card')}}
+            <CardList
+              @context={{@context}}
+              @query={{this.query}}
+              @realms={{this.realms}}
+              class='blog-app-card-list {{this.gridClass}}'
+            >
+              <:meta as |card|>
+                {{#if this.showAdminData}}
+                  <BlogAdminData @cardId={{card.url}} />
+                {{/if}}
+              </:meta>
+            </CardList>
+          {{else}}
+            <CardsGrid
+              @selectedView={{this.selectedView}}
+              @context={{@context}}
+              @query={{this.query}}
+              @realms={{this.realms}}
+              class={{this.gridClass}}
+            />
+          {{/if}}
         {{/if}}
       </:grid>
     </Layout>
     <style scoped>
-      .blog-app {
-        --content-max-width: 1040px;
-      }
       .sidebar-create-button {
         --icon-color: currentColor;
         --boxel-loading-indicator-size: 15px;
@@ -255,8 +263,11 @@ class BlogAppTemplate extends Component<typeof BlogApp> {
         font: 600 var(--boxel-font-lg);
         letter-spacing: var(--boxel-lsp-xxs);
       }
-      :deep(.categories-grid) {
-        --card-view-height: 150px;
+      .blog-app-card-list {
+        --embedded-card-max-width: 715px;
+      }
+      .categories-grid {
+        --embedded-card-min-height: 150px;
       }
     </style>
   </template>

diff --git a/packages/experiments-realm/components/card-list.gts b/packages/experiments-realm/components/card-list.gts
@@ -0,0 +1,88 @@
+import GlimmerComponent from '@glimmer/component';
+
+import { type CardContext } from 'https://cardstack.com/base/card-api';
+
+import { type Query } from '@cardstack/runtime-common';
+
+import { CardContainer } from '@cardstack/boxel-ui/components';
+
+interface PrerenderedCard {
+  url: string;
+  component: any;
+}
+
+interface CardListSignature {
+  Args: {
+    query: Query;
+    realms: URL[];
+    context?: CardContext;
+  };
+  Blocks: {
+    meta: [card: PrerenderedCard];
+  };
+  Element: HTMLElement;
+}
+export class CardList extends GlimmerComponent<CardListSignature> {
+  <template>
+    <ul class='card-list' ...attributes>
+      {{#let
+        (component @context.prerenderedCardSearchComponent)
+        as |PrerenderedCardSearch|
+      }}
+        <PrerenderedCardSearch
+          @query={{@query}}
+          @format='embedded'
+          @realms={{@realms}}
+        >
+          <:loading>
+            Loading...
+          </:loading>
+          <:response as |cards|>
+            {{#each cards key='url' as |card|}}
+              <li class='card-list-item'>
+                <CardContainer
+                  {{@context.cardComponentModifier
+                    cardId=card.url
+                    format='data'
+                    fieldType=undefined
+                    fieldName=undefined
+                  }}
+                  class='card'
+                  @displayBoundaries={{true}}
+                >
+                  <card.component />
+                </CardContainer>
+                {{#if (has-block 'meta')}}
+                  {{yield card to='meta'}}
+                {{/if}}
+              </li>
+            {{/each}}
+          </:response>
+        </PrerenderedCardSearch>
+      {{/let}}
+    </ul>
+    <style scoped>
+      .card-list {
+        display: grid;
+        gap: var(--boxel-sp);
+        list-style-type: none;
+        margin: 0;
+        padding: var(--boxel-sp-6xs);
+      }
+      .card-list-item {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--boxel-sp) var(--boxel-sp-lg);
+      }
+      .card {
+        height: auto;
+        min-height: var(--embedded-card-min-height, 345px);
+        max-width: var(--embedded-card-max-width, 100%);
+      }
+      .bordered-items > .card-list-item > * {
+        border-radius: var(--boxel-border-radius);
+        box-shadow: inset 0 0 0 1px var(--boxel-light-500);
+      }
+    </style>
+  </template>
+}
diff --git a/packages/experiments-realm/components/grid.gts b/packages/experiments-realm/components/grid.gts
@@ -1,29 +1,17 @@
 import GlimmerComponent from '@glimmer/component';
 
-import { Format, type CardContext } from 'https://cardstack.com/base/card-api';
+import { type CardContext } from 'https://cardstack.com/base/card-api';
 
 import { type Query } from '@cardstack/runtime-common';
 
 import { CardContainer } from '@cardstack/boxel-ui/components';
-import { eq } from '@cardstack/boxel-ui/helpers';
-
-export type ViewOption = 'card' | 'strip' | 'grid';
-
-interface PrerenderedCard {
-  url: string;
-  component: any;
-}
 
 interface CardsGridSignature {
   Args: {
     query: Query;
     realms: URL[];
-    selectedView: ViewOption;
+    selectedView: string;
     context?: CardContext;
-    format: Format;
-  };
-  Blocks: {
-    meta: [card: PrerenderedCard];
   };
   Element: HTMLElement;
 }
@@ -40,7 +28,7 @@ export class CardsGrid extends GlimmerComponent<CardsGridSignature> {
       }}
         <PrerenderedCardSearch
           @query={{@query}}
-          @format={{@format}}
+          @format='fitted'
           @realms={{@realms}}
         >
           <:loading>
@@ -61,11 +49,6 @@ export class CardsGrid extends GlimmerComponent<CardsGridSignature> {
                 >
                   <card.component />
                 </CardContainer>
-                {{#if (eq @selectedView 'card')}}
-                  {{#if (has-block 'meta')}}
-                    {{yield card to='meta'}}
-                  {{/if}}
-                {{/if}}
               </li>
             {{/each}}
           </:response>
@@ -74,9 +57,6 @@ export class CardsGrid extends GlimmerComponent<CardsGridSignature> {
     </ul>
     <style scoped>
       .cards {
-        --default-card-view-min-width: 750px;
-        --default-card-view-max-width: 1fr;
-        --default-card-view-height: 347px;
         --default-grid-view-min-width: 224px;
         --default-grid-view-max-width: 1fr;
         --default-grid-view-height: max-content;
@@ -85,37 +65,12 @@ export class CardsGrid extends GlimmerComponent<CardsGridSignature> {
         --default-strip-view-height: 180px;
 
         display: grid;
-        grid-template-columns: repeat(
-          auto-fill,
-          minmax(
-            var(--card-view-min-width, var(--default-card-view-min-width)),
-            var(--card-view-max-width, var(--default-card-view-max-width))
-          )
-        );
-        grid-auto-rows: var(
-          --card-view-height,
-          var(--default-card-view-height)
-        );
         gap: var(--boxel-sp);
         list-style-type: none;
         margin: 0;
         padding: var(--boxel-sp-6xs);
       }
 
-      .cards.card-view {
-        grid-template-columns: repeat(
-          auto-fill,
-          minmax(
-            var(--card-view-min-width, var(--default-card-view-min-width)),
-            var(--card-view-max-width, var(--default-card-view-max-width))
-          )
-        );
-        grid-auto-rows: var(
-          --card-view-height,
-          var(--default-card-view-height)
-        );
-      }
-
       .cards.strip-view {
         grid-template-columns: repeat(
           auto-fill,
@@ -147,19 +102,10 @@ export class CardsGrid extends GlimmerComponent<CardsGridSignature> {
       .grid-view-container {
         aspect-ratio: 5/6;
       }
-      .card-view-container {
-        display: grid;
-        grid-template-columns: 1fr 247px;
-        gap: var(--boxel-sp-lg);
-      }
       .card {
         container-name: fitted-card;
         container-type: size;
       }
-      .bordered-items > .card-view-container > * {
-        border-radius: var(--boxel-border-radius);
-        box-shadow: inset 0 0 0 1px var(--boxel-light-500);
-      }
     </style>
   </template>
 }
diff --git a/packages/experiments-realm/components/layout.gts b/packages/experiments-realm/components/layout.gts
@@ -207,7 +207,7 @@ export class Layout extends GlimmerComponent<LayoutSignature> {
         gap: var(--boxel-sp-xs) var(--boxel-sp-lg);
       }
       .content-grid {
-        max-width: var(--content-max-width, 100%);
+        max-width: 100%;
         padding-left: var(--layout-padding);
         padding-bottom: var(--layout-padding);
       }

diff --git a/packages/experiments-realm/crm-app.gts b/packages/experiments-realm/crm-app.gts
@@ -1,4 +1,5 @@
 import { CardsGrid } from './components/grid';
+import { CardList } from './components/card-list';
 import { Layout, TitleGroup, type LayoutFilter } from './components/layout';
 import {
   SortMenu,
@@ -440,16 +441,23 @@ class CrmAppTemplate extends Component<typeof AppCard> {
             @fieldName={{@fieldName}}
           />
         {{else if this.query}}
-          <CardsGrid
-            @query={{this.query}}
-            @realms={{this.realms}}
-            @selectedView={{this.selectedView}}
-            @context={{@context}}
-            @format={{if (eq this.selectedView 'card') 'embedded' 'fitted'}}
-            class='crm-app-grid'
-          />
+          {{#if (eq this.selectedView 'card')}}
+            <CardList
+              @context={{@context}}
+              @query={{this.query}}
+              @realms={{this.realms}}
+              class='crm-app-grid'
+            />
+          {{else}}
+            <CardsGrid
+              @query={{this.query}}
+              @realms={{this.realms}}
+              @selectedView={{this.selectedView}}
+              @context={{@context}}
+              class='crm-app-grid'
+            />
+          {{/if}}
         {{/if}}
-
       </:grid>
     </Layout>
     <style scoped>
@@ -539,10 +547,6 @@ class CrmAppTemplate extends Component<typeof AppCard> {
         margin-left: auto;
       }
       /* Cards grid crm */
-      /* catch all tab */
-      .crm-app :where(.card-view-container) {
-        grid-template-columns: 1fr;
-      }
       /* contact tab */
       .crm-app.contact {
         --grid-view-min-width: 300px;