summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorIlmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>2018-07-07 15:09:33 +0300
committerOlivier Hallot <olivier.hallot@libreoffice.org>2018-07-11 11:54:05 +0200
commit0f1361dfd9212d7323ae959acf331fb178c5b028 (patch)
tree2895cd0e794e4c280519eaa201ac1548347a1053
parentcc7be864b0832c01fe71d7abbc98c721dc04bfe3 (diff)
tdf#118430 Three column layout with 1440px width
Contents will now stay collapsed until 1440px width, when it will move to the right side of the screen. Removed useless and harmful float:left from .index-label. Change-Id: I504e8c4be3a5e777dc7bafbd6a6105b163e4a5f3 Reviewed-on: https://gerrit.libreoffice.org/57129 Tested-by: Jenkins Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org> (cherry picked from commit 581213f4b1f0589367529434af22c41ddc4c1a29) Reviewed-on: https://gerrit.libreoffice.org/57251 Reviewed-by: Ilmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>
-rw-r--r--help3xsl/default.css55
-rw-r--r--help3xsl/online_transform.xsl4
2 files changed, 41 insertions, 18 deletions
diff --git a/help3xsl/default.css b/help3xsl/default.css
index 03eaf34ca..2104d01d4 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -457,7 +457,6 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
padding: 0 0 0 20px;
}
.index-label {
- float: left;
font-size: 22px;
color: #148603;
padding-left: 20px;
@@ -756,8 +755,13 @@ li.disabled a {
background-color: #F4F7F7;
border-right: 1px solid rgba(0,0,0,0.04);
float: left;
- width: 320px;
- grid-area: sidebar;
+ width: 320px;
+ }
+ .leftside {
+ grid-area: leftside;
+ }
+ .rightside {
+ grid-area: rightside;
}
.google-search {
margin: 0;
@@ -777,28 +781,30 @@ li.disabled a {
left: 80px;
border: none;
}
- label[for=accordion-1] {
- background-color: transparent;
- text-decoration: none;
- }
- label[for=accordion-1]:hover {
- background-color: transparent;
- }
- label[for=accordion-1]:after {
- content: "";
- }
#DisplayArea {
padding: 10px 50px;
width: 800px;
}
+ #search-bar {
+ max-width: 290px;
+ }
+}
+@media screen and (min-width: 1440px) {
#Contents {
color: #333;
z-index: 6;
display: block;
padding: 0 0 0 20px;
}
- #search-bar {
- max-width: 290px;
+ label[for=accordion-1] {
+ background-color: transparent;
+ text-decoration: none;
+ }
+ label[for=accordion-1]:hover {
+ background-color: transparent;
+ }
+ label[for=accordion-1]:after {
+ content: "";
}
}
@supports (grid-area: auto) {
@@ -806,9 +812,24 @@ li.disabled a {
body {
display: grid;
grid-template-columns: 320px 1fr;
- grid-template-rows: 1fr minmax(1em, auto);
+ grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr;
grid-template-areas: "header header"
- "sidebar main"
+ "rightside main"
+ "leftside main"
+ }
+ }
+ @media screen and (min-width: 1440px) {
+ body {
+ display: grid;
+ grid-template-columns: 320px 900px 1fr;
+ grid-template-rows: 1fr minmax(1em, auto);
+ grid-template-areas: "header header header"
+ "leftside main rightside"
+ }
+ .rightside {
+ width: auto;
+ border-right: none;
+ border-left: 1px solid rgba(0,0,0,0.04);
}
}
}
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 8bfd5d31b..889982fda 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -200,10 +200,12 @@
</div>
</xsl:if>
</div>
- <aside>
+ <aside class="rightside">
<input id="accordion-1" name="accordion-menu" type="checkbox"/>
<label for="accordion-1"><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"><xsl:value-of select="$ui_index"/> &#32;&#x1f50e;&#xfe0e;&#32;</div>
<div id="Bookmarks">