From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Wed, 24 Oct 2012 23:25:51 +0000 (-0400)
Subject: Change approach to layout in order to fix some weird CSS problems
X-Git-Tag: live~5234
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/b70aa5dbbde613e151a97da8dcf8855d2fffbebe

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 350877403..4ff87a87a 100644
--- 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 05da4445f..ca58badc4 100644
--- 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 dc97faf3e..2fc5c8053 100644
--- 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 4b857e0ec..e342ee59c 100644
--- 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 2526d2585..716712912 100644
--- 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 4d3a5e1fc..42482f7a9 100644
--- 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 daacb5a7f..a95501775 100644
--- 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 */