From abecbab6c51b93bd391083bc3d6439d0c98d255f Mon Sep 17 00:00:00 2001 From: Brenda Wallace Date: Sun, 9 Feb 2020 22:38:12 +1300 Subject: [PATCH] Tidy up mobile display on homepage, including member cards changes (#2417) * Tidy up mobile display on homepage, including member cards changes --- app/assets/stylesheets/overrides.scss | 17 ++++++---- app/helpers/photos_helper.rb | 8 ++--- app/helpers/posts_helper.rb | 7 ++-- app/views/harvests/_owner.html.haml | 2 +- app/views/home/_crops.html.haml | 4 +-- app/views/home/_discuss.html.haml | 41 ++++++++++++++---------- app/views/home/_members.html.haml | 2 +- app/views/home/_seeds.html.haml | 4 +-- app/views/home/index.html.haml | 12 +++---- app/views/members/_member.haml | 46 ++++++++++++++------------- app/views/plantings/_owner.haml | 2 +- package.json | 4 +-- yarn.lock | 8 ++--- 13 files changed, 88 insertions(+), 69 deletions(-) diff --git a/app/assets/stylesheets/overrides.scss b/app/assets/stylesheets/overrides.scss index 50957d0a0..7cd8ef91b 100755 --- a/app/assets/stylesheets/overrides.scss +++ b/app/assets/stylesheets/overrides.scss @@ -126,6 +126,10 @@ section { } } + .card-double { + width: 400px; + } + .card-finished { background: darken($beige, 10%); @@ -139,15 +143,16 @@ section { } } +.img-cover, +.card .img-card { + height: 200px; + object-fit: cover; + width: 100%; +} + .card { margin-bottom: 1em; - .img-card { - height: 200px; - object-fit: cover; - width: 100%; - } - a:hover { background-color: $beige; color: $blue; diff --git a/app/helpers/photos_helper.rb b/app/helpers/photos_helper.rb index c4aaae7a4..8b9deb400 100644 --- a/app/helpers/photos_helper.rb +++ b/app/helpers/photos_helper.rb @@ -19,10 +19,6 @@ module PhotosHelper photo_or_placeholder(garden) end - def post_image_path(post) - photo_or_placeholder(post) - end - def planting_image_path(planting) photo_or_placeholder(planting) end @@ -35,6 +31,10 @@ module PhotosHelper photo_or_placeholder(seed) end + def post_image_path(post) + post.default_photo&.fullsize_url || post.crops.first&.default_photo&.fullsize_url || placeholder_image + end + private def photo_or_placeholder(item) diff --git a/app/helpers/posts_helper.rb b/app/helpers/posts_helper.rb index ad4afd4be..8ad30256b 100644 --- a/app/helpers/posts_helper.rb +++ b/app/helpers/posts_helper.rb @@ -1,9 +1,12 @@ # frozen_string_literal: true module PostsHelper - def display_post_truncated(post) - length = 300 + def display_post_truncated(post, length: 300) truncate(strip_tags(post.body), length: length, separator: ' ', omission: '... ') { link_to "Read more", post_path(post) } end + + def post_stripped_tags(post, length: 300) + truncate(strip_tags(post.body), length: length) + end end diff --git a/app/views/harvests/_owner.html.haml b/app/views/harvests/_owner.html.haml index 977743c15..71adaa7a7 100644 --- a/app/views/harvests/_owner.html.haml +++ b/app/views/harvests/_owner.html.haml @@ -16,4 +16,4 @@ %small View other harvests, members and more near = link_to harvest.owner.location, place_path(harvest.owner.location, anchor: "harvests") - .col-md-6= render "members/avatar", member: harvest.owner \ No newline at end of file + .col-md-6= render "members/avatar", member: harvest.owner diff --git a/app/views/home/_crops.html.haml b/app/views/home/_crops.html.haml index 17c25cd4d..fbb20437e 100644 --- a/app/views/home/_crops.html.haml +++ b/app/views/home/_crops.html.haml @@ -1,4 +1,4 @@ - cache cache_key_for(Crop, 'homepage'), expires_in: 1.day do .index-cards - - CropSearchService.random_with_photos(16).each do |c| - = render 'crops/thumbnail', crop: c \ No newline at end of file + - CropSearchService.random_with_photos(30).each do |c| + = render 'crops/thumbnail', crop: c diff --git a/app/views/home/_discuss.html.haml b/app/views/home/_discuss.html.haml index 96983207b..23bdb5a0b 100644 --- a/app/views/home/_discuss.html.haml +++ b/app/views/home/_discuss.html.haml @@ -1,18 +1,27 @@ -%h2.text-center= t('.discussion') -.list-group - - Post.includes(:author).order(created_at: :desc).limit(6).each do |post| - - cache post do - = link_to post, class: 'list-group-item list-group-item-action flex-column align-items-start' do - .d-flex.w-100.justify-content-between - %h5.mb-2.h5= truncate(strip_tags(post.subject)) - %small - = time_ago_in_words(post.created_at) - ago - = image_tag avatar_uri(post.author, 50), align: :right, class: 'avatar' - %p.mb-2 - = truncate(strip_tags(post.body), length: 200) - %small - = post.comments_count - comments + +%h2.font-weight-bold.mb-4.pb-2 Recent posts +.row + - Post.includes(:author, :crop_posts, :crops).order(created_at: :desc).limit(3).each do |post| + .col-lg-4.col-md-12.mb-4 + .view + = link_to post do + = image_tag post_image_path(post), class: 'img img-cover' + %h4.font-weight-bold.mb-3 + %strong + = link_to post do + = post.subject + %p + by + = succeed "," do + %a.font-weight-bold= post.author + %p= post_stripped_tags(post, length: 300) + %h6.font-weight-bold.mb-3 + - post.crops.each do |crop| + = link_to crop do + = crop_icon(crop) + = crop.name.pluralize + / = image_tag avatar_uri(post.author, 50), class: 'avatar' + = link_to 'Read more', post, class: 'btn btn-pink btn-rounded btn-md' + %p.text-right = link_to "#{t('.view_all')} »", posts_path, class: 'btn btn-block' diff --git a/app/views/home/_members.html.haml b/app/views/home/_members.html.haml index 15571a2d3..51c546c25 100644 --- a/app/views/home/_members.html.haml +++ b/app/views/home/_members.html.haml @@ -1,6 +1,6 @@ - cache cache_key_for(Member) do .hidden-xs - - members = Member.interesting.limit(6) + - members = Member.interesting.limit(4) - if members.present? %h2.text-center= t('.title') .index-cards diff --git a/app/views/home/_seeds.html.haml b/app/views/home/_seeds.html.haml index bfb56295b..79de417be 100644 --- a/app/views/home/_seeds.html.haml +++ b/app/views/home/_seeds.html.haml @@ -1,5 +1,5 @@ - cache cache_key_for(Seed) do %h2.text-center= t('home.seeds.title') - .index-cards + .row - Seed.homepage_records(6).each do |s| - = render 'seeds/card', seed: s + .col-6.col-md-4= render 'seeds/card', seed: s diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml index 338cc117e..69ebcb420 100644 --- a/app/views/home/index.html.haml +++ b/app/views/home/index.html.haml @@ -16,7 +16,7 @@ .hidden-xs %section.jumbotron= render 'blurb', cached: true .row - .col-lg-8.col-md-12 + .col-12 %section.crops = cute_icon %h2= t('home.crops.our_crops') @@ -27,12 +27,12 @@ %h2= t('.recently_added') %p != CropSearchService.recent(30).map { |c| link_to(c['name'], crop_path(slug: c['slug'])) }.join(", ") - .col-xl-2.col + .col-xl-3.col %section.plantings = cute_icon =render 'plantings' %p.text-right= link_to "#{t('home.plantings.view_all')} »", plantings_path, class: 'btn btn-block' - .col-xl-2.col + .col-xl-3.col %section.harvests = cute_icon = render 'harvests' @@ -42,11 +42,11 @@ = cute_icon = render 'seeds' %p.text-right= link_to "#{t('home.seeds.view_all')} »", seeds_path, class: 'btn btn-block' - .col-12.col-md-6 - %section.discussion + .col-12.col-lg-6 + %section.discussion.text-center = cute_icon = render 'discuss', cached: true - .col-12 + .col-12.col-lg-6 %section.members = cute_icon = render 'members', cached: true diff --git a/app/views/members/_member.haml b/app/views/members/_member.haml index 7c10ce280..5f6b2ce7e 100644 --- a/app/views/members/_member.haml +++ b/app/views/members/_member.haml @@ -1,26 +1,28 @@ - cache member do - .card.member-card.text-center - = link_to member do - = image_tag(avatar_uri(member, 150), class: 'img img-fluid avatar rounded', alt: member) + .card.card-double .card-body - %h4.card-title.login-name= link_to member, member + .row + .col-12.col-md-6 + = render "members/avatar", member: member + .col-12.col-md-6 + %h4.login-name= link_to member, member + = link_to "view all #{member}'s gardens", member_gardens_path(member) + %p + %small + Joined + = distance_of_time_in_words(member.created_at, Time.zone.now) + ago. + - if member.location.present? + = link_to member.location, place_path(member.location) .card-footer - %p - %small - Joined - = distance_of_time_in_words(member.created_at, Time.zone.now) - ago. - - if member.location.present? - = render 'members/location', member: member + %ul.nav.nav-justified.small + %li.nav-item.border-right + = link_to member_plantings_path(member) do + = localize_plural(member.plantings.active, Planting) + %li.nav-item.border-right + = link_to member_harvests_path(member) do + = localize_plural(member.harvests, Harvest) + %li.nav-item + = link_to member_seeds_path(member) do + = localize_plural(member.seeds.active, Seed) - %p - %ul.nav.nav-justified.small - %li.nav-item.border-right - = link_to member_plantings_path(member) do - = localize_plural(member.plantings, Planting) - %li.nav-item.border-right - = link_to member_harvests_path(member) do - = localize_plural(member.harvests, Harvest) - %li.nav-item - = link_to member_seeds_path(member) do - = localize_plural(member.seeds, Seed) diff --git a/app/views/plantings/_owner.haml b/app/views/plantings/_owner.haml index 3b0b931d8..04a47d262 100644 --- a/app/views/plantings/_owner.haml +++ b/app/views/plantings/_owner.haml @@ -15,4 +15,4 @@ %small View other plantings, members and more near = link_to @planting.garden.location, place_path(@planting.garden.location, anchor: "plantings") - .col= render "members/avatar", member: @planting.owner \ No newline at end of file + .col= render "members/avatar", member: @planting.owner diff --git a/package.json b/package.json index d807d8260..def4c53c8 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,9 @@ "main": "index.js", "dependencies": { "@percy/agent": "^0.3.1", - "mdbootstrap": "^4.7.7" + "mdbootstrap": "^4.12.0" }, - "engines": { + "engines": { "node": ">=6.0.0", "yarn": ">=0.25.2" }, diff --git a/yarn.lock b/yarn.lock index 232180d1d..7b4ff6d6c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1464,10 +1464,10 @@ lru-cache@^4.0.1: pseudomap "^1.0.2" yallist "^2.1.2" -mdbootstrap@^4.7.7: - version "4.7.7" - resolved "https://registry.yarnpkg.com/mdbootstrap/-/mdbootstrap-4.7.7.tgz#d45a6589f2def14d5bd678e3f7e2ee855c92789c" - integrity sha512-ICqHUag552bvqVJ0gVVqy5vHT9OcAWZDtTl+Pn45jeO8wlVKk+EUro7xgvy69jAQMSz9TOpXLEc1GFmSePL4FA== +mdbootstrap@^4.12.0: + version "4.12.0" + resolved "https://registry.yarnpkg.com/mdbootstrap/-/mdbootstrap-4.12.0.tgz#0849c6ffa2cdd9f432ede5f17d9c8b66aee7d341" + integrity sha512-+X4x63tE96zpVOcRlVUGdcR65M9Ud+/l1TvdmcwUjEGo3ktn9TO3e6S3DBLTvchO9U5eKuJh/MIWIGac7+569g== media-typer@0.3.0: version "0.3.0"