Merge pull request #23 from cagov/jbum-table-fix

Modified markup and styling for Run-of-show table.
cagov · Jan 3, 2024 · 652eee3 · 652eee3
2 parents c1c7485 + eb08008
commit 652eee3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 11 deletions.
diff --git a/docs/pages/human-centered-design/innovation-skills-accelerator.md b/docs/pages/human-centered-design/innovation-skills-accelerator.md
@@ -16,6 +16,6 @@ headericon: ribbon
 
 State of California staff can take the Accelerator for free. Just sign up with your ca.gov email address.
 
-<a class="btn-primary featured-btn external-link" href="http://innovate-us.org/"><span>Sign up for the Accelerator</span></a>
+<a class="btn-primary featured-btn external-link" href="http://innovate-us.org/" target="_blank"><span>Sign up for the Accelerator</span></a>
 
 Note: Clicking this link will take you from the Innovation Hub to innovate-us.org. This is not a state website. Be mindful of the information you provide while using that website. Their terms of use apply to any information you share with them.
diff --git a/docs/pages/product-management/run-of-show.md b/docs/pages/product-management/run-of-show.md
@@ -26,12 +26,40 @@ Here’s an example of what a run-of-show for updating license fees might look l
 The headings provide guidance on what goes in each row. We’ve provided 3 example rows to give a sense of what a run-of-show looks like in practice.
 
 <div class="runofshow-table">
-
-| **Task** | **Date and time** | **Page** | **Responsible** | **Approver** | **Notes and questions** | **Status** |
-| ----- | ----- | ----- | ----- | ----- | ----- | ----- |
-| *Describe the work to be done* | *Kept in strict, accurate sequence* | *Can be a URL or other identifier* | *The person who will do this* | *The person who has final approval* | *As needed* | *Varies with project* |
-| Update fee schedule | May 28, 10:00 AM | department.ca.gov/license-fees/ | Paz | Abida | Double check before final publishing | Done |
-| Post media release | May 29, 9:30 AM | Blog post: Department updates license fees | Chris | Huyhn | Make sure Comms sees staged version first | In staging |
-| Data load into backend system | May 29, 1:30 PM | Data warehouse | Miles | Elena |  | In progress |
-
+<table>
+<thead>
+<tr>
+  <th><div class="title">Task</div><div class="description">Describe the work to be done</div></th>
+  <th><div class="title">Date and time</div><div class="description">Kept in strict, accurate sequence</div></th>
+  <th><div class="title">Page</div><div class="description">Can be a URL or other identifier</div></th>
+  <th><div class="title">Responsible</div><div class="description">The person who will do this</div></th>
+  <th><div class="title">Approver</div><div class="description">The person who has final approval</div></th>
+  <th><div class="title">Notes and questions</div><div class="description">As needed</div></th>
+  <th><div class="title">Status</div><div class="description">Varies with project</div></th>
+</tr>
+</thead>
+<tbody>
+  <tr><td>Update fee schedule</td>
+    <td>May 28, 10:00 AM</td>
+    <td>department.ca.gov/license-fees/</td>
+    <td>Paz</td>
+    <td>Abida</td>
+    <td>Double check before final publishing</td>
+    <td>Done</td></tr>
+  <tr><td>Post media release</td>
+    <td>May 29, 9:30 AM</td>
+    <td>Blog post: Department updates license fees</td>
+    <td>Chris</td>
+    <td>Huyhn</td>
+    <td>Make sure Comms sees staged version first</td>
+    <td>In staging</td></tr>
+  <tr><td>Data load into backend system</td>
+    <td>May 29, 1:30 PM</td>
+    <td>Data warehouse</td>
+    <td>Miles</td>
+    <td>Elena</td>
+    <td></td>
+    <td>In progress</td></tr>
+</tbody>
+</table>
 </div>
diff --git a/docs/src/css/sass/ds-site-overrides.scss b/docs/src/css/sass/ds-site-overrides.scss
@@ -119,20 +119,31 @@ div.twocolumn-table {
 
 div.runofshow-table {
     table {
+        border-collapse: collapse; 
+        table-layout: fixed;
+        width: 100%;
         thead {
             background-color: #FAFAFA;
             th {
                 border: 1px solid #C7D6E4;
-                width: 26%;
                 font-size: 18px;
+                font-weight: 700;
+                padding: 16px;
+                vertical-align: top;
+                div.description {
+                    padding-top: 8px;
+                    font-size: 14px;
+                    font-weight: 400;
+                }
             }
         }
         tbody {
             background-color: white;
             td {
+                padding: 16px;
                 font-size: 14px;
                 border: 1px solid #C7D6E4;
-                width: 26%;
+                border-collapse: collapse; 
             }
         }
     }