Skip to content
This repository has been archived by the owner on Mar 6, 2023. It is now read-only.

Commit

Permalink
Hero panel and homepage converted to GOV.UK frontend
Browse files Browse the repository at this point in the history 
 - Homepage blue hero panel moved 1 pixel up to hide the phase banner's lower grey border
 - Hero panel bespoke CSS removed and rejigged
 - Started removal of Frontend Toolkit from homepage
 - Search in hero panel now uses component from Publishing Components gem
 - Line height on paragraph text increased to avoid focus state overlap
  • Loading branch information
@injms
injms committed Sep 9, 2019
1 parent dab08e4 commit 3501944
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 114 deletions.
61 changes: 15 additions & 46 deletions app/assets/stylesheets/modules/_hero.scss
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,26 @@
.hero {
background-color: $govuk-blue;
color: $white;

margin-bottom: $gutter-half;
.app-c-hero {
background-color: $govuk-brand-colour;
color: govuk-colour("white");
margin-bottom: govuk-spacing(3);
position: relative;
top: -1px;

@include media(tablet) {
margin-bottom: $gutter;
margin-bottom: govuk-spacing(6);
}

a:link,
a:visited {
font-weight: bold;
color: $white;
}

a:hover,
a:active {
color: $light-blue-25;
}

&__content {
$border-top-width: 10px;

@extend %site-width-container;

padding: ($gutter-half + $border-top-width) 0 $gutter-half;

@include media(tablet) {
padding: ($gutter + $border-top-width) 0 $gutter;
}
}

&__title {
@include core-48;
margin-bottom: $gutter;
color: govuk-colour("white");
font-weight: bold;
}
}

&__description {
@include core-24;
}

&__feedback-link {
@include core-16;
line-height: 1.25;
margin-top: $gutter;

@include media(tablet) {
margin-top: 0;
}
}
.app-c-hero-lead {
line-height: 1.35;
}

&__search {
margin-bottom: $gutter-half;
}
.app-c-heading--inverse,
.app-c-body--inverse {
color: govuk-colour("white");
}
18 changes: 1 addition & 17 deletions app/assets/stylesheets/modules/_panel.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,3 @@
.panel {
margin-top: $gutter-half;
padding-top: $gutter-half;

border-top: 1px solid $grey-2;

@include media(desktop) {
margin-top: $gutter;
}

&__title {
@include bold-24;
margin-bottom: $gutter-half;
}

&__description {
@include core-19;
}
border-top: 1px solid $govuk-border-colour;
}
12 changes: 3 additions & 9 deletions app/assets/stylesheets/modules/_typography.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
// Text
p {
margin-top: em(5, 16);
margin-bottom: em(20, 16);

@include media(tablet) {
margin-top: em(5);
margin-bottom: em(20);
}

.app-c-body,
.app-c-body-s {
line-height: 1.45;
}
86 changes: 44 additions & 42 deletions app/views/content_items/homepage.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,61 +6,63 @@
content_for :body_classes, 'full-width'
%>

<header class="hero">
<div class="hero__content">
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="hero__title">Service Manual</h1>

<p class="hero__description">
Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard' %>.
</p>

<div class="hero__search search">
<header class="app-c-hero">
<div class="app-c-hero__content govuk-width-container">
<div class="govuk-main-wrapper govuk-!-padding-top-7">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl govuk-!-margin-bottom-8 app-c-heading--inverse">Service Manual</h1>
<p class="govuk-body-lead app-c-hero-lead app-c-body--inverse govuk-!-padding-bottom-1">
Helping teams to create and run great public services that meet the <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %>.
</p>
<form action="/search" method="get" role="search">
<label for="search" class="search__label">Search the Service Manual</label>
<div class="search__input">
<input class="js-search-focus" name="q" id="search" type="search" title="Search the service manual" />
</div>
<input type="hidden" name="filter_manual" value="/service-manual">
<input class="search__submit" type="submit" value="Search">
<%= render "govuk_publishing_components/components/search", {
id: "search",
label_text: "Search the service manual",
name: "q",
on_govuk_blue: true,
type: "search"
} %>
</form>
</div>
</div>

<div class="column-one-third">
<p class="hero__feedback-link"><%= link_to 'Contact the Service Manual team', '/contact/govuk' %> with any comments or questions.</p>
<div class="govuk-grid-column-one-third">
<p class="govuk-body-s app-c-body--inverse">
<%= link_to 'Contact the Service Manual team', '/contact/govuk', class: 'govuk-link' %>
with any comments or questions.
</p>
</div>
</div>
</div>
</div>
</header>

<div class="full-page-width-wrapper">
<% @content_item.topics.each_slice(3) do |row_of_topics| %>
<div class="grid-row">
<% row_of_topics.each do |topic| %>
<div class="column-one-third">
<div class="link-unit">
<h2 class="link-unit__title"><%= link_to topic["title"], topic["base_path"] %></h2>
<p class="link-unit__description"><%= topic["description"] %></p>
<div class="govuk-width-container">
<div class="govuk-main-wrapper">
<% @content_item.topics.each_slice(3) do |row_of_topics| %>
<div class="govuk-grid-row">
<% row_of_topics.each do |topic| %>
<div class="govuk-grid-column-one-third">
<h2 class="govuk-heading-s govuk-!-margin-bottom-1"><%= link_to topic["title"], topic["base_path"], class: 'govuk-link' %></h2>
<p class="govuk-body-s"><%= topic["description"] %></p>
</div>
</div>
<% end %>
</div>
<% end %>
<% end %>
</div>
<% end %>

<div class="grid-row">
<div class="column-half">
<div class="panel">
<h2 class="panel__title">The Service Standard</h2>
<p class="panel__description">The <%= link_to 'Service Standard', '/service-manual/service-standard' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.</p>
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<div class="panel govuk-!-padding-top-3 govuk-!-margin-top-5">
<h2 class="govuk-heading-m">The Service Standard</h2>
<p class="govuk-body app-c-body">The <%= link_to 'Service Standard', '/service-manual/service-standard', class: 'govuk-link' %> provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.</p>
</div>
</div>
</div>

<div class="column-half">
<div class="panel">
<h2 class="panel__title">Communities of practice</h2>
<p class="panel__description">You can view the <%= link_to 'communities of practice', '/service-manual/communities' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.</p>
<div class="govuk-grid-column-one-half">
<div class="panel govuk-!-padding-top-3 govuk-!-margin-top-5">
<h2 class="govuk-heading-m">Communities of practice</h2>
<p class="govuk-body app-c-body">You can view the <%= link_to 'communities of practice', '/service-manual/communities', class: 'govuk-link' %> to find more learning resources, see who has written the guidance in the manual and connect with digital people like you from across government.</p>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 3501944

Please sign in to comment.