Merge branch 'pull/4793'

diff --combined app/assets/stylesheets/common.scss
index 7f92b978565ecf8ee0529a51aa77f860a5ec69bb,9684f5d436a5dd900bcc5b5edb7bbb6d3969a187..11f0a5fd386c28e914b2ad10e3175df50988b399
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -16,6 -16,8 +16,6 @@@ time[title] 
    text-decoration: underline dotted;
  }
  
 -#container { position: relative; }
 -
  /* Rules for icons */
  
  .icon {
@@@ -48,7 -50,7 +48,7 @@@
  
  /* Utility for de-emphasizing content */
  
 -.text-muted a {
 +.text-body-secondary a {
    color: $blue;
  }
  
@@@ -96,13 -98,23 +96,13 @@@ header 
    position: relative;
    font-size: 14px;
  
 -  h1, nav, nav > ul, nav > ul > li {
 -    display: inline-block;
 -  }
 -
    > * {
 -    height: 100%;
      padding: $lineheight * 0.5;
    }
  
 -  img.logo {
 -    margin-top: -2px;
 -  }
 -
    h1 {
 +    height: $headerHeight;
      font-size: 18px;
 -    line-height: 1.2;
 -    padding-top: 15px;
    }
  
    .btn {
@@@ -112,10 -124,6 +112,10 @@@
    nav.primary {
      margin-right: auto;
    }
 +
 +  .username {
 +    max-width: 12em;
 +  }
  }
  
  nav.primary {
@@@ -152,7 -160,7 +152,7 @@@
  
  nav.secondary {
    .nav-link {
 -    padding: 0.2rem;
 +    padding: 0.3rem;
    }
  }
  
@@@ -189,7 -197,7 +189,7 @@@ body.small-nav 
      min-height: $headerHeight;
  
      &.closed nav {
 -      display: none;
 +      display: none !important;
      }
  
      .search_forms {
@@@ -214,8 -222,6 +214,8 @@@
    }
  
    nav.secondary {
 +    flex-direction: column;
 +
      .user-menu, .login-menu {
        width: 100%;
      }
@@@ -395,7 -401,7 +395,7 @@@
        overflow-y: scroll;
      }
  
 -    .overlay-sidebar {
 +    .overlay-sidebar.overlay-right-sidebar {
        #sidebar {
          position: absolute;
          width: 350px;
@@@ -403,7 -409,7 +403,7 @@@
          overflow: hidden;
        }
  
 -      #map, #map-ui {
 +      #map {
          height: 100%;
        }
      }
@@@ -423,6 -429,10 +423,6 @@@
    }
  
    .overlay-layers {
 -    p {
 -      font-size: 13px;
 -      margin-bottom: 8px;
 -    }
      li.disabled { color: $darkgrey; }
    }
  }
@@@ -489,6 -499,16 +489,6 @@@
  
  .donate-attr { color: darken($green, 10%) !important; }
  
 -/* Rules for the sidebar */
 -
 -#browse_status {
 -  input {
 -    display: block;
 -    margin-left: auto;
 -    margin-right: auto;
 -  }
 -}
 -
  /* Temporary label size override until we remove site-wide font customisation */
  
  form {
@@@ -568,12 -588,10 +568,12 @@@ tr.turn 
      cursor: pointer;
  }
  
 -.routing_marker { width: 15px; cursor: move; }
 +.routing_marker_column {
 +  width: 15px;
  
 -.browse_status {
 -  display: none;
 +  img {
 +    cursor: move;
 +  }
  }
  
  /* Rules for the history sidebar */
@@@ -624,11 -642,26 +624,11 @@@
      }
    }
  
 -  .note-description {
 -    overflow: hidden;
 -    margin: 0 0 10px 10px;
 -  }
 -
    .query-results {
      display: none;
    }
  }
  
 -/* Bootstrap buttons don't have any vertical margin, so
 -   they touch when adjacent buttons wrap onto a new line
 -   e.g. wide form buttons on a narrow sidebar */
 -
 -.btn-wrapper {
 -  > .btn {
 -    margin-bottom: $spacer * 0.25;
 -  }
 -}
 -
  /* Force LTR/RTL alignment for placeholder text */
  
  .form-control::placeholder {
@@@ -680,7 -713,7 +680,7 @@@
  /* Overrides for pages that use new layout conventions */
  
  .header-illustration {
-   background-position: 0 0;
+   background-position: right;
    background-repeat: no-repeat;
    position: relative;
    min-height: 200px;
@@@ -689,16 -722,16 +689,16 @@@
    bottom: 0;
  
    &.new-user-main {
-     background-image: image-url("sign-up-illustration.png");
-     background-position-x: 50px;
+     background-image: image-url("sign-up-illustration.svg");
+     background-position-x: 70px;
    }
  
    &.confirm-main {
-     background-image: image-url("confirm-illustration.png");
+     background-image: image-url("confirm-illustration.svg");
    }
  
    &.new-user-terms {
-     background-image: image-url("terms-illustration.png");
+     background-image: image-url("terms-illustration.svg");
    }
  }
  
@@@ -858,7 -891,53 +858,7 @@@ div.secondary-actions 
    }
  }
  
 -/* Rules for the "Welcome" page */
 -.site-welcome, .site-fixthemap {
 -  .sprite {
 -    background-image: image-url("welcome-sprite.svg");
 -    background-size: 500px 250px;
 -    display: block;
 -  }
 -
 -  .sprite.small {
 -    width: 50px;
 -    height: 50px;
 -  }
 -
 -  .sprite.x {
 -    /*rtl:ignore*/ background-position: -50px 0;
 -  }
 -
 -  .sprite.term {
 -    margin-right: 10px;
 -    vertical-align: middle;
 -    display: inline-block;
 -  }
 -
 -  .sprite.node {
 -    /*rtl:ignore*/ background-position: -100px 0;
 -  }
 -
 -  .sprite.way {
 -    /*rtl:ignore*/ background-position: -150px 0;
 -  }
 -
 -  .sprite.tag {
 -    /*rtl:ignore*/ background-position: -200px 0;
 -  }
 -
 -  .sprite.editor {
 -    /*rtl:ignore*/ background-position: -250px 0;
 -  }
 -
 -  .sprite.question {
 -    /*rtl:ignore*/ background-position: -300px 0;
 -  }
 -
 -  .sprite.rules {
 -    /*rtl:ignore*/ background-position: -350px 0;
 -  }
 -}
 +/* Rules for the "About" page */
  
  .site-about #content {
    .content-inner {
@@@ -891,6 -970,37 +891,6 @@@
        display: inline-block;
        width: 1em;
        margin-left: -1em;
 -    }
 -  }
 -
 -  .icon {
 -    width: 30px;
 -    height: 30px;
 -    background: 40px 40px image-url('about/sprite.png') no-repeat;
 -
 -    &.local {
 -      /*rtl:ignore*/
 -      background-position: 0px 0px;
 -    }
 -    &.community {
 -      /*rtl:ignore*/
 -      background-position: 0px -40px;
 -    }
 -    &.open {
 -      /*rtl:ignore*/
 -      background-position: 0px -80px;
 -    }
 -    &.partners {
 -      /*rtl:ignore*/
 -      background-position: 0px -120px;
 -    }
 -    &.infringement {
 -      /*rtl:ignore*/
 -      background-position: 0px -160px;
 -    }
 -    &.legal {
 -      /*rtl:ignore*/
 -      background-position: -45px -160px;
      }
    }
  }