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.

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 350877403f5c9a361fb935424ed0c108b1bda170..4ff87a87a7bfb47ce798ec560a71d31debaf5afc 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -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;
 }
 

diff --git a/app/assets/stylesheets/large.css b/app/assets/stylesheets/large.css
index 05da4445f8cd75b5c459f4418158d525be187c22..ca58badc4097e70c98bd0a854377025756070b29 100644 (file)
--- a/app/assets/stylesheets/large.css
+++ b/app/assets/stylesheets/large.css
@@ -6,12 +6,6 @@
   display: none;
 }
 
-/* Rules for the main content area */
-
-#content {
-  top: 30px;
-}
-
 /* Rules for OpenLayers maps */
 
 .olControlZoom {

diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss
index dc97faf3e45a5d54d0478d9a35d7911254226041..2fc5c8053c9a816422c6e636f03c727c5674671d 100644 (file)
--- a/app/assets/stylesheets/ltr.css.scss
+++ b/app/assets/stylesheets/ltr.css.scss
@@ -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;
 }
 

diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
index 4b857e0ec33c93ad76078bd06caabfca5535b514..e342ee59c50d5765902978eb478450af33a5a0e9 100644 (file)
--- a/app/assets/stylesheets/rtl.css.scss
+++ b/app/assets/stylesheets/rtl.css.scss
@@ -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;
 }
 

diff --git a/app/assets/stylesheets/small-ltr.css b/app/assets/stylesheets/small-ltr.css
index 2526d258517c62c6838be97d79d2fac0d343fb06..716712912731272df60468c6d3e8303bd56acb01 100644 (file)
--- a/app/assets/stylesheets/small-ltr.css
+++ b/app/assets/stylesheets/small-ltr.css
@@ -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;
+}

diff --git a/app/assets/stylesheets/small-rtl.css b/app/assets/stylesheets/small-rtl.css
index 4d3a5e1fc7e14e50f02120d800774df9271e913b..42482f7a96325c62dd6ec914e5194e0cfc397c71 100644 (file)
--- a/app/assets/stylesheets/small-rtl.css
+++ b/app/assets/stylesheets/small-rtl.css
@@ -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;
+}

diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index daacb5a7fa1ea77923d74320e9909607331b52c3..a955017757f6cb675d4fc0642672d6c6c766489b 100644 (file)
--- a/app/assets/stylesheets/small.css.scss
+++ b/app/assets/stylesheets/small.css.scss
@@ -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 */