Page MenuHomePhabricator

Design changes to related articles
Closed, ResolvedPublic5 Estimated Story Points

Description

  • When on a tablet, the related articles take up a 3 column layout with each row having a fixed height
  • Truncate long titles/wiki data descriptions with linear gradient/ellipses
  • Title should be changed to 'Related pages' and made uppercase. See mock for font-color change.
  • MediaWiki pages should be renamed from https://www.mediawiki.org/wiki/Talk:Reading/Web/Projects/Read_more to https://www.mediawiki.org/wiki/Talk:Reading/Web/Projects/Related pages (leave a redirect)
  • Related pages should be inserted after the #content div in the Vector skin as in mock
  • ONLY title change on Mobile - title style can be the same as desktop. but left aligned to the cards
  • Release new versions of RelatedArticles and Cards after signing off design on staging with Nirzar

Reason
On wide screens we have enough horizontal space and the mobile table layout does not make sense.

Solution
Instead of long list items, we can use horizontal layout to show cards and use the space correctly.
These cards will collapse down from LTR (or RTL) as you change the width of the screen. eventually, resulting in the table layout that we see on mobile web.

Mocks

  • Spec

    • Related articles will show cards on desktop. laid out horizontally.
    • The three cards will have fixed height. flexible width until the breakpoint of 720
    • after 720, the cards will collapse into a tableview. Mock no. 2
    • after the mobile breakpoint, the tableview will look like what is implemented on mobile-web beta right now. except for the new title styling to match on desktop.
    • The titles will get clamped after 2 lines.
    • The background of related articles is merged into the footer with subtle inset shadow on top to show layering

    Visual Design Spec
    http://nirzar.github.io/prototypes/mobile-web/readmore/index.html

    Event Timeline

    There are a very large number of changes, so older changes are hidden. Show Older Changes

    Change 265716 had a related patch set uploaded (by Phuedx):
    Retitle the footer section "Related Pages"

    https://gerrit.wikimedia.org/r/265716

    Change 265716 merged by jenkins-bot:
    Retitle the footer section "Related Pages"

    https://gerrit.wikimedia.org/r/265716

    @Nirzar: From @bmansurov's review:

    Can you tell by looking at http://imgur.com/ikvpWPA that the title line has continuation? IMO, it's not very clear. Indeed there is some more text which can be seen by changing the device width: http://imgur.com/pSVLnx6. I don't know how to best handle this situation. Or is it an acceptable trade off?

    @phuedx I think it's fine. the title line supports the layout. and the uppercase title is correctly aligned to the left edge of the list units.

    Can you post a screenshot of the desktop changes? on 1000px+ 800px and 600px?

    Can you post a screenshot of the desktop changes? on 1000px+ 800px and 600px?

    From @Jhernandez's review:

    Desktop: https://i.imgur.com/ia08Poc.png
    Mobile: https://i.imgur.com/peLcyQU.png
    Portrait tablet: https://i.imgur.com/0BEeEDp.png
    Smaller portrait tablet: https://i.imgur.com/LIHCP5x.png

    @Nirzar this is ready for sign-off.

    I think what @bmansurov was asking is that in certain cases there is no clue that the sentence continues since the text doesn't go to the end of the box:

    See here it is fine: https://i.imgur.com/0BEeEDp.png

    But if I resize it a bit, then Higher order programming doesn't span to the rest of the text and in that box the gradient doesn't overlay any text https://i.imgur.com/LIHCP5x.png

    Mobile screenshots:
    Desktop width: https://i.imgur.com/ia08Poc.png
    Mobile width: https://i.imgur.com/peLcyQU.png
    Portrait tablet: https://i.imgur.com/0BEeEDp.png
    Smaller portrait tablet: https://i.imgur.com/LIHCP5x.png

    @Nirzar here are the desktop screenshots:

    Desktop:
    ~1300px: https://i.imgur.com/23vzFh0.png
    ~1000px: https://i.imgur.com/Wth3pEk.png
    800px: https://i.imgur.com/DujGNNp.png
    600px: https://i.imgur.com/DiDIsn4.png

    @Jhernandez hey looks like there are a lot of issues here.

    1. The entire section is still in the content area
    2. the treatment is entirely different.

    can you please compare this to http://nirzar.github.io/prototypes/mobile-web/readmore/index.html and you will see the difference.

    Sure. Back to TODO.

    1. The entire section is still in the content area
    2. the treatment is entirely different.

    can you please compare this to http://nirzar.github.io/prototypes/mobile-web/readmore/index.html and you will see the difference.

    See description and Nirzar's comments for work to be done.

    Sorry I'm messing up. I screenshoted on master RelatedArticles instead of dev.

    @Jhernandez

    Okay this is better :)

    2 fixes

    1. there shouldn't be a line below the title on desktop
    2. If you look at the html prototype, I am continuing the left blue line till the end with left padding

    Can I also see a screenshot where the wikidata descriptor and image is present?

    @Nirzar: I've updated the RelatedArticles and MediaWiki-extensions-Cards on our staging server.

    Note well that in order to see it working on desktop (Vector) you'll need to create a testing account and enable the Read More beta feature.

    Desktop: http://reading-web-staging.wmflabs.org/wiki/Maybeshewill
    Mobile: http://reading-web-staging.wmflabs.org/wiki/Maybeshewill?useformat=mobile&mobileaction=beta

    @Jhernandez

    Okay this is better :)

    2 fixes

    1. there shouldn't be a line below the title on desktop
    2. If you look at the html prototype, I am continuing the left blue line till the end with left padding

    Can I also see a screenshot where the wikidata descriptor and image is present?

    IIRC getting Wikidata descriptions working on our staging server was almost impossible. I'll post a screenshot momentarily.

    The screenshot above is Related Pages as seen in MFβ on a tablet. The truncation of the Wikidata description is the same in Vector though.

    @Jhernandez

    Okay this is better :)

    2 fixes

    1. there shouldn't be a line below the title on desktop
    2. If you look at the html prototype, I am continuing the left blue line till the end with left padding

    Can I also see a screenshot where the wikidata descriptor and image is present?

    These two changes will need to be done in RelatedArticles.

    @phuedx
    i checked on http://reading-web-staging.wmflabs.org/wiki/Maybeshewill

    1. if there is only one related article, it spans the width to 100%. it should retain the width of one card. that is 33%
    2. on hover of the card, you can copy the css from html proto. right now, when you hover, you get an underline, in the html proto when you over the card has a subtle shadow showing the "lift"
    3. line below the title shouldn't be there

    Summary of TODOs:

    • There shouldn't be a line below the title on desktop
    • If you look at the html prototype, I am continuing the left blue line till the end with left padding.
    • If there is only one related article, it spans the width to 100%. it should retain the width of one card. that is 33%
    • On hover of the card, you can copy the css from html proto. right now, when you hover, you get an underline, in the html proto when you over the card has a subtle shadow showing the "lift"

    Change 265714 merged by jenkins-bot:
    "Truncate" overflowing title with a gradient

    https://gerrit.wikimedia.org/r/265714

    If you look at the html prototype, I am continuing the left blue line till the end with left padding.

    This'll require adding a left border to the Vector footer. I'd say that this is out of scope for this task but then we're the maintainers of Vector (!?).

    @phuedx hmmm............. okay let's keep it out of scope for now.

    Updated summary of TODOs:

    • There shouldn't be a line below the title on desktop
    • If you look at the html prototype, I am continuing the left blue line till the end with left padding.
    • If there is only one related article, it spans the width to 100%. it should retain the width of one card. that is 33%
    • On hover of the card, you can copy the css from html proto. right now, when you hover, you get an underline, in the html proto when you over the card has a subtle shadow showing the "lift"

    Change 266626 had a related patch set uploaded (by Jdlrobson):
    Remove bottom border on related pages heading

    https://gerrit.wikimedia.org/r/266626

    • border color needs to be darker ^ above patch does that
    • border radius needs to be 2px ^ above patch does that too

    The left padding and blue line issue is bit sticky, we can address it a bit later, need to think it through

    Change 266626 merged by jenkins-bot:
    Remove bottom border on related pages heading

    https://gerrit.wikimedia.org/r/266626

    If there is only one related article, it spans the width to 100%. it should retain the width of one card. that is 33%

    This ^ doesn't make sense on small screens. Why make a card un-readable by limiting its width when we have space to show more?

    Change 266635 had a related patch set uploaded (by Jdlrobson):
    Darken borders, change hover effect

    https://gerrit.wikimedia.org/r/266635

    Updated TODOS:

    • There shouldn't be a line below the title on desktop

    In code review (https://gerrit.wikimedia.org/r/266635)

    • On hover of the card, you can copy the css from html proto. right now, when you hover, you get an underline, in the html proto when you over the card has a subtle shadow showing the "lift"
    • border color needs to be darker
    • border radius needs to be 2px

    TODO:

    • If there is only one related article, it spans the width to 100%. it should retain the width of one card. that is 33%

    Can someone take the above ^ been a while since I worked with flex box.

    @bmansurov not on small screens. big screens. on desktop.

    Can someone take the above ^ been a while since I worked with flex box.

    @Jdlrobson, the question is: Do we really want to do this? See my comment above. cc @Nirzar.

    Change 266697 had a related patch set uploaded (by Phuedx):
    "Truncate" overflowing title with a gradient

    https://gerrit.wikimedia.org/r/266697

    266635 now fixes the three TODOs that @Jdlrobson mentions above.

    Oh and when we switched to the master branch, we didn't merge 266697. I've based 266635 on it to make it clear that it needs to be merged too.

    @bmansurov that's a good point. is there a way to do "border-bottom:0" except for the ":last-child" when the cards are stacking with media query?

    I think there is. Should it be implemented?

    @bmansurov yeah definitely but can we make sure the bottom borders don't go away when the cards are NOT stacking or two cards are stacking and third on isnt stacking. basically, handling the stacking cases.

    @Nirzar, OK. Your second point - two cards are stacking and third on isnt stacking - doesn't make much sense as cards can either be stacked or not stacked. But I see what you mean.

    @bmansurov then it's easier :) lets fix this then.

    I've moved this to -1 (Needs More Work) based on @bmansurov's and @Nirzar's comments above.

    I've asked @Jhernandez to review, test, and, if appropriate, merge 266635 since I pushed PS2 – it LGTM though!

    A couple of screenshots of the desktop version on PS4:

    For the hover effect you'll have to test it with somebody or on staging. It is really subtle.

    @Nirzar: I've checked 266635 out on our staging node. You can take a look at it's current incarnation (PS4) here:

    Desktop: http://reading-web-staging.wmflabs.org/wiki/Maybeshewill – remember that you'll need to be logged in with a user that has the Read More beta feature enabled
    Mobile: http://reading-web-staging.wmflabs.org/wiki/Maybeshewill?useformat=mobile&mobileaction=beta

    @Jhernandez that line below the title is still there!! I thought JR had removed it.

    @phuedx I can't see read more as a beta feature on reading-web-staging. there's only VE and search suggestion

    @Nirzar: It's been there all along… I swear! Just… look again, okay!? (read: I've just re-enabled the Read More beta feature on the staging server…)

    @phuedx ahh looks good!

    3 minor css additions if you can add

    .ra-read-more h2 {
       font-size:0.8em;
       letter-spacing:1px;
    }
    .ext-cards-card-list h3 {
       font-weight:500;
    }
    .ext-cards-card-list .ext-cards-card-extract {
        margin-top:2px;
    }

    Change 267068 had a related patch set uploaded (by Phuedx):
    Design review

    https://gerrit.wikimedia.org/r/267068

    I've deployed 267068 to the staging node.

    Looks good :) "Signed off from design"

    Thanks everyone!

    Jdlrobson closed this task as Resolved.EditedJan 28 2016, 8:01 PM

    Per @Nirzar signing off
    It looks beautiful.

    Nirzar do you want to address the padding and left blue line in another card? If so please raise one and we can maybe get round to it in next sprint. The misalignment with the footer and content seems weird to me but #iamnotadesigner.

    Now we need to do a release of RelatedArticles and MediaWiki-extensions-Cards

    I created T125191: [Release] Desktop Read More enhancements as a release card - whoever knows the answer for whether deploy cuts are needed, would you please update there?

    Change 266697 merged by jenkins-bot:
    "Truncate" overflowing title with a gradient

    https://gerrit.wikimedia.org/r/266697