forked from amazingfate/help
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>
This commit is contained in:
Ilmari Lauhakangas
committed by
Olivier Hallot
Olivier Hallot
parent
af22581cca
commit
24901fb947
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user