Merge branch 'leaflet'

[rails.git] / app / assets / stylesheets / common.css.scss

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index a1099a153c9c45a38e4936c3f72920b455f3aceb..217bb0c669c341463fea61a90296d7e466bad1b6 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -10,6 +10,7 @@ body {
   background-color: #fff;
   margin: 0px;
   padding: 0px;
+  text-align: left;
 }
 
 body.slim {
@@ -48,20 +49,23 @@ h2 {
 
 #left {
   position: absolute;
-  top: 0px;
+  top: 30px;
+  bottom: 0;
   width: 185px;
   font-size: 11px;
   line-height: 12px;
+  border-right: 1px solid #ccc;
 }
 
 /* Rules for the OpenStreetMap logo in the top left corner */
 
 #logo {
+  display: block;
   width: 170px;
   min-width: 170px;
   padding: 5px;
   text-align: center;
-  margin: 25px 0 5px 0;
+  margin: auto;
 }
 
 #logo img {
@@ -94,7 +98,7 @@ h2 {
 /* Rules for the introductory text displayed in the left sidebar to new users */
 
 .sidebar-copy {
-  padding: 0px 10px;
+  padding: 5px 10px;
 }
 
 .sidebar-copy p {
@@ -150,38 +154,35 @@ h2 {
 /* Rules for the menu displayed in the left sidebar */
 
 .left_menu {
+  left: 0px;
+  margin: 0;
   padding: 5px 10px;
-  margin: 4px 0;
+  line-height: 15px;
+  font-size: 12px;
+  list-style-type: none;
+  border-bottom: 1px solid #ccc;
   border-top: 1px solid #ccc;
-  line-height: 20px;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.left_menu h1 {
-  font-style: normal;
-  font-size: 15px;
 }
 
 .left_menu ul {
-  margin: 0px;
-  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 
 .left_menu li {
-  margin: 0px;
-  padding: 0px;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 
-/* submenus */
-.left_menu ul li ul {
-  font-weight: normal;
-  line-height: 15px;
+.left_menu h4 {
+  padding: 5px 0 5px 0;
   font-size: 12px;
+  margin: 0;
 }
 
-.left_menu a {
-  color: #000;
+.left_menu li:last-child h4 {
+  padding-top: 0;
 }
 
 /* Rules for SOTM advert */
@@ -205,8 +206,10 @@ h2 {
  */
 
 .optionalbox {
+  left: 0px;
   padding: 5px 10px;
-  margin: 4px 0;
+  margin: 5px 0;
+  text-align: left;
 }
 
 .optionalbox h1 {
@@ -223,21 +226,21 @@ h2 {
 }
 
 #search_field form {
-  width: 100%;
+  width: 165px;
   margin: 0px;
   padding: 0px;
 }
 
 #search_field {
-  position:relative;
+  position: relative;
 }
 
 #search_field input[type="text"] {
   width: 165px;
-  padding: 5px;
   font-size: 14px;
   line-height: 15px;
   height: 25px;
+  padding: 2px 0px 2px 5px;
   box-shadow: inset #DDD 0px 1px 3px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -253,19 +256,21 @@ h2 {
 #search_field input[type="submit"] {
   width: 15px;
   height: 15px;
-  border:0;
-  text-indent:-1000px;
+  border: 0px;
+  text-indent: -1000px;
+  overflow: hidden;
+  text-transform: capitalize;
   padding-left: 0px;
   padding-right: 0px;
-  background: url(sprite.png);
-  position:absolute;
-  right:2px;
-  top:5px;
-  cursor:pointer;
+  background: image-url("sprite.png");
+  position: absolute;
+  top: 5px;
+  right: 4px;
+  cursor: pointer;
 }
 
 .search_help {
-  margin:0;
+  margin: 5px 0 0 0;
 }
 
 .deemphasize {
@@ -279,8 +284,10 @@ h2 {
 /* Rules for donation request box */
 
 .donate {
+  display: block;
+  position: relative;
   width: 153px;
-  margin: 10px 10px;
+  margin: 10px 10px 0px 10px;
   padding: 5px;
   border: 1px solid #AED1A0;
   background: #cbeea7;
@@ -289,10 +296,29 @@ h2 {
   font-size: 14px;
   border-radius: 2px;
   -moz-border-radius: 2px;
+  color: #222;
 }
 
-.donate a {
-  color:#222;
+.donate:hover {
+  background: #9ed485;
+  text-decoration: none;
+}
+
+.donate p {
+  text-indent: 20px;
+  margin: 0;
+}
+
+.donate .donate-icon {
+  width: 15px;
+  height: 15px;
+  border: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  background: image-url("sprite.png") 0 -30px no-repeat;
+  position: absolute;
+  top: 8px;
+  left: 17px;
 }
 
 /* Rules for Creative Commons logo button */
@@ -305,8 +331,13 @@ h2 {
 /* Rules for tabbed navigation bar */
 
 #top-bar {
-  border-bottom: 1px solid #ccc;
+  position: absolute;
+  top: 0;
+  left: 185px;
+  right: 0;
   height: 29px;
+  border-bottom: 1px solid #ccc;
+  background: white;
 }
 
 #tabnav {
@@ -323,11 +354,13 @@ h2 {
 }
 
 #tabnav a, #tabnav a:link, #tabnav a:visited {
+  float: left;
   background: #fff;
   font-size: 14px;
   line-height: 19px;
   font-weight: bold;
   padding: 5px 10px;
+  margin-right: 1px;
   text-decoration: none;
   color: #333;
   -webkit-transition: color 200ms ease-in;
@@ -376,8 +409,10 @@ body.site-export #tabnav a#exportanchor {
 /* Rules for greeting bar in the top right corner */
 
 #greeting {
+  float: right;
   height: 28px;
   margin: 0px;
+  padding-right: 10px;
   font-size: 13px;
   line-height: 28px;
 }
@@ -392,9 +427,10 @@ body.site-export #tabnav a#exportanchor {
   z-index: 20000000;
   position: absolute;
   top: 15px;
+  left: 15px;
 }
 
-/* Rules for OpenLayers maps */
+/* Rules for Leaflet maps */
 
 #map {
   margin: 0px;
@@ -402,13 +438,6 @@ body.site-export #tabnav a#exportanchor {
   padding: 0px;
 }
 
-.olControlAttribution {
-  bottom: 15px !important;
-  left: 0px !important;
-  right: 0px !important;
-  text-align: center;
-}
-
 #permalink {
   z-index: 10000;
   position: absolute;
@@ -424,6 +453,20 @@ body.site-export #tabnav a#exportanchor {
   padding: 5px;
 }
 
+.site-index .leaflet-top,
+.site-export .leaflet-top {
+  top: 40px !important;
+
+  .leaflet-control {
+    margin-top: 0px !important;
+  }
+}
+
+.site-index #map .olControlScaleLine,
+.site-export #map .olControlScaleLine {
+  left: 10px !important;
+}
+
 /* Rules for edit menu */
 
 .menuicon {
@@ -463,20 +506,30 @@ body.site-export #tabnav a#exportanchor {
   display: none;
 }
 
+.attribution_license {
+  text-align: left;
+}
+
 .attribution_notice {
   text-align: center;
 }
 
+.attribution_project {
+  text-align: right;
+}
+
 /* Rules for the popout map sidebar */
 
 #sidebar {
   display: none;
   position: absolute;
-  margin: 0px;
+  margin: 30px 0px 0px 0px;
   padding: 0px;
+  border-right: 1px solid #ccc;
   width: 30%;
   top: 0px;
   bottom: 0px;
+  left: 0px;
 }
 
 #sidebar #sidebar_content {
@@ -496,7 +549,15 @@ body.site-export #tabnav a#exportanchor {
   height: 29px;
   font-size: 14px;
   line-height: 15px;
-  background: #bbb;
+  background: #ccc;
+}
+
+#sidebar #sidebar_title {
+  text-align: left;
+}
+
+#sidebar #sidebar_close {
+  text-align: right;
 }
 
 /* Rules for the map key which appears in the popout sidebar */
@@ -608,19 +669,28 @@ 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 185px;
+  border-left: 1px solid #ccc;
+  text-align: left;
 }
 
-.site-index #content,
 .site-edit #content,
+.site-index #content,
 .site-export #content {
-  border: 0px;
+  position: fixed;
+  margin-top: 0px;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
   padding: 0px;
 }
 
+.site-edit #content {
+  top: 30px;
+}
+
 #slim_container {
   width: 100%;
 }
@@ -650,6 +720,7 @@ body.site-export #tabnav a#exportanchor {
 #slim_header img {
   vertical-align: middle;
   margin-bottom: 5px;
+  margin-right: 5px;
 }
 
 /* Rules for text content pages */
@@ -700,6 +771,7 @@ body.site-export #tabnav a#exportanchor {
   border-width: 0px;
   margin-top: 1px;
   margin-bottom: 1px;
+  text-align: left;
 }
 
 #changeset_list td {
@@ -726,8 +798,10 @@ body.site-export #tabnav a#exportanchor {
 
 #changeset_list_map {
   position: absolute;
+  float: right;
   top: 0px;
   bottom: 0px;
+  right: 0px;
   width: 49%;
   min-height: 400px;
   border: solid 1px black;
@@ -736,7 +810,9 @@ body.site-export #tabnav a#exportanchor {
 /* Rules for the data browser */
 
 #browse_navigation {
+  float: right;
   width: 250px;
+  margin-left: 10px;
   text-align: center;
 }
 
@@ -745,7 +821,10 @@ table.browse_details th {
 }
 
 #browse_map {
+  float: right;
   width: 250px;
+  text-align: right;
+  margin-left: 10px;
 }
 
 #browse_map #small_map {
@@ -764,6 +843,7 @@ table.browse_details th {
   font-size: small;
   border-collapse: collapse;
   border-width: 0px;
+  text-align: right;
 }
 
 #trace_list .trace_summary {
@@ -808,9 +888,30 @@ table.browse_details th {
 }
 
 #user_list_actions {
+  float: right;
   margin-top: 10px;
 }
 
+/* Rules for the diary list */
+
+.diary_entry-list img.user_image {
+  float: right;
+}
+
+.diary_entry-list img.user_thumbnail {
+  float: right;
+}
+
+/* Rules for the diary entry view */
+
+.diary_entry-view img.user_image {
+  float: right;
+}
+
+.diary_entry-view img.user_thumbnail {
+  float: right;
+}
+
 /* Rules for the new diary entry page */
 
 .diary_entry div#map {
@@ -899,6 +1000,14 @@ form#termsForm {
   margin-bottom: 3em;
 }
 
+form#termsForm div#buttons {
+  float: right;
+}
+
+form#termsForm input#agree {
+  margin-left: 50px;
+}
+
 div#slim_content form#termsForm {
   width: auto;
 }
@@ -924,7 +1033,7 @@ p#contributorGuidance {
 #accountForm .user_map {
   position: relative;
   width: 500px;
-  height: 400px; 
+  height: 400px;
   border: 1px solid #ccc;
 }
 
@@ -961,10 +1070,15 @@ p#contributorGuidance {
 
 /* Rules for the user view */
 
+.user-view img.user_image {
+  float: right;
+}
+
 .user-view .user_map {
+  float: right;
   position: relative;
   width: 400px;
-  height: 400px; 
+  height: 400px;
   border: 1px solid #ccc;
 }
 
@@ -979,16 +1093,21 @@ p#contributorGuidance {
 
 /* Rules for the user map */
 
-.user_map .olControlSimplePanZoom {
+.user_map .leaflet-control-pan,
+.user_map .leaflet-control-zoomslider {
   display: none;
 }
 
-.user_map .olControlZoom {
+.user_map .leaflet-control-zoom {
   display: block;
 }
 
 /* Rules for user popups on maps */
 
+.user_popup {
+  min-width: 200px;
+}
+
 .user_popup p {
   padding-top: 3px;
   padding-bottom: 3px;
@@ -1101,9 +1220,11 @@ p#contributorGuidance {
 #errorExplanation h2 {
   font-weight: bold;
   font-size: 12px;
+  padding: 5px 5px 5px 15px;
   margin: -7px;
   background-color: #c00;
   color: #fff;
+  text-align: left;
 }
 
 #errorExplanation p {
@@ -1124,6 +1245,11 @@ p#contributorGuidance {
   font-weight: bold;
   font-size: 12px;
   line-height: 20px;
+  text-align: right;
+}
+
+.submitButton {
+  text-align: right;
 }
 
 .minorNote {
@@ -1138,6 +1264,11 @@ textarea {
   border: 1px solid #ccc;
 }
 
+input.openid_url {
+  background: image-url('openid_input.png') repeat-y left white;
+  padding-left: 16px;
+}
+
 /* Rules for user images */
 
 img.user_image {
@@ -1227,6 +1358,7 @@ abbr.geo {
     display: inline-block;
     vertical-align: top;
     background-color: #ddd;
+    margin-left: 15px;
     padding: 5px 10px 10px 10px;
     font-size: 12px;
 
@@ -1236,9 +1368,12 @@ abbr.geo {
 
     th {
       vertical-align: top;
+      text-align: left;
+      padding: 0px 15px 0px 0px !important;
     }
 
     td {
+      text-align: left;
       font-family: fixed;
       line-height: 16px;
       padding: 0px !important;
@@ -1246,10 +1381,12 @@ abbr.geo {
 
     input.richtext_doedit {
       margin-top: 5px !important;
+      margin-right: 10px !important;
     }
 
     input.richtext_dopreview {
       margin-top: 5px !important;
+      margin-left: 10px !important;
     }
   }
 }