List recent pages and members on landing page

[mejo-]

📝 Summary

• Show 10 most recent pages on landing page.
• Show 3 last active members on landing page if it's not a public share.
• Resolves: Improved landing page #311

🖼️ Screenshots

Overview

Screencast (slightly outdated)
recording1.webm

🚧 TODO

• Animate scroll to left/right in recent pages slider
• Update scroll buttons on scrolling (without using the buttons)
• Don't display scroll to right button initially when not necessary
• Show status in members avatars
• Cypress tests

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

Passing run #997 ↗︎

0

79

0

0

0

Details:

List recent pages and members on landing page
Project: Collectives	Commit: 331a903c24
Status: Passed	Duration: 05:21 💡
Started: Aug 2, 2023 3:14 PM	Ended: Aug 2, 2023 3:20 PM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[jancborchardt]

Very nice! Would only say 2 things:

Show 3 last active members on landing page if it's not a public share.

Why not all until ellipsis is needed? It is nice to see faces. :)

And also a bit more vertical whitespace between the sections would be cool.

[max-nextcloud]

Had a brief look at the code. So far everything seems fine. Just have one question.

[juliusknorr]

Looks really great already 😍

Just a minor UI nitpick:

• The contrast of icons for pages without emojis seems a bit too low
• I think the relative timestamp might need more space especially for languages that are a bit more verbose or if the name is longer

[mejo-]

I think the relative timestamp might need more space especially for languages that are a bit more verbose or if the name is longer

Unfortunately I don't have a good idea here. I'd rather avoid to make the tiles even wider, which would result in less tiles being displayed on narrow screens. And I configured it to be ellipsised on purpose to prevent randomly growing tile width. One option would be to add a line break, like "admin\nseconds ago". What do designers think @jancborchardt @nimishavijay?

[max-nextcloud]

Ideas that come to my mind:

• as you said... use two rows: one for the user bubble one for the timestamp. Maybe even move the page title into the tile above?
• Use the avatar only instead of the user bubble. Maybe with a tooltip with the user display name.

[jancborchardt]

@max-nextcloud yep, avatar only seems fine. :)

[nimishavijay]

@mejo- @max-nextcloud I would actually vote for the line break, for the following reasons:

• since the avatar is so small it will most likely not be understood easily
• we generally don't use the avatar in such a small size in other places
• even if there is hover feedback, the touch target is only around 16-20px so possibly not accessible either. Especially on mobile I can imagine trying to click on the avatar and accidentally opening the page.

We could instead show the full user bubble on one line and the timestamp on the next line. That way the entire item could be clickable without any issues :)

[mejo-]

vs.

Which one do you prefer @nimishavijay @jancborchardt @max-nextcloud 😊

I prefer the avatar only version. With the linebreak it doesn't work well in my eyes.

[mejo-]

I think I addressed all comments and suggestions for improvements now. See the commit history for details. The screenshot in the PR description is updated, the screencast is not.

[jancborchardt]

The headings (main page heading and also "Recent pages", "Collective members" and "Landing page") being grey instead of color-main-text looks a bit off, otherwise all good. :)

[szaimen]

🎉🎉🎉