diff --git a/app/assets/stylesheets/_plantings.scss b/app/assets/stylesheets/_plantings.scss index 9b01b8253..274bbc2b7 100755 --- a/app/assets/stylesheets/_plantings.scss +++ b/app/assets/stylesheets/_plantings.scss @@ -694,7 +694,55 @@ margin-left: 0.5rem; } - .neighbours .index-cards .card { - width: 100%; + // Neighbours are a list, not a grid: in a narrow column a full planting card + // is one huge photo each. A small photo, who grows it and where is enough to + // decide whether to go and look. + .planting-neighbours-lead { + margin-bottom: 0.75rem; + } + + .planting-neighbours { + display: flex; + flex-direction: column; + } + + .planting-neighbour { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.5rem 0; + border-top: 1px solid rgba(65, 63, 59, 0.12); + color: inherit; + text-decoration: none; + + &:first-child { + border-top: 0; + } + + &:hover, + &:focus { + background: rgba(65, 63, 59, 0.04); + } + } + + .planting-neighbour-photo { + flex: 0 0 auto; + width: 48px; + height: 48px; + border-radius: $card-radius; + object-fit: cover; + } + + .planting-neighbour-text { + min-width: 0; + font-size: 0.9rem; + line-height: 1.3; + } + + .planting-neighbour-where { + display: block; + color: rgba(65, 63, 59, 0.7); + font-size: 0.8rem; + overflow-wrap: anywhere; } } diff --git a/app/views/plantings/_neighbour.html.haml b/app/views/plantings/_neighbour.html.haml new file mode 100644 index 000000000..62f827332 --- /dev/null +++ b/app/views/plantings/_neighbour.html.haml @@ -0,0 +1,14 @@ +-# One neighbouring planting, as a compact sidebar row. Not plantings/_card: +-# that is a card for a grid, and in a narrow column it is one huge photo per +-# neighbour, with the owner's quick-actions menu floating over it. += link_to planting_path(neighbour), class: 'planting-neighbour' do + = image_tag neighbour.thumbnail_url || placeholder_image, alt: '', class: 'planting-neighbour-photo' + %span.planting-neighbour-text + %strong= neighbour.owner_login_name + %span.planting-neighbour-where + -# The crop is the same for every neighbour, so the useful facts are who + -# grows it and where. + = neighbour.garden_name + - if neighbour.location.present? + · + = neighbour.location diff --git a/app/views/plantings/show.html.haml b/app/views/plantings/show.html.haml index 5ff6261ad..3f9e3bf0c 100644 --- a/app/views/plantings/show.html.haml +++ b/app/views/plantings/show.html.haml @@ -112,7 +112,8 @@ %section.neighbours .section-header %h2= t('plantings.show.neighbours') - .index-cards + %p.text-muted.small.planting-neighbours-lead + = t('plantings.show.neighbours_explanation', crop: @planting.crop.name) + .planting-neighbours - @neighbours.each do |neighbour| - = render 'plantings/card', planting: neighbour - %p.text-muted= t('plantings.show.neighbours_explanation', crop: @planting.crop.name) + = render 'plantings/neighbour', neighbour: neighbour