Merge pull request #2035 from cardstack/CS-7789-deal-card-grid-item-v…

…iew-2 CS-7789 deal card grid item view
cardstack · Jan 13, 2025 · f37b1da · f37b1da
2 parents fa0e1e4 + 02c461d
commit f37b1da
Showing 1 changed file with 100 additions and 9 deletions.
diff --git a/packages/experiments-realm/crm/deal.gts b/packages/experiments-realm/crm/deal.gts
@@ -598,10 +598,23 @@ class FittedTemplate extends Component<typeof Deal> {
         </div>
       </header>
 
+      <div class='account-info account-info-grid-view'>
+        <@fields.company
+          @format='atom'
+          @displayContainer={{false}}
+          class='info-atom'
+        />
+        <@fields.primaryContact
+          @format='atom'
+          @displayContainer={{false}}
+          class='info-atom'
+        />
+      </div>
+
       <div class='deal-content'>
         <div class='deal-details'>
           <div class='deal-field'>
-            <label>Current Value:</label>
+            <label>Current Value</label>
             <@fields.computedValue class='highlight-value' @format='atom' />
           </div>
 
@@ -686,15 +699,18 @@ class FittedTemplate extends Component<typeof Deal> {
         margin-left: auto;
       }
       .account-name {
-        font-size: var(--boxel-font-size-med);
-        font-weight: 600;
+        grid-area: account-name;
+        font: 600 var(--boxel-font-sm);
       }
       .account-info {
         display: flex;
         align-items: start;
         gap: var(--boxel-sp-xs);
         overflow: hidden;
       }
+      .account-info-grid-view {
+        display: none;
+      }
       .account-name,
       .account-info:deep(.entity-name) {
         overflow: hidden;
@@ -732,35 +748,110 @@ class FittedTemplate extends Component<typeof Deal> {
         grid-area: event-details;
         background-color: var(--boxel-300);
       }
+      .deal-header:deep(.account-header-logo) {
+        grid-area: account-header-logo;
+      }
       /* Catch all because deal is too dense*/
       @container fitted-card (height < 180px) {
         .fitted-deal-card {
           grid-template-areas: 'deal-header';
           grid-template-rows: auto;
           padding: var(--boxel-sp-sm);
         }
+        .crm-account-header {
+          --account-header-logo-size: 40px;
+        }
         .deal-content {
           display: none;
         }
-
         .deal-header {
           grid-area: deal-header;
           display: grid;
           grid-template-areas: 'crm-account-header';
-          grid-template-columns: 1fr;
+          grid-template-columns: 100%;
           align-items: start;
           gap: var(--boxel-sp-lg);
         }
         .deal-status {
           display: none;
         }
+        .account-name {
+          font-size: var(--boxel-font-size-sm);
+        }
+      }
 
-        .deal-header:deep(.account-header-logo) {
-          width: 40px;
-          height: 40px;
+      @container fitted-card (aspect-ratio <= 2.0) {
+        .fitted-deal-card {
+          display: grid;
+          width: 100%;
+          height: 100%;
+          grid-template-areas:
+            'deal-header'
+            'grid-account-info'
+            'deal-content';
+          grid-template-rows: max-content max-content auto;
+          gap: var(--boxel-sp);
+          padding: var(--boxel-sp);
+        }
+        .crm-account-header {
+          --account-header-logo-size: 40px;
         }
         .account-name {
-          font-size: var(--boxel-font-size-sm);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .account-info {
+          display: none;
+        }
+        .info-atom {
+          --entity-display-icon-size: var(--boxel-icon-sm);
+          --entity-display-title-font-size: var(--boxel-font-size-xs);
+        }
+        .account-info-grid-view {
+          display: flex;
+          flex-direction: column;
+        }
+        .deal-header {
+          grid-template-columns: auto;
+          gap: 0;
+        }
+        .deal-status {
+          display: none;
+        }
+        .deal-content {
+          grid-template-columns: 1fr;
+          gap: 0;
+        }
+        .deal-details {
+          display: grid;
+          grid-template-rows: auto auto;
+          grid-template-columns: 1fr 1fr;
+          gap: var(--boxel-sp-xs);
+        }
+        .deal-field {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          gap: var(--boxel-sp-xxs);
+        }
+        /* Make the first two fields appear in row 1 */
+        .deal-field:nth-child(1),
+        .deal-field:nth-child(2) {
+          grid-row: 1;
+        }
+        /* Make the health score field take full width in row 2 */
+        .deal-field:nth-child(3) {
+          grid-row: 2;
+          grid-column: 1 / -1;
+        }
+        .highlight-value {
+          font: 600 var(--boxel-font-xs);
+        }
+        .progress-bar {
+          width: 100%;
         }
       }
     </style>