From edcd856d27a0bf5b35a61a0cdedc652d6a69534b Mon Sep 17 00:00:00 2001
From: Arkerthan <arkerthan@mailbox.org>
Date: Fri, 1 Mar 2024 22:29:07 +0100
Subject: [PATCH] quicklinks: HTML/CSS improvements
---
css/gui/quicklinks.css | 34 ++++++++++++++++++----------------
src/gui/quicklinks.js | 12 ++++++------
src/gui/storyCaption.js | 2 +-
themes/Twilight/quicklinks.css | 10 +++++-----
themes/light/quicklinks.css | 10 +++++-----
5 files changed, 35 insertions(+), 33 deletions(-)
diff --git a/css/gui/quicklinks.css b/css/gui/quicklinks.css
index 2392e4dd537..8026a69ecdc 100644
--- a/css/gui/quicklinks.css
+++ b/css/gui/quicklinks.css
@@ -1,40 +1,42 @@
-div.quick-links {
+.quick-links {
/* Give quick links as much space as possible, any more and it start looking wrong. */
- margin: 0 -7px;
- /* the last menu link has a bottom outline, make enough space for it */
- margin-bottom: 2px;
+ margin-right: -7px;
+ margin-left: -7px;
}
-div.quick-links div.toggle {
+.quick-links .toggle {
position: relative; /* so ::before/::after works in relation to this element */
background-color: #444444;
- cursor: pointer;
+ border: none;
+ width: 100%;
+ padding: 0;
+ line-height: unset;
}
-div.quick-links div.toggle:hover {
+.quick-links .toggle:hover {
background-color: #5f5f5f;
}
-div.quick-links div.toggle::before {
+.quick-links .toggle::before {
font-family: "tme-fa-icons";
position: absolute;
left: 5px;
content: "\e818";
}
-div.quick-links div.collapsed div.toggle::before {
+.quick-links div.collapsed .toggle::before {
content: "\e81a";
}
-div.quick-links div.content {
+.quick-links div.content {
margin: 0 5px;
}
-div.quick-links div.collapsed div.content {
+.quick-links div.collapsed div.content {
display: none
}
-div.quick-links div.menu-link {
+.quick-links div.menu-link {
background-color: #2b2b2b;
border: solid #3c3c3c;
border-width: 0 2px;
@@ -46,15 +48,15 @@ div.quick-links div.menu-link {
position: relative;
}
-div.quick-links > div.menu-link:first-child, /* give the very first link an upper border */
-div.quick-links div:not(.menu-link):not(.collapsed) + div.menu-link /* give the link directly after an opened toggle an upper border */
+.quick-links > div.menu-link:first-child, /* give the very first link an upper border */
+.quick-links div:not(.menu-link):not(.collapsed) + div.menu-link /* give the link directly after an opened toggle an upper border */
{
border-top-width: 2px;
}
/* notification */
-div.quick-links div.notification:not(.category)::after /* notification for entry */,
-div.quick-links div.category.notification.collapsed > div.toggle::after /* notification for category, disable when uncollapsed */
+.quick-links div.notification:not(.category)::after /* notification for entry */,
+.quick-links div.category.notification.collapsed > .toggle::after /* notification for category, disable when not collapsed */
{
font-family: "tme-fa-icons";
position: absolute;
diff --git a/src/gui/quicklinks.js b/src/gui/quicklinks.js
index ed027f5d1bf..b845b47ec6c 100644
--- a/src/gui/quicklinks.js
+++ b/src/gui/quicklinks.js
@@ -340,8 +340,8 @@ App.UI.quickMenu = (function() {
currentPassage = null;
notificationPassages = [];
- const div = document.createElement("div");
- div.classList.add("quick-links");
+ const p = document.createElement("p");
+ p.classList.add("quick-links");
try {
// quick menu
@@ -355,7 +355,7 @@ App.UI.quickMenu = (function() {
}
addBackLink(links);
- div.append(...links);
+ p.append(...links);
// traverse from current passage up to expand.
if (currentPassage !== null) {
@@ -376,10 +376,10 @@ App.UI.quickMenu = (function() {
}
} catch (e) {
console.error(e);
- div.append("Quick Links generation failed. Please run ", App.UI.DOM.passageLink("Backwards Compatibility", "Backwards Compatibility"));
+ p.append("Quick Links generation failed. Please run ", App.UI.DOM.passageLink("Backwards Compatibility", "Backwards Compatibility"));
}
- return div;
+ return p;
}
/**
@@ -414,7 +414,7 @@ App.UI.quickMenu = (function() {
// category is empty
return;
}
- const toggle = document.createElement("div");
+ const toggle = document.createElement("button");
toggle.classList.add("toggle");
toggle.append(name);
const content = document.createElement("div");
diff --git a/src/gui/storyCaption.js b/src/gui/storyCaption.js
index f033a1131bd..890d602d8e6 100644
--- a/src/gui/storyCaption.js
+++ b/src/gui/storyCaption.js
@@ -72,7 +72,7 @@ App.UI.StoryCaption.render = function() {
}
}
- App.UI.DOM.appendNewElement("p", fragment, App.UI.quickMenu());
+ fragment.append(App.UI.quickMenu());
if (V.nextButton !== "Continue" && V.nextButton !== " ") {
if (V.debugMode > 0) {
diff --git a/themes/Twilight/quicklinks.css b/themes/Twilight/quicklinks.css
index 5f43b8e1383..fcad371bca7 100644
--- a/themes/Twilight/quicklinks.css
+++ b/themes/Twilight/quicklinks.css
@@ -1,18 +1,18 @@
-div.quick-links div.toggle {
+.quick-links .toggle {
background-color: var(--button-color);
}
-div.quick-links div.toggle:hover {
+.quick-links .toggle:hover {
background-color: var(--button-hover-color);
}
-div.quick-links div.menu-link {
+.quick-links div.menu-link {
background-color: var(--button-disabled-color);
border-color: var(--button-border-color);
box-shadow: var(--button-border-color);
}
-div.quick-links div.notification:not(.category)::after,
-div.quick-links div.category.notification.collapsed > div.toggle::after {
+.quick-links div.notification:not(.category)::after,
+.quick-links div.category.notification.collapsed > .toggle::after {
content: "\e80b";
}
diff --git a/themes/light/quicklinks.css b/themes/light/quicklinks.css
index 5f43b8e1383..fcad371bca7 100644
--- a/themes/light/quicklinks.css
+++ b/themes/light/quicklinks.css
@@ -1,18 +1,18 @@
-div.quick-links div.toggle {
+.quick-links .toggle {
background-color: var(--button-color);
}
-div.quick-links div.toggle:hover {
+.quick-links .toggle:hover {
background-color: var(--button-hover-color);
}
-div.quick-links div.menu-link {
+.quick-links div.menu-link {
background-color: var(--button-disabled-color);
border-color: var(--button-border-color);
box-shadow: var(--button-border-color);
}
-div.quick-links div.notification:not(.category)::after,
-div.quick-links div.category.notification.collapsed > div.toggle::after {
+.quick-links div.notification:not(.category)::after,
+.quick-links div.category.notification.collapsed > .toggle::after {
content: "\e80b";
}
--
GitLab