Enhance editable forms and fact cards for improved user interaction and layout

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();
   });
 });

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;
+  }
+}

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 {

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.

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