Merge pull request #10205 from DestinyItemManager/tile-grid

Tile grid tweaks
DestinyItemManager · Jan 5, 2024 · d02e9a5 · d02e9a5
2 parents 0b5f64f + be514ad
commit d02e9a5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/src/app/dim-ui/TileGrid.m.scss b/src/app/dim-ui/TileGrid.m.scss
@@ -2,7 +2,7 @@
 
 .header {
   font-weight: 600;
-  font-size: 14px;
+  font-size: 16px;
   text-transform: uppercase;
   padding-top: 8px;
   padding-bottom: 8px;
@@ -39,17 +39,27 @@
     outline: none;
   }
 
-  // On mobile, don't scale up items
-  @include phone-portrait {
-    --item-size: 50px;
+  // Don't scale up items even if users have item tiles set to large
+  --item-size: 50px;
+
+  &.compact {
+    grid-template-areas:
+      'icon title'
+      'icon details';
+    row-gap: 4px;
+  }
+
+  > :global(.item) {
+    grid-area: icon;
   }
 }
 
 .details {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  grid-column-end: span 3;
+  grid-area: details;
+  text-wrap: pretty;
 }
 
 .selected {
@@ -66,8 +76,6 @@
   color: var(--theme-text);
   font-weight: bold;
   font-size: 16px;
-  grid-column-end: span 2;
-  &.withCorner {
-    grid-column-end: span 1;
-  }
+  grid-area: title;
+  text-wrap: balance;
 }
diff --git a/src/app/dim-ui/TileGrid.m.scss.d.ts b/src/app/dim-ui/TileGrid.m.scss.d.ts
diff --git a/src/app/dim-ui/TileGrid.tsx b/src/app/dim-ui/TileGrid.tsx
@@ -36,6 +36,7 @@ export function TileGridTile({
   selected,
   disabled,
   onClick,
+  compact,
 }: {
   className?: string;
   children: React.ReactNode;
@@ -45,12 +46,14 @@ export function TileGridTile({
   selected?: boolean;
   disabled?: boolean;
   onClick: React.MouseEventHandler<HTMLElement>;
+  compact?: boolean;
 }) {
   return (
     <div
       className={clsx(className, styles.tile, {
         [styles.selected]: selected,
         [styles.disabled]: disabled,
+        [styles.compact]: compact,
       })}
       onClick={disabled ? undefined : onClick}
       role="button"
@@ -60,7 +63,7 @@ export function TileGridTile({
     >
       <>
         {icon}
-        <div className={clsx(styles.title, { [styles.withCorner]: corner })}>{title}</div>
+        <div className={styles.title}>{title}</div>
         {corner}
         <div className={styles.details}>{children}</div>
       </>

diff --git a/src/app/loadout-builder/filter/ExoticTile.tsx b/src/app/loadout-builder/filter/ExoticTile.tsx
@@ -42,6 +42,7 @@ export default function ExoticTile({
       disabled={exotic.isArmor1}
       title={title}
       icon={icon}
+      compact
     >
       {description}
     </TileGridTile>