Merge pull request #10209 from DestinyItemManager/mobile-tweaks

Mobile tweaks
DestinyItemManager · Jan 8, 2024 · bc32337 · bc32337
2 parents a74a890 + a2bfbb2
commit bc32337
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 12 deletions.
diff --git a/config/i18n.json b/config/i18n.json
@@ -595,7 +595,7 @@
  "Exotic": "Exotic Armor",
  "ExistingLoadout": "Existing Loadout",
  "ExoticSpecialCategory": "Special",
- "Filter": "Filters",
+ "Filter": "Settings",
  "Legendary": "Legendary",
  "LockItem": "Pin item",
  "PinnedItems": "Pinned Items",
@@ -798,7 +798,7 @@
  "LoadoutOptimizer": "Loadout Optimizer settings",
  "Notes": "Notes"
  },
- "ShareLoadout": "Share Loadout",
+ "ShareLoadout": "Share",
  "ShowModPlacement": "Show Mod Placement",
  "SubclassOptions": "{{subclass}} options",
  "SubclassOptionsSearch": "Search {{subclass}} options",

diff --git a/src/app/item-picker/ItemPicker.scss b/src/app/item-picker/ItemPicker.scss
@@ -9,7 +9,7 @@
 }
 
 .item-picker-grid {
- padding: 8px;
+ margin: 10px;
 }
 
 .item-picker-item {

diff --git a/src/app/loadout-builder/LoadoutBuilder.m.scss b/src/app/loadout-builder/LoadoutBuilder.m.scss
@@ -22,7 +22,6 @@
  display: flex;
  flex-direction: column;
  gap: 8px;
- padding: 0 10px;
  }
  }
 }

diff --git a/src/app/loadout-builder/LoadoutBuilder.tsx b/src/app/loadout-builder/LoadoutBuilder.tsx
@@ -303,14 +303,14 @@ export default memo(function LoadoutBuilder({
 
  const menuContent = (
  <>
+ <UndoRedoControls canRedo={canRedo} canUndo={canUndo} lbDispatch={lbDispatch} />
  {isPhonePortrait && (
  <div className={styles.guide}>
  <ol>
  <li>{t('LoadoutBuilder.OptimizerExplanationStats')}</li>
  </ol>
  </div>
  )}
- <UndoRedoControls canRedo={canRedo} canUndo={canUndo} lbDispatch={lbDispatch} />
  <StatConstraintEditor
  resolvedStatConstraints={resolvedStatConstraints}
  statRangesFiltered={result?.statRangesFiltered}

diff --git a/src/app/loadout/LoadoutView.m.scss b/src/app/loadout/LoadoutView.m.scss
@@ -4,6 +4,10 @@
  composes: flexColumn from '../dim-ui/common.m.scss';
  padding: 15px;
  background: rgba(0, 0, 0, 0.25);
+
+ @include phone-portrait {
+ padding: 10px;
+ }
 }
 
 .title {
@@ -21,6 +25,7 @@
  @include phone-portrait {
  flex-direction: column;
  align-items: flex-start;
+ gap: 8px;
  }
 }
 
@@ -31,8 +36,9 @@
  margin-left: auto;
 
  @include phone-portrait {
- margin-top: 16px;
- margin-bottom: 16px;
+ margin: 8px 0;
+ width: 100%;
+ justify-content: space-between;
  }
 }
 

diff --git a/src/app/loadout/ingame/InGameLoadoutStrip.m.scss b/src/app/loadout/ingame/InGameLoadoutStrip.m.scss
@@ -4,6 +4,10 @@
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
+
+ @include phone-portrait {
+ margin: 0 10px;
+ }
 }
 .inGameTile {
  padding: 4px;

diff --git a/src/app/loadout/loadout-ui/LoadoutMods.m.scss b/src/app/loadout/loadout-ui/LoadoutMods.m.scss
@@ -2,7 +2,8 @@
 
 .modsGrid {
  --item-icon-size: calc(0.8 * var(--item-size));
- min-width: calc(5 * var(--item-icon-size) + 4 * var(--item-margin));
+ min-width: min(calc(5 * var(--item-icon-size) + 4 * var(--item-margin)), calc(100vw - 20px));
+ max-width: calc(100vw - 20px);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--item-icon-size));
  gap: 4px;

diff --git a/src/app/loadout/loadout-ui/LoadoutSubclassSection.m.scss b/src/app/loadout/loadout-ui/LoadoutSubclassSection.m.scss
@@ -3,6 +3,7 @@
 .subclassContainer {
  --item-icon-size: calc(0.8 * var(--item-size));
  composes: flexRow from '../../dim-ui/common.m.scss';
+ width: 100%;
 }
 
 .subclass {
@@ -29,7 +30,7 @@
 
 .subclassMods {
  --item-icon-size: calc(0.8 * var(--item-size));
- width: calc(3 * var(--item-icon-size) + 2 * var(--item-margin));
+ width: min(calc(3 * var(--item-icon-size) + 2 * var(--item-margin)), 100%);
  margin-right: calc(-1 * var(--item-margin) + #{$item-border-width});
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--item-icon-size));

diff --git a/src/app/loadout/loadout-ui/menu-hooks.m.scss b/src/app/loadout/loadout-ui/menu-hooks.m.scss
@@ -1,6 +1,13 @@
+@use '../../variables.scss' as *;
+
 .analyzingText {
  margin-bottom: 8px;
 
+ @include phone-portrait {
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+
  :global(.app-icon) {
  margin: 0 4px 0 4px;
  }

diff --git a/src/app/progress/Progress.m.scss b/src/app/progress/Progress.m.scss
@@ -1,5 +1,9 @@
 @use '../variables.scss' as *;
 
+.progress {
+ --item-size: 50px;
+}
+
 .menuLinks {
  // Give some space between the character selector and the links
  margin-top: 16px;

diff --git a/src/app/progress/Progress.m.scss.d.ts b/src/app/progress/Progress.m.scss.d.ts
diff --git a/src/app/progress/Progress.tsx b/src/app/progress/Progress.tsx
@@ -130,7 +130,7 @@ export default function Progress({ account }: { account: DestinyAccount }) {
  )}
  </PageWithMenu.Menu>
 
- <PageWithMenu.Contents>
+ <PageWithMenu.Contents className={styles.progress}>
  <motion.div className="horizontal-swipable" onPanEnd={handleSwipe}>
  <section id="ranks">
  <CollapsibleTitle title={t('Progress.CrucibleRank')} sectionId="profile-ranks">

diff --git a/src/app/search/SearchResults.m.scss b/src/app/search/SearchResults.m.scss
@@ -10,4 +10,5 @@
 
 .contents {
  min-height: calc(#{$badge-height} + var(--item-size) + 4px) !important;
+ margin: 10px;
 }
diff --git a/src/locale/en.json b/src/locale/en.json
@@ -642,7 +642,7 @@
  "ExistingLoadout": "Existing Loadout",
  "Exotic": "Exotic Armor",
  "ExoticSpecialCategory": "Special",
- "Filter": "Filters",
+ "Filter": "Settings",
  "IgnoreStat": "If unchecked, Loadout Optimizer will pretend this stat doesn't exist when building sets",
  "IncreaseStatPriority": "Increase stat priority",
  "Legendary": "Legendary",
@@ -847,7 +847,7 @@
  "Summary": "Share this loadout containing:",
  "Title": "Share \"{{name}}\""
  },
- "ShareLoadout": "Share Loadout",
+ "ShareLoadout": "Share",
  "ShowModPlacement": "Show Mod Placement",
  "Snapshot": "Save As In-Game Loadout",
  "SocketOverrides": "Changing subclass options",