Page MenuHomePhabricator

mwe-vue-pt-info-pane has too much padding
Closed, ResolvedPublicBUG REPORT

Description

Reported by @Hey_man_im_josh on Discord

Steps to replicate the issue (include links if applicable):

What happens?:

image.png (705×2 px, 130 KB)

What should have happened instead?:

  • Less padding, to match the old Special:NewPagesFeed

Software version (skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

  • Seems like a small thing, but one patroller stated that he can only fit 7 info panes on his screen now instead of 8.5. It's a little inefficiency but it's also an easy fix.

Event Timeline

I definitely think an easy win here that reduces padding while improving the visual design is to align the icon, title, and timestamp on at least approximately the same line.

I think this would look better something like this, with the icon, title, and timestamp in-line:

Old

image.png (378×2 px, 106 KB)

New

image.png (334×2 px, 114 KB)

Scardenasmolinar changed the task status from Open to In Progress.Aug 11 2023, 3:22 AM
Scardenasmolinar claimed this task.
Scardenasmolinar moved this task from Ready to In Progress on the Moderator-Tools-Team (Kanban) board.

Change 948190 had a related patch set uploaded (by Scardenasmolinar; author: Scardenasmolinar):

[mediawiki/extensions/PageTriage@master] Change padding from NPF list items

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

I have changed the padding so that the list items are more compact. Let me know if you need me to change anything.

Before

Screenshot 2023-08-11 at 14.21.34.png (115×1 px, 32 KB)

After

Screenshot 2023-08-11 at 17.37.52.png (93×1 px, 28 KB)

Change 948190 merged by jenkins-bot:

[mediawiki/extensions/PageTriage@master] Change padding from NPF list items

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

I think this would look better something like this, with the icon, title, and timestamp in-line:

Old

image.png (378×2 px, 106 KB)

New

image.png (334×2 px, 114 KB)

This ticket might need some more work. The "in-line" idea mentioned here has not been implemented yet, and I agree that this would both solve padding issues and improve the look of the Vue New Pages Feed.

image.png (290×1 px, 44 KB)

Given the minor change being requested I think we'll move this to our backlog for now rather than block deployment of the new UI. Patches welcome!

Soda subscribed.

Relatedly, I'm somewhat interested in seeing if we can use flexbox/display: grid to mock these features without resorting to the table based layout that is currently used. That (primarily display: grid) might give us a lot more control over positioning and layouting than we currently have. (I might take a look at this later)

@MPGuy2824 has done some work on the Special:NewPagesFeed mwe-vue-pt-info-pane and may have some thoughts about flex vs grid vs tables.

@MPGuy2824 has done some work on the Special:NewPagesFeed mwe-vue-pt-info-pane and may have some thoughts about flex vs grid vs tables.

I somehow missed this. Anyway, I used display: table and float in https://gerrit.wikimedia.org/r/c/mediawiki/extensions/PageTriage/+/859971, when i was updating the UI code. I think i remember trying flexbox, but not being able to get it to work. If Sohom is able to get the look we want in flexbox or display:grid, then all power to him.

Change 964038 had a related patch set uploaded (by Jsn.sherman; author: Jsn.sherman):

[mediawiki/extensions/PageTriage@master] Special:NewPagesFeed Change spacing of list items

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

jsn.sherman updated Other Assignee, removed: jsn.sherman.
jsn.sherman added a subscriber: Scardenasmolinar.

Test wiki created on Patch demo by JSherman (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/b3069fa516/w

Okay, I think I have this in a pretty nice place; I've checked with multiple skins, in ltr and rtl locales, with ores enabled and disabled.

image.png (653×1 px, 145 KB)

Change 964038 merged by jenkins-bot:

[mediawiki/extensions/PageTriage@master] Special:NewPagesFeed Change spacing of list items

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

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/b3069fa516/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/82622eceda/w/

Test wiki on Patch demo by JSherman (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/d434b100b5/w/