Ensure the heading text appears above the illustration

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

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

diff --git a/app/views/confirmations/confirm.html.erb b/app/views/confirmations/confirm.html.erb
index 75d72487c482e117cebf3a20066f2017fed216f1..7350f86287494a9e4af12fc15c4bff07f35bbd06 100644 (file)
--- a/app/views/confirmations/confirm.html.erb
+++ b/app/views/confirmations/confirm.html.erb
@@ -1,7 +1,8 @@
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
-  <h1><%= t ".heading" %></h1>
-  <div class='header-illustration confirm-main'></div>
+  <div class='header-illustration confirm-main'>
+    <h1><%= t ".heading" %></h1>
+  </div>
 <% end %>
 
 <% if params[:confirm_string] %>

diff --git a/app/views/users/blocked.html.erb b/app/views/users/blocked.html.erb
index b49990705a4879d1a66a39894bbe8d40f9c2e386..5753ebd9af84fd98d91b4fe80fff0c57bf41c41d 100644 (file)
--- a/app/views/users/blocked.html.erb
+++ b/app/views/users/blocked.html.erb
@@ -1,7 +1,8 @@
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
-  <h1><%= t "users.new.title" %></h1>
-  <div class='header-illustration new-user-main'></div>
+  <div class='header-illustration new-user-main'>
+    <h1><%= t "users.new.title" %></h1>
+  </div>
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 

diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
index 165c9486bcdc7cb7f57b451bade9bedb7dc296da..a94d4a812afdd8b0ed28e1bc87b69b67d41e8cfc 100644 (file)
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -2,10 +2,11 @@
   <%= javascript_include_tag "user" %>
 <% end %>
 
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
-  <h1><%= t ".title" %></h1>
-  <div class='header-illustration new-user-main'></div>
+  <div class='header-illustration new-user-main'>
+    <h1><%= t ".title" %></h1>
+  </div>
   <div class='header-illustration new-user-arm'></div>
 <% end %>
 

diff --git a/app/views/users/terms.html.erb b/app/views/users/terms.html.erb
index f32cc17bd35137712bad7f2d988821a1b2d08ce8..05cf62e3e67038d2572a3d836c721d25bbb19aac 100644 (file)
--- a/app/views/users/terms.html.erb
+++ b/app/views/users/terms.html.erb
@@ -2,10 +2,11 @@
   <%= javascript_include_tag "user" %>
 <% end %>
 
-<% content_for :heading_class, "header-illustration-heading" %>
+<% content_for :heading_class, "pb-0" %>
 <% content_for :heading do %>
-  <h1><%= t ".heading" %></h1>
-  <div class='header-illustration new-user-terms'></div>
+  <div class='header-illustration new-user-terms'>
+    <h1><%= t ".heading" %></h1>
+  </div>
 <% end %>
 
 <%= form_tag({ :action => "save" }) do %>