cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #4296 from AntonKhorev/header-flex

Browse source 
Use flex container instead of floats in header
This commit is contained in:
Andy Allan 2023-11-22 17:22:46 +00:00 • committed by GitHub
commit 9026b84d84
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/application.js
View file

@ -103,6 +103,8 @@ $(document).ready(function () {
$("body").removeClass("compact-nav"); $("body").removeClass("compact-nav");
$("header").removeClass("text-nowrap");
updateHeader(); updateHeader();
$(window).resize(updateHeader); $(window).resize(updateHeader);

33
app/assets/stylesheets/common.scss
View file

@ -81,7 +81,9 @@ time[title] {
#menu-icon { #menu-icon {
display: none; display: none;
float: right; position: absolute;
top: 0;
right: 0;
background: image-url("menu-icon.png") no-repeat; background: image-url("menu-icon.png") no-repeat;
background-size: 30px 30px; background-size: 30px 30px;
width: 30px; width: 30px;
@ -105,10 +107,6 @@ header {
padding: $lineheight * 0.5; padding: $lineheight * 0.5;
} }
h1, nav.primary {
float: left;
}
img.logo { img.logo {
margin-top: -2px; margin-top: -2px;
} }
@ -122,8 +120,11 @@ header {
.btn { .btn {
font-size: 14px; font-size: 14px;
} }
}
nav.primary {
margin-right: auto;
}
}
nav.primary { nav.primary {
& > .btn-group .btn-outline-primary { & > .btn-group .btn-outline-primary {
@ -158,9 +159,6 @@ nav.primary {
} }
nav.secondary { nav.secondary {
position: absolute;
right: 0;
.nav-link { .nav-link {
padding: 0.2rem; padding: 0.2rem;
color: $darkgrey; color: $darkgrey;
@ -202,15 +200,8 @@ body.small-nav {
display: block; display: block;
} }
nav.primary,
nav.secondary {
float: none !important;
position: relative;
display: block;
clear: both;
}
header { header {
flex-direction: column;
height: auto; height: auto;
min-height: $headerHeight; min-height: $headerHeight;
background: #fff; background: #fff;
@ -231,6 +222,7 @@ body.small-nav {
} }
nav.primary { nav.primary {
margin-right: 0;
padding: 0; padding: 0;
ul, li { ul, li {
@ -943,10 +935,9 @@ img.user_thumbnail {
} }
img.user_thumbnail_tiny { img.user_thumbnail_tiny {
width: auto; width: 25px;
height: auto; height: 25px;
max-width: 25px; object-fit: contain;
max-height: 25px;
} }
/* General styles for action lists / subnavs */ /* General styles for action lists / subnavs */

4
app/views/layouts/_header.html.erb
View file

@ -1,4 +1,4 @@
<header class="closed clearfix"> <header class="d-flex text-nowrap closed">
<h1 class="m-0 fw-semibold"> <h1 class="m-0 fw-semibold">
<a href="<%= root_path %>" class="text-black text-decoration-none geolink"> <a href="<%= root_path %>" class="text-black text-decoration-none geolink">
<%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t("layouts.logo.alt_text"), :width => 30, :height => 30, :class => "logo" %> <%= image_tag "osm_logo.png", :srcset => image_path("osm_logo.svg"), :alt => t("layouts.logo.alt_text"), :width => 30, :height => 30, :class => "logo" %>
@ -80,7 +80,7 @@
</li> </li>
</ul> </ul>
<% if current_user && current_user.id %> <% if current_user && current_user.id %>
<div class='d-inline-flex dropdown user-menu logged-in clearfix'> <div class='d-inline-flex dropdown user-menu logged-in'>
<button class='dropdown-toggle btn btn-outline-secondary border-grey bg-white text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'> <button class='dropdown-toggle btn btn-outline-secondary border-grey bg-white text-secondary px-2 py-1 flex-grow-1' type='button' data-bs-toggle='dropdown'>
<%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %> <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-1") %>
<%= render :partial => "layouts/inbox" %> <%= render :partial => "layouts/inbox" %>