Cleaning up small screen presentation

app/assets/stylesheets/plantings.sass

@@ -18,6 +18,11 @@
     margin-top: 0.5em
     border: 1px solid darken($beige, 10%)
     border-radius: 4px
+    .badge
+      font-size: 100%
+  .planting-full-badges
+    .badge
+      font-size: 200%
 
   .planting-name
     position: relative
@@ -41,7 +46,7 @@
     text-align: center
     height: 180px
     border: 1px solid lighten($green, 20%)
-    border-radius: 30%
+    border-radius: 5%
     background: $white
     margin: 1em
     strong

app/helpers/icons_helper.rb

@@ -32,6 +32,14 @@ module IconsHelper
     icon('fas', 'camera-retro')
   end
 
+  def seedling_icon
+    icon('fas', 'seedling')
+  end
+
+  def perennial_icon
+    icon('fas', 'tree')
+  end
+
   def planted_from_icon(planted_from)
     planted_from
   end

app/views/photos/_photo.haml

@@ -1 +1,10 @@
-= image_tag(photo.fullsize_url, alt: photo.title, class: 'img img-responsive')
+.planting-full-photo
+  = image_tag(photo.fullsize_url, alt: photo.title, class: 'img img-responsive')
+  .text
+    %p
+      = link_to photo.title, photo
+      %br/
+      %small
+        %i
+          by
+          = link_to photo.owner, photo.owner

app/views/photos/_thumbnail.html.haml

@@ -9,4 +9,5 @@
           %i
             by
             = link_to photo.owner, photo.owner
-  = I18n.l(photo.date_taken.to_date)
+  - if photo.date_taken.present?
+    = I18n.l(photo.date_taken.to_date)

app/views/plantings/_descendants.html.haml

@@ -1,4 +1,4 @@
-%h2 Seeds saved from this planting
+%h2 Seeds saved
 - if planting.active? && can?(:create, Seed) && can?(:edit, planting)
   = link_to new_planting_seed_path(planting), class: 'btn btn-default' do
     %span.glyphicon.glyphicon-heart{ title: "Add photo" }

app/views/plantings/_facts.haml

@@ -1,39 +1,38 @@
 .planting
 
   - if planting.parent_seed
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Parent seed
       %strong
         = link_to @planting.parent_seed, seed_path(@planting.parent_seed)
   - if planting.finished
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Planted
       %strong=planting_icon
       %span= planting.planted_at.to_formatted_s(:short)
 
   - if planting.planted_at.present? && ! planting.finished?
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Planted
       %strong #{planting.days_since_planted}
       %span days ago
       %span= planting.planted_at.to_formatted_s(:short)
 
   - unless planting.finished?
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Growing
-      %strong
-        %i.fas.fa-seedling
+      %strong= seedling_icon
       %span= planting.planted_at.to_formatted_s(:short)
 
   - if planting.planted_from.present?
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Grown from
       %strong=planted_from_icon(planting.planted_from)
       - if planting.quantity.to_i.positive?
         %span #{pluralize((planting.quantity.to_i), planting.planted_from)}
 
   - if planting.sunniness.present?
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Grown in
       %strong
         = link_to planting.garden do
@@ -41,7 +40,7 @@
       %span= planting.sunniness
 
 
-  .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+  .fact.col-lg-2.col-md-3.col-xs-5
     %h3
       - if planting.finished?
         Harvests
@@ -55,13 +54,12 @@
     %span #{planting.harvests.size} harvests
 
   - if planting.crop.perennial
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Perennial
-      %strong
-        %i.fas.fa-tree
+      %strong=perennial_icon
   - else
     - if !planting.finished? && planting.finish_is_predicatable?
-      .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+      .fact.col-lg-2.col-md-3.col-xs-5
         - days = days_from_now_to_finished(planting)
         - if days.positive?
           %h3 Finishes
@@ -74,7 +72,7 @@
         %span= planting.finish_predicted_at&.to_formatted_s(:short)
 
   - if planting.child_seeds.size.positive?
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Seeds saved
       %strong
         = link_to planting_seeds_path(planting) do
@@ -84,12 +82,12 @@
 
 
   - if planting.finished?
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h3 Finished
       %strong=finished_icon
       %span=planting.finished_at&.to_formatted_s(:short)
 
   - elsif planting.percentage_grown
-    .fact.col-lg-2.col-md-3.col-sm-6.col-xs-12
+    .fact.col-lg-2.col-md-3.col-xs-5
       %h2 Progress
       %strong #{sprintf '%.0f', planting.percentage_grown}%

app/views/plantings/_harvests.html.haml

@@ -1,4 +1,4 @@
-%h2 Harvests from this planting
+%h2 Harvests
 - if planting.active? && can?(:edit, planting)
   = link_to new_planting_harvest_path(planting), class: 'btn btn-default' do
     %span.glyphicon.glyphicon-leaf{ title: "Harvest" }

app/views/plantings/show.html.haml

@@ -17,27 +17,27 @@
     .col-xs-12.col-sm-8
       .row
         = render 'facts', planting: @planting
+
       %hr/
+
       - if @planting.photos.size.positive?
         .row
           .col-sm-8
-            = render 'plantings/badges', planting: @planting
-            = render @planting.default_photo
-            - if @planting.description
+            .planting-full-badges= render 'plantings/badges', planting: @planting
+            = link_to @planting.default_photo do
+              = render @planting.default_photo
+          .col-sm-4
+            = render 'photos/gallery', photos: @photos
+          .col-sm-6
+            - if @planting.description.present?
               %h2 Notes
               :growstuff_markdown
-                #{ @planting.description != "" ? strip_tags(@planting.description) : "No description given." }
+                #{strip_tags(@planting.description)}
 
-          .col-sm-4
-            = link_to 'View all photos >>', planting_photos_path(@planting), class: 'pull-right'
-            - @photos.each do |photo|
-              = render('photos/thumbnail', photo: photo)
-
-    .col-xs-12.col-sm-4.pull-right
-      = render "crops/index_card", crop: @planting.crop
-      = render 'plantings/owner', planting: @planting
+    .col-sm-4
       .row
-        .col-md-6.col-sm-12
-          = render 'plantings/harvests', planting: @planting
-        .col-md-6.col-sm-12
-          = render 'plantings/descendants', planting: @planting
+        .col-xs-8.col-sm-12= render "crops/index_card", crop: @planting.crop
+        .col-xs-4.col-sm-12= render 'plantings/owner', planting: @planting
+      .row
+        .col-md-6.col-xs-6= render 'plantings/harvests', planting: @planting
+        .col-md-6.col-xs-6= render 'plantings/descendants', planting: @planting

spec/features/shared_examples/append_date.rb

@@ -1,5 +1,5 @@
 shared_examples "append date" do
-  let(:this_month) { Time.zone.today.strftime("%B") }
+  let(:this_month) { Time.zone.today.strftime("%b") }
   let(:this_year)  { Time.zone.today.strftime("%Y") }
 
   background { visit path }

spec/views/plantings/show.html.haml_spec.rb

@@ -19,26 +19,28 @@ describe "plantings/show" do
   context 'sunniness' do
     let(:planting) { FactoryBot.create(:sunny_planting) }
 
-    it "shows the sunniness" do
-      render
-      rendered.should have_content 'Sun or shade?'
-      rendered.should have_content 'sun'
+    describe "shows the sunniness" do
+      before { render }
+      it { expect(rendered).to have_content 'Planted in' }
+      it { expect(rendered).to have_content 'sun' }
     end
   end
 
   context 'planted from' do
     let(:planting) { FactoryBot.create(:cutting_planting) }
 
-    it "shows planted_from" do
-      render
-      rendered.should have_content 'Planted from:'
-      rendered.should have_content 'cutting'
+    describe "shows planted_from" do
+      before { render }
+      it { expect(rendered).to have_content 'Planted from' }
+      it { expect(rendered).to have_content 'cutting' }
     end
 
-    it "shows planted_from if blank" do
-      planting.update(planted_from:  '')
-      render
-      rendered.should have_content 'Planted from: not specified'
+    describe "shows planted_from if blank" do
+      before do
+        planting.update(planted_from:  '')
+        render
+      end
+      it { expect(rendered).not_to have_content 'Planted from' }
     end
   end
 
@@ -49,22 +51,20 @@ describe "plantings/show" do
     assert_select "img[src='#{photo.thumbnail_url}']"
   end
 
-  it "shows a link to add photos" do
-    render
-    rendered.should have_content "Add photo"
+  describe "shows a link to add photos" do
+    before { render }
+    it { expect(rendered).to have_content "Add photo" }
   end
 
   context "no location set" do
-    before do
-      render
-    end
+    before { render }
 
     it "renders the quantity planted" do
-      rendered.should match(/3/)
+      expect(rendered).to match(/3/)
     end
 
     it "renders the description" do
-      rendered.should match(/This is a/)
+      expect(rendered).to match(/This is a/)
     end
 
     it "renders markdown in the description" do
@@ -72,7 +72,7 @@ describe "plantings/show" do
     end
 
     it "doesn't contain a () if no location is set" do
-      rendered.should_not have_content "()"
+      expect(rendered).to have_content "()"
     end
   end
 
@@ -83,7 +83,7 @@ describe "plantings/show" do
     end
 
     it "shows the member's location in parentheses" do
-      rendered.should have_content "(#{planting.owner.location})"
+      expect(rendered).to have_content "(#{planting.owner.location})"
     end
   end
 end