From 66cff9a2107d59037278ba768b3388a042b2eb40 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Thu, 13 May 2021 15:27:06 +0200
Subject: [PATCH] Switch from visually-hidden to d-none CSS class

---
 static/js/map.js   | 24 ++++++++++++------------
 templates/map.html |  6 +++---
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/static/js/map.js b/static/js/map.js
index aa47b20..e0de728 100644
--- a/static/js/map.js
+++ b/static/js/map.js
@@ -97,9 +97,9 @@ var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
 osm.addTo(map);
 
 function load_complete() {
-  loading.classList.add("visually-hidden");
-  load_text.classList.remove("visually-hidden");
-  detail_card.classList.add("visually-hidden");
+  loading.classList.add("d-none");
+  load_text.classList.remove("d-none");
+  detail_card.classList.add("d-none");
 }
 
 function add_to_feature_group(qid, thing) {
@@ -229,7 +229,7 @@ function checkbox_change() {
 function set_isa_list(isa_count_list) {
   isa_count_list.sort((a, b) => b.count - a.count);
 
-  isa_card.classList.remove("visually-hidden");
+  isa_card.classList.remove("d-none");
   var isa_list = document.getElementById("isa-list");
   isa_list.innerHTML = "";
   isa_count_list.forEach((isa) => {
@@ -366,8 +366,8 @@ function mouse_events(marker, qid) {
   });
   marker.on("click", function () {
     var wd_item = items[qid].wikidata;
-    isa_card.classList.add("visually-hidden");
-    detail_card.classList.remove("visually-hidden");
+    isa_card.classList.add("d-none");
+    detail_card.classList.remove("d-none");
     detail_card.classList.add("bg-highlight");
     close_item_details();
 
@@ -487,9 +487,9 @@ function load_wikidata_items() {
   checkbox_change();
 
   close_item_details();
-  detail_card.classList.add("visually-hidden");
-  loading.classList.remove("visually-hidden");
-  load_text.classList.add("visually-hidden");
+  detail_card.classList.add("d-none");
+  loading.classList.remove("d-none");
+  load_text.classList.add("d-none");
 
   var bounds = map.getBounds();
 
@@ -504,7 +504,7 @@ function load_wikidata_items() {
     process_wikidata_items(response.data.items);
 
     wikidata_loaded = true;
-    isa_card.classList.remove("visually-hidden");
+    isa_card.classList.remove("d-none");
     update_wikidata();
   });
 
@@ -574,8 +574,8 @@ document.getElementById("search-form").onsubmit = function (e) {
 };
 
 function close_detail() {
-  isa_card.classList.remove("visually-hidden");
-  detail_card.classList.add("visually-hidden");
+  isa_card.classList.remove("d-none");
+  detail_card.classList.add("d-none");
 
   close_item_details();
 }
diff --git a/templates/map.html b/templates/map.html
index 2edecd0..c742e88 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -13,7 +13,7 @@
     <div id="map">
     </div>
     <button id="load-btn" type="button" class="btn btn-primary btn-lg">
-      <span id="loading" class="visually-hidden">
+      <span id="loading" class="d-none">
       <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
       Loading ...
       </span>
@@ -36,7 +36,7 @@
         </div>
       </div>
 
-      <div class="card visually-hidden m-2" id="isa-card">
+      <div class="card d-none m-2" id="isa-card">
         <div class="card-body">
           <div class="h5 card-title">item types</div>
           <div><a href="#" id="show-all-isa">show all</a></div>
@@ -45,7 +45,7 @@
         </div>
       </div>
 
-      <div class="card visually-hidden m-2" id="detail-card">
+      <div class="card d-none m-2" id="detail-card">
         <div class="card-body">
           <div class="h4 card-title">
             <span id="detail-header">item detail</span>