Change approach to layout in order to fix some weird CSS problems
Move away from using an absolute positioned #content div as this was causing some weird problems when users scrolled down, like not showing bottom padding, and prematurely cutting off the left keyline. Now, the content area uses relative positioning most of the time, and fixed positioning when the full screen map is in place. Using fixed positioning on the big map is nice because you can now scroll down to see more sidebar content, but you won't end up with an ugly block of white space under the map.
This commit is contained in:
Saman Bemel-Benrud
Tom Hughes
parent
0ba1839e78
commit
b70aa5dbbd
7 changed files with 101 additions and 52 deletions
|
|
@ -48,7 +48,8 @@ h2 {
|
|||
|
||||
#left {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
top: 30px;
|
||||
bottom: 0;
|
||||
width: 185px;
|
||||
font-size: 11px;
|
||||
line-height: 12px;
|
||||
|
|
@ -62,7 +63,7 @@ h2 {
|
|||
min-width: 170px;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
margin: 25px auto 5px auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
|
|
@ -322,8 +323,11 @@ h2 {
|
|||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
border-bottom: 1px solid #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 29px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#tabnav {
|
||||
|
|
@ -441,6 +445,13 @@ body.site-export #tabnav a#exportanchor {
|
|||
padding: 5px;
|
||||
}
|
||||
|
||||
.site-index #map .SimpleLayerSwitcher,
|
||||
.site-index #map .olControlSimplePanZoom,
|
||||
.site-export #map .SimpleLayerSwitcher,
|
||||
.site-export #map .olControlSimplePanZoom {
|
||||
top: 40px !important;
|
||||
}
|
||||
|
||||
/* Rules for edit menu */
|
||||
|
||||
.menuicon {
|
||||
|
|
@ -489,7 +500,7 @@ body.site-export #tabnav a#exportanchor {
|
|||
#sidebar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0px;
|
||||
margin: 30px 0px 0px 0px;
|
||||
padding: 0px;
|
||||
width: 30%;
|
||||
top: 0px;
|
||||
|
|
@ -513,7 +524,7 @@ body.site-export #tabnav a#exportanchor {
|
|||
height: 29px;
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
background: #bbb;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
/* Rules for the map key which appears in the popout sidebar */
|
||||
|
|
@ -625,16 +636,23 @@ body.site-export #tabnav a#exportanchor {
|
|||
/* Rules for the main content area */
|
||||
|
||||
#content {
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding: 20px;
|
||||
margin: 30px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.site-edit #content {
|
||||
border: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.site-index #content,
|
||||
.site-edit #content,
|
||||
.site-export #content {
|
||||
border: 0px;
|
||||
position: fixed;
|
||||
margin-top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Rules for the main content area */
|
||||
|
||||
#content {
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
/* Rules for OpenLayers maps */
|
||||
|
||||
.olControlZoom {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ html body {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
/* Rules for the left sidebar */
|
||||
|
||||
#left {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Rules for the menu displayed in the left sidebar */
|
||||
|
||||
.left_menu {
|
||||
|
|
@ -59,7 +65,8 @@ html body {
|
|||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
margin-left: 185px;
|
||||
left: 185px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#tabnav a,
|
||||
|
|
@ -82,12 +89,6 @@ html body {
|
|||
left: 15px
|
||||
}
|
||||
|
||||
/* Rules for OpenLayers maps */
|
||||
|
||||
#map {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Rules for attribution text under the main map shown on printouts */
|
||||
|
||||
.attribution_license {
|
||||
|
|
@ -102,7 +103,7 @@ html body {
|
|||
|
||||
#sidebar {
|
||||
left: 0px;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#sidebar #sidebar_title {
|
||||
|
|
@ -116,9 +117,8 @@ html body {
|
|||
/* Rules for the main content area */
|
||||
|
||||
#content {
|
||||
margin-left: 185px;
|
||||
border-left: 1px solid #ccc;
|
||||
left: 185px;
|
||||
right: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ html body {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
/* Rules for the left sidebar */
|
||||
|
||||
#left {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Rules for the menu displayed in the left sidebar */
|
||||
|
||||
.left_menu {
|
||||
|
|
@ -31,7 +37,7 @@ html body {
|
|||
|
||||
/*
|
||||
* Rules for "optional boxes" which appear in the left sidebar on
|
||||
* certain pages. Current users are the seach box on the main page
|
||||
* certain pages. Current users are the search box on the main page
|
||||
* and the tag cloud on the traces pages.
|
||||
*/
|
||||
|
||||
|
|
@ -59,7 +65,8 @@ html body {
|
|||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
margin-right: 185px
|
||||
right: 185px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#tabnav a,
|
||||
|
|
@ -82,12 +89,6 @@ html body {
|
|||
right: 15px
|
||||
}
|
||||
|
||||
/* Rules for OpenLayers maps */
|
||||
|
||||
#map {
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* Rules for attribution text under the main map shown on printouts */
|
||||
|
||||
.attribution_license {
|
||||
|
|
@ -102,7 +103,7 @@ html body {
|
|||
|
||||
#sidebar {
|
||||
right: 0px;
|
||||
border-right: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#sidebar #sidebar_title {
|
||||
|
|
@ -117,8 +118,7 @@ html body {
|
|||
|
||||
#content {
|
||||
border-right: 1px solid #ccc;
|
||||
right: 185px;
|
||||
left: 0px;
|
||||
margin-right: 185px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,3 +3,21 @@
|
|||
*= require ltr
|
||||
*= require small
|
||||
*/
|
||||
|
||||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* Rules for the site name - shown when left sidebar is hidden */
|
||||
|
||||
#small-title {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
/* Rules for greeting bar in the top right corner */
|
||||
|
||||
#greeting {
|
||||
right: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,3 +3,21 @@
|
|||
*= require rtl
|
||||
*= require small
|
||||
*/
|
||||
|
||||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Rules for the site name - shown when left sidebar is hidden */
|
||||
|
||||
#small-title {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
/* Rules for greeting bar in the top right corner */
|
||||
|
||||
#greeting {
|
||||
left: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,16 +17,18 @@ h1 {
|
|||
}
|
||||
|
||||
/* Rules for tabbed navigation bar */
|
||||
|
||||
#top-bar {
|
||||
margin: 0px;
|
||||
height: 19px;
|
||||
height: 39px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#tabnav {
|
||||
height: 14px;
|
||||
margin: 0px;
|
||||
padding-top: 5px;
|
||||
margin-top: 18px;
|
||||
margin-top: 20px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
|
@ -46,7 +48,7 @@ h1 {
|
|||
height: 16px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 5px;
|
||||
padding: 2px;
|
||||
width: 110px; /* TODO: find better fix for overlap */
|
||||
background-color: #fff;
|
||||
|
|
@ -61,15 +63,14 @@ h1 {
|
|||
position: absolute;
|
||||
left: 18px;
|
||||
font-size: 12px;
|
||||
margin: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Rules for greeting bar in the top right corner */
|
||||
|
||||
#greeting {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
top: 5px;
|
||||
height: 14px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
|
|
@ -95,12 +96,16 @@ h1 {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.site-index #map .olControlZoom,
|
||||
.site-index #map .SimpleLayerSwitcher,
|
||||
.site-export #map .olControlZoom,
|
||||
.site-export #map .SimpleLayerSwitcher {
|
||||
top: 8px !important;
|
||||
}
|
||||
|
||||
/* Rules for the main content area */
|
||||
|
||||
#content {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 38px;
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
border-left: 0px;
|
||||
|
|
@ -108,11 +113,7 @@ h1 {
|
|||
}
|
||||
|
||||
.site-index #content {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 38px;
|
||||
bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* Rules for search sidebar when shown */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue