edward/owl-map
1
1
Fork 1
Code Issues 11 Pull requests 1 Packages Projects Releases Wiki Activity

Switch from visually-hidden to d-none CSS class

Browse source
This commit is contained in:
Edward Betts 2021-05-13 15:27:06 +02:00
parent 5be8499ee9
commit 66cff9a210
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
static/js/map.js
View file

@ -97,9 +97,9 @@ var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
osm.addTo(map); osm.addTo(map);
function load_complete() { function load_complete() {
loading.classList.add("visually-hidden"); loading.classList.add("d-none");
load_text.classList.remove("visually-hidden"); load_text.classList.remove("d-none");
detail_card.classList.add("visually-hidden"); detail_card.classList.add("d-none");
} }
function add_to_feature_group(qid, thing) { function add_to_feature_group(qid, thing) {
@ -229,7 +229,7 @@ function checkbox_change() {
function set_isa_list(isa_count_list) { function set_isa_list(isa_count_list) {
isa_count_list.sort((a, b) => b.count - a.count); 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"); var isa_list = document.getElementById("isa-list");
isa_list.innerHTML = ""; isa_list.innerHTML = "";
isa_count_list.forEach((isa) => { isa_count_list.forEach((isa) => {
@ -366,8 +366,8 @@ function mouse_events(marker, qid) {
}); });
marker.on("click", function () { marker.on("click", function () {
var wd_item = items[qid].wikidata; var wd_item = items[qid].wikidata;
isa_card.classList.add("visually-hidden"); isa_card.classList.add("d-none");
detail_card.classList.remove("visually-hidden"); detail_card.classList.remove("d-none");
detail_card.classList.add("bg-highlight"); detail_card.classList.add("bg-highlight");
close_item_details(); close_item_details();
@ -487,9 +487,9 @@ function load_wikidata_items() {
checkbox_change(); checkbox_change();
close_item_details(); close_item_details();
detail_card.classList.add("visually-hidden"); detail_card.classList.add("d-none");
loading.classList.remove("visually-hidden"); loading.classList.remove("d-none");
load_text.classList.add("visually-hidden"); load_text.classList.add("d-none");
var bounds = map.getBounds(); var bounds = map.getBounds();
@ -504,7 +504,7 @@ function load_wikidata_items() {
process_wikidata_items(response.data.items); process_wikidata_items(response.data.items);
wikidata_loaded = true; wikidata_loaded = true;
isa_card.classList.remove("visually-hidden"); isa_card.classList.remove("d-none");
update_wikidata(); update_wikidata();
}); });
@ -574,8 +574,8 @@ document.getElementById("search-form").onsubmit = function (e) {
}; };
function close_detail() { function close_detail() {
isa_card.classList.remove("visually-hidden"); isa_card.classList.remove("d-none");
detail_card.classList.add("visually-hidden"); detail_card.classList.add("d-none");
close_item_details(); close_item_details();
} }

6
templates/map.html
View file

@ -13,7 +13,7 @@
<div id="map"> <div id="map">
</div> </div>
<button id="load-btn" type="button" class="btn btn-primary btn-lg"> <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> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading ... Loading ...
</span> </span>
@ -36,7 +36,7 @@
</div> </div>
</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="card-body">
<div class="h5 card-title">item types</div> <div class="h5 card-title">item types</div>
<div><a href="#" id="show-all-isa">show all</a></div> <div><a href="#" id="show-all-isa">show all</a></div>
@ -45,7 +45,7 @@
</div> </div>
</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="card-body">
<div class="h4 card-title"> <div class="h4 card-title">
<span id="detail-header">item detail</span> <span id="detail-header">item detail</span>