Tweak pathfinder styles

DestinyItemManager · Jun 28, 2024 · 040140e · 040140e
1 parent c7d8780
commit 040140e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 63 deletions.
diff --git a/src/app/progress/Milestones.tsx b/src/app/progress/Milestones.tsx
@@ -120,9 +120,9 @@ function milestonesForProfile(
 
   const filteredMilestones = allMilestones.filter(
     (milestone) =>
-      !milestone.availableQuests &&
-      !milestone.activities &&
-      (!milestone.vendors || milestone.rewards) &&
+      !milestone.availableQuests?.length &&
+      !milestone.activities?.length &&
+      (!milestone.vendors?.length || Boolean(milestone.rewards?.length)) &&
       defs.Milestone.get(milestone.milestoneHash),
   );
 
@@ -147,8 +147,8 @@ function milestonesForCharacter(
     return (
       def &&
       (def.showInExplorer || def.showInMilestones) &&
-      (milestone.activities ||
-        !milestone.availableQuests ||
+      (Boolean(milestone.activities?.length) ||
+        !milestone.availableQuests?.length ||
         milestone.availableQuests.every(
           (q) =>
             q.status.stepObjectives.length > 0 &&

diff --git a/src/app/progress/Pathfinder.m.scss b/src/app/progress/Pathfinder.m.scss
@@ -1,44 +1,51 @@
 @use '../variables.scss' as *;
 
 .pathfinderTree {
-  & + div {
-    display: inline-grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-gap: 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  margin: 16px 0;
+
+  @include phone-portrait {
+    flex-direction: column;
+    margin: 16px 10px;
+    gap: 12px;
   }
 }
 
 .pathfinderRow {
-  composes: flexWrap from '../dim-ui/common.m.scss';
+  composes: flexColumn from '../dim-ui/common.m.scss';
   box-sizing: border-box;
-  margin: 16px 0;
-  align-content: center;
-  gap: 16px;
+  gap: 8px;
+  flex: 1;
+  justify-content: center;
+  max-width: 250px;
+  min-width: 120px;
+  --item-size: 35px;
 
   :global(.milestone-quest) {
     align-items: center;
     background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.1);
     padding: 8px;
+    width: 100%;
   }
 
-  &:not(:first-child) button::before {
-    position: absolute;
-    display: inline;
-    content: '⧽';
-    font-size: 28px;
-    // transform: translateY(10%);
-    margin-left: -23px;
+  @media (min-width: 541px) {
+    &:nth-child(n + 2) button::before {
+      position: absolute;
+      display: inline;
+      content: '⧽';
+      font-size: 28px;
+      margin-left: -23px;
+    }
   }
 
-  @media (max-width: 1500px) {
-    --item-size: 35px;
-  }
+  @media (max-width: 1270px) and (min-width: 541px) {
+    min-width: 60px;
 
-  @media (max-width: 1270px) {
     :global(.milestone-quest) {
       align-items: flex-start;
-      flex-direction: column-reverse;
+      flex-direction: column;
     }
     :global(.milestone-icon) {
       flex-direction: row !important;
@@ -65,30 +72,24 @@
     }
   }
 
-  > * {
-    flex: 1;
-    max-width: 250px;
-    min-width: 120px;
-  }
-
-  // @media (max-width: 1270px) {
-  //   margin: 8px 10px;
-  //   gap: 14px;
-  //   width: auto;
-
-  //   > * {
-  //     flex: 0;
-  //     width: var(--item-size);
-  //     min-width: var(--item-size);
-  //   }
+  @include phone-portrait {
+    flex-direction: row;
+    gap: 14px;
+    width: auto;
+    max-width: unset;
 
-  //   :global(.milestone-icon) {
-  //     margin: 0;
-  //   }
-  //   :global(.milestone-info) {
-  //     display: none !important;
-  //   }
-  // }
+    > * {
+      flex: 0;
+      width: calc(var(--item-size) + 16px) !important;
+      min-width: calc(var(--item-size) + 16px) !important;
+    }
+    :global(.milestone-icon) {
+      margin: 0;
+    }
+    :global(.milestone-info) {
+      display: none !important;
+    }
+  }
 }
 
 .completed {

diff --git a/src/app/progress/Pathfinder.tsx b/src/app/progress/Pathfinder.tsx
@@ -58,20 +58,24 @@ export default function Pathfinder({
 
   return (
     <section id={id} className="pathfinder">
-      <CollapsibleTitle title={name} sectionId={id} className={styles.pathfinderTree}>
-        {pursuitGroups.map((pursuits) => (
-          <div key={pursuits.length} className={styles.pathfinderRow}>
-            {pursuits.map((item) => (
-              <Pursuit
-                item={item}
-                key={item.index}
-                className={
-                  acquiredRecords.has(item.pursuit?.recordHash ?? 0) ? styles.completed : undefined
-                }
-              />
-            ))}
-          </div>
-        ))}
+      <CollapsibleTitle title={name} sectionId={id}>
+        <div className={styles.pathfinderTree}>
+          {pursuitGroups.map((pursuits) => (
+            <div key={pursuits.length} className={styles.pathfinderRow}>
+              {pursuits.map((item) => (
+                <Pursuit
+                  item={item}
+                  key={item.index}
+                  className={
+                    acquiredRecords.has(item.pursuit?.recordHash ?? 0)
+                      ? styles.completed
+                      : undefined
+                  }
+                />
+              ))}
+            </div>
+          ))}
+        </div>
       </CollapsibleTitle>
     </section>
   );