replace article by section

zonemaster · Dec 7, 2023 · b2b01af · b2b01af
1 parent b2f65a6
commit b2b01af
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 40 deletions.
diff --git a/src/app/components/result/result.component.css b/src/app/components/result/result.component.css
@@ -19,47 +19,47 @@
   }
 }
 
-.result article header.info {
+.result section.testcase header.info {
   color: var(--result-info-color);
 }
 
-.result article header.notice {
+.result section.testcase header.notice {
   color: var(--result-notice-color);
 }
 
-.result article header.warning {
+.result section.testcase header.warning {
   color: var(--result-warning-color);
 }
 
-.result article header.error {
+.result section.testcase header.error {
   color: var(--result-error-color);
 }
 
-.result article header.critical {
+.result section.testcase header.critical {
   color: var(--result-critical-color);
 }
 
-.result article header button > i.fa {
+.result section.testcase header button > i.fa {
   margin-right: 3rem;
   margin-top: 0.1rem;
   width: 1rem;
 }
 
-.result article h4 {
+.result section.testcase h4 {
   font-size: 1.1rem;
   display: inline-block;
   margin: 0;
 }
 
-.result article h4 .testcase-name i {
+.result section.testcase h4 .testcase-name i {
   width: 1rem;
   display: inline-block;
   text-align: center;
   margin-left: -1.3rem ;
   margin-right: 0.3rem;
 }
 
-.result article h4 button {
+.result section.testcase h4 button {
   background: none;
   border: none;
   color: inherit;
@@ -68,17 +68,17 @@
   display: flex;
 }
 
-.result article header  {
+.result section.testcase header {
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
 }
 
-.result article header h4 {
+.result section.testcase header h4 {
   display: flex;
   cursor: pointer;
   margin: 0.25rem 0;
 }
-.result article header .test-case-id {
+.result section.testcase header .test-case-id {
   display: inline-block;
   background-color: #d3eeff;
   color: #555454;
@@ -88,7 +88,7 @@
   white-space: nowrap;
 }
 
-.result article ul li .level {
+.result section.testcase ul li .level {
   display: inline;
   padding: 0.2em 0.3em;
   border-radius: 0.3em;
@@ -119,65 +119,65 @@
 
 .result .badge.info,
 .result .filters .active.info,
-.result article ul li .level.info {
+.result section.testcase ul li .level.info {
   background-color: var(--result-info-bg);
   color: white;
 }
 
 .result .badge.notice,
 .result .filters .active.notice,
-.result article ul li .level.notice {
+.result section.testcase ul li .level.notice {
   background: var(--result-notice-bg);
   color: white;
 }
 
 .result .badge.warning,
 .result .filters .active.warning,
-article ul li .level.warning {
+.result section.testcase ul li .level.warning {
   background: var(--result-warning-bg);
   color: black;
 }
 
 .result .badge.error,
 .result .filters .active.error,
-.result article ul li .level.error {
+.result section.testcase ul li .level.error {
   background: var(--result-error-bg);;
   color: white;
 }
 
 .result .badge.critical,
 .result .filters .active.critical,
-.result article ul li .level.critical {
+.result section.testcase ul li .level.critical {
   background: var(--result-critical-bg);;
   color: white;
 }
 
-.result article li {
+.result section.testcase li {
   list-style: none;
   display: flex;
   margin-bottom: .2em;
 }
 
-.result article li p {
+.result section.testcase li p {
   word-break: normal;
   overflow-wrap: anywhere;
   margin: 0;
 }
 
-.result article ul {
-  padding-left: 4em;
+.result section.testcase ul {
+  padding-left: 3.7em;
   margin-bottom: .8em;
 }
 
 .result .collapsed {
   display: none!important;
 }
 
-.result article h3 {
+.result section.module h3 {
   margin-bottom: 0;
   font-size: 1.4rem;
 }
-.result article h3 button {
+.result section.module h3 button {
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -188,35 +188,35 @@ article ul li .level.warning {
   color: inherit;
 }
 
-.result article h3 .module-name {
+.result section.module h3 .module-name {
   margin-right: 1rem;
 }
 
-.result article h3 .badge {
+.result section.module h3 .badge {
   margin-right: 0.5rem;
   font-size: .6em;
 }
 
-.result article h3 .badge i {
+.result section.module h3 .badge i {
   width: 1em;
 }
 
-.result article.expanded h3 {
+.result section.module.expanded h3 {
   margin-bottom: 0.5rem;
 }
 
-.result article h3 i.caret {
+.result section.module h3 i.caret {
   transform: rotate(0);
   transition: 0.1s transform;
   display: inline-block;
   width: 1em;
 }
 
-.result article.expanded h3 i.caret {
+.result section.module.expanded h3 i.caret {
   transform: rotate(90deg);
 }
 
-.result section.details > article {
+.result section.details > section.module {
   background: #f7f7f7;
   padding: 0.5rem;
   margin-bottom: 1rem;
@@ -372,20 +372,20 @@ article ul li .level.warning {
     display: flex!important;
   }
 
-  .result article header {
+  .result section.testcase header {
     flex-direction: column;
   }
 
-  .result article header .test-case-id {
+  .result section.testcase header .test-case-id {
     margin-left: 1.2rem;
     margin-bottom: .75rem;
   }
 
-  .result article header button > i.fa {
+  .result section.testcase header button > i.fa {
     margin-right: 1.5rem;
   }
 
-  .result article ul {
+  .result section.testcase ul {
     padding-left: 1.2em;
   }
 }

diff --git a/src/app/components/result/result.component.html b/src/app/components/result/result.component.html
@@ -164,7 +164,7 @@ <h2><ng-container i18n="result subheader">Test result for</ng-container>&nbsp;<s
   </div>
 
   <section class="mt-3 details">
-    <article *ngFor="let module of modules" [class.expanded]="!isCollapsed[module.name]">
+    <section class="module" *ngFor="let module of modules" [class.expanded]="!isCollapsed[module.name]">
       <h3>
           <button
             type="button"
@@ -187,7 +187,7 @@ <h3>
           </button>
       </h3>
       <div id="module-{{ module.name }}" role="region" [attr.aria-labelledby]="'control-module-' + module.name">
-        <article *ngFor="let testcase of module.testcases" [class.collapsed]="isCollapsed[module.name]">
+        <section class="testcase" *ngFor="let testcase of module.testcases" [class.collapsed]="isCollapsed[module.name]">
           <header class="{{testcase.level}}" *ngIf="testcase.id != 'UNSPECIFIED'">
             <h4>
               <button
@@ -213,9 +213,9 @@ <h4>
               <li *ngFor="let entry of testcase.entries"><div><span class="level {{entry.level|lowercase}}">{{entry.level | titlecase}}</span></div><p> {{entry.message}} </p></li>
             </ul>
           </div>
-        </article>
+        </section>
       </div>
-    </article>
+    </section>
   </section>
 </section>