Blog layout enhancements #581

kmeleta · 2021-09-07T19:40:38Z

Why are these changes introduced?

Fixes #418

Add desktop layout setting to main blog
Add image height setting to article and article cards (main blog and featured blog)
Prevent single blog post from going width (on large screens) in featured blog section

What approach did you take?

Explicit image heights were added for each breakpoint/setting combination according to the design. If we were concerned about the number of lines of css this adds (and we didn't mind the heights being less fixed across viewport sizes), we may be able to use percentage based heights that were shared across at least some of the breakpoints. This could save some css.

Demo links

Editor

Checklist

Oliviammarcello

This looks great! I have no notes 🎉

ludoboludo

Left a few comments.

One thing not related that looks like it could be maybe be a quick fix 😬 is the share button being very wide on the article page. Unless it's fixed already on main.

assets/component-article-card.css

ludoboludo · 2021-09-08T14:35:54Z

assets/section-featured-blog.css

-@media screen and (min-width: 750px) {
-  .blog__post:only-child {
-    text-align: center;
-  }
-}


I wonder if we should still try and center the blog card when it's on its own 🤔 If you have only one article or decide to limit it to one, it mostly looks like it's missing a second one rather than looking ok alone.

cc: @Oliviammarcello

Definitely a design decision but I don't know if we have a precedent for centering a card like that anywhere, unless full width. Centering might make it look more purposeful in some way, but I wouldn't say I'm crazy about it, personally https://screenshot.click/08-27-azpow-eji6o.png

Fair it looks odd with the title of the section left aligned. Disregard my comment 👍

This is a fair point, but I think it's fine to keep the card left aligned when there's only 1 post. We could argue that this section has less purpose when a blog has less than 2 articles in it. And also, this layout is the same for the featured collection when it only has one product. About that, I tested it and when I resize the browser window with those to sections, the alignment seems off on the tablet breakpoint. Is that intentional? If not I would suggest we investigate the issue and make the proper update. Here's a video recording to show what I mean.

And then there's another question that deserves to be asked on the UX side of things. Should we change the range picker start and stop values in the Blog post section settings? Since 1 is not the use case we designed it for, perhaps it could start at 2 ? And then I'm wondering why we don't allow to go up to 4. You may remember @Oliviammarcello if there's a rational I'm forgetting?

I believe the with the padding and spacing we had, the line length on the cards got a bit too short at 4

Now that the margins are wider maybe that's no longer a problem? 🤔 @kmeleta would we be able to try adding 4?

I believe the with the padding and spacing we had, the line length on the cards got a bit too short at 4

Gotcha. I think I remember having discussed that. Makes total sense. 👍

This is quick mockup of what a 4 column blog looks like at the smallest desktop breakpoint (~990px) with all the current desktop paddings/sizes/etc. The titles seem a little squeezed to me in this case, but 4 articles on larger desktop sizes looks fine, and 4 articles on tablet or mobile is fine because they're just additional slides. If that looks reasonable enough I can definitely make that change. Let me know what you think.

Guillaume I think that tablet alignment you noticed is due to the tablet slider margins being applied even when it's not actually a slider. This should occur on tablet, when only 2 articles are displayed. I'll see if I can conditionally prevent that.

@kmeleta I'm in favour of adding this in 🙌 Just to clarify, the blog posts slider will now start at 2 and have 3 in the middle and 4 on the right side.

The limit slider has been updated to support 2-4 and I fixed the padding discrepancies on the tablet breakpoint when the slider is/isn't active. I also realized I originally forgot to update the placeholder card width.

ludoboludo · 2021-09-08T14:48:13Z

assets/section-main-blog.css

-  .blog-articles > *:nth-child(4),
-  .blog-articles > *:last-child:nth-child(2),
-  .blog-articles > *:last-child:nth-child(5) {
+  .blog-articles--collage > *:nth-child(3n + 1) {


With this change, .blog-articles > *:last-child:nth-child(2) and .blog-articles > *:last-child:nth-child(5) aren't handled like they were before anymore: screenshot

Hmm, I guess reading the ticket again, this change isn't called out for collage layout specifically, only grid. So you're probably right I may have to put this back in.

Ok, I think I found a way to get those cases accounted for again without having to explicitly add a selector for 2 and 5 (or 1 and 4), which would really add up if being repeated for each size/breakpoint.

ludoboludo · 2021-09-08T14:59:18Z

sections/main-blog.liquid

+          "label": "t:sections.main-blog.settings.image_height.options__4.label"
+        }
+      ],
+      "default": "adapt",


default, based on the image shared by Guillaume in the issue should be small. The Adapt to image could be moved to the bottom as the last option to match that screenshot as well 🤷

In Figma currently Adapt is on top, but it wasn't clear what was intended to be default. Figured there was a chance we'd want to play with these settings. Thoughts order and default @Oliviammarcello? Did I miss this decision somewhere?

Sorry for the confusion. Let's use place Adapt at the top (it's at the top for other image settings). But let's use small as the default still 👍

Now defaulting to small

nicklepine · 2021-09-08T16:26:26Z

@shainaraskas Pinging you on this for visibility as this change will also require small updates to help docs.

shainaraskas · 2021-09-08T18:32:41Z

@KimliW 🙏

ludoboludo

Left a couple comments but it's looking good 👌

assets/base.css

snippets/article-card.liquid

ludoboludo · 2021-09-13T21:18:48Z

I just noticed that if you have a short excerpt or article content, it centers the text. So maybe we can make sure it's left aligned:

ludoboludo

It's looking good to me 👌

I requested the translations while we wait for a second reviewer 🌐

tauthomas01

Code looks good, tested with all browsers

kmeleta · 2021-09-16T16:22:10Z

@melissaperreault I discussed this with @Oliviammarcello but wanted to make sure you were aligned. We realized the defaults we were using for the new main blog settings were creating somewhat unnecessary visual breaking changes. I'm changing the layout setting to default to collage instead of grid since the collage layout is what dawn was released with. And for the image height we were defaulting to small but I feel medium (if not large) would be a slightly better match to the current image size. Let me know if you have any concerns or need clarification.

melissaperreault · 2021-09-16T20:24:10Z

@melissaperreault I discussed this with @Oliviammarcello but wanted to make sure you were aligned. We realized the defaults we were using for the new main blog settings were creating somewhat unnecessary visual breaking changes. I'm changing the layout setting to default to collage instead of grid since the collage layout is what dawn was released with. And for the image height we were defaulting to small but I feel medium (if not large) would be a slightly better match to the current image size. Let me know if you have any concerns or need clarification.

Thanks for the ping!

Totally makes sense to default to Collage, aligned!
I would suggest to default to Medium, aligned!

ludoboludo

Translations are in and only the default settings changed, seems good 👌

tauthomas01

LGTM 👍

* Add new layout settings to main blog * Update blog post image height settings * Prevent full width single post in featured blog section * Update featured blog limits and breakpoint cleanup * Main blog collage fix * Fix card text alignment * Update tablet page width * Change main blog defaults * Update 13 translation files * Update 7 translation files * Update 1 translation file Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>

ghost added the cla-needed label Sep 7, 2021

kmeleta force-pushed the blog-layout-updates branch from bf2afa5 to 90ef222 Compare September 7, 2021 19:41

ghost removed the cla-needed label Sep 7, 2021

kmeleta marked this pull request as ready for review September 7, 2021 19:47

kmeleta requested a review from Oliviammarcello September 7, 2021 19:55

Oliviammarcello previously approved these changes Sep 8, 2021

View reviewed changes

ludoboludo self-requested a review September 8, 2021 13:49

ludoboludo reviewed Sep 8, 2021

View reviewed changes

kmeleta dismissed Oliviammarcello’s stale review via 628998c September 9, 2021 17:55

kmeleta force-pushed the blog-layout-updates branch 2 times, most recently from e932539 to 7edd12a Compare September 9, 2021 18:14

ludoboludo self-requested a review September 13, 2021 19:28

ludoboludo reviewed Sep 13, 2021

View reviewed changes

assets/base.css Outdated Show resolved Hide resolved

assets/base.css Outdated Show resolved Hide resolved

snippets/article-card.liquid Show resolved Hide resolved

ludoboludo requested a review from Oliviammarcello September 13, 2021 20:52

ludoboludo previously approved these changes Sep 15, 2021

View reviewed changes

tauthomas01 self-assigned this Sep 15, 2021

tauthomas01 previously approved these changes Sep 15, 2021

View reviewed changes

translation-platform bot dismissed stale reviews from tauthomas01 and ludoboludo via 62ea2a1 September 16, 2021 15:08

ludoboludo previously approved these changes Sep 17, 2021

View reviewed changes

tauthomas01 previously approved these changes Sep 17, 2021

View reviewed changes

translation-platform bot dismissed stale reviews from tauthomas01 and ludoboludo via c0e98df September 19, 2021 09:00

ludoboludo previously approved these changes Sep 20, 2021

View reviewed changes

kmeleta and others added 11 commits September 20, 2021 12:25

Add new layout settings to main blog

195d621

Update blog post image height settings

f2fc155

Prevent full width single post in featured blog section

a5d2778

Update featured blog limits and breakpoint cleanup

6cfd358

Main blog collage fix

f5b0c3a

Fix card text alignment

dab208c

Update tablet page width

4c24610

Change main blog defaults

68899fe

Update 13 translation files

c21b899

Update 7 translation files

be781b2

Update 1 translation file

611a4f7

kmeleta dismissed ludoboludo’s stale review via 611a4f7 September 20, 2021 18:33

kmeleta force-pushed the blog-layout-updates branch from c0e98df to 611a4f7 Compare September 20, 2021 18:33

ludoboludo approved these changes Sep 20, 2021

View reviewed changes

tauthomas01 approved these changes Sep 20, 2021

View reviewed changes

kmeleta merged commit 8414d7b into main Sep 20, 2021

kmeleta deleted the blog-layout-updates branch September 20, 2021 19:23

KaichenWang mentioned this pull request Sep 29, 2021

Version bump to 2.2.0 #712

Merged

ludoboludo mentioned this pull request Oct 4, 2021

Blog posts with less whitespace #147

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blog layout enhancements #581

Blog layout enhancements #581

kmeleta commented Sep 7, 2021 •

edited

Loading

Oliviammarcello left a comment

ludoboludo left a comment

ludoboludo Sep 8, 2021

kmeleta Sep 8, 2021

ludoboludo Sep 8, 2021

Guillaumegranger1 Sep 8, 2021

Oliviammarcello Sep 8, 2021

Oliviammarcello Sep 8, 2021 •

edited

Loading

Guillaumegranger1 Sep 8, 2021

kmeleta Sep 8, 2021 •

edited

Loading

Oliviammarcello Sep 9, 2021

kmeleta Sep 9, 2021

ludoboludo Sep 8, 2021

kmeleta Sep 8, 2021

kmeleta Sep 9, 2021

ludoboludo Sep 8, 2021

kmeleta Sep 8, 2021

Oliviammarcello Sep 8, 2021 •

edited

Loading

kmeleta Sep 9, 2021

nicklepine commented Sep 8, 2021

shainaraskas commented Sep 8, 2021

ludoboludo left a comment

ludoboludo commented Sep 13, 2021

ludoboludo left a comment •

edited

Loading

tauthomas01 left a comment

kmeleta commented Sep 16, 2021 •

edited

Loading

melissaperreault commented Sep 16, 2021

ludoboludo left a comment

tauthomas01 left a comment

Blog layout enhancements #581

Blog layout enhancements #581

Conversation

kmeleta commented Sep 7, 2021 • edited Loading

Oliviammarcello left a comment

Choose a reason for hiding this comment

ludoboludo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Oliviammarcello Sep 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kmeleta Sep 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Oliviammarcello Sep 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicklepine commented Sep 8, 2021

shainaraskas commented Sep 8, 2021

ludoboludo left a comment

Choose a reason for hiding this comment

ludoboludo commented Sep 13, 2021

ludoboludo left a comment • edited Loading

Choose a reason for hiding this comment

tauthomas01 left a comment

Choose a reason for hiding this comment

kmeleta commented Sep 16, 2021 • edited Loading

melissaperreault commented Sep 16, 2021

ludoboludo left a comment

Choose a reason for hiding this comment

tauthomas01 left a comment

Choose a reason for hiding this comment

kmeleta commented Sep 7, 2021 •

edited

Loading

Oliviammarcello Sep 8, 2021 •

edited

Loading

kmeleta Sep 8, 2021 •

edited

Loading

Oliviammarcello Sep 8, 2021 •

edited

Loading

ludoboludo left a comment •

edited

Loading

kmeleta commented Sep 16, 2021 •

edited

Loading