Skip to content

Commit

Permalink
feat: Redesign support table to match APG styling, addresses #212 (#1056
Browse files Browse the repository at this point in the history 
)

* redesign warning

* Fix position and semantics

* FIx header level

* Fix position and heading level

* Align warning arrow

* Fix warning positioning, font, and color
  • Loading branch information
@Paul-Clue
Paul-Clue authored May 6, 2024
1 parent 7b992b6 commit b8cefcd
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 120 deletions.
284 changes: 165 additions & 119 deletions server/handlebars/embed/public/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,600;0,800;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:wght@100;400&display=swap');

body {
margin: 0;
/* Parent should use the posted message and set an explicit height */
overflow: hidden;
}

#main {
}
#main {
width: 100%;
}

a {
}
a {
color: #036;
}
a:focus-visible {
}
a:focus-visible {
outline: 2px solid #3a86d1;
}

h3#report-title {
}
h3#report-title {
margin-top: 0;
margin-bottom: 0.5rem;

font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}

#copied-message {
}
#copied-message {
align-self: center;
}

#at-version {
}
#at-version {
font-weight: lighter;
}

#no-data-content-container {
}
#no-data-content-container {
border-left: 1.5px solid #c0c0c0;
border-right: 1.5px solid #c0c0c0;
border-bottom: 1.5px solid #c0c0c0;
Expand All @@ -41,124 +43,167 @@ h3#report-title {
font-size: 14px;
margin-bottom: 1em;
text-align: center;
}

#embed-report-phase-container {
}
#embed-report-phase-container {
margin-bottom: 1em;
}
#embed-report-phase-container summary:focus-visible {
}
#embed-report-phase-container summary:focus-visible {
outline-offset: -2px;
outline: 2px solid #3a86d1;
}

#candidate-title {
border: 1.5px solid #ffc4a2;
}

#embed-report-phase-container summary::after {
width: 30px;
height: 30px;
border-radius: 3px;
display: block;
content: '';
background-position: center center;
background-repeat: no-repeat;
position: absolute;
right: 0.5em;
top: 1.5em;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6.861' viewBox='0 0 12 6.861'%3E%3Cpath id='Icon_ionic-ios-arrow-down' data-name='Icon ionic-ios-arrow-down' d='M12.19,16.039,16.727,11.5a.854.854,0,0,1,1.211,0,.865.865,0,0,1,0,1.215L12.8,17.858a.856.856,0,0,1-1.183.025L6.438,12.717A.858.858,0,1,1,7.649,11.5Z' transform='translate(18.188 18.108) rotate(180)' fill='%2360470c'/%3E%3C/svg%3E%0A");
background-color: #fce1a4;
transform: rotate(180deg);
}

#embed-report-phase-container[open] summary::after {
transform: rotate(0deg);
}

/* section: CANDIDATE WARNING STYLING */
summary {
display: block;
}

#candidate-title {
background-color:#fcebc3;
border: 1.5px solid #fce1a4;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: #ffd8c1;
padding: 0.5em 0.5em 0.5em 1em;
cursor: pointer;
}

#candidate-title > span {
--space-between-elements: 1em;
--left-right-padding: 55px;
}

#candidate-title > span {
position: relative;
padding-left: var(--left-right-padding);
padding-right: var(--left-right-padding);
}

#candidate-title > span > h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: white;
background-color: #c25401;
padding: 8px 14px;
border-radius: 15px;
font-size: 1em;
color: #60470C;
display: inline-block;
}

#candidate-title.recommended {
}
#candidate-title.recommended {
border: 1.5px solid #7ac498;
background-color: #e9fbe9;
}
#candidate-title.recommended > span {
}
#candidate-title.recommended > span {
background-color: #115b11;
}

#candidate-content-container {
border-left: 1.5px solid #c0c0c0;
border-right: 1.5px solid #c0c0c0;
border-bottom: 1.5px solid #c0c0c0;
}

#candidate-content-container {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
padding: 1em 0.5em 0.5em 1em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

#candidate-content-container > ol > li:not(:last-child) {
font-family: Noto Sans, Trebuchet MS, Helvetica Neue, Arial, sans-serif;
font-size: 1rem;
color: #60470C;
background-color: #fdefce;
border-left: 1px solid #fce1a4;
border-right: 1px solid #fce1a4;
border-bottom: 1px solid #fce1a4;
}

#candidate-content-container > ol > li:not(:last-child) {
margin-bottom: 3px;
}

.no-data-cell {
}

#candidate-title > ::before {
width: 32px;
height: 32px;
display: block;
content: '';
background-repeat: no-repeat;
position: absolute;
left: 5px;
top: -7px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cg id='Group_1' data-name='Group 1' transform='translate(-11 -292)'%3E%3Cellipse id='Ellipse_1' data-name='Ellipse 1' cx='15' cy='15.5' rx='15' ry='15.5' transform='translate(11 292)' fill='%23d9ae4d'/%3E%3Cpath id='Path_3' data-name='Path 3' d='M4.524-17.368a4.507,4.507,0,0,0-1.56.312.278.278,0,0,0-.13.286V-14.9c0,2.184.416,8.294.468,9.022a.172.172,0,0,0,.182.156h2.08c.156,0,.182-.078.182-.156.078-.78.52-6.916.52-9.1v-1.872a.326.326,0,0,0-.156-.286A5.112,5.112,0,0,0,4.524-17.368Zm0,17.576A1.7,1.7,0,0,0,6.4-1.534,1.741,1.741,0,0,0,4.524-3.328,1.77,1.77,0,0,0,2.652-1.534,1.7,1.7,0,0,0,4.524.208Z' transform='translate(22 316)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.no-data-cell {
display: block;
color: #72777f;
font-style: italic;
text-align: center;
}

.responsive-table {
}
.responsive-table {
overflow-x: auto;
width: 100%;
margin-bottom: 1em;
}

table {
}
table {
border-collapse: collapse;
border-top: 1.5px solid #c0c0c0;
width: 100%;
}

table td,
th {
}
table td,
th {
padding: 1rem;
border: 1.5px solid #c0c0c0;
}

th,
td {
}
th,
td {
font-family: Arial, Helvetica, sans-serif;
padding: 15px;
border: 1.5px solid #c0c0c0;
}

th {
}
th {
background-color: #f2f2f2;
}

table tbody tr th {
}
table tbody tr th {
text-align: left;
}

table tbody tr td {
}
table tbody tr td {
padding: 20px;
text-align: center;
}

.meter {
}
.meter {
box-sizing: content-box;
height: 15px; /* Can be anything */
position: relative;
background: #c0c0c0;
border-radius: 25px;
margin-bottom: 10px;
overflow: hidden;
}

.meter > span {
}
.meter > span {
display: block;
height: 100%;
float: left;
background-color: #175a6a;
border-radius: 25px;
position: relative;
}

.button {
}
.button {
border: none;
padding: 10px 20px;
font-family: Arial, Helvetica, sans-serif;
Expand All @@ -167,56 +212,57 @@ table tbody tr td {
cursor: pointer;
border-radius: 3px;
border: 3px solid #175a6a;
}

#view-report-button {
}
#view-report-button {
color: white;
background-color: #175a6a;
margin-right: 6px;
}
#view-report-button:hover {
}
#view-report-button:hover {
background-color: #024e5c;
border-color: #024e5c;
}
#view-report-button:focus-visible {
}
#view-report-button:focus-visible {
margin-left: 4px;
padding: 0 8px 0 12px;
}
#embed-button {
}
#embed-button {
color: #175a6a;
background-color: white;
margin-left: 4px;
}
#embed-button:hover {
}
#embed-button:hover {
background-color: #f4f4f4;
}

#view-report-button,
#embed-button {
}
#view-report-button,
#embed-button {
margin-bottom: 1em;
padding: 0 12px;
line-height: 36px;
}
#view-report-button:focus-visible,
#embed-button:focus-visible {
}
#view-report-button:focus-visible,
#embed-button:focus-visible {
outline-offset: 2px;
outline: 2px solid #3a86d1;
}
#view-report-button svg,
#embed-button svg {
}
#view-report-button svg,
#embed-button svg {
width: 24px;
margin-right: 8px;
float: left;
position: relative;
top: 6px;
}

#embed-button-wrap {
}
#embed-button-wrap {
display: inline-block;
}

#copied-message {
}
#copied-message {
font-family: Arial, Helvetica, sans-serif;
margin: 5px;
display: inline-block;
}
}

2 changes: 1 addition & 1 deletion server/handlebars/embed/views/main.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{{#unless dataEmpty}}
{{#if (isCandidate phase)}}
<details id="embed-report-phase-container">
<summary id="candidate-title"><span>Warning! Unapproved Report</span></summary>
<summary id="candidate-title"><span><h4>Warning! Unapproved Report</h4></span></summary>
<div id="candidate-content-container">
The information in this report is generated from candidate tests developed and run by the <a href="http://aria-at.w3.org">ARIA-AT Project</a>.
Candidate ARIA-AT tests are in review by assistive technology developers and lack consensus regarding:
Expand Down

0 comments on commit b8cefcd

Please sign in to comment.