Help CSS: allow title in header to be wider

Added a column and let the title section to grow into it.
Also removed the hardcoded size from the Xapian search input.

Change-Id: Id391264a17556a35d54b705621deb9bdecc16af2
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/93278
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
This commit is contained in:
Ilmari Lauhakangas
2020-05-01 18:15:37 +03:00
committed by Olivier Hallot
parent 21fd17892a
commit 52eb45cd79
2 changed files with 24 additions and 10 deletions

View File

@ -829,6 +829,17 @@ li.disabled a {
box-shadow: 0 2px 8px 0 rgba(0,0,0,.05);
padding: 10px 50px 40px 50px;
}
.xapian-omega-search {
width: 100%;
}
.xapian-omega-search form {
display: flex;
justify-content: center;
}
.omega-autofocus {
max-width: 200px;
width: 100%
}
}
@media screen and (min-width: 1440px) {
#Contents {
@ -847,6 +858,9 @@ li.disabled a {
label[for=accordion-1]:after {
content: "";
}
.omega-autofocus {
max-width: 400px;
}
}
/* Use @supports to sneak these rules past IE */
@supports (grid-area: auto) {
@ -868,22 +882,22 @@ li.disabled a {
}
body {
display: grid;
grid-template-columns: 360px 80px 1fr;
grid-template-columns: 360px 100px 300px 1fr;
grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto);
grid-template-areas: "header search donation"
"rightside main main"
"leftside main main"
". footer footer"
grid-template-areas: "header header search donation"
"rightside main main main"
"leftside main main main"
". footer footer footer"
}
}
@media screen and (min-width: 1440px) {
body {
display: grid;
grid-template-columns: 360px 450px 450px 1fr;
grid-template-columns: 360px 100px 400px 400px 1fr;
grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto);
grid-template-areas: "header search search donation"
"leftside main main rightside"
". footer footer ."
grid-template-areas: "header header search search donation"
"leftside main main main rightside"
". footer footer footer ."
}
.donation {
max-width: 300px;

View File

@ -220,7 +220,7 @@
<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" size="40"/>
<input id="omega-autofocus" type="search" name="P"/>
<input type="submit" class="xapian-omega-search-button" value="&#x1f50d;"/>
</form>
</div>