Feature/UI fixes 11202024 (#624)

* Add browser not supported message for google maps * Add hover effects to edit links and pagy buttons
TelosLabs · Nov 23, 2024 · 6075628 · 6075628
1 parent 0b19b4b
commit 6075628
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/app/javascript/controllers/places_controller.js b/app/javascript/controllers/places_controller.js
@@ -27,6 +27,8 @@ export default class extends Controller {
 
     if (typeof(google) != "undefined") {
       this.initMap()
+    } else {
+      this.displayBrowserNotSupportedMessage()
     }
     const pagyFrame = document.getElementById("pagy")
 
@@ -38,6 +40,18 @@ export default class extends Controller {
     }
   }
 
+  displayBrowserNotSupportedMessage() {
+    const mapContainer = this.mapTarget;
+    if (mapContainer) {
+      mapContainer.innerHTML = `
+        <div style='text-align: center; padding: 20px;'>
+          <p>It looks like your browser is not supported for displaying the map.</p>
+          <p>Please update your browser to the latest version or try using a different browser for the best experience.</p>
+        </div>
+      `;
+    }
+  }
+
   initialize() {
     this.markersArray = []
     this.mapMarkers = []

diff --git a/app/views/my_accounts/show.html.slim b/app/views/my_accounts/show.html.slim
@@ -32,7 +32,7 @@ div class="w-full h-full bg-white"
               div class="flex flex-row col-span-12 justify-between"
                 span class="text-sm font-medium text-grey-4"
                   | Password
-                button class="text-blue-medium" type="button" data-action=("click->toggle#toggle touch->toggle#toggle")
+                button class="text-blue-medium hover:text-blue-dark" type="button" data-action=("click->toggle#toggle touch->toggle#toggle")
                   | Edit
 
               div class="grid hidden grid-cols-12 col-span-12 gap-6" data-toggle-target="toggleable menu"
@@ -97,7 +97,7 @@ div class="w-full h-full bg-white"
                     div class="flex flex-row justify-between w-full"
                       span class="text-lg font-bold text-black capitalize"
                         | #{alert.decorate.title(index)}
-                      = link_to "Edit", edit_alert_path(alert), class: "text-blue-medium", data: { turbo_stream: true }
+                      = link_to "Edit", edit_alert_path(alert), class: "text-blue-medium hover:text-blue-dark", data: { turbo_stream: true }
                     div class="flex flex-row text-sm font-normal text-gray-2"
                       | #{list_all_filters(alert).join(', ')}
             - else
@@ -122,7 +122,7 @@ div class="w-full h-full bg-white"
                         | #{organization.name}
                         - if organization.verified?
                           = render "shared/popover", copy: "Information verified by nonprofit.", wrapper_icon: "verified_nonprofit_check.svg"
-                      = link_to "Edit", edit_organization_path(organization), class:"text-blue-medium"
+                      = link_to "Edit", edit_organization_path(organization), class:"text-blue-medium hover:text-blue-dark"
 
             - else
               div class="flex justify-center my-16 w-full"

diff --git a/app/views/pagy/_nav.html.slim b/app/views/pagy/_nav.html.slim
@@ -1,10 +1,10 @@
 nav class="flex gap-4 justify-center my-5" role="navigation" aria-label="pager"
   - pagy.series.each do |item|        # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)          # page link
-      a class="px-3 py-1 text-sm font-extrabold leading-6 cursor-pointer rounded-6px text-gray-3 bg-gray-7" href="#{pagy_url_for(pagy, item)}" ==> item
+      a class="px-3 py-1 text-sm font-extrabold leading-6 transition cursor-pointer rounded-6px text-gray-3 bg-gray-7 hover:bg-gray-4" href="#{pagy_url_for(pagy, item)}" ==> item
 
     - elsif item.is_a?(String)        # current page
-      span class="px-3 py-1 text-sm font-extrabold leading-6 text-white cursor-pointer rounded-6px bg-blue-dark" ==> item
+      span class="px-3 py-1 text-sm font-extrabold leading-6 text-white transition cursor-pointer hover:bg-blue-medium rounded-6px bg-blue-dark" ==> item
 
     - elsif item == :gap              # page gap
       span class="px-3 py-1 text-sm font-extrabold leading-6 rounded-6px text-gray-3 bg-gray-7" ==> pagy_t('pagy.nav.gap')