Skip to content

Commit

Permalink
Merge pull request #698 from wowsims/hotfix/bulk-sim-responsive
Browse files Browse the repository at this point in the history 
[UI] Bulk responsive fixes
  • Loading branch information
@1337LutZ
1337LutZ authored Jun 17, 2024
2 parents 3fc761a + 13241f4 commit b462ef6
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 91 deletions.
12 changes: 11 additions & 1 deletion ui/core/components/individual_sim_ui/bulk_tab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -796,7 +796,7 @@ export class BulkTab extends SimTab {
</span>
{this.showIterationsWarning() && (
<button className="warning link-warning" ref={warningRef}>
<i className="fas fa-exclamation-triangle fa-2x ms-2" />
<i className="fas fa-exclamation-triangle fa-2x" />
</button>
)}
</>
Expand All @@ -807,6 +807,16 @@ export class BulkTab extends SimTab {
content: `Simming over ${WEB_ITERATIONS_LIMIT} iterations in the web sim will take a long time or may not run at all.
For larger batch sims we recommend using Fast Mode or downloading the executable and running on your machine.`,
placement: 'left',
popperOptions: {
modifiers: [
{
name: 'flip',
options: {
fallbackPlacements: ['auto'],
},
},
],
},
});
}

Expand Down
107 changes: 66 additions & 41 deletions ui/scss/core/components/individual_sim_ui/_bulk_tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,58 +10,52 @@
}
}

#bulkSetupTab {
.bulk-settings-outer-container {
position: sticky;
top: var(--sim-header-height);
padding-top: var(--gap-width);
}

.bulk-settings-container {
padding: var(--spacer-3);
border: var(--border-default);
display: grid;
gap: var(--gap-width);
background: var(--bs-body-bg);
}

&.active {
display: grid;
.bulk-combinations-count {
margin-bottom: 0;
display: flex;
align-items: center;
gap: var(--spacer-2);

@include media-breakpoint-between(xl, xxl) {
flex-wrap: wrap;
}

.bulk-gear-actions {
display: flex;
grid-auto-flow: column;
gap: var(--block-spacer);
small {
font-size: var(--bs-body-font-size);
}

.bulk-gear-combo {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto;
gap: calc(2 * var(--gap-width)) var(--gap-width);
.warning {
@include media-breakpoint-between(xl, xxl) {
order: -1;
}
}
}

.bulk-settings-outer-container {
position: sticky;
top: var(--sim-header-height);
padding-top: var(--gap-width);
.bulk-boolean-settings-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--block-spacer);

.bulk-settings-container {
padding: var(--spacer-3);
border: var(--border-default);
display: grid;
gap: var(--gap-width);
background: var(--bs-body-bg);

.bulk-combinations-count {
margin-bottom: 0;
display: flex;
align-items: center;

small {
font-size: var(--bs-body-font-size);
}
}

.bulk-boolean-settings-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--block-spacer);
@include media-breakpoint-between(xl, xxxl) {
grid-template-columns: 1fr;
}

.boolean-picker-root {
margin-bottom: 0;
}
}
.boolean-picker-root {
margin-bottom: 0;
}
}

Expand Down Expand Up @@ -130,3 +124,34 @@
}
}
}

#bulkSetupTab {
gap: var(--gap-width);

&.active {
display: grid;
}

.bulk-gear-actions {
display: flex;
grid-auto-flow: column;
gap: var(--block-spacer);
}

.bulk-gear-combo {
--bulk-gear-combo-column-count: 1;
--bulk-gear-combo-gap-width: calc(var(--gap-width)) var(--gap-width);
display: grid;
gap: var(--bulk-gear-combo-gap-width);
grid-template-columns: repeat(var(--bulk-gear-combo-column-count), minmax(0, 1fr));
grid-template-rows: auto;

@include media-breakpoint-up(sm) {
--bulk-gear-combo-gap-width: calc(2 * var(--gap-width)) var(--gap-width);
--bulk-gear-combo-column-count: 2;
}
@include media-breakpoint-up(xl) {
--bulk-gear-combo-column-count: 3;
}
}
}
114 changes: 65 additions & 49 deletions ui/scss/core/components/individual_sim_ui/bulk/_bulk_item_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,69 +11,85 @@
}

.bulk-gear-search-container {
position: relative;
display: grid;
gap: var(--gap-width);
padding: var(--spacer-3);
border: var(--border-default);
background: var(--bs-body-bg);
grid-template-columns: 1fr 1fr 2fr;
gap: var(--gap-width);
position: relative;

.cancel-bulk-gear-search-btn {
padding: $input-padding-y $input-padding-x;
display: flex;
align-items: center;
background-color: $input-bg;
border: 1px solid $input-border-color;
grid-template-columns: 1fr 1fr;
@include media-breakpoint-up(md) {
grid-template-columns: 1fr 1fr 2fr;
}
}

.bulk-gear-search-results {
top: 100%;
padding: var(--spacer-2);
.cancel-bulk-gear-search-btn {
padding: $input-padding-y $input-padding-x;
display: flex;
align-items: center;
background-color: $input-bg;
border: 1px solid $input-border-color;
}

&.show {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacer-2);
}
.bulk-gear-search-results {
--bulk-gear-search-results-column-count: 1;
gap: var(--spacer-2);
top: 100%;
padding: var(--spacer-2);
left: var(--spacer-3);
right: var(--spacer-3);
grid-template-columns: repeat(var(--bulk-gear-search-results-column-count), 1fr);

.bulk-item-search-item {
display: flex;
padding: var(--spacer-2);
border: var(--border-default);
@include media-breakpoint-up(md) {
--bulk-gear-search-results-column-count: 2;
}
@include media-breakpoint-up(lg) {
--bulk-gear-search-results-column-count: 3;
}

.bulk-item-search-item-icon-wrapper {
width: var(--icon-size-md);
height: var(--icon-size-md);
border: var(--border-default);
&.show {
display: grid;
}
}

.bulk-item-search-item-icon {
@include wowhead-background-icon;
width: 100%;
height: 100%;
}
}
}
.bulk-item-search-item {
display: flex;
width: 100%;
padding: var(--spacer-2);
border: var(--border-default);
white-space: normal;
}

.bulk-item-search-more-items-note {
border: none;
grid-column: 1 / 4;
}
}
.bulk-item-search-item-icon-wrapper {
flex-shrink: 0;
width: var(--icon-size-md);
height: var(--icon-size-md);
border: var(--border-default);
}

.bulk-gear-search-ilvl-filters {
display: flex;
align-items: center;
.bulk-item-search-item-icon {
@include wowhead-background-icon;
width: 100%;
height: 100%;
}

.bulk-item-search-more-items-note {
border: none;
grid-column: 1 / var(--bulk-gear-search-results-column-count);
}

.number-picker-root {
margin-bottom: 0;
}
.bulk-gear-search-ilvl-filters {
display: flex;
align-items: center;

.number-picker-root {
margin-bottom: 0;
}

.ilvl-filters-separator {
margin-left: var(--block-spacer);
margin-right: var(--block-spacer);
margin-top: var(--block-spacer);
}
.ilvl-filters-separator {
margin-left: var(--block-spacer);
margin-right: var(--block-spacer);
margin-top: var(--block-spacer);
}
}
}

0 comments on commit b462ef6

Please sign in to comment.