diff --git a/README.md b/README.md index b7e096b2f..c11cb7c93 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ This application defines global templates for [GOV.UK](https://www.gov.uk) pages ## Screenshots -![screenshot](/docs/screenshot.png?raw=true) +`gem_layout` template: + +![screenshot](/docs/gem_layout.png?raw=true) ## Nomenclature @@ -31,7 +33,7 @@ the same local instance, you'll need to set `PLEK_SERVICE_STATIC_URI`, which is the host used for static assets (even on static). Otherwise it defaults to `static.dev.gov.uk`, which won't exist if you're -just running this repo locally, without the rest of the GOV.UK stack. +running this repo locally, without the rest of the GOV.UK stack. To run this app locally, and have it point at its own assets, run it like this: @@ -48,7 +50,7 @@ Restarting the app should pick up the changes. For example, to see changes made to static templates which are wrapped around feedback pages, run `bowl feedback --without=feedback` in one terminal and the `.startup.sh` script for `feedback` -in a separate terminal. Following local edits to `static`, restarting just +in a separate terminal. Following local edits to `static`, restarting only `feedback` should be sufficient. If you repeatedly see 504 Gateway Timeout errors when developing with static in your diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb index eff1350e7..866939f85 100644 --- a/app/controllers/root_controller.rb +++ b/app/controllers/root_controller.rb @@ -23,6 +23,8 @@ class RootController < ApplicationController 503 504 campaign + gem_layout + gem_layout_full_width scheduled_maintenance print proposition_menu diff --git a/app/views/root/_error_page.html.erb b/app/views/root/_error_page.html.erb index 92b664c7c..0d7881bc8 100644 --- a/app/views/root/_error_page.html.erb +++ b/app/views/root/_error_page.html.erb @@ -3,7 +3,7 @@ <%= stylesheet_link_tag "error-page-print", media: "print" %> <% end %> -<% if @emergency_banner then +<% if @emergency_banner emergency_banner = render "components/emergency_banner", { campaign_class: @emergency_banner.campaign_class, heading: @emergency_banner.heading, diff --git a/app/views/root/_gem_base.html.erb b/app/views/root/_gem_base.html.erb new file mode 100644 index 000000000..c41fdc026 --- /dev/null +++ b/app/views/root/_gem_base.html.erb @@ -0,0 +1,49 @@ +<% + full_width ||= false + + if @emergency_banner + emergency_banner = render "components/emergency_banner", { + campaign_class: @emergency_banner.campaign_class, + heading: @emergency_banner.heading, + link: @emergency_banner.link, + link_text: @emergency_banner.link_text, + short_description: @emergency_banner.short_description, + } + end + + user_satisfaction_survey = '
' + global_bar = render "components/global_bar" +%> + +<%= render "govuk_publishing_components/components/layout_for_public", { + emergency_banner: emergency_banner, + full_width: full_width, + global_bar: user_satisfaction_survey + global_bar, + navigation_items: [ + { + text: "Account", + href: Plek.new.find("account-manager"), + data: { + module: "explicit-cross-domain-links", + link_for: "accounts-signed-in", + }, + }, + { + text: "Sign out", + href: Plek.new.website_root + "/transition-check/logout", + data: { + module: "explicit-cross-domain-links", + link_for: "accounts-signed-in", + }, + }, + { + text: "Sign in", + href: Plek.new.website_root + "/transition-check/login", + data: { + module: "explicit-cross-domain-links", + link_for: "accounts-signed-out", + }, + }], + title: content_for?(:title) ? yield(:title) : "GOV.UK - The best place to find government services and information", + +} %> diff --git a/app/views/root/gem_layout.html.erb b/app/views/root/gem_layout.html.erb new file mode 100644 index 000000000..79534716a --- /dev/null +++ b/app/views/root/gem_layout.html.erb @@ -0,0 +1 @@ +<%= render partial: "gem_base" %> diff --git a/app/views/root/gem_layout_full_width.html.erb b/app/views/root/gem_layout_full_width.html.erb new file mode 100644 index 000000000..dc3350d87 --- /dev/null +++ b/app/views/root/gem_layout_full_width.html.erb @@ -0,0 +1,3 @@ +<%= render partial: 'gem_base', locals: { + full_width: true, +} %> diff --git a/docs/gem_layout.png b/docs/gem_layout.png new file mode 100644 index 000000000..7b11c8276 Binary files /dev/null and b/docs/gem_layout.png differ diff --git a/docs/slimmer_templates.md b/docs/slimmer_templates.md index 15f6c470e..1eec6081c 100644 --- a/docs/slimmer_templates.md +++ b/docs/slimmer_templates.md @@ -1,19 +1,27 @@ # Slimmer Templates +## `gem_layout` + +This template uses the [public layout component] from the GOV.UK Publishing Components gem. It supplies the header and footer only - this includes the cookie banner, skip to content link, header bar, emergency banner, survery banner, global bar, feedback, and footer. The content is constrained and centred. + +## `gem_layout_full_width` + +This is the same as the `gem_layout` template, except that this layout **doesn't** constrain and centre the content to the same width as the GOV.UK header. + +Use this layout if you want to have full width content - such as the blue welcome bar on the GOV.UK homepage. + ## `core_layout` (default) -This template contains styles for the black header bar, the footer and core -layout classes. By default it will center your content to the same width as the -GOV.UK header. It provides classes for grid layouts using the column mixins -from the frontend toolkit. +This template contains styles for the black header bar, the footer and core layout classes. By default it will centre your content to the same width as the GOV.UK header. It provides classes for grid layouts using the column mixins from the frontend toolkit. -It is recommended that new applications use this template so they behave in a -consistent way. +This layout uses deprecated dependencies. ## `header_footer_only` -This template only contains styles for the black header bar and the footer of -GOV.UK. +This template only contains styles for the black header bar and the footer of GOV.UK. + +Use this layout if you want to explicitly control the full layout of your page including centering all the content. + +This layout uses deprecated dependencies. -Use this layout if you want to explicitly control the full layout of your page -including centering all the content. +[public layout component]: https://components.publishing.service.gov.uk/component-guide/layout_for_public