ISTWCMS-7250: add role details (preliminary, waiting on final text)

css/uw_dashboard.css

@@ -15,3 +15,40 @@
   float: right;
   margin-bottom: 0.2rem;
 }
+
+.dashboard__site-info details {
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.dashboard__site-info summary {
+  cursor: help;
+  list-style: none;
+  border-bottom: 1px black dashed;
+  text-transform: none;
+  padding: 0;
+  font-weight: normal;
+}
+
+.dashboard__site-info .info {
+  position: absolute;
+  right: -1rem;
+  background: #f5f5f2;
+  margin-top: 3px;
+  padding: 10px;
+  width: 20ch;
+  z-index: 1;
+}
+
+.dashboard__site-info .info p {
+  margin: 0;
+}
+
+.dashboard__site-info .more {
+  text-align: right;
+  padding-top: 10px;
+  font-size: 90%;
+  text-wrap: balance;
+}

js/uw_dashboard.js

+document.addEventListener('click', function(event) {
+  const detailsElements = document.querySelectorAll('details[name="uw-roles"]');
+  detailsElements.forEach(details => {
+    if (!details.contains(event.target)) {
+      details.removeAttribute('open');
+    }
+  });
+});

uw_dashboard.libraries.yml

@@ -5,3 +5,5 @@ uw-styles:
   css:
     theme:
       css/uw_dashboard.css: {}
+  js:
+    js/uw_dashboard.js: {}

uw_dashboard.module

@@ -137,10 +137,17 @@ function uw_dashboard_preprocess_page(&$variables) {
     if (!$user_list) {
       $user_list[] = 'not set';
     }
-    $string .= ' • Website lead';
+    $string .= ' &bull; <details name="uw-roles"><summary>';
+    $string .= 'Website lead';
     if (count($user_list) > 1) {
       $string .= 's';
     }
+    $string .= '</summary>';
+    $string .= '<div class="info">
+      <p>Responsible for the holistic approach to the management and maintenance of a website.</p>
+      <p class="more"><a href="https://uwaterloo.ca/web-resources/website-lead/the-website-lead">more details on the website lead role</a></p>
+    </div>';
+    $string .= '</details>';
     $string .= ': ' . implode(', ', $user_list);
 
     // Get the site owner(s).
@@ -158,10 +165,17 @@ function uw_dashboard_preprocess_page(&$variables) {
     if (!$user_list) {
       $user_list[] = 'not set';
     }
-    $string .= ' &bull; Site owner';
+    $string .= ' &bull; <details name="uw-roles"><summary>';
+    $string .= 'Site owner';
     if (count($user_list) > 1) {
       $string .= 's';
     }
+    $string .= '</summary>';
+    $string .= ' <div class="info">
+      <p>Manages site user access and configures certain site settings.</p>
+      <p class="more"><a href="https://uwaterloo.ca/web-resources/website-lead/site-owner-role">more details on the site owner role</a></p>
+    </div>';
+    $string .= '</details>';
     $string .= ': ' . implode(', ', $user_list);
 
     // Get the site owner(s).