things we should really do

1. move selection to [data-attributes] 1. mark up with BEM
CodeYourFuture · Dec 6, 2024 · 48ad3f9 · 48ad3f9
1 parent 6c19fba
commit 48ad3f9
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 48 deletions.
diff --git a/common-theme/assets/styles/states/problem.scss b/common-theme/assets/styles/states/problem.scss
@@ -0,0 +1,5 @@
+//use for warning alerts
+
+.is-problem {
+  font-weight: bolder;
+}
diff --git a/org-cyf-itp/assets/custom-scripts/reviews/index.mjs b/org-cyf-itp/assets/custom-scripts/reviews/index.mjs
@@ -85,7 +85,7 @@ async function onLoad() {
       );
       if (bucket) bucket.innerText = count;
       if (bucket && badness(age, count) === 900) {
-        bucket.classList.add("problem");
+        bucket.classList.add("is-problem");
       }
     }
     overviewCard

diff --git a/org-cyf-itp/assets/custom-theme/04-components/pr-overview.scss b/org-cyf-itp/assets/custom-theme/04-components/pr-overview.scss
@@ -10,32 +10,17 @@
   &__card {
     box-shadow: var(--theme-box-shadow--slim);
     padding: var(--theme-spacing--1);
+    display: grid;
+    gap: var(--theme-spacing--1);
   }
-}
-
-.e-dl {
-  display: grid;
-  grid-template-columns: max-content auto;
-}
-
-.e-dt {
-  grid-column-start: 1;
-}
-
-.e-dd {
-  grid-column-start: 2;
-}
-
-.age-container .count.problem {
-  font-weight: bolder;
-}
 
-.age-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
+  &__age {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    margin: auto 0 0;
+  }
 
-.age-container .age-bucket {
-  font-size: medium;
-  text-align: center;
+  &__bucket {
+    text-align: center;
+  }
 }
diff --git a/org-cyf-itp/layouts/_default/needs-review.html b/org-cyf-itp/layouts/_default/needs-review.html
@@ -12,28 +12,25 @@
   <template class="overview-card">
     <section class="c-pr-overview__card overview-card">
       <h3 class="c-pr-overview__module e-heading__5 module"></h3>
-      <div class="c-pr-overview__summary summary-heading">
-        <p class="c-pr-overview__description e-heading__6 ">
-          PRs needing review from:
-        </p>
-        <dl class="c-pr-overview__age age-container">
-          <div>
-            <dt class="c-pr-overview__bucket age-bucket this-week">🟢 &lt;7 days</dt>
-            <dd class="c-pr-overview__count count"></dd>
-          </div>
-          <div>
-            <dt class="c-pr-overview__bucket age-bucket this-month">
-              🟠 7-28 days
-            </dt>
-            <dd class="c-pr-overview__count count"></dd>
-          </div>
-          <div>
-            <dt class="c-pr-overview__count age-bucket old">🔴 28+ days</dt>
-            <dd class="c-pr-overview__count count"></dd>
-          </div>
-        </dl>
-        <div class="c-pr-overview__values summary-values"></div>
-      </div>
+      <p class="c-pr-overview__description e-heading__6 ">
+        PRs waiting, time in <strong>days</strong>:
+      </p>
+
+      <dl class="c-pr-overview__age age-container">
+        <div>
+          <dt class="c-pr-overview__bucket age-bucket this-week">🟢 &lt;7</dt>
+          <dd class="c-pr-overview__count count"></dd>
+        </div>
+        <div>
+          <dt class="c-pr-overview__bucket age-bucket this-month">🟠 7-28</dt>
+          <dd class="c-pr-overview__count count"></dd>
+        </div>
+        <div>
+          <dt class="c-pr-overview__count age-bucket old">🔴 28+</dt>
+          <dd class="c-pr-overview__count count"></dd>
+        </div>
+      </dl>
+      <div class="c-pr-overview__values summary-values"></div>
     </section>
   </template>