Skip to content

Commit 1288cd0

Browse files
ErickRenteriaErickRenteria
authored
Merge pull request #1887 from IBMa/joho-fixNarrowReflow-1830
fix(extension): adjust reflow of scan section when narrow
2 parents be994c6 + 4a0283e commit 1288cd0

File tree

4 files changed

+127
-134
lines changed

4 files changed

+127
-134
lines changed

‎accessibility-checker-extension/src/ts/devtools/components/reportSection.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@
3232

3333
.totalCountDisable {
3434
@include type-style("label-02");
35-
margin-top: 10px;
35+
margin-top: 3px;
3636
pointer-events: none;
3737
color: $text-disabled;
3838
text-align: right;
3939
}
4040
.totalCountEnable {
4141
@include type-style("label-02");
42-
margin-top: 10px;
42+
margin-top: 3px;
4343
pointer-events: auto;
4444
text-align: right;
4545
}
@@ -63,10 +63,11 @@
6363
}
6464

6565
.viewMulti {
66+
float:right;
6667
width: 230px;
6768
.cds--list-box {
6869
max-height: 2rem;
69-
border-left: solid $gray-40 1px
70+
border: solid $gray-40 1px;
7071
}
7172
}
7273

‎accessibility-checker-extension/src/ts/devtools/components/reportSection.tsx

Lines changed: 71 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -222,89 +222,84 @@ export class ReportSection extends React.Component<ReportSectionProps, ReportSec
222222
let viewFilterSection = <>
223223
<div className="reportFilterBorder" />
224224
{this.state.filterShown && <Grid className="reportViewFilterSection">
225-
<Column sm={4} md={8} lg={8} style={{ marginRight: "0px" }}>
226-
<div style={{display: "flex", flexWrap: "wrap", gap: "1rem", float: "right"}}>
227-
<div style={{flex: "0 1 8.75rem"}}>
228-
<div style={{display: "flex"}}>
229-
<div style={{flex: "1 1 8.75rem", maxWidth: "8.75rem", marginRight: "8px" }}>
230-
{!this.state.viewState || !this.state.viewState!.kcm &&
231-
<Dropdown
232-
className="viewMulti"
233-
ariaLabel="Select report view"
234-
disabled={totalCount === 0}
235-
id="reportView"
236-
size="sm"
237-
items={viewItems}
238-
light={false}
239-
type="default"
240-
style={{width:"160px"}}
241-
selectedItem={this.state.reportViewState}
242-
onChange={async (evt: any) => {
243-
// set state
244-
this.setState({ reportViewState: evt.selectedItem });
245-
}}
246-
/>
225+
<Column sm={4} md={8} lg={8}>
226+
<div style={{display: "flex", flexWrap: "wrap", float: "right", gap: "1px 0px"}}>
227+
<div style={{flex: "1 1 auto", margin: "-1px 0px" }}></div>
228+
<div style={{flex: "1 1 0", marginRight: "0px", margin: "-1px 0px" }}>
229+
{!this.state.viewState || !this.state.viewState!.kcm &&
230+
<Dropdown
231+
className="viewMulti"
232+
ariaLabel="Select report view"
233+
disabled={totalCount === 0}
234+
id="reportView"
235+
size="sm"
236+
items={viewItems}
237+
light={false}
238+
type="default"
239+
style={{width:"160px", float: "right"}}
240+
selectedItem={this.state.reportViewState}
241+
onChange={async (evt: any) => {
242+
// set state
243+
this.setState({ reportViewState: evt.selectedItem });
244+
}}
245+
/>
246+
}
247+
</div>
248+
<div style={{flex: "1 1 0", margin: "-1px 0px"}}>
249+
{
250+
<MultiSelect
251+
className="viewMulti"
252+
ariaLabel="Issue type filter"
253+
label="Filter"
254+
size="sm"
255+
hideLabel={true}
256+
disabled={totalCount === 0}
257+
id="filterSelection"
258+
items={filterItems}
259+
itemToString={(item:any) => (item ? item.text : '')}
260+
itemToElement={(item:any) => {
261+
if (item && item.id === "0") {
262+
return <span>{UtilIssueReact.valueSingToIcon("Violation", "reportSecIcon")} {item.text}</span>
263+
} else if (item && item.id === "1") {
264+
return <span>{UtilIssueReact.valueSingToIcon("Needs review", "reportSecIcon")} {item.text}</span>
265+
} else if (item && item.id === "2") {
266+
return <span>{UtilIssueReact.valueSingToIcon("Recommendation", "reportSecIcon")} {item.text}</span>
267+
} else if (item && item.id === "3") {
268+
return <span>{UtilIssueReact.valueSingToIcon("ViewOff", "reportSecIcon")} {item.text}</span>
269+
}
270+
return <></>
247271
}
248-
</div>
249-
<div style={{flex: "1 1 8.75rem"}}>
250-
{
251-
<MultiSelect
252-
className="viewMulti"
253-
ariaLabel="Issue type filter"
254-
label="Filter"
255-
size="sm"
256-
hideLabel={true}
257-
disabled={totalCount === 0}
258-
id="filterSelection"
259-
items={filterItems}
260-
itemToString={(item:any) => (item ? item.text : '')}
261-
itemToElement={(item:any) => {
262-
if (item && item.id === "0") {
263-
return <span>{UtilIssueReact.valueSingToIcon("Violation", "reportSecIcon")} {item.text}</span>
264-
} else if (item && item.id === "1") {
265-
return <span>{UtilIssueReact.valueSingToIcon("Needs review", "reportSecIcon")} {item.text}</span>
266-
} else if (item && item.id === "2") {
267-
return <span>{UtilIssueReact.valueSingToIcon("Recommendation", "reportSecIcon")} {item.text}</span>
268-
} else if (item && item.id === "3") {
269-
return <span>{UtilIssueReact.valueSingToIcon("ViewOff", "reportSecIcon")} {item.text}</span>
270-
}
271-
return <></>
272-
}
273-
}
274-
light={false}
275-
type="default"
276-
style={{ float: "right" }}
277-
selectedItems={levelSelectedItems}
278-
initialSelectedItems={levelSelectedItems}
279-
onChange={async (evt: any) => {
280-
let checked = appController.getLevelFilters();
281-
if (evt.selectedItems != undefined) {
282-
checked["Violation"] = evt.selectedItems.some((item: any) => item.text === "Violations");
283-
checked["Needs review"] = evt.selectedItems.some((item: any) => item.text === "Needs review");
284-
checked["Recommendation"] = evt.selectedItems.some((item: any) => item.text === "Recommendations");
285-
checked["Hidden"] = evt.selectedItems.some((item: any) => item.text === "Hidden");
286-
}
287-
appController.setLevelFilters(checked);
288-
}}
289-
/>
272+
}
273+
light={false}
274+
type="default"
275+
selectedItems={levelSelectedItems}
276+
initialSelectedItems={levelSelectedItems}
277+
onChange={async (evt: any) => {
278+
let checked = appController.getLevelFilters();
279+
if (evt.selectedItems != undefined) {
280+
checked["Violation"] = evt.selectedItems.some((item: any) => item.text === "Violations");
281+
checked["Needs review"] = evt.selectedItems.some((item: any) => item.text === "Needs review");
282+
checked["Recommendation"] = evt.selectedItems.some((item: any) => item.text === "Recommendations");
283+
checked["Hidden"] = evt.selectedItems.some((item: any) => item.text === "Hidden");
290284
}
291-
</div>
292-
<div style={{flex: "1 1 8.75rem"}}>
293-
<div>
294-
<Button
295-
kind="tertiary"
296-
disabled={totalCount === 0}
297-
style={{ float: "right", marginRight: "16px", minHeight: "18px", maxHeight: "32px" }}
298-
onClick={() => devtoolsController.exportXLS("last") }
299-
>Export scan</Button>
300-
</div>
301-
</div>
285+
appController.setLevelFilters(checked);
286+
}}
287+
/>
288+
}
289+
</div>
290+
<div style={{flex: "1 1 0", margin: "-1px 0px"}}>
291+
<div>
292+
<Button
293+
kind="tertiary"
294+
disabled={totalCount === 0}
295+
style={{ float: "right", minHeight: "18px", maxHeight: "32px", minWidth: "10rem" }}
296+
onClick={() => devtoolsController.exportXLS("last") }
297+
>Export XLS</Button>
302298
</div>
303299
</div>
304300
</div>
305301
</Column>
306302
</Grid>}
307-
<div className="reportFilterBorder" />
308303
</>
309304

310305
return (<>

‎accessibility-checker-extension/src/ts/devtools/components/scanSection.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
}
8787
.totalCountDisable {
8888
@include type-style("label-02");
89-
margin-top: 10px;
89+
margin-top: 3px;
9090
pointer-events: none;
9191

9292
text-align: right;
@@ -100,7 +100,7 @@
100100
}
101101
.totalCountEnable {
102102
@include type-style("label-02");
103-
margin-top: 10px;
103+
margin-top: 3px;
104104
pointer-events: auto;
105105
text-align: right;
106106
.darkLink {
@@ -119,9 +119,9 @@
119119

120120
.countCol {
121121
@media (max-width:400px) {
122-
position: absolute;
123-
top: 1.5rem;
124-
left: 0rem;
122+
// position: absolute;
123+
// top: 1.5rem;
124+
// left: 0rem;
125125
}
126126
white-space: nowrap;
127127
}
@@ -148,9 +148,9 @@
148148
}
149149
.countCol {
150150
@media (max-width:400px) {
151-
position: absolute;
152-
top: 1.5rem;
153-
left: 0rem;
151+
// position: absolute;
152+
// top: 1.5rem;
153+
// left: 0rem;
154154
}
155155
white-space: nowrap;
156156
}

0 commit comments

Comments
 (0)