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

Ensure the heading text appears above the illustration

Browse source 
The easiest way to do this is to make the text a child of the div
with the background image. The change to min-size is so that if
the text wraps often enough on narrow screens, the header expands
vertically rather than the text spilling over.

Fixes #3259
This commit is contained in:
Andy Allan 2021-07-21 15:07:24 +01:00
parent 2443e7dd65
commit 2a885c2cce
5 changed files with 21 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1035,15 +1035,11 @@ tr.turn:hover {
/* Overrides for pages that use new layout conventions */ /* Overrides for pages that use new layout conventions */
.header-illustration-heading {
height: 200px;
}
.header-illustration { .header-illustration {
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: relative;
height: 200px; min-height: 200px;
width: 100%; width: 100%;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -1063,9 +1059,10 @@ tr.turn:hover {
&.new-user-arm { &.new-user-arm {
height: 110px; height: 110px;
width: 130px; width: 130px;
left: 260px; left: 280px;
top: 160px; top: 180px;
background-image: image-url("sign-up-illustration-arm.png"); background-image: image-url("sign-up-illustration-arm.png");
position: absolute;
z-index: 100; z-index: 100;
} }
} }

5
app/views/confirmations/confirm.html.erb
View file

@ -1,7 +1,8 @@
<% content_for :heading_class, "header-illustration-heading" %> <% content_for :heading_class, "pb-0" %>
<% content_for :heading do %> <% content_for :heading do %>
<div class='header-illustration confirm-main'>
<h1><%= t ".heading" %></h1> <h1><%= t ".heading" %></h1>
<div class='header-illustration confirm-main'></div> </div>
<% end %> <% end %>
<% if params[:confirm_string] %> <% if params[:confirm_string] %>

5
app/views/users/blocked.html.erb
View file

@ -1,7 +1,8 @@
<% content_for :heading_class, "header-illustration-heading" %> <% content_for :heading_class, "pb-0" %>
<% content_for :heading do %> <% content_for :heading do %>
<div class='header-illustration new-user-main'>
<h1><%= t "users.new.title" %></h1> <h1><%= t "users.new.title" %></h1>
<div class='header-illustration new-user-main'></div> </div>
<div class='header-illustration new-user-arm'></div> <div class='header-illustration new-user-arm'></div>
<% end %> <% end %>

5
app/views/users/new.html.erb
View file

@ -2,10 +2,11 @@
<%= javascript_include_tag "user" %> <%= javascript_include_tag "user" %>
<% end %> <% end %>
<% content_for :heading_class, "header-illustration-heading" %> <% content_for :heading_class, "pb-0" %>
<% content_for :heading do %> <% content_for :heading do %>
<div class='header-illustration new-user-main'>
<h1><%= t ".title" %></h1> <h1><%= t ".title" %></h1>
<div class='header-illustration new-user-main'></div> </div>
<div class='header-illustration new-user-arm'></div> <div class='header-illustration new-user-arm'></div>
<% end %> <% end %>

5
app/views/users/terms.html.erb
View file

@ -2,10 +2,11 @@
<%= javascript_include_tag "user" %> <%= javascript_include_tag "user" %>
<% end %> <% end %>
<% content_for :heading_class, "header-illustration-heading" %> <% content_for :heading_class, "pb-0" %>
<% content_for :heading do %> <% content_for :heading do %>
<div class='header-illustration new-user-terms'>
<h1><%= t ".heading" %></h1> <h1><%= t ".heading" %></h1>
<div class='header-illustration new-user-terms'></div> </div>
<% end %> <% end %>
<%= form_tag({ :action => "save" }) do %> <%= form_tag({ :action => "save" }) do %>