Page MenuHomePhabricator

Make community prototype production-ready
Closed, ResolvedPublic5 Estimated Story Points

Description

Description

The prototype for the second round of community feedback is nearing completion — https://di-community-round-2.web.app/Romania
The things still needing work are T263693#6628486

Goal

The goal of this task is to make the prototype "production-ready" for testing. The main piece of work is to hookup language switching (similar to how Jan did on https://people.wikimedia.org/~jdrewniak/dip/#/en/wiki/Moon), allowing the prototype to be viewed in any language (including all interface strings, plus wordmark & tagline being appropriately updated). Note: the language switcher is currently being updated by the language team (details: T253303). Ideally our prototype will reflect the latest designs.

Second Note - our other option would be to provide the prototype only for the languages in which we have translations for the testing script (~30 languages)

WIP

https://people.wikimedia.org/~jdrewniak/dip/p4.html#/en/wiki/Main_Page

Deadline

Early March, 2021

Event Timeline

ovasileva triaged this task as Medium priority.Dec 2 2020, 10:30 AM
ovasileva updated the task description. (Show Details)
ovasileva raised the priority of this task from Medium to High.Jan 4 2021, 4:51 PM

@Jdrewniak can we estimate this / talk about it, or do you need to some analysis. This task has been here for 2 months now, so I was wondering what the status is.

Well the deadline in the description certainly seems to have passed :P

I have some thoughts on this one though.
Previously the prototypes were entirely artificial and created in Vue.js as an SPA.

The prototype has the following features (from T263693#6628486, visible here ):

  • language switcher
  • sticky header styling refinements
  • search in sticky header
  • larger width considerations (header)

These are largely additive and don't change the page layout in a significant way. Therefore, what I think we can do is build them into Vector itself and use the page content service to provide real-life content and multiple languages. We can host this on patchdemo (or similar cloud instance).

I think the HTML, CSS and JS that Alex has produced in his prototypes can largely be moved over into a Vector patch as is and external dependencies like headroom can be copy & pasted for these purpose.

Well the deadline in the description certainly seems to have passed :P

I have some thoughts on this one though.
Previously the prototypes were entirely artificial and created in Vue.js as an SPA.

The prototype has the following features (from T263693#6628486, visible here ):

  • language switcher
  • sticky header styling refinements
  • search in sticky header
  • larger width considerations (header)

These are largely additive and don't change the page layout in a significant way. Therefore, what I think we can do is build them into Vector itself and use the page content service to provide real-life content and multiple languages. We can host this on patchdemo (or similar cloud instance).

I think the HTML, CSS and JS that Alex has produced in his prototypes can largely be moved over into a Vector patch as is and external dependencies like headroom can be copy & pasted for these purpose.

Bumped the deadline to early March. As of right now, the design of the prototype is ready and we'll be marking the questions for editors for translation later this week. @Jdrewniak - do you think this needs more analysis or should I go ahead and move to upcoming?

Assuming my proposed approach of basically copying Alex's work into a Vector patch, I think this is ready for upcoming :)

ovasileva updated the task description. (Show Details)
ovasileva set the point value for this task to 5.

@Jdrewniak apologies for the last minute change here. We've just made a slight adjustment to the logged-in user links area (context T274292#6879950), and I want to make sure we update the community prototype to reflect that.

Previously the username was the menu trigger. Instead of that approach, the username will just be a link to the user page, and next to it there will be a ... button (which triggers the menu).

image.png (1×1 px, 613 KB)

I've updated the reference prototype to reflect this change: https://di-community-round-2.web.app/Romania. However the 500px breakpoint version is not currently part of the prototype. Basically the user name and the ... menu kinda merge together, resulting in a single menu. It should look like this:

image.png (1×497 px, 406 KB)

Apologies again. I'm hoping there won't be any other changes here.

alright, looking good. Here's the list of improvements:

User links

General

  • after opening the ... menu, clicking anywhere outside of the menu should close it
  • user links should have ~40px of margin-left so that they never get too close to the search box
    Screen Shot 2021-03-08 at 2.15.13 PM.png (86×655 px, 13 KB)
  • reduce spacing between username/create account and ... menu (should be ~28px)
    image.png (57×266 px, 4 KB)

Logged out

  • at the smallest breakpoint "Create account" should appear within the ... menu

Logged-in

  • Alerts and Notices should only appear in the menu once they've been hidden from the header (below ~575px)
  • some issues with the responsive positioning here
    • between ~860px and 875px the user tools get positioned on the left (should be right, underneath search)
    • at the medium breakpoint (where the user tools go underneath search) the ... menu opens on top of the button (should be below)
  • add border above the last item in menu (Log out)
Sticky header

General

  • search has a few different issues
  • sticky header should appear on $(window).blur (so when you return from a different tab it's there)
  • hide page title (& section) title when search is open/active

Logged-out

  • add some margin between the divider line | and the section title

Logged-in

  • user icon should always be visible (like the W icon)
  • remove extra space between language button and edit icon-button
  • language switcher in sticky header doesn't appear
Search
  • placeholder text is missing
  • the string in the button (Search on English) should be capitalized
  • around 1272px the search button starts popping out of the search container
  • at 1476px the search input box gets clipped on the right (the border disappears)
Language switching
  • fix spacing for the button
    Screen Shot 2021-03-08 at 1.09.18 PM.png (283×747 px, 23 KB)
Layout & sidebar
  • the outer container (max-width 1650px) is missing — this wraps the site header, sidebar, and page contents
    • the gray "out of bounds" area is missing, this should appear on the sides of the screen once it's wider than 1650px
  • the page container (max-width 1440px) is missing — this wraps the sidebar and page contents
  • sidebar should have a gray background at widths smaller than ~1498px
  • currently the content shifts to the right when the sidebar opens — this should not happen unless the screen width is below ~1400px
  • there should be no border above the top section of links in the sidebar
General / misc
  • prototype should default to logged-in
  • add appropriate hover states to buttons (hamburger, notification bell, inbox tray, ... menu, language button)
  • ensure hamburger icon and logo are vertically centered
    Screen Shot 2021-03-08 at 1.12.08 PM.png (154×579 px, 16 KB)
  • remove border to the left of the "Article" (or "Page") tab
  • fix spacing above & below page title
    Screen Shot 2021-03-08 at 4.16.08 PM.png (356×1 px, 46 KB)

Alright, I've updated as much as I could so far.

https://people.wikimedia.org/~jdrewniak/dip/p4.html

The remaining issues from the list above that haven't been addressed yet are:

User links

Logged In

  • Alerts and Notices should only appear in the menu once they've been hidden from the header (below ~575px)
Sticky Header

Logged in

  • language switcher in sticky header doesn't appear this is challenging, like the real ULS, it's hard to get two of them on the same page.
Language switching
  • fix spacing for the button
Layout & sidebar
  • sidebar should have a gray background at widths smaller than ~1498px
  • currently the content shifts to the right when the sidebar opens — this should not happen unless the screen width is below ~1400px
  • there should be no border above the top section of links in the sidebar
General / misc
  • add appropriate hover states to buttons (hamburger, notification bell, inbox tray, ... menu, language button)
  • ensure hamburger icon and logo are vertically centered
  • remove border to the left of the "Article" (or "Page") tab
  • fix spacing above & below page title

@Jdrewniak wow, awesome progress. This is super close. I think if we fixed the following issues we'd be good to go:

User links
  • when the user links drop below search the search box should shift over to the right
    image.png (311×939 px, 45 KB)
  • add a bit of margin above the first menu item
  • (logged-in) at the smallest breakpoint can we just ditch the user icon, and add the username as the first menu item?
Sticky header
  • (logged-in) user icon should always be visible (like the W icon)
Layout & sidebar
  • the gray "out of bounds" area is missing, this should appear on the sides of the screen once it's wider than 1650px
  • currently the content shifts to the right when the sidebar opens — this should not happen unless the screen width is below ~1400px
  • remove border to the left of the "Article" (or "Page") tab

Stretch goal / nice to have

  • around 1476px the search input box gets clipped on the right (the border disappears)
  • add hover states to buttons
  • alignment of hamburger menu & wikipedia logo

cc @ovasileva

Oky doke. I've taken care of all the items on the list above except for

  • (logged-in) at the smallest breakpoint can we just ditch the user icon, and add the username as the first menu item?

https://people.wikimedia.org/~jdrewniak/dip/p4.html

@Jdrewniak alright, two more fixes and then two optional fixes if there's time:

Sticky header
  • if you hover over the header area the entire sticky header, with all of its contents, should appear. Currently the header container appears but the header is mostly empty.
    2021-03-24 13.15.35.gif (268×1 px, 1 MB)
User links
  • menu position needs to shift right by 10px, right: 0px — both for the one in the site header & the one in the sticky header

(OPTIONAL)

Search
  • use justify-content: flex-end so the search box moves left and stays anchored on larger screens
    image.png (280×1 px, 48 KB)
  • search suggestions menu: increase font-size of page titles to 16px
  • if you hover over the header area the entire sticky header, with all of its contents, should appear. Currently the header container appears but the header is mostly empty.
  • menu position needs to shift right by 10px, right: 0px — both for the one in the site header & the one in the sticky header
  • use justify-content: flex-end so the search box moves left and stays anchored on larger screens
  • search suggestions menu: increase font-size of page titles to 16px

Done. https://people.wikimedia.org/~jdrewniak/dip/p4.html

@Jdrewniak looks great — feel free to move to signoff whenever you're ready. Going to open a different, completely optional, task for one small thing : )