diff --git a/src/assets/js/map.js b/src/assets/js/map.js index 1f89fed..8eb7f33 100644 --- a/src/assets/js/map.js +++ b/src/assets/js/map.js @@ -656,7 +656,7 @@ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce) .html(function() { if (countryCount[d.id]) return numbersWithSpace(countryCount[d.id].length) + " artists, " + numbersWithSpace(getCountryPlaycount(d)) + " scrobbles" - else return "No artists yet - Find new here ->" + else return "No artists yet - Find new here ->" }) let pl = countryPlaylists.find(c => c.name === name); diff --git a/src/assets/js/script.js b/src/assets/js/script.js index 74dcec1..995988c 100644 --- a/src/assets/js/script.js +++ b/src/assets/js/script.js @@ -69,6 +69,10 @@ var countryCountObj = {}; // If you just checked and the filter is on, remove the artist from the DOM if (checked && document.querySelector("#hide-checked")?.checked) { this.parentNode.style.display = 'none'; + let nextCheckbox = this.parentNode.nextElementSibling.querySelector('input'); + if (nextCheckbox) { + nextCheckbox.focus(); + } } // get the label element for the filter checked checkbox let filterCheckedLabel = document.querySelector("label[for='hide-checked']"); @@ -158,6 +162,12 @@ var countryCountObj = {}; dialog.close(); document.querySelector(".no-countries__title").focus(); }); + const dialog = document.querySelector(".no-countries__content"); + dialog.addEventListener("click", function (event) { + if (event.target === dialog) { + dialog.close(); + } + }); if (listOfArtistsWithNoCountry.length) { setTimeout(function () { diff --git a/src/assets/scss/pages/_map.scss b/src/assets/scss/pages/_map.scss index 4f0a094..26a9918 100644 --- a/src/assets/scss/pages/_map.scss +++ b/src/assets/scss/pages/_map.scss @@ -260,8 +260,8 @@ div.colorChange { &__title { position: absolute; left: 3%; - bottom: 240px; - font-size: 0.8em; + bottom: 225px; + font-size: 14px; margin-bottom: 0.3em; font-family: $heading-font-stack; font-weight: 400; @@ -289,8 +289,8 @@ dialog { &[open] { opacity: 1; background-color: var(--backgroundSecondary); - border: 2px solid var(--borderSecondary); - border-radius: 8px; + border: 5px solid var(--borderSecondary); + border-radius: 30px; margin: auto; max-height: 80%; position: fixed; @@ -335,6 +335,10 @@ dialog { margin: 0; line-height: 1.1em; } + h2 { + font-size: 1rem; + font-family: $heading-font-stack; + } li { list-style: none; diff --git a/src/assets/scss/pages/_zoomed.scss b/src/assets/scss/pages/_zoomed.scss index 9468b8b..f78b549 100644 --- a/src/assets/scss/pages/_zoomed.scss +++ b/src/assets/scss/pages/_zoomed.scss @@ -13,7 +13,6 @@ height: 150px; position: absolute; top: 7.5%; - border-top: 1px solid var(--borderSecondary); z-index: 4; opacity: 0; display: flex; @@ -82,10 +81,11 @@ .artistContainer { //Main container for artist information, recommendations and details margin-right: 6%; - padding: 8px 16px; - border-radius: 0 0 8px 8px; + padding: 8px 24px; + border-radius: 20px; width: 592px; display: block; + border: 5px solid var(--borderSecondary); background: var(--backgroundPrimary); position: relative; height: fit-content; @@ -97,6 +97,8 @@ color: inherit; font-family: $heading-font-stack; font-weight: 400; + margin-bottom: 0.5rem; + margin-top: 0.75rem; } p { @@ -169,6 +171,7 @@ color: inherit; cursor: pointer; transition: 0.1s; + box-shadow: rgba(0,0,0,.1) 0 2px 12px 0; // button resets border: none; background: none; diff --git a/src/index.html b/src/index.html index c6253e2..b2d173e 100644 --- a/src/index.html +++ b/src/index.html @@ -253,7 +253,6 @@
Protip: Use the checkboxes to track your progress!
- +