help3xsl/default.css | 183 ++++++++++++++++----------------
help3xsl/help2.js | 15 --
help3xsl/online_transform.xsl | 86 +++++++--------
help3xsl/paginathing.js | 3
help3xsl/xap_templ_query.xsl | 9 -
source/text/shared/help/browserhelp.xhp | 22 +--
6 files changed, 157 insertions(+), 161 deletions(-)
New commits:
commit 25f39b53fb292ec90368f2afd3678884a1a8bb27
Author: Ilmari Lauhakangas <ilmari.lauhakan...@libreoffice.org>
AuthorDate: Sat Dec 16 15:49:32 2023 +0200
Commit: Olivier Hallot <olivier.hal...@libreoffice.org>
CommitDate: Sat Dec 16 22:11:42 2023 +0100
Make Help navigation layout less busy
Bookmarks don't have to be visible all the time, so make them a
dropdown and move the search box to header.
Move Xapian search to the top of the content area.
Make Contents tree appear on the left side in 960px and wider screens.
Simplify/clean up some CSS and JS, for example for module colours.
Change-Id: Ic50a834b758d50098868866e4b8d3e8085755423
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/160870
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hal...@libreoffice.org>
diff --git a/help3xsl/default.css b/help3xsl/default.css
index b54f9fe725..5f3276fb5b 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -32,6 +32,7 @@ do not break anything related to layout by scaling.
--font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans
Mono", monospace;
--font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto
Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic,
"Noto Sans Tibetan", Taprom;
--background-color: #f7f8f7;
+ --module-color: #18A303;
}
body,
@@ -226,6 +227,7 @@ html[dir=ltr] th {
margin-top: 0px;
}
.tableheadcell {
+ background: var(--module-color);
color: white;
vertical-align:top;
}
@@ -252,7 +254,8 @@ h4,
h5,
h6 {
margin-bottom: 0.67rem;
- color: #148603;
+ color: var(--module-color);
+ border-bottom-color: var(--module-color);
}
p,
ol,
@@ -263,7 +266,7 @@ td {
h1 {
font-size: 1.83rem;
font-weight: 300;
- border-bottom: 2px solid #148603;
+ border-bottom: 2px solid;
margin-bottom: 1.67rem;
}
h1 a {
@@ -326,14 +329,15 @@ h6 {
margin-top: 15px;
margin-bottom: 15px;
}
-
#DisplayArea {
background-color: #FCFCFC;
overflow: auto;
padding: 10px 10px 40px 10px;
grid-area: main;
}
-
+#omega-autofocus {
+ width: 274px;
+}
.mediabutton {
background-color: cyan;
}
@@ -360,6 +364,7 @@ h6 {
.embedded {}
#TopLeftHeader {
+ background: var(--module-color);
grid-area: header;
position: sticky;
top: 0px;
@@ -379,6 +384,7 @@ h6 {
display: flex;
justify-content: space-between;
flex-direction: column;
+ width: 100%;
}
.symbol, .logo, .logo:hover, .logo:visited {
color: #fff;
@@ -495,9 +501,8 @@ footer p {
label[for=accordion-1] {
color: #233336;
display: block;
- padding: 10px 0 10px 20px;
+ margin: 0 0 10px 10px;
font-size: 22px;
- line-height: .6;
}
label[for=accordion-1]:after {
font-size: 44px;
@@ -510,7 +515,7 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
color: #333;
z-index: 6;
display: block;
- margin: 0 20px 0 20px;
+ margin: 0 20px 20px 20px;
}
.index-label {
font-size: 22px;
@@ -518,7 +523,7 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
padding-left: 20px;
margin: 20px 0 0 0;
}
-#Index, .index {
+.index {
margin-top: 10px;
}
.index {
@@ -532,7 +537,8 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
display: none;
}
#Bookmarks {
- padding: 0 20px;
+ width: 300px;
+ margin-left: 10px;
}
#Bookmarks p {
font-size: 22px;
@@ -628,7 +634,6 @@ li.disabled a {
box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
box-sizing: border-box;
line-height: 1.5em;
- margin-top: 10px;
outline: none;
padding: 0 .25em;
transition: all 0.30s ease-in-out;
@@ -642,13 +647,25 @@ li.disabled a {
#search-bar::placeholder {
font-style: italic;
}
+#SearchFrame .nav-container {
+ display: none;
+ position: absolute;
+ background-color: var(--background-color);
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ max-height: 80svh;
+ width: 300px;
+}
+#SearchFrame:focus-within .nav-container {
+ display: block;
+}
.xapian-donation {
border-top: 2px solid #148603;
background-color: #FCFCFC;
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
}
#DonationFrame {
- background: #18A303;
+ background: var(--module-color);
position: sticky;
top: 0px;
}
@@ -672,10 +689,9 @@ li.disabled a {
text-align: center;
}
#SearchFrame {
- background: #18A303;
top: 0px;
position: sticky;
- z-index: 100;
+ z-index: 1;
}
.xapian-omega-search {
margin: auto;
@@ -823,6 +839,57 @@ li.disabled a {
}
}
@media screen and (min-width: 960px) {
+ html {
+ scroll-padding-top: 64px;
+ }
+ body {
+ display: grid;
+ grid-template-columns: 320px 100px 300px 1fr;
+ grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr
minmax(1em, auto);
+ grid-template-areas: "header header search donation"
+ "leftside main main main"
+ "leftside main main main"
+ ". footer footer footer"
+ }
+ #TopLeftHeader {
+ display: grid;
+ align-items: end;
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto;
+ grid-template-areas: "symbol logo"
+ "symbol dropdowns"
+ }
+ #SearchFrame {
+ grid-area: search;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ .index-label {
+ color: #fff;
+ }
+ #DonationFrame {
+ grid-area: donation;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+ #Contents {
+ color: #333;
+ z-index: 6;
+ display: block;
+ margin: 0 20px 0 20px;
+ }
+ label[for=accordion-1] {
+ margin: 0;
+ }
+ label[for=accordion-1]:after {
+ content: "";
+ font-size: unset;
+ }
+ #Bookmarks {
+ margin-left: 0;
+ }
.dropdowns {
flex-direction: row;
overflow-y: auto;
@@ -872,14 +939,13 @@ li.disabled a {
}
.leftside {
grid-area: leftside;
- }
- .rightside {
- grid-area: rightside;
+ padding: 40px 10px 0 10px;
}
#DonationFrame {
grid-area: donation;
}
#SearchFrame {
+ background: var(--module-color);
grid-area: search;
}
footer {
@@ -894,18 +960,14 @@ li.disabled a {
}
#DisplayArea {
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
- padding: 10px 50px 40px 50px;
+ padding: 40px 50px;
}
.xapian-omega-search {
width: 100%;
}
.xapian-omega-search form {
display: flex;
- justify-content: center;
- }
- .omega-autofocus {
- max-width: 200px;
- width: 100%
+ justify-content: flex-end;
}
/* ScriptForge service tables */
.sf_table {
@@ -922,77 +984,22 @@ li.disabled a {
}
}
@media screen and (min-width: 1440px) {
- #Contents {
- color: #333;
- z-index: 6;
- display: block;
- margin: 0 20px 0 20px;
+ body {
+ display: grid;
+ grid-template-columns: 360px 100px 400px 400px 1fr;
+ grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
+ grid-template-areas: "header header search search donation"
+ "leftside main main main ."
+ ". footer footer footer ."
+ }
+ .donation {
+ max-width: 300px;
}
label[for=accordion-1] {
background-color: transparent;
text-decoration: none;
}
- label[for=accordion-1]:hover {
+ label[for=accordion-1]:hover {
background-color: transparent;
}
- label[for=accordion-1]:after {
- content: "";
- }
- .omega-autofocus {
- max-width: 400px;
- }
-}
-/* Use @supports to sneak these rules past IE */
-@supports (grid-area: auto) {
- @media screen and (min-width: 960px) {
- #TopLeftHeader {
- display: grid;
- align-items: end;
- grid-template-columns: auto auto;
- grid-template-rows: auto auto;
- grid-template-areas: "symbol logo"
- "symbol dropdowns"
- }
- #SearchFrame {
- grid-area: search;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- #DonationFrame {
- grid-area: donation;
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- body {
- display: grid;
- grid-template-columns: 320px 100px 300px 1fr;
- grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr
minmax(1em, auto);
- grid-template-areas: "header header search donation"
- "rightside main main main"
- "leftside main main main"
- ". footer footer footer"
- }
- html {
- scroll-padding-top: 64px;
- }
- }
- @media screen and (min-width: 1440px) {
- body {
- display: grid;
- grid-template-columns: 360px 100px 400px 400px 1fr;
- grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
- grid-template-areas: "header header search search donation"
- "leftside main main main rightside"
- ". footer footer footer ."
- }
- .donation {
- max-width: 300px;
- }
- .rightside {
- width: auto;
- border-right: none;
- }
- }
}
diff --git a/help3xsl/help2.js b/help3xsl/help2.js
index 684136245d..c6bf1948e4 100644
--- a/help3xsl/help2.js
+++ b/help3xsl/help2.js
@@ -70,7 +70,6 @@ function setSystemSpan(spanZ) {
}
// paint headers and headings with appl color
-
function moduleColor (module) {
switch (module){
case "WRITER" : {color="#083fa6"; break;}
@@ -84,18 +83,8 @@ function moduleColor (module) {
case "SHARED" : {color="darkslategray"; break;}
default : {color="#18A303"; break;}
}
- document.getElementById("TopLeftHeader").style.background = color;
- document.getElementById("SearchFrame").style.background = color;
- document.getElementById("DonationFrame").style.background = color;
- var cols = document.getElementsByClassName('tableheadcell');
- for(i = 0; i < cols.length; i++) {cols[i].style.backgroundColor = color;};
- for (j of [1,2,3,4,5,6]) {
- var hh = document.getElementsByTagName("H" + j);
- for(i = 0; i < hh.length; i++) {
- hh[i].style.color = color;
- hh[i].style.borderBottomColor = color;
- }
- }
+ let root = document.documentElement;
+ root.style.setProperty('--module-color', color);
}
/* add &DbPAR= and &System= to the links in DisplayArea div */
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 51961c68b6..b2f7adde01 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -96,22 +96,23 @@
<!-- Strings for the help UI page -->
<xsl:variable name="tmp_href_ui"><xsl:value-of
select="concat($urlpre,'text/shared/help/browserhelp.xhp')"/></xsl:variable>
<xsl:variable name="tmp_doc_ui" select="document($tmp_href_ui)"/>
-<xsl:variable name ="ui_contents"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='contents']"/></xsl:variable>
-<xsl:variable name ="ui_index"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='index']"/></xsl:variable>
-<xsl:variable name ="ui_pholderall"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='pholderall']"/></xsl:variable>
-<xsl:variable name ="ui_pholderchosen"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='pholderchosen']"/></xsl:variable>
-<xsl:variable name ="ui_module"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='module']"/></xsl:variable>
-<xsl:variable name ="ui_language"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='language']"/></xsl:variable>
-<xsl:variable name ="ui_donate"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='donate']"/></xsl:variable>
-<xsl:variable name ="ui_logo"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='LibreOfficeHelp']"/></xsl:variable>
-<xsl:variable name ="ui_selectmodule"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='selectmodule']"/></xsl:variable>
-<xsl:variable name ="ui_selectlang"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='selectlanguage']"/></xsl:variable>
-<xsl:variable name ="ui_search"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='searchhelpcontents']"/></xsl:variable>
-<xsl:variable name ="ui_copyclip"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='copyclip']"/></xsl:variable>
-<xsl:variable name ="ytvideobutton"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='ytbutton']"/></xsl:variable>
-<xsl:variable name ="ytaccept"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='ytaccept']"/></xsl:variable>
-<xsl:variable name ="ytpromovideoH2"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='externalvideo']"/></xsl:variable>
-<xsl:variable name ="ytprivacy"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='ytprivacy']"/></xsl:variable>
+<xsl:variable name="ui_contents"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='contents']"/></xsl:variable>
+<xsl:variable name="ui_index"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='index']"/></xsl:variable>
+<xsl:variable name="ui_pholderbmarksall"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='pholderbmarksall']"/></xsl:variable>
+<xsl:variable name="ui_pholderbmarkschosen"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='pholderbmarkschosen']"/></xsl:variable>
+<xsl:variable name="ui_pholderfullsearch"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='pholderfullsearch']"/></xsl:variable>
+<xsl:variable name="ui_module"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='module']"/></xsl:variable>
+<xsl:variable name="ui_language"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='language']"/></xsl:variable>
+<xsl:variable name="ui_donate"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='donate']"/></xsl:variable>
+<xsl:variable name="ui_logo"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='LibreOfficeHelp']"/></xsl:variable>
+<xsl:variable name="ui_selectmodule"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='selectmodule']"/></xsl:variable>
+<xsl:variable name="ui_selectlang"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='selectlanguage']"/></xsl:variable>
+<xsl:variable name="ui_search"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='searchhelpcontents']"/></xsl:variable>
+<xsl:variable name="ui_copyclip"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='copyclip']"/></xsl:variable>
+<xsl:variable name="ytvideobutton"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='ytbutton']"/></xsl:variable>
+<xsl:variable name="ytaccept"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='ytaccept']"/></xsl:variable>
+<xsl:variable name="ytpromovideoH2"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='externalvideo']"/></xsl:variable>
+<xsl:variable name="ytprivacy"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='ytprivacy']"/></xsl:variable>
<!--
#############
# Templates #
@@ -200,32 +201,39 @@
</xsl:if>
</div>
</header>
- <aside class="rightside">
+ <aside class="leftside">
<input id="accordion-1" name="accordion-menu" type="checkbox"/>
<label for="accordion-1" dir="auto"><xsl:value-of
select="$ui_contents"/></label>
<div id="Contents" class="contents-treeview"></div>
</aside>
- <aside class="leftside">
- <div id="Index">
- <div class="index-label" dir="auto"><xsl:value-of select="$ui_index"/>
 🔎︎ </div>
- <div id="Bookmarks">
- <xsl:variable name="pholder">
- <xsl:choose>
- <xsl:when test="contains($htmlpage, '/text/shared/')">
- <xsl:value-of select="$ui_pholderall"/>
- </xsl:when>
- <xsl:otherwise>
- <xsl:value-of select="$ui_pholderchosen"/>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:variable>
- <input id="search-bar" type="search" class="search"
placeholder="{$pholder}" dir="auto"/>
+ <div id="SearchFrame">
+ <div id="Bookmarks">
+ <xsl:variable name="pholder">
+ <xsl:choose>
+ <xsl:when test="contains($htmlpage, '/text/shared/')">
+ <xsl:value-of select="$ui_pholderbmarksall"/>
+ </xsl:when>
+ <xsl:otherwise>
+ <xsl:value-of select="$ui_pholderbmarkschosen"/>
+ </xsl:otherwise>
+ </xsl:choose>
+ </xsl:variable>
+ <input id="search-bar" type="search" class="search"
placeholder="{$pholder}" dir="auto"/>
+ <div class="nav-container" tabindex="0">
<nav class="index" dir="auto"></nav>
</div>
</div>
- </aside>
+ </div>
<div id="DisplayArea" itemprop="softwareHelp" itemscope="true"
itemtype="http://schema.org/SoftwareApplication";>
<xsl:if test="$online">
+ <xsl:if test="$xapian='yes'">
+ <div class="xapian-omega-search">
+ <form name="P" method="get"
action="/{$productversion}/{$lang}/search" target="_top">
+ <input id="omega-autofocus" type="search" name="P"
placeholder="{$ui_pholderfullsearch}" dir="auto"/>
+ <input type="submit"
class="xapian-omega-search-button" value="🔍"/>
+ </form>
+ </div>
+ </xsl:if>
<!-- help2.js checks, if meta elements exist in the body -->
<meta itemprop="applicationCategory"
content="BusinessApplication"/>
<meta itemprop="applicationSuite" content="LibreOffice"/>
@@ -242,18 +250,6 @@
</xsl:if>
<xsl:apply-templates select="/helpdocument/body"/>
</div>
- <div id="SearchFrame">
- <xsl:if test="$online">
- <xsl:if test="$xapian='yes'">
- <div class="xapian-omega-search">
- <form name="P" method="get"
action="/{$productversion}/{$lang}/search" target="_top">
- <input id="omega-autofocus" type="search" name="P"
dir="auto"/>
- <input type="submit"
class="xapian-omega-search-button" value="🔍"/>
- </form>
- </div>
- </xsl:if>
- </xsl:if>
- </div>
<div id="DonationFrame">
<xsl:if test="$online">
<div class="donation">
diff --git a/help3xsl/paginathing.js b/help3xsl/paginathing.js
index cd52b3637f..4b12618110 100644
--- a/help3xsl/paginathing.js
+++ b/help3xsl/paginathing.js
@@ -69,8 +69,10 @@ var Paginator = function(element) {
parent = existingContainer.parentNode;
parent.removeChild(existingContainer);
}
+ const searchInput = document.getElementById("search-bar");
var container = document.createElement('nav');
container.setAttribute('class', options.containerClass);
+ container.setAttribute('tabindex', '0');
var ul = document.createElement('ul');
ul.setAttribute('class', options.ulClass);
@@ -227,6 +229,7 @@ var Paginator = function(element) {
limitPagination = pagLimit();
}
show(page);
+ searchInput.focus();
});
}());
}
diff --git a/help3xsl/xap_templ_query.xsl b/help3xsl/xap_templ_query.xsl
index 3aedf2e1b3..ec42e84cf7 100644
--- a/help3xsl/xap_templ_query.xsl
+++ b/help3xsl/xap_templ_query.xsl
@@ -22,8 +22,9 @@ xsltproc xap_template_query.xsl <file.xhp>
<!-- Strings for the help UI page -->
<xsl:variable name ="ui_contents"><xsl:apply-templates
select="//variable[@id='contents']"/></xsl:variable>
<xsl:variable name ="ui_index"><xsl:apply-templates
select="//variable[@id='index']"/></xsl:variable>
- <xsl:variable name ="ui_pholderall"><xsl:apply-templates
select="//variable[@id='pholderall']"/></xsl:variable>
- <xsl:variable name ="ui_pholderchosen"><xsl:apply-templates
select="//variable[@id='pholderchosen']"/></xsl:variable>
+ <xsl:variable name ="ui_pholderbmarksall"><xsl:apply-templates
select="//variable[@id='pholderbmarksall']"/></xsl:variable>
+ <xsl:variable name ="ui_pholderbmarkschosen"><xsl:apply-templates
select="//variable[@id='pholderbmarkschosen']"/></xsl:variable>
+ <xsl:variable name ="ui_pholderfullsearch"><xsl:apply-templates
select="$tmp_doc_ui//variable[@id='pholderfullsearch']"/></xsl:variable>
<xsl:variable name ="ui_module"><xsl:apply-templates
select="//variable[@id='module']"/></xsl:variable>
<xsl:variable name ="ui_language"><xsl:apply-templates
select="//variable[@id='language']"/></xsl:variable>
<xsl:variable name ="ui_donate"><xsl:apply-templates
select="//variable[@id='donate']"/></xsl:variable>
@@ -131,7 +132,7 @@ document.write("<span title=\""+D+"
"+T+"\">]]><xsl:apply-templates select="//va
<div id="Index">
<div class="index-label">]]><xsl:value-of
select="$ui_index"/><![CDATA[  🔎︎ </div>
<div id="Bookmarks">
- <input id="search-bar" type="search" class="search"
placeholder="]]><xsl:value-of select="$ui_pholderchosen"/><![CDATA["/>
+ <input id="search-bar" type="search" class="search"
placeholder="]]><xsl:value-of select="$ui_pholderbmarkschosen"/><![CDATA["/>
<nav class="index"></nav>
</div>
</div>
@@ -148,7 +149,7 @@ document.write("<span title=\""+D+"
"+T+"\">]]><xsl:apply-templates select="//va
<div id="DisplayArea">
<form name="P" method="get" action="]]><xsl:value-of
select="$lang"/><![CDATA[/search" target="_top">
<center>
-<input id="omega-autofocus" type=search name=P value="$html{$query}" size=40
autofocus>
+<input id="omega-autofocus" type=search name=P placeholder="]]><xsl:value-of
select="$ui_pholderfullsearch"/>"<