summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorIlmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>2020-06-07 16:04:09 +0300
committerOlivier Hallot <olivier.hallot@libreoffice.org>2020-06-07 21:42:53 +0200
commiteaf06901abf52f37786b213947b1b4d0e3c2fc79 (patch)
tree5ba4a255fddf460f90e966795e76a8a8cd7a79f0
parenttdf#127263 Connect QR Code dialogs Help button to the online help (diff)
downloadhelp-eaf06901abf52f37786b213947b1b4d0e3c2fc79.zip
help-eaf06901abf52f37786b213947b1b4d0e3c2fc79.tar.gz
Improve web help header
Header with symbol, logo and navigation dropdowns now uses grid layout when screen width is desktop. Change-Id: I00612ebe04110b3608d9534c0ebdb23d5b788c54 Reviewed-on: https://gerrit.libreoffice.org/c/help/+/95668 Tested-by: Jenkins Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org> (cherry picked from commit 24901fb947d0d7adeaefbbddd8d2bad89e49e378) Reviewed-on: https://gerrit.libreoffice.org/c/help/+/95743
-rw-r--r--help3xsl/default.css59
-rw-r--r--help3xsl/online_transform.xsl44
2 files changed, 58 insertions, 45 deletions
diff --git a/help3xsl/default.css b/help3xsl/default.css
index 76bf71c..69a2b07 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -134,7 +134,6 @@ pre,
font-weight: bold;
}
.keycode {
- /*font-weight: bold;*/
font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
}
.widget{
@@ -334,32 +333,43 @@ h6 {
grid-area: header;
position: sticky;
top: 0px;
- z-index: 100;
-}
-header {
color: #fff;
- height: 64px;
- padding: 8px 8px 8px 16px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
}
-.logo-container {
+.dropdowns {
+ /* allow for scrolling */
+ overflow-x: auto;
+ overflow-y: hidden;
+ /* make it smooth on iOS */
+ -webkit-overflow-scrolling: touch;
+ grid-area: dropdowns;
display: flex;
justify-content: space-between;
+ flex-direction: column;
}
-.logo {
+symbol, .logo {
color: #fff;
text-decoration: none;
- display: flex;
+}
+.logo:hover {
+ text-decoration: none;
+ color: #fff;
}
.logo p {
font-size: 24px;
}
-.logo .symbol {
+.symbol {
+ grid-area: symbol;
+ padding: 8px 8px 8px 20px;
+}
+.symbol div {
background-image: url(media/navigation/libo-symbol-white.svg);
background-repeat: no-repeat;
background-size: contain;
width: 52px;
height: 60px;
- margin-right: 10px;
}
[data-a11y-toggle]:not([aria-controls]){
@@ -740,6 +750,11 @@ li.disabled a {
}
}
@media screen and (min-width: 960px) {
+ .dropdowns {
+ flex-direction: row;
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
#langs-nav, #modules-nav {
display: none;
}
@@ -752,13 +767,11 @@ li.disabled a {
cursor: pointer;
color: #fff;
font-size: 19px;
- position: relative;
- top: 40px;
display: block;
background: transparent;
border: none;
text-transform: none;
- padding:0;
+ padding: 0;
line-height: normal;
}
@@ -766,12 +779,11 @@ li.disabled a {
#langs-nav:not([aria-hidden='true']), #modules-nav:not([aria-hidden='true']) {
display: flex;
flex-direction: column;
- max-width: 120px;
overflow-y: auto;
overflow-x: hidden;
+ max-width: 120px;
max-height: 480px;
position: absolute;
- top: 80px;
}
#modules-nav {
background-color: #101820;
@@ -803,16 +815,9 @@ li.disabled a {
grid-area: footer;
}
.lang {
- position: absolute;
- top: 0;
- left: 200px;
background-color: transparent;
}
.modules {
- width: 120px;
- position: absolute;
- top: 0;
- left: 80px;
border: none;
background-color: transparent;
}
@@ -856,6 +861,14 @@ li.disabled a {
/* 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;
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 1f5d934..3a934dc 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -164,30 +164,30 @@
<meta itemprop="datePublished" content="2017"/>
<meta itemprop="headline" content="{$titleL10N}"/>
</xsl:if>
- <div id="TopLeftHeader">
- <header>
- <div class="logo-container">
- <a class="logo" href="{$lang}/text/shared/05/new_help.html">
- <div class="symbol"></div>
- <p><xsl:value-of select="$ui_logo"/></p>
- </a>
- </div>
- </header>
- <div class="modules">
- <button type="button" data-a11y-toggle="modules-nav" id="modules" onclick="setupModules('{$lang}');">
- <xsl:value-of select="$ui_module"/>
- </button>
- <nav id="modules-nav"/><!-- is filled in via setupModules() on demand -->
- </div>
- <xsl:if test="$online">
- <div class="lang">
- <button type="button" data-a11y-toggle="langs-nav" id="langs" onclick="setupLanguages('{$htmlpage}');">
- <xsl:value-of select="$ui_language"/>
+ <header id="TopLeftHeader">
+ <a class="symbol" href="{$lang}/text/shared/05/new_help.html">
+ <div></div>
+ </a>
+ <a class="logo" href="{$lang}/text/shared/05/new_help.html">
+ <p><xsl:value-of select="$ui_logo"/></p>
+ </a>
+ <div class="dropdowns">
+ <div class="modules">
+ <button type="button" data-a11y-toggle="modules-nav" id="modules" onclick="setupModules('{$lang}');">
+ <xsl:value-of select="$ui_module"/>
</button>
- <nav id="langs-nav"/><!-- is filled in via setupLanguages() on demand -->
+ <nav id="modules-nav"/><!-- is filled in via setupModules() on demand -->
</div>
- </xsl:if>
- </div>
+ <xsl:if test="$online">
+ <div class="lang">
+ <button type="button" data-a11y-toggle="langs-nav" id="langs" onclick="setupLanguages('{$htmlpage}');">
+ <xsl:value-of select="$ui_language"/>
+ </button>
+ <nav id="langs-nav"/><!-- is filled in via setupLanguages() on demand -->
+ </div>
+ </xsl:if>
+ </div>
+ </header>
<aside class="rightside">
<input id="accordion-1" name="accordion-menu" type="checkbox"/>
<label for="accordion-1"><xsl:value-of select="$ui_contents"/></label>