From 8235aebaa1fbb78e6209858d027b3243b671a59e Mon Sep 17 00:00:00 2001 From: Brenda Wallace Date: Thu, 15 Oct 2026 21:01:23 +1300 Subject: [PATCH] Refactor home stats tiles layout to use grid system and update links for improved interactivity --- app/assets/stylesheets/_home_dashboard.scss | 24 +++++++------------ app/views/home/dashboard/_this_week.html.haml | 4 +++- app/views/home/dashboard/_veteran.html.haml | 3 +-- config/locales/en.yml | 2 +- spec/features/home/home_spec.rb | 8 +++---- 5 files changed, 17 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/_home_dashboard.scss b/app/assets/stylesheets/_home_dashboard.scss index 603bc05df..e5addc87e 100644 --- a/app/assets/stylesheets/_home_dashboard.scss +++ b/app/assets/stylesheets/_home_dashboard.scss @@ -183,15 +183,16 @@ $dash-line: rgba(65, 63, 59, 0.15); } // Years of data: numbers, chart, table, beds -.home-stats-tiles { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 1.25rem; } +.home-stats-tiles { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: 0; + margin-bottom: 1.25rem; +} .home-stat-tile { - flex: 1 1 180px; - padding: 12px; - text-align: center; - background: #fff; - border-radius: 4px; - box-shadow: 1px 3px 3px 1px #cac1b3; + padding: 10px 12px; + border-bottom: 1px solid $dash-line; b { display: block; font-size: 2rem; font-weight: 400; color: #413f3b; } @@ -200,15 +201,6 @@ $dash-line: rgba(65, 63, 59, 0.15); i { display: block; font-size: 0.75rem; font-style: normal; color: $dash-muted; } } -// Only tiles that go somewhere look clickable. -a.home-stat-tile-link { - text-decoration: none; - - b { color: $green; text-decoration: underline; } - - &:hover, &:focus { box-shadow: 1px 3px 6px 1px #b3a894; } -} - .home-chart { display: flex; gap: 10px; height: 150px; align-items: flex-end; } .home-chart-month { diff --git a/app/views/home/dashboard/_this_week.html.haml b/app/views/home/dashboard/_this_week.html.haml index e00d15a24..443a8f818 100644 --- a/app/views/home/dashboard/_this_week.html.haml +++ b/app/views/home/dashboard/_this_week.html.haml @@ -10,7 +10,9 @@ %small= t('home.dashboard.this_week') - if ready.any? %b= t('home.dashboard.ready_title', count: ready.size) - %span= ready.first(5).map(&:crop_name).uniq.to_sentence + %span + = ready.first(5).map(&:crop_name).uniq.to_sentence + = link_to t('home.dashboard.see_which'), '#growing-now' - else %b= t('home.dashboard.sow_title', crop: suggestion.name, month: current_month_name) %span= t('home.dashboard.sow_body') diff --git a/app/views/home/dashboard/_veteran.html.haml b/app/views/home/dashboard/_veteran.html.haml index 88daba826..bead2bc15 100644 --- a/app/views/home/dashboard/_veteran.html.haml +++ b/app/views/home/dashboard/_veteran.html.haml @@ -3,10 +3,9 @@ .home-stats-tiles = render 'home/dashboard/stat', value: dashboard.plantings_this_year, label: t('home.dashboard.stat_plantings'), change: dashboard.plantings_this_year - dashboard.plantings_last_year - = render 'home/dashboard/stat', value: dashboard.harvests_this_year, label: t('home.dashboard.stat_harvests'), change: dashboard.harvests_this_year - dashboard.harvests_last_year = render 'home/dashboard/stat', value: "#{dashboard.kilograms_this_year} kg", label: t('home.dashboard.stat_kilograms'), change: dashboard.kilograms_this_year - dashboard.kilograms_last_year, unit: ' kg' + = render 'home/dashboard/stat', value: dashboard.harvests_this_year, label: t('home.dashboard.stat_harvests'), change: dashboard.harvests_this_year - dashboard.harvests_last_year = render 'home/dashboard/stat', value: dashboard.seed_varieties, label: t('home.dashboard.stat_varieties') - = render 'home/dashboard/stat', value: dashboard.ready.size, label: t('home.dashboard.stat_ready'), url: '#growing-now' = render 'home/dashboard/this_week', dashboard: diff --git a/config/locales/en.yml b/config/locales/en.yml index 32926156b..a98fcd2c7 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -291,6 +291,7 @@ en: see_all_plantings: one: See your planting other: See all %{count} plantings + see_which: See which ones ↓ seeds_near: Seeds near you seeds_near_note: Neighbours offering seeds you can start with. seeds_on_hand: Seeds on hand @@ -301,7 +302,6 @@ en: stat_harvests: harvests this year stat_kilograms: harvested this year stat_plantings: plantings this year - stat_ready: to harvest this week stat_varieties: seed varieties saved step_join: Join Growstuff step_location: Tell us where you garden diff --git a/spec/features/home/home_spec.rb b/spec/features/home/home_spec.rb index b22c405dd..24cb40dfe 100644 --- a/spec/features/home/home_spec.rb +++ b/spec/features/home/home_spec.rb @@ -90,21 +90,21 @@ describe "home page" do it { expect(page).to have_content 'Harvest by month' } end - describe 'stat tiles' do + describe 'ready banner' do before do create(:planting, owner: member, garden: member.gardens.first, planted_at: 2.years.ago) visit root_path end - it 'links the ready tile to the growing now section' do - expect(page).to have_link 'to harvest this week', href: '#growing-now' + it 'links to the growing now section' do + expect(page).to have_link 'See which ones', href: '#growing-now' end it 'has a growing now section to link to' do expect(page).to have_css 'section#growing-now' end - it 'does not link the plantings tile' do + it 'does not link the plantings stat' do expect(page).to have_no_link 'plantings this year' end end