Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(extension): HTML Report CSS and Font Fix #2035 #2049

Merged
merged 7 commits into from
Sep 19, 2024
+21 −35
Merged

feature(extension): HTML Report CSS and Font Fix #2035 #2049

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
274165d
css changes
nam-singh Sep 13, 2024
033b150
css changes
nam-singh Sep 13, 2024
e376c8d
score css change
nam-singh Sep 17, 2024
e53ff56
font weight of score
nam-singh Sep 17, 2024
99f7906
change in icon order and summary card border
nam-singh Sep 18, 2024
ef87616
color change for summary card
nam-singh Sep 18, 2024
e54b485
bg color of extenstion summ & border in html report
nam-singh Sep 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@

&.cds--g10 {
.status-score-tile {
background-color: #BE95FF; // purple / 40
background-color:#E8DAFF ; // purple / 20
}
}

Expand Down
2 changes: 1 addition & 1 deletion report-react/src/SavedReport.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
.summReport, .summCard {
margin: 1rem -1rem 0rem -1rem;
padding: 1rem;

border:solid #a8a8a8;
background-color: #FFFFFF;

.title {
Expand Down
12 changes: 6 additions & 6 deletions report-react/src/SavedReport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ const filteredReport = {
<Theme theme="g10">
<div>
<Grid>
<Column sm={2} md={8} lg={4}>
<Column sm={4} md={8} lg={4}>
<div className="summInfo">
<h1 className="prodName">
IBM <strong>Accessibility</strong><br />
Expand All @@ -173,22 +173,22 @@ const filteredReport = {
</Grid>
<section aria-label="Report overview: score cards">
<Grid>
<Column sm={2} md={4} lg={4}>
<Column sm={4} md={4} lg={4}>
<div className="time" style={{paddingTop:"12px"}}>{new Date(this.props.reportData.report.timestamp).toLocaleString()}</div>
<div className="url"><strong>Scanned page:</strong> {this.props.reportData.tabURL}</div>
</Column>
<Column sm={2} md={4} lg={4}>
<Column sm={4} md={4} lg={4}>
<ScoreCard count={violations} title="Violations" icon={Violation16} checked={this.state.selectedItems.some((item)=>item.text==="Violations")}
handleCardClick={this.handleCardClick}>
Accessibility failures that need to be corrected
</ScoreCard>
</Column>
<Column sm={2} md={4} lg={4}>
<Column sm={4} md={4} lg={4}>
<ScoreCard count={needReview} title="Needs review" icon={NeedsReview16} checked={this.state.selectedItems.some((item)=>item.text==="Needs review")} handleCardClick={this.handleCardClick}>
Issues that may not be a violation; manual review is needed
</ScoreCard>
</Column>
<Column sm={2} md={4} lg={4}>
<Column sm={4} md={4} lg={4}>
<ScoreCard count={recommendation} title="Recommendations" icon={Recommendation16} checked={this.state.selectedItems.some((item)=>item.text==="Recommendations")} handleCardClick={this.handleCardClick}>
Opportunities to apply best practices to further improve accessibility
</ScoreCard>
Expand All @@ -202,8 +202,8 @@ const filteredReport = {
<div className="reportGroupFilter">
<div className="iconGroup">
<span className="iconSummary">{Violation16}&nbsp;{violations}</span>
<span className="iconSummary">{Recommendation16}&nbsp;{recommendation}</span>
<span className="iconSummary">{NeedsReview16}&nbsp;{needReview}</span>
<span className="iconSummary">{Recommendation16}&nbsp;{recommendation}</span>
<span className="iconSummary">{ViewOff16}&nbsp;{hidden}</span>
<span style={{paddingLeft:"1rem"}}>{total} issues found</span>
</div>
Expand Down
6 changes: 1 addition & 5 deletions report-react/src/ScoreCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,7 @@
}
}

@include breakpoint.breakpoint('sm') {
.cds--css-grid-column:nth-child(even) .scoreCard {
margin-right: -1rem;
}
}

@include breakpoint.breakpoint('md') {
.cds--css-grid-column:nth-child(even) .scoreCard {
margin-right: 0rem;
Expand Down
26 changes: 8 additions & 18 deletions report-react/src/SummScoreCard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,25 @@
.summScoreCard {
margin: 1rem -1rem 0rem -1rem;
padding: 1rem;

box-sizing: border-box;

border: 1px solid #9E63FB;
background-color: #E8DAFF;
min-height: 12rem;
border: 1px solid #8A3FFC;
background-color:#E8DAFF;

.summaryTitleDetail {
@include type.type-style('helper-text-01');
font-size: 14px;
}

.scLeft {
flex: 0 0 51.25%;
max-width: 51.25%;

@media (min-width: 66rem) {
flex: 0 0 33.75%;
max-width: 33.75%;
}
}


.title {
@include type.type-style('heading-02');
}

.score {
// @include type.type-style('display-03');
font-size: 96px;
font-size: 54px;
font-weight: 400;
margin: 1rem 0rem;
}

@media (min-width: 42rem) {
margin: 1rem 0rem 0rem -1rem;
}
Expand Down
2 changes: 1 addition & 1 deletion report-react/src/SummScoreCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
let summaryNumbers = this.calcSummary(this.props.report);
let currentStatus = summaryNumbers[3].toFixed(0);

return <div className="scoreCard" style={{border: "1px solid #9E63FB", backgroundColor:'#be95ff'}}>
return <div className="summScoreCard" >

<Grid>
<Column sm={2} md={4} lg={4} className="scLeft">
Expand Down
6 changes: 3 additions & 3 deletions report-react/src/report/ReportRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,15 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
}
return <div className="itemRow">
<Grid role="row" aria-expanded={open} className="itemHeader" onClick={this.toggleRow.bind(this)} tabIndex={0} onKeyDown={this.onKeyDown.bind(this)}>
<Column sm={1} md={2} lg={4} role="cell">
<Column sm={2} md={2} lg={4} role="cell" >
{this.state.scrollTo && <div ref={this.scrollRef}></div>}
<span style={{ paddingRight: "14px" }}>{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}</span>
{vCount > 0 && <> <span>{Violation16}</span><span style={{verticalAlign: "text-top",lineHeight: "8px", margin: ".25rem" }}>{vCount}</span></>}
{nrCount > 0 && <> <span>{NeedsReview16}</span><span style={{verticalAlign: "text-top", lineHeight: "8px" , margin: ".25rem" }}>{nrCount}</span></>}
{rCount > 0 && <><span>&nbsp;{Recommendation16}</span><span style={{ verticalAlign: "text-top", lineHeight: "8px", margin: ".25rem" }}>{rCount}</span> </>}
</Column>
<Column sm={3} md={6} lg={8} role="cell">
<span >{group.title.length === 0 ? "Page" : group.title}</span>
<Column sm={2} md={6} lg={8} role="cell">
<span style={{wordWrap:"break-word"}}>{group.title.length === 0 ? "Page" : group.title}</span>
</Column>
</Grid>
{!open && <Grid className="itemDetail" />}
Expand Down
Loading