Merge pull request #681 from equalizedigital/william/no-issue/tweak-s…

…ummary-panels-to-be-all-li-items-and-use-css-grid Wrap the summary items inside only a ul and li items (removing a div)
equalizedigital · Jun 25, 2024 · efc2144 · efc2144
2 parents c8b0265 + c76a7a6
commit efc2144
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/admin/class-ajax.php b/admin/class-ajax.php
@@ -100,8 +100,8 @@ public function summary() {
 			}
 		}
 
-		$html['content'] .= '<ul>';
-		
+		$html['content'] .= '<ul class="edac-summary-grid">';
+
 			$html['content'] .= '<li class="edac-summary-total" aria-label="' . $summary['passed_tests'] . '% Passed Tests">';
 
 				$html['content'] .= '<div class="edac-summary-total-progress-circle ' . ( ( $summary['passed_tests'] > 50 ) ? ' over50' : '' ) . '">
@@ -123,7 +123,7 @@ public function summary() {
 
 			$html['content'] .= '</li>';
 
-			$html['content'] .= '<div class="edac-summary-stats">
+			$html['content'] .= '
 				' . edac_generate_summary_stat(
 				'edac-summary-errors',
 				$summary['errors'],
@@ -148,7 +148,7 @@ public function summary() {
 				/* translators: %s: Number of ignored items */
 					sprintf( _n( '%s Ignored Item', '%s Ignored Items', $summary['ignored'], 'accessibility-checker' ), $summary['ignored'] )
 			) . '
-			</div>
+
 		</ul>
 		<div class="edac-summary-readability">
 			<div class="edac-summary-readability-level">

diff --git a/src/admin/sass/accessibility-checker-admin.scss b/src/admin/sass/accessibility-checker-admin.scss
@@ -138,6 +138,31 @@
     }
 
     .edac-summary {
+
+      &-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 10px;
+
+        @include breakpoint(lg) {
+          grid-template-columns: 2fr 1.5fr 1.5fr;
+        }
+
+        > li {
+          margin: 0;
+
+          &:first-child {
+            grid-column: span 2;
+            grid-row: span 2;
+            display: flex;
+
+            @include breakpoint(lg) {
+              grid-column: span 1;
+            }
+          }
+        }
+      }
+
       &-notice {
         background-color: $color-gray-lightest;
         box-shadow: inset 0px 0px 0px 1px $color-gray-light;
@@ -148,11 +173,8 @@
       }
 
       &-total {
-        width: 100%;
         background-color: $color-gray-lightest;
         box-shadow: inset 0px 0px 0px 1px $color-gray-light;
-        float: left;
-        margin-bottom: 20px;
         padding: 15px;
         text-align: center;
         $progress-circle-size: 250px;
@@ -162,17 +184,8 @@
           padding: 25px;
         }
 
-        @include breakpoint(lg) {
-          padding: 50px 15px;
-          width: calc(50% - 15px);
-        }
-
-        @include breakpoint(xl) {
-          padding: 50px 25px;
-          width: calc(40% - 15px);
-        }
-
         &-mobile {
+		  width: 100%;
           color: $color-dark-gray;
 
           @include breakpoint(xs) {
@@ -196,6 +209,8 @@
         }
 
         &-progress-circle {
+		  margin: auto;
+
           font-size: 20px;
           position: relative;
           padding: 0;
@@ -316,10 +331,7 @@
       }
 
       &-stat {
-        width: 100%;
         height: 125px;
-        float: left;
-        margin: 0px 12px 12px 0;
         padding-top: 25px;
         background-position: 10px 10px;
         background-repeat: no-repeat;
@@ -328,7 +340,6 @@
         @include breakpoint(xs) {
           padding-top: 50px;
           height: 175px;
-          width: calc(50% - 6px);
         }
 
         &:nth-child(2),