One actions_menu helper now builds the three-dot toggle and dropdown for
seeds, harvests, crops, gardens, posts, photos, activities and comments,
replacing the text "Actions" toggle. Every item carries a green line icon
(menu_icon), and delete uses a darker red ($danger-text, 5.6:1 on white)
so it stays readable; it is still last, under a divider, with its own icon.
The React menus draw the same icons. DESIGN.md now says menu items have icons.
Also fixes the posts menu delete, which confirmed but never sent DELETE.
Closes#4939Closes#4940Closes#4942Closes#4943Closes#4944Closes#4945Closes#4946
Part of #4933
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
* Restore the Ruby 4.0.6 upgrade
PR #4831 committed a stale Gemfile.lock over the newer one, taking
.ruby-version back to 3.2.3 and rolling back active_median, dalli,
parallel, rbs and selenium-webdriver. Dockerfile and
.devcontainer/Dockerfile still build on Ruby 4, so the Gemfile's version
check fails against the image.
Restores both files to what they were before that merge.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Tidy plantings#show, and make cards and menus consistent
This page read as a page about the crop rather than about one member's
planting, and its sections each did things their own way. Changes follow
the conventions written up in the UI consistency guide.
Identity
- Title, meta description and OpenGraph all read "<crop> planting by
<owner>"; the hero carries a muted "planting by X in Y" subtitle and
the scientific name moves to the crop card.
- Breadcrumb's last item is plain text, not a link to the current page.
Actions
- One actions menu per page: a quiet three-dot button in the top right of
the hero, rendered by the new PlantingActions island, opening the
EditPlanting, RecordHarvest, SaveSeeds, MarkFinished and AddPhoto
dialogs that already existed for the garden list.
- Menu items are lower case, so a menu reads as a list of things you can
do rather than a row of headings.
- Transplanting moves out of the sidebar into a dialog off that menu: it
is done once in a planting's life and should not hold real estate.
- The second seed-saving dropdown and the loose photo buttons are gone;
each section keeps one quiet "add" on its heading bar as the non-JS
path.
- The plant-part icons from the server-rendered harvest form now reach
the dialog, via icon_url on HarvestFormSerializer.
Fact cards
- Every card fills the same four slots, and the core cards always render
so one planting's page has the same shape as the next.
- Progress reads as a percentage with "day 43 of 90" beneath; quantity
and "grown from" merge into one card rather than both saying
"seedling"; rating is stars and renders even when unrated.
- Dates go through I18n.l and standard_time_distance instead of
assembling abbr_month_names by hand.
- Adds Planting#planned?, replacing three copies of age_in_days < 0.
- Perennial no longer claims the plant "grows back each year".
Cards by type
- Harvest cards get square corners, a warm accent and the harvest icon,
and say "<crop> harvest", so they are not mistaken for plantings.
- Seed cards are drawn as seed packets: portrait, papery, torn top edge,
printed band, small print along the foot and the year saved stamped on
them.
Layout
- The page wrapper is .planting-show, not .planting: that is the planting
*card's* class, and its absolutely positioned badges and quick actions
were leaking onto this page.
- Sections are bordered blocks with their heading bar as the lid, so a
heading and its content read as one thing.
- One spacing scale, and the hero aligns to the same left edge as
everything below it.
Copy
- Section headings and empty states go through en.yml, in one voice.
- "Add a photo to visually track growth of this planting, to Flickr,
iNaturalist or Pl@ntNet" was nonsense: photos come from Flickr only.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Use the harvest and seed cards site-wide, and rate a planting in place
The new harvest cards and seed packets only appeared on plantings#show.
Everywhere else either used the old thumbnails or hand-rolled its own
markup, which is what made harvests and plantings look alike in the first
place.
- members#show and members/_harvests render harvests/card. The latter also
wrapped each card in another .card, which nested a card in a card.
- The homepage harvest list was hand-rolled markup beside a seeds section
that already used seeds/card; both now use the shared partials.
- Homepage seed packets go in an .index-cards grid. Outside one they have
no width, and the packet's 3:4 ratio made each half the page wide.
- harvests/_harvest and seeds/_seed chose between card and thumbnail on a
`full:` local that nothing passes. Both render the card.
The crop pages' harvest and seed panels are lists of links in a sidebar,
not card grids, so they are left alone.
Section "add" buttons now open the same dialogs as the actions menu, via a
data-planting-dialog attribute the island listens for. Their href stays as
the fallback without JavaScript.
The rating card is now clickable: for someone who may edit the planting it
renders StarRating, which saves the new rating and puts it back if the
save fails. The card's own heading is the label, so the fieldset legend is
hidden rather than saying "Rating" twice.
"More photos" is a plain link again, and only shows when there are more
photos than the page is displaying — the photos are now paginated to 12,
where before the whole set was loaded and the link always showed.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Put the like button beside the planting's name
It sat on its own below the hero, with a section's worth of space above
and below it, reading as an orphan rather than as something belonging to
the planting.
It now sits on the title line, right after the name, at its own size
rather than the title's.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Draw a border around the planting's own data
The title, facts, photos, harvests, seeds and planned activities now sit
inside one subtle border, so they read as one body of data rather than
running into the sidebar beside them.
Also drops the raised shadow from the like button. The global .btn shadow
made the heart look like a call to action it isn't.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Tidy the planting page sidebar, and the add-photo dialog
The sidebar was three blocks with three different treatments: a bare
owner card, the shared crop card, and a bordered neighbours section. They
now all use the same sections as the main column, with a heading bar each.
- The owner block leads with the avatar and who grows this where, rather
than a heading repeating "Planted by".
- The crop card renders without its footer here. "Add to my garden" and
"Save seeds" made no sense beside a planting you are already growing,
and the page offers both already. crops/_crop takes actions: false;
everywhere else keeps them.
- Partials shared with other pages bring their own .card, which inside a
section is a box in a box, so those are flattened.
Add-photo dialog:
- It now says what it is adding to: "Add photo to chives planting",
rather than "Add a photo to chives". Garden cards say which garden.
- While Flickr is being read the body holds roughly the height the picker
will take and centres the spinner, instead of a short dialog with a
spinner in the corner that jumps open when the photos arrive.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Say what kind of record a page is about in its title
"Chives" is a crop. A page about one member's chives should say "Chives
planting" in its heading, not leave the reader to work it out from the
furniture around it. The same for harvests and saved seeds.
- plantings#show: "Chives planting", subtitle "by <owner> in <garden>".
- harvests#show: "Basil harvest", subtitle "by <owner> · <date>". The
owner was in a %small inside the h1 before.
- seeds#show: already said "seeds"; it now names who saved them.
Gardens are left as they are: a garden's name is the member's own, so the
noun belongs in the subtitle rather than appended to a name that may
already contain it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* One corner radius for all data cards, and harvest months by season
Cards used three different shapes: plantings rounded at 5%, harvests and
seed packets square. A percentage radius also draws an ellipse that
changes with the card's size, so a tall packet and a square planting card
curved differently. There is now one $card-radius, used by every data
card and by the section boxes.
Harvest months are grouped into the grower's own seasons, three months
each, named and kept together, starting at their spring — so a Wellington
gardener sees spring begin in September. Where we have no latitude we
show the plain January-to-December row rather than guessing at a
hemisphere.
The grower's location now appears in the page subtitle. It decides the
seasons and the harvest times, so it belongs with the rest of the
planting's identity rather than only as a "nearby" link in the sidebar.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Tidy the harvest months block
It was loose text at the end of the timeline partial: a bare "Harvest
months:" label, twelve badges, and a trailing "in <place>" that now
repeats the location in the page subtitle.
- Moved into its own partial with a proper label, rather than trailing
off the timeline.
- Dropped the repeated location.
- A legend says what a highlighted month means. Nothing said so before.
- The empty state is its own muted line instead of a sentence running on
from the label, and no longer says "we need more data" at the reader.
- Each badge carries its full month name for screen readers, and
highlighted ones say they are harvest months. The quiet months were
aria-hidden, so a screen reader heard the harvest months with no
calendar around them.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Give the sidebar crop block its own partial
Reusing crops/_crop inside a section meant a card inside a box: a white
strip between the green heading and the photo, the card's own shadow
sitting proud of the section, a photo that overshot the right edge, and
two corner radii disagreeing. Flattening it with negative margins was
fighting the card rather than fixing it.
plantings/_crop is written for this spot instead: the photo runs edge to
edge under the heading bar, the crop's name is title-cased with its
scientific name beneath, and the growing times are a short list rather
than three stats laid out side by side.
crops/_crop goes back to how it was, including its footer buttons, since
nothing needs to suppress them now.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Update the specs for the tidied planting page
Mostly copy and flow changes from the tidy-up, but two real bugs came out
of running them.
Bugs fixed:
- planting_actions_props didn't pass planted_at or today, which
MarkFinishedModal needs to decide whether "today" may be offered and
where the date box starts. Without them the dialog threw while
rendering, and with no error boundary React tore down the whole island,
so the actions menu vanished entirely.
- The dialogs reloaded the page from inside the save callback, tearing
the page down while the dialog was still finishing its own update. They
now close first and reload on the next tick.
Menu items are lower-cased in CSS, as the garden cards already do it,
rather than by calling downcase on the shared button translations. That
was mangling labels other pages show in sentence case.
Specs:
- Menu, dialog and section-heading flows updated: the actions menu opens
dialogs rather than navigating, so recording a harvest, marking a
planting finished, editing and transplanting all drive the dialog.
- Copy: "grows this in", "day 14 of 50", "Planned" for a future planting,
"4 of 5", the new harvest-months wording, and the add-photo dialog
naming what it adds to.
- The parent-seed example asserted a link to the planting, which came
from the breadcrumb; the last crumb is the page you are on, so it is
plain text now and the example checks the seed link instead.
- Removed spec/features/shared_examples/append_date.rb. It drove the old
datepicker finish flow and had one caller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Stop avatars shifting the page during feature specs
spec/features/places/searching_a_place_spec.rb intermittently failed on
"goes to members' index page": the click on "View all members >>" landed
on nothing and the browser stayed put.
Member avatars come from gravatar.com over the network and were rendered
with img-fluid and no dimensions, so they reserved no space until they
arrived. The link sits directly under that grid. Capybara found the link,
an avatar landed, the link moved, and the click missed.
rails_helper meant to prevent this, but its guard tested for Poltergeist's
url_blacklist. Poltergeist is long gone and Selenium's browser has no such
method, so the condition was always false and the block never ran.
- Give the two avatar image tags explicit width and height, so the box is
reserved before the image loads. This fixes real layout shift for
members too, not only the specs.
- Replace the dead guard with config.x.blank_avatars, which browser specs
set, making avatar_uri return a blank inline GIF. Helper specs still
assert the real Gravatar URLs.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Fix avatar URI logic to prevent layout shift in all environments
* Add waiting assertions to prevent premature content checks after saving harvest
* Refactor PlantingActions to improve dialog handling and state management
Enhance PlantingRating to prevent multiple saves and improve error messaging
* Fix date input handling in planting edit dialog
* Add neighbour planting sidebar with improved styling and layout
* Tidy crops#show, and share the record page layout
The planting page's layout was planting-specific CSS. It is now a shared
.record-page / .record-panel in _record_page.scss, and crops#show uses it:
the crop's own data inside one border, the sidebar outside, sections as
bordered blocks with a heading bar as the lid.
Along the way a duplicate section rule and two copies of the kebab button
styling collapsed into one each.
Crop page:
- Scientific and alternate names sit under the crop's name, where they
belong, instead of having a sidebar card of their own. Wranglers add and
edit them from the actions menu, in a dialog; the loose "Add" buttons in
the page body are gone.
- The actions menu is the same three-dot kebab as plantings, in the top
right of the hero. The "you are a CROP WRANGLER" banner is gone: seeing
the menu already tells you that. Menu items have no icons now, except
delete, which keeps its icon and its red.
- Growing facts were split three ways — prose in the hero, prediction
cards in the main column, an OpenFarm list in the sidebar — and the
hero prose was the same fields as the OpenFarm ones. One "Growing X"
section of fact cards now holds all of it.
- The sidebar listed planting, harvest and seed counts directly above
three sections with those same names. The counts are headline numbers
in the hero instead, which also fills the space the hero was wasting.
- Main column reads top to bottom: how to grow it, how members grow it,
varieties, companions, photos, video, where it grows, posts, history.
Headings say something rather than naming a partial.
- Crop actions are just "Add to my garden". Recording a harvest, saving
seeds, posting and marking a planting failed all belong to a planting
you already have.
- The charts section rendered as an empty white strip whenever a crop had
any plantings or harvests but no chart to draw.
- The hero photo moved to the sidebar, where it has room.
Also: the whimsical icons perch on the heading bar below them rather than
sitting inside the box, the garden picker dialog gives every row the same
shape so the names line up, and crops/_grown_for.html.haml is deleted —
nothing rendered it once its content moved into the growing cards.
Specs are not updated yet: crop_detail_page_spec clicks "Record harvest"
on this page, which no longer exists.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* Refactor crop-related views and styles for improved layout and functionality
- Update styles in _crops.scss for better alignment and spacing.
- Enhance _record_page.scss with a new section footer for actions.
- Modify _alternate_names.html.haml to improve dropdown functionality for editing and deleting names.
- Change _history.html.haml header to "Edit history" for clarity.
- Adjust _info.haml to display sowing method and sun requirements prominently.
- Revise _openfarm_data.html.haml to remove unnecessary comments and clarify content.
- Update _photos.html.haml to include a section footer for the "More photos" link.
- Refine _posts.html.haml to streamline the display of posts and actions.
- Improve _scientific_names.html.haml to enhance dropdown functionality for scientific names.
- Update tests in alternate_name_spec.rb and scientific_name_spec.rb to reflect UI changes.
- Remove unused _grown_for.html.haml_spec.rb file.
* Replace language text field with a dropdown select for improved user experience
* Enhance editable forms and fact cards for improved user interaction and layout
* Refactor styles and improve layout for planting details, including muted text color updates and enhanced card displays
* Refactor crop detail page for improved SEO and user experience, including updated links and content for planting and growing information.
* Adjust section add button width for better layout on heading bar
* Update link text for consistency and clarity in crop detail page
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Daniel O'Connor <daniel.oconnor@gmail.com>
The breadcrumb bar is the same colour as the page, but its side padding
pushed the text 1rem in from the edge the heading and content sit on.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
list-group-item outside a .list-group has no background or border in
Bootstrap 5.3, as those come from variables set on .list-group. Wrap the
homepage lists and the planting page neighbours in one, white with a light
shadow.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The border was too faint to see, and Bootstrap 5 floated the checkbox to the
left edge of centred forms, away from its label.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap 5 picked black text for the old #2196f3 on text-bg-info badges
and btn-info buttons, where the site had white. #1976d2 gets white text at
4.6:1, which also passes.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Blue while growing, green while harvesting, amber when late, red when very
late, grey when finished. The track is now neutral grey so every colour
reads against it. Planting#progress_state decides, and the garden cards,
planting progress and timeline bars use it.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap 5 buttons are flat with a border. Draw them as the old skin did:
no border, a Material shadow that deepens while pressed, 2px corners,
medium weight and uppercase. Link buttons stay plain. A bare .btn is drawn
raised with dark text instead of borrowing the outline style.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap 5 makes the text of a .badge white; Bootstrap 4 left it alone. The like
button's heart and count sit in a bare badge on a pale button, so they were white
on light grey. Set $badge-color to inherit, as before.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
_variables.scss still set $progress-height: 5em, $progress-bar-color and
$progress-bg: white, Bootstrap 3 variables the old skin ignored. Bootstrap 5
reads them, which made every progress bar 52px tall with an invisible white
track. Set the height to 0.875rem (as the old bar was), the track to a lighter
green and the bar to the site green, and drop the border-bottom trick that drew
the old bar.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap's dark navbar draws menu links at 55% white, which on the brown navbar
is 4.47:1, just under the 4.5:1 minimum. Use 85% white (white on hover). The
breadcrumb links were grey in the old skin and are now the link green, 4.12:1 on
the beige page; make them a darker grey again.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap 5's cards have a thin border, a grey header and a transparent body, so
the page background showed through. Set the card variables to white, no border,
a 2px radius and the old three-layer shadow, and keep the line under the header.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Links are not underlined, so axe's link-in-text-block rule needs enough contrast
between a link and the text around it. The old skin's body text was near black
(rgba(0, 0, 0, 0.87)); the brown I had used gave 2.28:1 against the link green,
below the 3:1 minimum, and failed two accessibility specs.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Bootstrap 5 differs from the old Material skin in a few defaults that change how
every page looks: 1rem body text (the site uses 0.875rem), a 1.5 line height
(1.428572), underlined links, and much larger display-* headings (the home page
heading was 56px, not 34px). Set them back through Bootstrap's variables.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The CSS came from the material-sass gem, a Bootstrap 4 based Material Design
skin, while the JavaScript already came from the bootstrap gem (Bootstrap 5).
Import the bootstrap gem's SCSS instead and drop material-sass and its
'material' script.
Bootstrap 5 reads its settings from variables defined before it is imported,
so _variables.scss now sets the theme colours (primary/success green,
secondary blue, and so on), body colours, font and the site's own breakpoints
(lg 1200px, xl 1800px) in Bootstrap's terms, in place of the Material colour
maps. media-breakpoint-down(xs) is media-breakpoint-down(sm) in Bootstrap 5.
Class names from Bootstrap 3 and 4 that no longer exist are renamed in the
commits that follow.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
* Add dep
* Add tests around accessibility
* Add examples in a few places
* Try to fix screenshots
* Remove redundant role
* Adjust rules, colors, etc so tests pass
* Update app/assets/stylesheets/overrides.scss
* Wrap in label
* Omit rule, which is failing with a false positive
* Update index.haml
* Update _blurb.html.haml
* Pull in openfarm icons, photos, info
* Truncating member location
* tidying up harvest display, and reducing duplication in css styles
* Tiny crop chip
* only show crop charts if there is data to show
* Make the styles more Growstuff
* Fixed links to openfarm
* Updating specs to cope with new photo sources
fix broken garden timeline on some pages
* Update homepage blurb
* Import crop companions
* More fluid page
* use thumbnail unless the source is flickr
* Messing with homepage
* Added crop growing_degree_days
* expect full size url on photos helper spec
* formatted dates from seeds#show
* tidy up places#show
* Move progress bar
* Quicker buttons for approve/reject crops
* Remove kaminari gem
* use crop cards on hierarchy page
* more crops on crops#index
* Wrap photo creation in transaction
* Wrap crop companions in a transaction
