Launcher: style help content menu
Change-Id: I5bd5d6f7663cc2a3f47a0329428f00f6343b597c
diff --git a/core/installer/welcome/launcher-tmpl/launcher.html b/core/installer/welcome/launcher-tmpl/launcher.html
index b12c96f..30971a6 100644
--- a/core/installer/welcome/launcher-tmpl/launcher.html
+++ b/core/installer/welcome/launcher-tmpl/launcher.html
@@ -40,10 +40,14 @@
</header>
<div class="app-help-modal-article">
<div class="modal-left">
- {{ template "help-menu-template" .Help }}
+ {{ template "help-menu-template" (dict "Help" .Help "First" true) }}
</div>
<div class="modal-right" id="modal-right-help-content-{{ CleanAppName .Name }}">
- {{ template "help-content-template" (dict "Help" .Help "First" true) }}
+ <aside>
+ <nav>
+ {{ template "help-content-template" (dict "Help" .Help "First" true) }}
+ </nav>
+ </aside>
</div>
</div>
</article>
@@ -55,11 +59,12 @@
<iframe id="appFrame" width="100%" height="100%" frameborder="0"></iframe>
</div>
{{ define "help-menu-template" }}
- <ul class="ul">
- {{ range . }}
+ {{ $first := .First }}
+ <ul>
+ {{ range $i, $h := .Help }}
<li>
- <a class="title-menu" id="title-{{ CleanAppName .Title }}">{{ .Title }}</a>
- {{ template "help-menu-template" .Children }}
+ <a class="title-menu secondary" id="title-{{ CleanAppName $h.Title }}" {{ if (and $first (eq 0 $i)) }}aria-current="page"{{ end }}>{{ $h.Title }}</a>
+ {{ template "help-menu-template" (dict "Help" $h.Children "First" false) }}
</li>
{{ end }}
</ul>
diff --git a/core/installer/welcome/static/launcher.css b/core/installer/welcome/static/launcher.css
index 6802bf2..8b0f274 100644
--- a/core/installer/welcome/static/launcher.css
+++ b/core/installer/welcome/static/launcher.css
@@ -233,24 +233,29 @@
width: 100% !important;
}
-ul {
+.modal-left ul {
padding-inline-start: 0px !important;
margin-bottom: 0px;
list-style: none;
font-size: 14px;
}
-ul ul {
- padding-inline-start: 19px;
-}
-
-ul li {
+.modal-left ul li {
list-style: none !important;
padding-inline-start: 19px !important;
margin-bottom: 0px;
font-size: 16px !important;
}
+.modal-left ul li a {
+ --pico-text-decoration: none;
+ cursor: pointer;
+}
+
+.modal-left ul li a[aria-current] {
+ color: var(--pico-primary);
+}
+
.tooltip-user {
position: absolute;
top: 54px;
diff --git a/core/installer/welcome/static/launcher.js b/core/installer/welcome/static/launcher.js
index a1a88e9..243436b 100644
--- a/core/installer/welcome/static/launcher.js
+++ b/core/installer/welcome/static/launcher.js
@@ -72,9 +72,13 @@
const helpContentId = 'help-content-' + helpTitleId;
const allContentElements = document.querySelectorAll('.help-content');
allContentElements.forEach(function (contentElement) {
- contentElement.style.display = 'none';
+ contentElement.style.display = "none";
});
- document.getElementById(helpContentId).style.display = 'block';
+ modalHelpButtons.forEach(function (button) {
+ button.removeAttribute("aria-current");
+ });
+ document.getElementById(helpContentId).style.display = 'block';
+ button.setAttribute("aria-current", "page");
});
});
});