Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DO NOT MERGE] Full width image test #4381

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

[DO NOT MERGE] Full width image test #4381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32e719a
Full width image test
andysellick Nov 8, 2024
af9b024
Add faded gradient test
andysellick Nov 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added app/assets/images/herotest.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
90 changes: 90 additions & 0 deletions app/assets/stylesheets/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,3 +61,93 @@ $govuk-include-default-font-face: false;
.bank-hols .govuk-panel {
margin-bottom: govuk-spacing(6);
}

.herotest {
position: relative;
background: govuk-colour("mid-grey");
margin-bottom: 300px;
}

.herotest-image {
display: block;
max-width: 100%;
}

.herotest-text-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.herotest-text-box {
width: calc(100% / 2);
margin-top: govuk-spacing(4);
padding: govuk-spacing(4);
background: govuk-colour("light-grey");
border: solid 1px $govuk-border-colour;
}

.herotest--limited-width {
background: govuk-colour("mid-grey");

.herotest-image {
width: 1573px;
margin: 0 auto;
}
}

.herotest--fixed-height {
.herotest-wrapper {
display: flex;
justify-content: center;
height: 500px;
overflow: hidden;
}

.herotest-image {
height: 100%;
max-width: none;
}
}

.herotest--true-full-fixed-height {
.herotest-wrapper {
position: relative;
height: 500px;
overflow: hidden;
}

.herotest-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}

.herotest--image-fade {
.herotest-additional-wrapper {
position: relative;

&::before,
&::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 150px;
}

&::before {
left: 0;
background: linear-gradient(90deg, rgba(177,180,182,1) 0%, rgba(2,0,36,0) 100%);
}

&::after {
right: 0;
background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(177,180,182,1) 100%);
}
}
}
7 changes: 7 additions & 0 deletions app/controllers/full_width_images_controller.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
class FullWidthImagesController < ApplicationController
slimmer_template "gem_layout_full_width"

include Cacheable

def index; end
end
115 changes: 115 additions & 0 deletions app/views/full_width_images/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<% content_for :title, "Full width images - GOV.UK" %>

<main id="content" role="main">
<div class="herotest herotest--full-width">
<div class="herotest-wrapper">
<%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
</div>

<div class="herotest-text-wrapper">
<div class="govuk-width-container">
<div class="herotest-text-box">
<h1 class="govuk-heading-m">True full width</h1>
<p class="govuk-body">This image is true full width. It will always be the full width of the browser window.</p>
<ul class="govuk-list govuk-list--bullet">
<li>Good: true full width image</li>
<li>Bad: no control over image height, so this box could overlap onto content below on smaller screens</li>
<li>Bad: position of content in the image varies, so this box could obscure people's faces</li>
<li>Bad: image height scales with browser size, so for large screens maybe no page content is seen on page load, only image</li>
<li>Bad: to make the image look good, needs a very large filesize</li>
<li>Bad: breaks page layout before image has loaded, or if it fails to load</li>
</ul>
</div>
</div>
</div>
</div>

<div class="herotest herotest--limited-width">
<div class="herotest-wrapper">
<%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
</div>

<div class="herotest-text-wrapper">
<div class="govuk-width-container">
<div class="herotest-text-box">
<h1 class="govuk-heading-m">Full width up to a limit</h1>
<p class="govuk-body">This image is wide but limited (to 1200px), after which a gap will appear either side of the image.</p>
<ul class="govuk-list govuk-list--bullet">
<li>Good: height of image doesn't change</li>
<li>Good: position of content within image much more static</li>
<li>Bad: gap either side of the image for some users (a background colour can improve this as shown, particularly if the colour is similar to the image)</li>
<li>Bad: some control over image height, but this box could still overlap onto content below on smaller screens</li>
</ul>
</div>
</div>
</div>
</div>

<div class="herotest herotest--fixed-height">
<div class="herotest-wrapper">
<%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
</div>

<div class="herotest-text-wrapper">
<div class="govuk-width-container">
<div class="herotest-text-box">
<h1 class="govuk-heading-m">Full width with fixed height (chosen option)</h1>
<p class="govuk-body"></p>
<ul class="govuk-list govuk-list--bullet">
<li>Good: height is fixed</li>
<li>Good: position of content is known</li>
<li>Bad: won't be full width on largest screens</li>
<li>Bad: image content is lost either side as browser gets narrower</li>
</ul>
</div>
</div>
</div>
</div>


<div class="herotest herotest--true-full-fixed-height">
<div class="herotest-wrapper">
<%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
</div>

<div class="herotest-text-wrapper">
<div class="govuk-width-container">
<div class="herotest-text-box">
<h1 class="govuk-heading-m">True full width with fixed height</h1>
<p class="govuk-body"></p>
<ul class="govuk-list govuk-list--bullet">
<li>Good: true full width</li>
<li>Good: image content is mostly predictable</li>
<li>Bad: bottom of image is lost on larger screens</li>
<li>Bad: image leaves a gap underneath on smaller screens</li>
</ul>
</div>
</div>
</div>
</div>

<div class="herotest herotest--fixed-height herotest--image-fade">
<div class="herotest-wrapper">
<div class="herotest-additional-wrapper">
<%= image_tag 'herotest.png', class: 'herotest-image', alt: '' %>
</div>
</div>

<div class="herotest-text-wrapper">
<div class="govuk-width-container">
<div class="herotest-text-box">
<h1 class="govuk-heading-m">Full width, fixed height, fade out</h1>
<p class="govuk-body"></p>
<ul class="govuk-list govuk-list--bullet">
<li>Good: height is fixed</li>
<li>Good: position of content is known</li>
<li>Good: fade out helps reduce jarring edge of image on large screens</li>
<li>Bad: won't be full width on largest screens</li>
<li>Bad: image content is lost either side as browser gets narrower</li>
</ul>
</div>
</div>
</div>
</div>

</main>
2 changes: 2 additions & 0 deletions config/routes.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@
get "/*any", to: "landing_page#show"
end

get "/full-width-images" => "full_width_images#index"

# Accounts
get "/sign-in", to: "help#sign_in"
get "/sign-in/redirect", to: "sessions#create"
Expand Down