[Libreoffice-commits] help.git: Branch 'libreoffice-7-0' - help3xsl/default.css help3xsl/online_transform.xsl
Ilmari Lauhakangas (via logerrit)
logerrit at kemper.freedesktop.org
Sun Jun 7 19:43:12 UTC 2020
help3xsl/default.css | 59 +++++++++++++++++++++++++-----------------
help3xsl/online_transform.xsl | 44 +++++++++++++++----------------
2 files changed, 58 insertions(+), 45 deletions(-)
New commits:
commit eaf06901abf52f37786b213947b1b4d0e3c2fc79
Author: Ilmari Lauhakangas <ilmari.lauhakangas at libreoffice.org>
AuthorDate: Sun Jun 7 16:04:09 2020 +0300
Commit: Olivier Hallot <olivier.hallot at libreoffice.org>
CommitDate: Sun Jun 7 21:42:53 2020 +0200
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 at libreoffice.org>
(cherry picked from commit 24901fb947d0d7adeaefbbddd8d2bad89e49e378)
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/95743
diff --git a/help3xsl/default.css b/help3xsl/default.css
index 76bf71c66..69a2b0705 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 1f5d93467..3a934dcb2 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>
More information about the Libreoffice-commits
mailing list