From 252d39390f978b1adbf5d6bcda16883c97084b36 Mon Sep 17 00:00:00 2001 From: Hans5958 Date: Thu, 28 Apr 2022 18:30:18 +0700 Subject: [PATCH] Convert svgs to font icons, use aria-hidden, add icons on links --- web/_css/style.css | 2 +- web/_js/draw.js | 18 +++++++-------- web/_js/infoblock.js | 13 ++++++----- web/about.html | 4 +--- web/index.html | 52 +++++++++++++++----------------------------- 5 files changed, 36 insertions(+), 53 deletions(-) diff --git a/web/_css/style.css b/web/_css/style.css index c16f5335..8ef30d26 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -28,7 +28,7 @@ html, body { width: 100%; } -svg.bi { +svg.icon { display: inline-block; vertical-align: -.125em; } diff --git a/web/_js/draw.js b/web/_js/draw.js index a40ee892..f734312e 100644 --- a/web/_js/draw.js +++ b/web/_js/draw.js @@ -480,7 +480,7 @@ function initDraw() { } inputButton.className = "btn btn-outline-secondary"; inputButton.title = "Remove " + name; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; console.log(array); if (name == "website") { addWebsiteFields(null, array.length, array); @@ -524,12 +524,12 @@ function initDraw() { if (array.length == index + 1) { inputButton.className = "btn btn-secondary"; inputButton.title = "Add website"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, websiteGroupElements, index, "website")); } else { inputButton.className = "btn btn-outline-secondary"; inputButton.title = "Remove website"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index)); } inputGroup.appendChild(inputButton); @@ -571,12 +571,12 @@ function initDraw() { if (array.length == index + 1) { inputButton.className = "btn btn-secondary"; inputButton.title = "Add subreddit"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, subredditGroupElements, index, "subreddit")); } else { inputButton.className = "btn btn-outline-secondary"; inputButton.title = "Remove subreddit"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index)); } inputGroup.appendChild(inputButton); @@ -611,12 +611,12 @@ function initDraw() { if (array.length == index + 1) { inputButton.className = "btn btn-secondary"; inputButton.title = "Add Discord invite"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, discordGroupElements, index, "Discord invite")); } else { inputButton.className = "btn btn-outline-secondary"; inputButton.title = "Remove Discord invite"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index)); } inputGroup.appendChild(inputButton); @@ -644,12 +644,12 @@ function initDraw() { if (array.length == index + 1) { inputButton.className = "btn btn-secondary"; inputButton.title = "Add wiki page"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => addFieldButton(inputButton, inputGroup, wikiGroupElements, index, "wiki page")); } else { inputButton.className = "btn btn-outline-secondary"; inputButton.title = "Remove wiki page"; - inputButton.innerHTML = ''; + inputButton.innerHTML = ''; inputButton.addEventListener('click', () => removeFieldButton(inputGroup, array, index)); } inputGroup.appendChild(inputButton); diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js index 2bd048d9..8cd2319b 100644 --- a/web/_js/infoblock.js +++ b/web/_js/infoblock.js @@ -44,7 +44,7 @@ function createInfoBlock(entry) { linkNameElement.textContent = entry.name; headerElement.appendChild(linkElement); linkElement.appendChild(linkNameElement); - linkElement.insertAdjacentHTML("beforeend", '');// ''); + linkElement.insertAdjacentHTML("beforeend", '');// ''); element.appendChild(headerElement); const bodyElement = document.createElement("div"); @@ -101,7 +101,7 @@ function createInfoBlock(entry) { subredditLinkElement.target = "_blank"; subredditLinkElement.rel = "noopener noreferrer"; subredditLinkElement.href = "https://reddit.com/" + subreddit; - subredditLinkElement.textContent = subreddit; + subredditLinkElement.innerHTML = ` ${subreddit}`; subredditGroupElement.appendChild(subredditLinkElement); } }); @@ -119,7 +119,7 @@ function createInfoBlock(entry) { websiteLinkElement.target = "_blank"; websiteLinkElement.rel = "noopener noreferrer"; websiteLinkElement.href = link; - websiteLinkElement.textContent = "Website"; + websiteLinkElement.innerHTML = ` Website`; websiteGroupElement.appendChild(websiteLinkElement); } }); @@ -134,8 +134,9 @@ function createInfoBlock(entry) { if (link) { const discordLinkElement = document.createElement("a"); discordLinkElement.target = "_blank"; + wikiLinkElement.rel = "noopener noreferrer"; discordLinkElement.href = "https://discord.gg/" + link; - discordLinkElement.textContent = "Discord"; + discordLinkElement.innerHTML = ` ${link}`; discordGroupElement.appendChild(discordLinkElement); } }); @@ -150,9 +151,9 @@ function createInfoBlock(entry) { if (link) { const wikiLinkElement = document.createElement("a"); wikiLinkElement.target = "_blank"; - websiteLinkElement.rel = "noopener noreferrer"; + wikiLinkElement.rel = "noopener noreferrer"; wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_'); - wikiLinkElement.textContent = "Wiki Article"; + wikiLinkElement.innerHTML = ` Wiki Article`; wikiGroupElement.appendChild(wikiLinkElement); } }); diff --git a/web/about.html b/web/about.html index effecbd4..1545728f 100644 --- a/web/about.html +++ b/web/about.html @@ -46,9 +46,7 @@ The 2022 r/place Atlas