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

Fix issues with charts and card blocks #4341

Merged
merged 6 commits into from
Oct 25, 2024
Merged

Fix issues with charts and card blocks #4341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
48e87c1
Fix graph height
andysellick Oct 24, 2024
d5d91d4
Fix graphs in columns not resizing
andysellick Oct 25, 2024
c28c3c0
Refactor card block
leenagupte Oct 25, 2024
2a19a4b
Standardise padding of cards with other blue boxes
andysellick Oct 25, 2024
f8b3ec7
Include padding on charts
andysellick Oct 25, 2024
b50de71
bundle update govuk_publishing_components
andysellick Oct 25, 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
22 changes: 11 additions & 11 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,10 @@ GEM
googleapis-common-protos-types (1.16.0)
google-protobuf (>= 3.18, < 5.a)
govuk_ab_testing (3.0.0)
govuk_app_config (9.14.4)
govuk_app_config (9.14.5)
logstasher (~> 2.1)
opentelemetry-exporter-otlp (>= 0.25, < 0.30)
opentelemetry-instrumentation-all (>= 0.39.1, < 0.67.0)
opentelemetry-instrumentation-all (>= 0.39.1, < 0.68.0)
opentelemetry-sdk (~> 1.2)
plek (>= 4, < 6)
prometheus_exporter (~> 2.0)
Expand All @@ -161,7 +161,7 @@ GEM
govuk_personalisation (1.0.0)
plek (>= 1.9.0)
rails (>= 6, < 8)
govuk_publishing_components (44.7.1)
govuk_publishing_components (44.8.0)
chartkick
govuk_app_config
govuk_personalisation (>= 0.7.0)
Expand Down Expand Up @@ -222,7 +222,7 @@ GEM
logstasher (2.1.5)
activesupport (>= 5.2)
request_store
loofah (2.23.0)
loofah (2.23.1)
crass (~> 1.0.2)
nokogiri (>= 1.12.0)
mail (2.8.1)
Expand Down Expand Up @@ -273,7 +273,7 @@ GEM
opentelemetry-common (~> 0.21)
opentelemetry-helpers-sql-obfuscation (0.2.0)
opentelemetry-common (~> 0.21)
opentelemetry-instrumentation-action_mailer (0.1.0)
opentelemetry-instrumentation-action_mailer (0.2.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-active_support (~> 0.1)
opentelemetry-instrumentation-base (~> 0.22.1)
Expand All @@ -291,13 +291,13 @@ GEM
opentelemetry-instrumentation-active_model_serializers (0.20.2)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-active_record (0.7.4)
opentelemetry-instrumentation-active_record (0.8.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-active_support (0.6.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-all (0.66.0)
opentelemetry-instrumentation-all (0.67.0)
opentelemetry-instrumentation-active_model_serializers (~> 0.20.1)
opentelemetry-instrumentation-aws_lambda (~> 0.1.0)
opentelemetry-instrumentation-aws_sdk (~> 0.7.0)
Expand All @@ -322,7 +322,7 @@ GEM
opentelemetry-instrumentation-que (~> 0.8.0)
opentelemetry-instrumentation-racecar (~> 0.3.0)
opentelemetry-instrumentation-rack (~> 0.24.0)
opentelemetry-instrumentation-rails (~> 0.31.0)
opentelemetry-instrumentation-rails (~> 0.32.0)
opentelemetry-instrumentation-rake (~> 0.2.1)
opentelemetry-instrumentation-rdkafka (~> 0.4.0)
opentelemetry-instrumentation-redis (~> 0.25.1)
Expand Down Expand Up @@ -409,13 +409,13 @@ GEM
opentelemetry-instrumentation-rack (0.24.6)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-rails (0.31.2)
opentelemetry-instrumentation-rails (0.32.0)
opentelemetry-api (~> 1.0)
opentelemetry-instrumentation-action_mailer (~> 0.1.0)
opentelemetry-instrumentation-action_mailer (~> 0.2.0)
opentelemetry-instrumentation-action_pack (~> 0.9.0)
opentelemetry-instrumentation-action_view (~> 0.7.0)
opentelemetry-instrumentation-active_job (~> 0.7.0)
opentelemetry-instrumentation-active_record (~> 0.7.0)
opentelemetry-instrumentation-active_record (~> 0.8.0)
opentelemetry-instrumentation-active_support (~> 0.6.0)
opentelemetry-instrumentation-base (~> 0.22.1)
opentelemetry-instrumentation-rake (0.2.2)
Expand Down
24 changes: 22 additions & 2 deletions app/assets/stylesheets/views/_landing_page/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,41 @@
@import "govuk_publishing_components/individual_component_support";

.app-b-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1 1;
min-width: 0;
margin-bottom: govuk-spacing(6);
color: govuk-colour("white");
background-color: govuk-colour("dark-blue");
}

.app-b-card__textbox {
padding: govuk-spacing(6) govuk-spacing(7);
background-color: govuk-colour("dark-blue");
padding: govuk-spacing(6);
color: govuk-colour("white");

@include govuk-media-query($until: tablet) {
padding: govuk-spacing(4);
}
}

.app-b-card__textbox-link {
&::after {
content: "";
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

.app-b-card__chart {
border: solid 1px $govuk-border-colour;
background: govuk-colour("white");
}

.app-b-card__figure {
Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/views/_landing_page/grid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

@include govuk-media-query($from: desktop) {
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
display: flex;
justify-content: space-between;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Curious why this changed from grid to flex? It works fine so I'm happy to approve, just curious.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I initially changed it as part of investigating the problem with chart resizing. When I realised that it was equivalent I thought it might be better to keep it all as flexbox, just to avoid mixing the two.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the review 👍

gap: govuk-spacing(6);
}
}
}
3 changes: 2 additions & 1 deletion app/helpers/link_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
module LinkHelper
def govuk_styled_link(text, path: nil, inverse: false)
def govuk_styled_link(text, path: nil, inverse: false, card_link: false)
return text if path.blank?

classes = "govuk-link"
classes << " govuk-link--inverse" if inverse
classes << " app-b-card__textbox-link" if card_link

"<a href='#{path}' class='#{classes}'>#{text}</a>".html_safe
end
Expand Down
6 changes: 5 additions & 1 deletion app/models/landing_page/block/card.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,15 @@ module LandingPage::Block
CardImage = Data.define(:alt, :source)

class Card < Base
attr_reader :image, :card_content
attr_reader :image, :card_content, :href, :content, :link_cover_block

def initialize(block_hash)
super(block_hash)

@href = data["href"] || ""
@content = data["content"] || ""
@link_cover_block = data["link_cover_block"] || false

if data["image"].present?
alt, source = data.fetch("image").values_at("alt", "source")
@image = CardImage.new(alt:, source:)
Expand Down
21 changes: 14 additions & 7 deletions app/views/landing_page/blocks/_card.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,22 @@
add_view_stylesheet("landing_page/card")
%>
<div class="app-b-card">
<div class="app-b-card__textbox">
<%= render "govuk_publishing_components/components/heading", {
text: govuk_styled_link(block.content, path: block.href, inverse: true, card_link: block.link_cover_block),
heading_level: 2,
margin_bottom: 0,
inverse: true
} %>
</div>

<% block.card_content.each do |subblock| %>
<% if subblock.data["type"] == "heading" %>
<div class="app-b-card__textbox">
<% options = { margin_bottom: 0, inverse: true } %>
<%= render_block(subblock, options:) %>
</div>
<% elsif subblock.data["type"] == "statistics" %>
<% if subblock.data["type"] == "statistics" %>
<div class="app-b-card__chart">
<% options = { margin_bottom: 0, height: 200 } %>
<%
options = { margin_bottom: 0 }
options[:height] = 200 if subblock.data["minimal"]
%>
<%= render_block(subblock, options:) %>
</div>
<% else %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/landing_page/blocks/_statistics.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,6 @@
link: block.data["data_source_link"],
margin_bottom: margin_bottom,
minimal: block.data["minimal"],
minimal_link: block.data["minimal_link"],
height: height,
padding: block.data["padding"],
} %>
21 changes: 9 additions & 12 deletions lib/data/landing_page_content_items/homepage.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,47 +68,44 @@ blocks:
- type: grid_container
blocks:
- type: card
href: /landing-page/be-kinder
content: Be kinder
link_cover_block: true
card_content:
blocks:
- type: heading
content: Be kinder
path: /landing-page/be-kinder
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
minimal_link: /landing-page/task
- type: card
href: /landing-page/exercise-more
content: Exercise more
link_cover_block: true
card_content:
blocks:
- type: heading
content: Exercise more
path: /landing-page/exercise-more
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
minimal_link: /landing-page/task
- type: card
href: /landing-page/donate-to-charity
content: Donate to charity
link_cover_block: true
card_content:
blocks:
- type: heading
content: Donate to charity
path: /landing-page/donate-to-charity
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
minimal_link: /landing-page/task
- type: govspeak
content: |
<p><a href="/landing-page/tasks">See the latest data on our progress</a></p>
Expand Down
33 changes: 15 additions & 18 deletions lib/data/landing_page_content_items/landing_page.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,47 +110,44 @@ blocks:
- type: grid_container
blocks:
- type: card
href: /link
content: Title 1
link_cover_block: true
card_content:
blocks:
- type: heading
content: Title 1 heading title goes here
path: http://gov.uk
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
minimal_link: /landing-page/task
- type: card
href: http://gov.uk
content: Title 2 heading title goes here and on and on
link_cover_block: true
card_content:
blocks:
- type: heading
content: Title 2 heading title goes here
path: http://gov.uk
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
minimal_link: /landing-page/task
- type: card
href: http://gov.uk
content: Title 3 heading title goes here
link_cover_block: true
card_content:
blocks:
- type: heading
content: Title 3 heading title goes here
path: http://gov.uk
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
minimal: true
minimal_link: /landing-page/task
- type: two_column_layout
theme: one_third_two_thirds
blocks:
Expand All @@ -163,27 +160,27 @@ blocks:
- type: blocks_container
blocks:
- type: card
href: http://gov.uk
content: Title 1 heading title goes here
card_content:
blocks:
- type: heading
content: Title 1 heading title goes here
path: http://gov.uk
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
padding: true
- type: card
href: http://gov.uk
content: Title 2 heading title goes here
card_content:
blocks:
- type: heading
content: Title 2 heading title goes here
path: http://gov.uk
- type: statistics
x_axis_label: "X Axis"
y_axis_label: "Y Axis"
csv_file: "data_one.csv"
data_source_link: https://www.ons.gov.uk/economy/grossdomesticproductgdp/timeseries/ihyq/qna
padding: true
- type: statistics
title: "Chart to visually represent some data"
x_axis_label: "X Axis"
Expand Down
Loading