From 831e4d9addde2bf64a959e4c2ec31296ab8e9d50 Mon Sep 17 00:00:00 2001 From: NerdEgghead Date: Fri, 17 Nov 2023 15:56:01 -0800 Subject: [PATCH 1/6] Added equipped gem summary feature based on commmunity requests. Changes to be committed: new file: ui/core/components/gem_summary_action.ts modified: ui/core/individual_sim_ui.ts --- ui/core/components/gem_summary_action.ts | 61 ++++++++++++++++++++++++ ui/core/individual_sim_ui.ts | 2 + 2 files changed, 63 insertions(+) create mode 100644 ui/core/components/gem_summary_action.ts diff --git a/ui/core/components/gem_summary_action.ts b/ui/core/components/gem_summary_action.ts new file mode 100644 index 0000000000..4de3171f24 --- /dev/null +++ b/ui/core/components/gem_summary_action.ts @@ -0,0 +1,61 @@ +import { IndividualSimUI } from '../individual_sim_ui.js'; +import { BaseModal } from './base_modal.js'; +import { Player } from '../core/player.js'; + +export function addGemSummaryAction(simUI: IndividualSimUI) { + simUI.addAction('Gem Summary', 'gem-summary-action', () => { + new GemSummaryMenu(simUI); + }); +} + +class GemSummaryMenu extends BaseModal { + private readonly simUI: IndividualSimUI; + private readonly tableBody: HTMLElement; + private readonly player: Player; + + constructor(simUI: IndividualSimUI) { + super(simUI.rootElem, 'gem-summary-menu', { scrollContents: true, size: 'md' }); + this.simUI = simUI; + this.player = simUI.player; + + this.header?.insertAdjacentHTML('afterbegin', '
Currently Socketed Gems
'); + this.body.innerHTML = ` +
+ + + + + + + + +
Gem Type + Quantity +
+
+ `; + + this.tableBody = this.rootElem.querySelector('.gem-summary-table tbody') as HTMLElement; + this.updateTable(); + } + + private updateTable() { + this.tableBody.innerHTML = ``; + const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing()); + const gemCounts = {}; + + for (const gem of fullGemList) { + gemCounts[gem.name] = gemCounts[gem.name] ? gemCounts[gem.name] + 1 : 1; + } + + for (const gemName of Object.keys(gemCounts)) { + const row = document.createElement('tr'); + row.innerHTML = ` + ${gemName} + ${gemCounts[gemName].toFixed(0)} + `; + this.tableBody.appendChild(row); + } + } + +} diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts index ae2871a28d..47a6c8d892 100644 --- a/ui/core/individual_sim_ui.ts +++ b/ui/core/individual_sim_ui.ts @@ -10,6 +10,7 @@ import { EncounterPickerConfig } from './components/encounter_picker'; import { addRaidSimAction, RaidSimResultsManager } from './components/raid_sim_action'; import { SavedDataConfig } from './components/saved_data_manager'; import { addStatWeightsAction } from './components/stat_weights_action'; +import { addGemSummaryAction } from './components/gem_summary_action'; import { BulkTab } from './components/individual_sim_ui/bulk_tab'; import { GearTab } from './components/individual_sim_ui/gear_tab'; @@ -340,6 +341,7 @@ export abstract class IndividualSimUI extends SimUI { private addSidebarComponents() { this.raidSimResultsManager = addRaidSimAction(this); addStatWeightsAction(this, this.individualConfig.epStats, this.individualConfig.epPseudoStats, this.individualConfig.epReferenceStat); + addGemSummaryAction(this); const characterStats = new CharacterStats( this.rootElem.getElementsByClassName('sim-sidebar-footer')[0] as HTMLElement, From 70dbd8ba6e5ff01c08d1370a19a68a88c8ae05ed Mon Sep 17 00:00:00 2001 From: NerdEgghead Date: Fri, 17 Nov 2023 16:14:15 -0800 Subject: [PATCH 2/6] Fixed Typescript errors. Changes to be committed: modified: ui/core/components/gem_summary_action.ts --- ui/core/components/gem_summary_action.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/core/components/gem_summary_action.ts b/ui/core/components/gem_summary_action.ts index 4de3171f24..0d3eeda7a1 100644 --- a/ui/core/components/gem_summary_action.ts +++ b/ui/core/components/gem_summary_action.ts @@ -1,6 +1,6 @@ import { IndividualSimUI } from '../individual_sim_ui.js'; import { BaseModal } from './base_modal.js'; -import { Player } from '../core/player.js'; +import { Player } from '../player.js'; export function addGemSummaryAction(simUI: IndividualSimUI) { simUI.addAction('Gem Summary', 'gem-summary-action', () => { @@ -42,7 +42,7 @@ class GemSummaryMenu extends BaseModal { private updateTable() { this.tableBody.innerHTML = ``; const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing()); - const gemCounts = {}; + const gemCounts: Record = {}; for (const gem of fullGemList) { gemCounts[gem.name] = gemCounts[gem.name] ? gemCounts[gem.name] + 1 : 1; From 0da78e430f50b22d2ff52f606fff4a39ff3c7ca4 Mon Sep 17 00:00:00 2001 From: NerdEgghead Date: Mon, 20 Nov 2023 13:40:01 -0800 Subject: [PATCH 3/6] Moved gem summary to below paper doll on gear tab. Changes to be committed: modified: ui/core/components/gear_picker.tsx deleted: ui/core/components/gem_summary_action.ts modified: ui/core/individual_sim_ui.ts --- ui/core/components/gear_picker.tsx | 61 +++++++++++++++++++++++- ui/core/components/gem_summary_action.ts | 61 ------------------------ ui/core/individual_sim_ui.ts | 2 - 3 files changed, 60 insertions(+), 64 deletions(-) delete mode 100644 ui/core/components/gem_summary_action.ts diff --git a/ui/core/components/gear_picker.tsx b/ui/core/components/gear_picker.tsx index 97687b2fe1..a505bf8955 100644 --- a/ui/core/components/gear_picker.tsx +++ b/ui/core/components/gear_picker.tsx @@ -113,6 +113,8 @@ export class GearPicker extends Component { ].map(slot => new ItemPicker(rightSide, simUI, player, slot)); this.itemPickers = leftItemPickers.concat(rightItemPickers).sort((a, b) => a.slot - b.slot); + + const gemSummary = new GemSummary(leftSide, simUI, player); } } @@ -217,6 +219,63 @@ export class ItemRenderer extends Component { } } +export class GemSummary extends Component { + private readonly simUI: SimUI; + private readonly player: Player; + + private readonly tableBody: HTMLElement; + + constructor(parent: HTMLElement, simUI: SimUI, player: Player) { + super(parent, 'gem-summary-root'); + this.simUI = simUI; + this.player = player; + + const container = ` +
+
Currently Socketed Gems
+
+
+ + + + + + + + +
Gem Type + Quantity +
+
+ `; + + this.rootElem.insertAdjacentHTML('afterbegin', container); + this.tableBody = this.rootElem.querySelector('.gem-summary-table tbody') as HTMLElement; + player.gearChangeEmitter.on(() => { + this.updateTable(); + }); + } + + private updateTable() { + this.tableBody.innerHTML = ``; + const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing()); + const gemCounts: Record = {}; + + for (const gem of fullGemList) { + gemCounts[gem.name] = gemCounts[gem.name] ? gemCounts[gem.name] + 1 : 1; + } + + for (const gemName of Object.keys(gemCounts)) { + const row = document.createElement('tr'); + row.innerHTML = ` + ${gemName} + ${gemCounts[gemName].toFixed(0)} + `; + this.tableBody.appendChild(row); + } + } +} + export class ItemPicker extends Component { readonly slot: ItemSlot; @@ -1309,4 +1368,4 @@ export class ItemList { } return <>; } -} \ No newline at end of file +} diff --git a/ui/core/components/gem_summary_action.ts b/ui/core/components/gem_summary_action.ts deleted file mode 100644 index 0d3eeda7a1..0000000000 --- a/ui/core/components/gem_summary_action.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { IndividualSimUI } from '../individual_sim_ui.js'; -import { BaseModal } from './base_modal.js'; -import { Player } from '../player.js'; - -export function addGemSummaryAction(simUI: IndividualSimUI) { - simUI.addAction('Gem Summary', 'gem-summary-action', () => { - new GemSummaryMenu(simUI); - }); -} - -class GemSummaryMenu extends BaseModal { - private readonly simUI: IndividualSimUI; - private readonly tableBody: HTMLElement; - private readonly player: Player; - - constructor(simUI: IndividualSimUI) { - super(simUI.rootElem, 'gem-summary-menu', { scrollContents: true, size: 'md' }); - this.simUI = simUI; - this.player = simUI.player; - - this.header?.insertAdjacentHTML('afterbegin', '
Currently Socketed Gems
'); - this.body.innerHTML = ` -
- - - - - - - - -
Gem Type - Quantity -
-
- `; - - this.tableBody = this.rootElem.querySelector('.gem-summary-table tbody') as HTMLElement; - this.updateTable(); - } - - private updateTable() { - this.tableBody.innerHTML = ``; - const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing()); - const gemCounts: Record = {}; - - for (const gem of fullGemList) { - gemCounts[gem.name] = gemCounts[gem.name] ? gemCounts[gem.name] + 1 : 1; - } - - for (const gemName of Object.keys(gemCounts)) { - const row = document.createElement('tr'); - row.innerHTML = ` - ${gemName} - ${gemCounts[gemName].toFixed(0)} - `; - this.tableBody.appendChild(row); - } - } - -} diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts index 47a6c8d892..ae2871a28d 100644 --- a/ui/core/individual_sim_ui.ts +++ b/ui/core/individual_sim_ui.ts @@ -10,7 +10,6 @@ import { EncounterPickerConfig } from './components/encounter_picker'; import { addRaidSimAction, RaidSimResultsManager } from './components/raid_sim_action'; import { SavedDataConfig } from './components/saved_data_manager'; import { addStatWeightsAction } from './components/stat_weights_action'; -import { addGemSummaryAction } from './components/gem_summary_action'; import { BulkTab } from './components/individual_sim_ui/bulk_tab'; import { GearTab } from './components/individual_sim_ui/gear_tab'; @@ -341,7 +340,6 @@ export abstract class IndividualSimUI extends SimUI { private addSidebarComponents() { this.raidSimResultsManager = addRaidSimAction(this); addStatWeightsAction(this, this.individualConfig.epStats, this.individualConfig.epPseudoStats, this.individualConfig.epReferenceStat); - addGemSummaryAction(this); const characterStats = new CharacterStats( this.rootElem.getElementsByClassName('sim-sidebar-footer')[0] as HTMLElement, From eaf36fec98df095468b8d5dd178a9d52b115c29a Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Wed, 22 Nov 2023 18:16:40 -0500 Subject: [PATCH 4/6] update gem summary UI + gear tab mobile UI improvements --- ui/core/components/gear_picker.tsx | 63 +--------------- .../components/individual_sim_ui/gear_tab.ts | 7 +- .../individual_sim_ui/gem_summary.ts | 73 +++++++++++++++++++ ui/scss/core/components/_gear_picker.scss | 59 ++++++++------- .../individual_sim_ui/_gear_tab.scss | 7 ++ .../individual_sim_ui/_gem_summary.scss | 33 +++++++++ ui/scss/core/individual_sim_ui/index.scss | 2 + ui/scss/core/sim_ui/_shared.scss | 14 ---- ui/scss/core/sim_ui/_sidebar.scss | 14 ---- ui/scss/shared/_gems.scss | 31 ++++---- ui/scss/shared/_global.scss | 2 +- 11 files changed, 173 insertions(+), 132 deletions(-) create mode 100644 ui/core/components/individual_sim_ui/gem_summary.ts create mode 100644 ui/scss/core/components/individual_sim_ui/_gear_tab.scss create mode 100644 ui/scss/core/components/individual_sim_ui/_gem_summary.scss diff --git a/ui/core/components/gear_picker.tsx b/ui/core/components/gear_picker.tsx index a505bf8955..0072f51e65 100644 --- a/ui/core/components/gear_picker.tsx +++ b/ui/core/components/gear_picker.tsx @@ -1,4 +1,4 @@ -import { classNames, difficultyNames, professionNames, slotNames } from '../proto_utils/names.js'; +import { difficultyNames, professionNames, slotNames } from '../proto_utils/names.js'; import { BaseModal } from './base_modal'; import { Component } from './component'; import { FiltersMenu } from './filters_menu'; @@ -113,8 +113,6 @@ export class GearPicker extends Component { ].map(slot => new ItemPicker(rightSide, simUI, player, slot)); this.itemPickers = leftItemPickers.concat(rightItemPickers).sort((a, b) => a.slot - b.slot); - - const gemSummary = new GemSummary(leftSide, simUI, player); } } @@ -127,7 +125,7 @@ export class ItemRenderer extends Component { readonly socketsContainerElem: HTMLElement; constructor(parent: HTMLElement, player: Player) { - super(parent, 'item-picker-root'); + super(parent, 'item-renderer-root'); this.player = player; let iconElem = ref(); @@ -219,63 +217,6 @@ export class ItemRenderer extends Component { } } -export class GemSummary extends Component { - private readonly simUI: SimUI; - private readonly player: Player; - - private readonly tableBody: HTMLElement; - - constructor(parent: HTMLElement, simUI: SimUI, player: Player) { - super(parent, 'gem-summary-root'); - this.simUI = simUI; - this.player = player; - - const container = ` -
-
Currently Socketed Gems
-
-
- - - - - - - - -
Gem Type - Quantity -
-
- `; - - this.rootElem.insertAdjacentHTML('afterbegin', container); - this.tableBody = this.rootElem.querySelector('.gem-summary-table tbody') as HTMLElement; - player.gearChangeEmitter.on(() => { - this.updateTable(); - }); - } - - private updateTable() { - this.tableBody.innerHTML = ``; - const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing()); - const gemCounts: Record = {}; - - for (const gem of fullGemList) { - gemCounts[gem.name] = gemCounts[gem.name] ? gemCounts[gem.name] + 1 : 1; - } - - for (const gemName of Object.keys(gemCounts)) { - const row = document.createElement('tr'); - row.innerHTML = ` - ${gemName} - ${gemCounts[gemName].toFixed(0)} - `; - this.tableBody.appendChild(row); - } - } -} - export class ItemPicker extends Component { readonly slot: ItemSlot; diff --git a/ui/core/components/individual_sim_ui/gear_tab.ts b/ui/core/components/individual_sim_ui/gear_tab.ts index 3800049916..db11ae7f7c 100644 --- a/ui/core/components/individual_sim_ui/gear_tab.ts +++ b/ui/core/components/individual_sim_ui/gear_tab.ts @@ -9,6 +9,7 @@ import { Stats } from "../../proto_utils/stats"; import { GearPicker } from "../gear_picker"; import { SavedDataManager } from "../saved_data_manager"; import { SimTab } from "../sim_tab"; +import { GemSummary } from "./gem_summary"; export class GearTab extends SimTab { protected simUI: IndividualSimUI; @@ -34,7 +35,7 @@ export class GearTab extends SimTab { protected buildTabContent() { this.buildGearPickers(); - + this.buildGemSummary(); this.buildSavedGearsetPicker(); } @@ -42,6 +43,10 @@ export class GearTab extends SimTab { new GearPicker(this.leftPanel, this.simUI, this.simUI.player); } + private buildGemSummary() { + new GemSummary(this.leftPanel, this.simUI, this.simUI.player); + } + private buildSavedGearsetPicker() { const savedGearManager = new SavedDataManager, SavedGearSet>(this.rightPanel, this.simUI.player, { header: { title: "Gear Sets" }, diff --git a/ui/core/components/individual_sim_ui/gem_summary.ts b/ui/core/components/individual_sim_ui/gem_summary.ts new file mode 100644 index 0000000000..c2b1d14999 --- /dev/null +++ b/ui/core/components/individual_sim_ui/gem_summary.ts @@ -0,0 +1,73 @@ +import { SimUI } from "../../sim_ui"; +import { Component } from "../../components/component"; +import { Player } from "../../player"; +import { setItemQualityCssClass } from "../../css_utils"; +import { ActionId } from "../../proto_utils/action_id"; +import { UIGem as Gem } from '../../proto/ui.js'; +import { ContentBlock } from "../content_block"; + +interface GemSummaryData { + gem: Gem + count: number +} + +export class GemSummary extends Component { + private readonly simUI: SimUI; + private readonly player: Player; + + private readonly container: ContentBlock; + + constructor(parent: HTMLElement, simUI: SimUI, player: Player) { + super(parent, 'gem-summary-root'); + this.simUI = simUI; + this.player = player; + + this.container = new ContentBlock(this.rootElem, 'gem-summary-container', { + header: {title: 'Gem Summary'} + }); + + player.gearChangeEmitter.on(() => this.updateTable()); + } + + private updateTable() { + this.container.bodyElement.innerHTML = ``; + const fullGemList = this.player.getGear().getAllGems(this.player.isBlacksmithing()); + const gemCounts: Record = {}; + + for (const gem of fullGemList) { + if (gemCounts[gem.name]) { + gemCounts[gem.name].count += 1 + } else { + gemCounts[gem.name] = { + gem: gem, + count: 1, + } + } + } + + for (const gemName of Object.keys(gemCounts)) { + const gemData = gemCounts[gemName] + const row = document.createElement('div'); + row.classList.add('d-flex', 'align-items-center', 'justify-content-between') + row.innerHTML = ` + + +
${gemName}
+ +
${gemData.count.toFixed(0)}
+ `; + + const gemLinkElem = row.querySelector('.gem-summary-link') as HTMLAnchorElement; + const gemIconElem = row.querySelector('.gem-icon') as HTMLImageElement; + + setItemQualityCssClass(gemLinkElem, gemData.gem.quality); + + ActionId.fromItemId(gemData.gem.id).fill().then(filledId => { + gemIconElem.src = filledId.iconUrl; + filledId.setWowheadHref(gemLinkElem); + }); + + this.container.bodyElement.appendChild(row); + } + } +} diff --git a/ui/scss/core/components/_gear_picker.scss b/ui/scss/core/components/_gear_picker.scss index 6354338f94..842bfcadcb 100644 --- a/ui/scss/core/components/_gear_picker.scss +++ b/ui/scss/core/components/_gear_picker.scss @@ -3,9 +3,9 @@ @import "./filters_menu"; .gear-picker-root { + margin-bottom: var(--container-padding); display: flex; flex-wrap: wrap; - width: 100%; .gear-picker-left, .gear-picker-right { @@ -19,6 +19,11 @@ margin-bottom: $block-spacer; } + .item-renderer-root { + width: 100%; + display: flex; + } + .item-picker-icon { @include wowhead-background-icon; width: 4rem; @@ -29,18 +34,20 @@ .gear-picker-left { .item-picker-root { - flex-direction: row; - text-align: left; - // Add space to separate weapon categories &:nth-child(6) { - margin-bottom: map.get($spacers, 5); + margin-bottom: var(--container-padding); + } + + .item-renderer-root { + flex-direction: row; + text-align: left; } } } .gear-picker-right { - .item-picker-root { + .item-renderer-root { flex-direction: row-reverse; text-align: right; } @@ -85,25 +92,14 @@ } } -@include media-breakpoint-down(xl) { - .gear-picker-right { - margin-bottom: 2 * map.get($spacers, 3); - } -} - @include media-breakpoint-down(md) { .gear-picker-root { - .gear-picker-left { - .item-picker-root:last-child { - margin-bottom: map.get($spacers, 5); - } - } + flex-direction: column; + .gear-picker-left, .gear-picker-right { - .item-picker-root { - flex-direction: row; - text-align: left; - } + width: 100%; + margin-right: 0; } } } @@ -125,18 +121,27 @@ } } -@include media-breakpoint-down(md) { +@include media-breakpoint-down(xl) { .gear-picker-root { .gear-picker-left { - .item-picker-root:last-child { - margin-bottom: map.get($spacers, 5); + .item-picker-root { + // Increase the spacing to help separate the weapons/bonus item slots + &:nth-child(6) { + margin-bottom: calc(var(--container-padding) * 2); + } } } + } +} - .gear-picker-right { +@include media-breakpoint-down(md) { + .gear-picker-root { + .gear-picker-left { .item-picker-root { - flex-direction: row; - text-align: left; + // Increase the spacing to help separate the weapons/bonus item slots + &:last-child { + margin-bottom: calc(var(--container-padding) * 2); + } } } } diff --git a/ui/scss/core/components/individual_sim_ui/_gear_tab.scss b/ui/scss/core/components/individual_sim_ui/_gear_tab.scss new file mode 100644 index 0000000000..4dca18c186 --- /dev/null +++ b/ui/scss/core/components/individual_sim_ui/_gear_tab.scss @@ -0,0 +1,7 @@ +#gear-tab { + .tab-pane-content-container { + .gear-tab-left { + flex-direction: column; + } + } +} diff --git a/ui/scss/core/components/individual_sim_ui/_gem_summary.scss b/ui/scss/core/components/individual_sim_ui/_gem_summary.scss new file mode 100644 index 0000000000..e6821dcfd2 --- /dev/null +++ b/ui/scss/core/components/individual_sim_ui/_gem_summary.scss @@ -0,0 +1,33 @@ +.gem-summary-root { + width: 50%; + + .gem-summary-link { + --gem-width: 2rem; + + display: flex; + align-items: center; + + .gem-icon { + position: unset; + margin-right: map-get($spacers, 1); + border-radius: 0; + border: $border-default; + } + + &:not(:last-child) { + margin-bottom: map-get($spacers, 1); + } + } +} + +@include media-breakpoint-down(xl) { + .gem-summary-root { + margin-bottom: var(--container-padding); + } +} + +@include media-breakpoint-down(md) { + .gem-summary-root { + width: 100%; + } +} \ No newline at end of file diff --git a/ui/scss/core/individual_sim_ui/index.scss b/ui/scss/core/individual_sim_ui/index.scss index 745ca46e06..92330b1c17 100644 --- a/ui/scss/core/individual_sim_ui/index.scss +++ b/ui/scss/core/individual_sim_ui/index.scss @@ -26,9 +26,11 @@ @import "../components/stat_weights_action"; @import "../components/unit_picker"; +@import "../components/individual_sim_ui/gear_tab"; @import "../components/individual_sim_ui/settings_tab"; @import "../components/individual_sim_ui/rotation_tab"; @import "../components/individual_sim_ui/talents_tab"; +@import "../components/individual_sim_ui/gem_summary"; @import "../talents/hunter_pet"; @import "../talents/glyphs_picker"; diff --git a/ui/scss/core/sim_ui/_shared.scss b/ui/scss/core/sim_ui/_shared.scss index 19009a7dca..4f25760ea5 100644 --- a/ui/scss/core/sim_ui/_shared.scss +++ b/ui/scss/core/sim_ui/_shared.scss @@ -111,20 +111,6 @@ td, th { width: 100%; min-height: unset; } - - .sim-content { - padding-left: $gap-width-sm; - padding-right: $gap-width-sm; - } - } - } -} - -@include media-breakpoint-down(sm) { - .sim-ui { - .sim-content { - padding-left: $gap-width-sm; - padding-right: $gap-width-sm; } } } diff --git a/ui/scss/core/sim_ui/_sidebar.scss b/ui/scss/core/sim_ui/_sidebar.scss index de18728a3c..e54e528ce7 100644 --- a/ui/scss/core/sim_ui/_sidebar.scss +++ b/ui/scss/core/sim_ui/_sidebar.scss @@ -60,9 +60,6 @@ @include media-breakpoint-down(xxl) { .sim-sidebar { .sim-sidebar-content { - padding-left: $gap-width-sm * 2; - padding-right: $gap-width-sm * 2; - .sim-sidebar-actions { padding: 0; margin: 0; @@ -70,14 +67,3 @@ } } } - -@include media-breakpoint-down(lg) { - .sim-sidebar { - .sim-sidebar-content { - padding-top: $gap-width-sm * 2; - padding-bottom: $gap-width-sm; - padding-left: $gap-width-sm; - padding-right: $gap-width-sm; - } - } -} diff --git a/ui/scss/shared/_gems.scss b/ui/scss/shared/_gems.scss index 014b69e73f..2e9c50d880 100644 --- a/ui/scss/shared/_gems.scss +++ b/ui/scss/shared/_gems.scss @@ -9,21 +9,24 @@ margin-right: 1px; } - .gem-icon { - @include wowhead-background-icon; - position: absolute; - width: calc(4 * var(--gem-width) / 5); - height: calc(4 * var(--gem-width) / 5); - inset: calc(var(--gem-width) / 10); - border-radius: 100%; - z-index: 1; - } - + .gem-icon, .socket-icon { - @include wowhead-background-icon; position: absolute; - width: 100%; - height: 100%; - inset: 0; } } + +.gem-icon { + @include wowhead-background-icon; + width: calc(4 * var(--gem-width) / 5); + height: calc(4 * var(--gem-width) / 5); + inset: calc(var(--gem-width) / 10); + border-radius: 100%; + z-index: 1; +} + +.socket-icon { + @include wowhead-background-icon; + width: 100%; + height: 100%; + inset: 0; +} diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss index 0336e29e90..ea16ef14f9 100644 --- a/ui/scss/shared/_global.scss +++ b/ui/scss/shared/_global.scss @@ -2,7 +2,7 @@ :root { --bs-body-font-size: 14px; - --container-padding: #{$gap-width-sm}; + --container-padding: #{$gap-width}; font-size: var(--bs-body-font-size); } From e0bcdc82702a5c29551c35d76bc3010024b1613b Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Wed, 22 Nov 2023 18:19:24 -0500 Subject: [PATCH 5/6] update sim title dropdown padding --- .../core/components/_sim_title_dropdown.scss | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/ui/scss/core/components/_sim_title_dropdown.scss b/ui/scss/core/components/_sim_title_dropdown.scss index cd4c2303fd..2fd95adaa0 100644 --- a/ui/scss/core/components/_sim_title_dropdown.scss +++ b/ui/scss/core/components/_sim_title_dropdown.scss @@ -41,25 +41,3 @@ } } } - -@include media-breakpoint-down(xxl) { - .sim-title { - .sim-link { - .sim-link-content { - padding-left: $gap-width-sm * 2; - padding-right: $gap-width-sm * 2; - } - } - } -} - -@include media-breakpoint-down(lg) { - .sim-title { - .sim-link { - .sim-link-content { - padding-left: $gap-width-sm; - padding-right: $gap-width-sm; - } - } - } -} From 99066d974693e0bf5f2420a71a1d5fdaaf3c4b47 Mon Sep 17 00:00:00 2001 From: Kayla Glick Date: Wed, 22 Nov 2023 18:40:38 -0500 Subject: [PATCH 6/6] tab formatting --- ui/core/components/individual_sim_ui/gem_summary.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/ui/core/components/individual_sim_ui/gem_summary.ts b/ui/core/components/individual_sim_ui/gem_summary.ts index c2b1d14999..7091d14422 100644 --- a/ui/core/components/individual_sim_ui/gem_summary.ts +++ b/ui/core/components/individual_sim_ui/gem_summary.ts @@ -22,11 +22,10 @@ export class GemSummary extends Component { this.simUI = simUI; this.player = player; - this.container = new ContentBlock(this.rootElem, 'gem-summary-container', { - header: {title: 'Gem Summary'} - }); - - player.gearChangeEmitter.on(() => this.updateTable()); + this.container = new ContentBlock(this.rootElem, 'gem-summary-container', { + header: {title: 'Gem Summary'} + }); + player.gearChangeEmitter.on(() => this.updateTable()); } private updateTable() {