Merge pull request #4296 from AntonKhorev/header-flex

Use flex container instead of floats in header

diff --combined app/assets/stylesheets/common.scss
index 6236d3c3d04e60b54568ceb64b9acef25be1c958,53e371addb55fe6e1195a4a5e5c365ac8d2c8f48..a4b126b9479477aca391fce9bc5d5a019fe530d1
--- 1/app/assets/stylesheets/common.scss
--- 2/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@@ -2,6 -2,34 +2,6 @@@
  @import "bootstrap";
  @import "rails_bootstrap_forms";
  
 -/* Bootstrap + r2 fixes */
 -
 -:root[dir=rtl] {
 -  .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
 -    /* no-r2 */
 -    right: unset !important;
 -    left: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
 -
 -    &::before {
 -      /* no-r2 */
 -      left: unset !important;
 -      right: -1px !important;
 -    }
 -  }
 -
 -  .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
 -    /* no-r2 */
 -    left: unset !important;
 -    right: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
 -
 -    &::before {
 -      /* no-r2 */
 -      right: unset !important;
 -      left: -1px !important;
 -    }
 -  }
 -}
 -
  /* Styles common to large and small screens */
  
  /* Default rules for the body of every page */
@@@ -43,23 -71,23 +43,23 @@@ time[title] 
    overflow: hidden;
  }
  
 -.icon.search      { /* no-r2 */ background-position: 0 0; }
 -.icon.donate      { /* no-r2 */ background-position: -20px 0; }
 -.icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
 -.icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
 -.icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
 -.active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
 -.icon.layers      { /* no-r2 */ background-position: -100px 0; }
 -.icon.key         { /* no-r2 */ background-position: -120px 0; }
 -.icon.share       { /* no-r2 */ background-position: -140px 0; }
 -.icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
 -.icon.link        { /* no-r2 */ background-position: -180px 0; }
 -.icon.close       { /* no-r2 */ background-position: -200px 0; }
 -.icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
 -.icon.check       { /* no-r2 */ background-position: -220px 0; }
 -.icon.note        { /* no-r2 */ background-position: -240px 0; }
 -.icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
 -.icon.query       { /* no-r2 */ background-position: -260px 0; }
 +.icon.search      { /*rtl:ignore*/ background-position: 0 0; }
 +.icon.donate      { /*rtl:ignore*/ background-position: -20px 0; }
 +.icon.zoomin      { /*rtl:ignore*/ background-position: -40px 0; }
 +.icon.zoomout     { /*rtl:ignore*/ background-position: -60px 0; }
 +.icon.geolocate   { /*rtl:ignore*/ background-position: -80px 0; }
 +.active .icon.geolocate   { /*rtl:ignore*/ background-position: -80px -20px; }
 +.icon.layers      { /*rtl:ignore*/ background-position: -100px 0; }
 +.icon.key         { /*rtl:ignore*/ background-position: -120px 0; }
 +.icon.share       { /*rtl:ignore*/ background-position: -140px 0; }
 +.icon.clipboard   { /*rtl:ignore*/ background-position: -160px 0; }
 +.icon.link        { /*rtl:ignore*/ background-position: -180px 0; }
 +.icon.close       { /*rtl:ignore*/ background-position: -200px 0; }
 +.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
 +.icon.check       { /*rtl:ignore*/ background-position: -220px 0; }
 +.icon.note        { /*rtl:ignore*/ background-position: -240px 0; }
 +.icon.note.grey   { /*rtl:ignore*/ background-position: -240px -20px; }
 +.icon.query       { /*rtl:ignore*/ background-position: -260px 0; }
  
  /* Utility for de-emphasizing content */
  
@@@ -81,7 -109,9 +81,9 @@@
  
  #menu-icon {
    display: none;
-   float: right;
+   position: absolute;
+   top: 0;
+   right: 0;
    background: image-url("menu-icon.png") no-repeat;
    background-size: 30px 30px;
    width: 30px;
@@@ -105,10 -135,6 +107,6 @@@ header 
      padding: $lineheight * 0.5;
    }
  
-   h1, nav.primary {
-     float: left;
-   }
- 
    img.logo {
      margin-top: -2px;
    }
@@@ -122,8 -148,11 +120,11 @@@
    .btn {
      font-size: 14px;
    }
- }
  
+   nav.primary {
+     margin-right: auto;
+   }
+ }
  
  nav.primary {
    & > .btn-group .btn-outline-primary {
@@@ -158,9 -187,6 +159,6 @@@
  }
  
  nav.secondary {
-   position: absolute;
-   right: 0;
- 
    .nav-link {
      padding: 0.2rem;
      color: $darkgrey;
@@@ -202,15 -228,8 +200,8 @@@ body.small-nav 
      display: block;
    }
  
-   nav.primary,
-   nav.secondary {
-     float: none !important;
-     position: relative;
-     display: block;
-     clear: both;
-   }
- 
    header {
+     flex-direction: column;
      height: auto;
      min-height: $headerHeight;
      background: #fff;
@@@ -231,6 -250,7 +222,7 @@@
    }
  
    nav.primary {
+     margin-right: 0;
      padding: 0;
  
      ul, li {
@@@ -729,12 -749,6 +721,12 @@@ tr.turn:hover 
    }
  }
  
 +/* Force LTR/RTL alignment for placeholder text */
 +
 +.form-control::placeholder {
 +  text-align: left;
 +}
 +
  /* Rules for export sidebar */
  
  .export_form {
@@@ -757,11 -771,11 +749,11 @@@
      #maxlat { margin-top: -1px; }
      #minlon {
        float: left;
 -      /* no-r2 */ margin-left: -1px;
 +      /*rtl:ignore*/ margin-left: -1px;
      }
      #maxlon {
        float: right;
 -      /* no-r2 */ margin-right: -1px;
 +      /*rtl:ignore*/ margin-right: -1px;
      }
      #minlat { margin-bottom: -1px; }
    }
@@@ -943,10 -957,9 +935,9 @@@ img.user_thumbnail 
  }
  
  img.user_thumbnail_tiny {
-   width: auto;
-   height: auto;
-   max-width: 25px;
-   max-height: 25px;
+   width: 25px;
+   height: 25px;
+   object-fit: contain;
  }
  
  /* General styles for action lists / subnavs */
@@@ -1026,7 -1039,7 +1017,7 @@@ div.secondary-actions 
    }
  
    .sprite.x {
 -    /* no-r2 */ background-position: -50px 0;
 +    /*rtl:ignore*/ background-position: -50px 0;
    }
  
    .sprite.term {
@@@ -1035,27 -1048,27 +1026,27 @@@
    }
  
    .sprite.node {
 -    /* no-r2 */ background-position: -100px 0;
 +    /*rtl:ignore*/ background-position: -100px 0;
    }
  
    .sprite.way {
 -    /* no-r2 */ background-position: -150px 0;
 +    /*rtl:ignore*/ background-position: -150px 0;
    }
  
    .sprite.tag {
 -    /* no-r2 */ background-position: -200px 0;
 +    /*rtl:ignore*/ background-position: -200px 0;
    }
  
    .sprite.editor {
 -    /* no-r2 */ background-position: -250px 0;
 +    /*rtl:ignore*/ background-position: -250px 0;
    }
  
    .sprite.question {
 -    /* no-r2 */ background-position: -300px 0;
 +    /*rtl:ignore*/ background-position: -300px 0;
    }
  
    .sprite.rules {
 -    /* no-r2 */ background-position: -350px 0;
 +    /*rtl:ignore*/ background-position: -350px 0;
    }
  
    .icon.note {
@@@ -1106,27 -1119,27 +1097,27 @@@
      background: 40px 40px image-url('about/sprite.png') no-repeat;
  
      &.local {
 -      /* no-r2 */
 +      /*rtl:ignore*/
        background-position: 0px 0px;
      }
      &.community {
 -      /* no-r2 */
 +      /*rtl:ignore*/
        background-position: 0px -40px;
      }
      &.open {
 -      /* no-r2 */
 +      /*rtl:ignore*/
        background-position: 0px -80px;
      }
      &.partners {
 -      /* no-r2 */
 +      /*rtl:ignore*/
        background-position: 0px -120px;
      }
      &.infringement {
 -      /* no-r2 */
 +      /*rtl:ignore*/
        background-position: 0px -160px;
      }
      &.legal {
 -      /* no-r2 */
 +      /*rtl:ignore*/
        background-position: -45px -160px;
      }
    }