Merge pull request #209 from OHSUCMP/clickable-alert

#208: Make the OMRON sync alert box clickable.
OHSUCMP · May 16, 2024 · 442bbbb · 442bbbb
2 parents 81a94c8 + 386480c
commit 442bbbb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
@@ -140,3 +140,7 @@ img.bp-icon {
     background-color: #d5f8f4;
 }
 
+.alert-clickable:hover {
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+  }
+
diff --git a/src/main/resources/static/js/home.js b/src/main/resources/static/js/home.js
@@ -113,8 +113,8 @@ function populateOmronStatus(data) {
 
         } else if (data.status === 'READY') {
             let omronAuthRequestUrl = $('#omronAuthRequestUrl').html();
-            html += '<div class="alert alert-warning" role="alert"><span id="omronAuthLink" class="link" data-target="' +
-                omronAuthRequestUrl + '">Click here</span> to authenticate and synchronize with Omron.</div>';
+            html += '<div id="omronAuthLink" class="alert alert-warning alert-clickable" role="alert" data-target="' + omronAuthRequestUrl + 
+                '"><span class="link" >Click here</span> to authenticate and synchronize with Omron.</div>';
             if (data.lastUpdated !== null) {
                 html += '<div class="alert alert-teal" role="alert">Omron data last synchronized <em>' + data.lastUpdatedString + '</em>.</div>';
             }

diff --git a/src/main/resources/templates/home.mustache b/src/main/resources/templates/home.mustache
@@ -147,8 +147,8 @@
         </div>
         <div id="omron">
             {{#omronAuthRequestUrl}}
-                <div class="alert alert-warning" role="alert">
-                    <span id="omronAuthLink" class="link" data-target="{{omronAuthRequestUrl}}">Click here</span> to authenticate and synchronize with Omron.
+                <div id="omronAuthLink" class="alert alert-warning alert-clickable" data-target="{{omronAuthRequestUrl}}" role="alert">
+                    <span class="link">Click here</span> to authenticate and synchronize with Omron.
                 </div>
             {{/omronAuthRequestUrl}}
             {{#omronSynchronizing}}