diff --git a/app/assets/javascripts/editable.js b/app/assets/javascripts/editable.js index e28846cd1..feafddfd5 100644 --- a/app/assets/javascripts/editable.js +++ b/app/assets/javascripts/editable.js @@ -1,6 +1,11 @@ +// The little pencil beside a fact's label swaps that fact's value for a form. +// Both the value and the pencils go while the form is open, so nothing is left +// showing behind it. $(document).ready(function() { - $('.editable').click(function() { + $('.editable').click(function(event) { + event.preventDefault(); $(this.dataset.form).show(); $(this.dataset.display).hide(); + $(this).closest('.fact-card').find('.edit-link').hide(); }); }); diff --git a/app/assets/stylesheets/_photos.scss b/app/assets/stylesheets/_photos.scss index 75cb3f57c..7fc840098 100644 --- a/app/assets/stylesheets/_photos.scss +++ b/app/assets/stylesheets/_photos.scss @@ -123,3 +123,19 @@ font-size: 1.1rem; } + +// Photo cards are little polaroids: a white border all round the picture, a +// deeper lip beneath it where the caption goes, and a soft shadow so they sit +// on the section's ground rather than merging into it. +.photo-card.card { + padding: 0.5rem 0.5rem 0; + box-shadow: 0 1px 3px rgba(65, 63, 59, 0.25); + + .img-card { + border-radius: 0; + } + + .card-body { + padding: 0.5rem 0.25rem 0.75rem; + } +} diff --git a/app/assets/stylesheets/_plantings.scss b/app/assets/stylesheets/_plantings.scss index bfc6f1ee4..92026da71 100755 --- a/app/assets/stylesheets/_plantings.scss +++ b/app/assets/stylesheets/_plantings.scss @@ -458,6 +458,35 @@ justify-content: flex-start; } + // The inline edit form takes the place of the fact's value, inside a card + // only 170px wide. Without this the control runs past the card's edge and + // the save button lands on top of the sub-line beneath it. + .facts .fact-card form { + margin-top: 0.5rem; + + .form-control, + .form-select { + width: 100%; + padding: 0.2rem 0.4rem; + font-size: 0.9rem; + } + + label { + margin-bottom: 0.2rem; + font-size: 0.8rem; + } + + input[type="submit"] { + margin-top: 0.5rem; + padding: 0.2rem 0.75rem; + font-size: 0.85rem; + } + + .mb-3 { + margin-bottom: 0 !important; + } + } + // Title and subtitle read as one block, with the badge and the actions menu // pinned to the top right beside them. .planting-identity { diff --git a/app/assets/stylesheets/_record_page.scss b/app/assets/stylesheets/_record_page.scss index ddcf80b1b..153056174 100644 --- a/app/assets/stylesheets/_record_page.scss +++ b/app/assets/stylesheets/_record_page.scss @@ -29,6 +29,13 @@ } } + // A section full of cards gets the page's own ground rather than white. + // The photo cards are little white polaroids; on a white section they have + // nothing to sit against and the grid reads as a mess of edges. + section:has(> .index-cards) { + background: $beige; + } + // The heading bar is the section's lid, so it spans the full width: the // negative margin cancels the section's padding, otherwise the section's // white shows down either side of the green. diff --git a/app/views/plantings/_facts.html.haml b/app/views/plantings/_facts.html.haml index 12d9b7b1e..8605d0d68 100644 --- a/app/views/plantings/_facts.html.haml +++ b/app/views/plantings/_facts.html.haml @@ -9,13 +9,14 @@ .card.fact-card{class: planting.planted_at.present? ? '' : 'text-muted'} %h3 Planted - = editable :date, planting, :planted_at, display_field: '.planted_at' - - if planting.planted_at.present? - %strong.planted_at= standard_time_distance planting.planted_at, Time.zone.today - %span.planted_at= I18n.l planting.planted_at - - else - %strong.planted_at unknown - %span.planted_at no date recorded + = editable :date, planting, :planted_at, display_field: '.fact-planted' + .fact-value.fact-planted + - if planting.planted_at.present? + %strong.planted_at= standard_time_distance planting.planted_at, Time.zone.today + %span.planted_at= I18n.l planting.planted_at + - else + %strong.planted_at unknown + %span.planted_at no date recorded .card.fact-card{class: planting.percentage_grown.present? ? '' : 'text-muted'} %h3 Progress @@ -48,24 +49,24 @@ .card.fact-card{class: planting.quantity.to_i.positive? ? '' : 'text-muted'} %h3 Quantity - = editable :text_field, planting, :quantity, display_field: '.plantingfact--quantity' - %strong.plantingfact--quantity - = planting.quantity.to_i.positive? ? planting.quantity : 'unknown' - %span + = editable :text_field, planting, :quantity, display_field: '.fact-quantity' + .fact-value.fact-quantity + %strong.plantingfact--quantity + = planting.quantity.to_i.positive? ? planting.quantity : 'unknown' %span.plantingfact--plantedfrom - if planting.planted_from.present? = planting.planted_from.pluralize(planting.quantity.to_i) - else not recorded - = editable :select, planting, :planted_from, collection: Planting::PLANTED_FROM_VALUES, display_field: '.plantingfact--plantedfrom' .card.fact-card{class: planting.sunniness.present? ? '' : 'text-muted'} %h3 Grown in - = editable :select, planting, :sunniness, collection: Planting::SUNNINESS_VALUES, display_field: '.plantingfact--sunniness' - %strong= sunniness_icon(planting.sunniness) - %span.plantingfact--sunniness - = planting.sunniness.presence || 'not specified' + = editable :select, planting, :sunniness, collection: Planting::SUNNINESS_VALUES, display_field: '.fact-sunniness' + .fact-value.fact-sunniness + %strong= sunniness_icon(planting.sunniness) + %span.plantingfact--sunniness + = planting.sunniness.presence || 'not specified' .card.fact-card{class: planting.overall_rating.present? ? '' : 'text-muted'} %h3 Rating