Change Details

Showing the user a list of pages to select is a pattern that is useful in many different contexts. While it makes sense for the pattern to be adjusted according to the context, it seems that current implementations have discrepancies on common aspects we may want to align. I compared the search box of #wikimedia-portals with the link selector of #visualeditor, and these are the differences I found: |Aspect|Portals | Visual Editor | MobileFrontend |-----|---------|----------------|--------------| |**Screenshot**|{F5067959}|{F5067966}|{F5072985} |**Page title color** | Dark grey | Blue | Dark grey |**Matching part of the title**| Underlined | Bolded | Underlined |**Description text color** | Dark grey | Light grey | Dark grey |**Title and description text size** | Title bigger than description | Same size for title and description | Title bigger than description |**Description wrapping strategy**|Long descriptions wrap to a new line|Long descriptions are cropped| Long descriptions wrap to a new line |**Image transparency** | Images are always opaque | Images are translucent (unless item is hovered) | Images are always opaque |**Image size (compared to text)** | More prominent | Less prominent | More prominent |**Background color on hover** | Light grey | Light blue | No change |**Separation between items** | Thin line in light grey | Thicker white space | Thin line in light grey (edit: added table for mobile front-end - @Jdrewniak )

Showing the user a list of pages to select is a pattern that is useful in many different contexts. While it makes sense for the pattern to be adjusted according to the context, it seems that current implementations have discrepancies on common aspects we may want to align. I compared the search box of #wikimedia-portals with the link selector of #visualeditor, and these are the differences I found: |Aspect|Portals | Visual Editor | MobileFrontend | Related Pages (mobile - Beta) |-----|---------|----------------|--------------|--------------| |**Screenshot**|{F5067959}|{F5067966}|{F5072985}|{F5269512} |**Page title color** | Dark grey | Blue | Dark grey | Black |**Matching part of the title**| Underlined | Bolded | Underlined | N.A. |**Description text color** | Dark grey | Light grey | Dark grey | Dark grey |**Title and description text size** | Title bigger than description | Same size for title and description | Title bigger than description | Title bigger than description |**Description wrapping strategy**|Long descriptions wrap to a new line|Long descriptions ends in '...' | Long descriptions wrap to a new line | Long description cropped and ends in '...' |**Image transparency** | Images are always opaque | Images are translucent (unless item is hovered) | Images are always opaque | Images are opaque |**Image size (compared to text)** | More prominent | Less prominent | More prominent | Even more prominent |**Background color on hover** | Light grey | Light blue | No change | No change |**Separation between items** | Thin line in light grey | Thicker white space | Thin line in light grey | Thin line in light-grey

Showing the user a list of pages to select is a pattern that is useful in many different contexts. While it makes sense for the pattern to be adjusted according to the context, it seems that current implementations have discrepancies on common aspects we may want to align. I compared the search box of #wikimedia-portals with the link selector of #visualeditor, and these are the differences I found: |Aspect|Portals | Visual Editor | MobileFrontend |-----|---------|----------------|--------------| |**Screenshot**|{F5067959}|{F5067966}|{F5072985} | Related Pages (mobile - Beta) |**Page title color** | Dark grey | Blue | Dark grey|-----|---------|----------------|--------------|--------------| |**Matching part of the title**| Underlined | Bolded | Underlined|**Screenshot**|{F5067959}|{F5067966}|{F5072985}|{F5269512} |**Description text|**Page title color** | Dark grey | Light greyBlue | Dark grey | Black |**Title and description text size** | Title bigger than description | Same size for title and description | Title bigger than descriptionMatching part of the title**| Underlined | Bolded | Underlined | N.A. |**Description wrapping strategy**|Long descriptions wrap to a new line|Long descriptions are cropped| Long descriptions wrap to a new linetext color** | Dark grey | Light grey | Dark grey | Dark grey |**Image transparency** | Images are always opaque | Images are translucent (unless item is hovered) | Images are always opaqueTitle and description text size** | Title bigger than description | Same size for title and description | Title bigger than description | Title bigger than description |**Description wrapping strategy**|Long descriptions wrap to a new line|Long descriptions ends in '...' | Long descriptions wrap to a new line | Long description cropped and ends in '...' |**Image transparency** | Images are always opaque | Images are translucent (unless item is hovered) | Images are always opaque | Images are opaque |**Image size (compared to text)** | More prominent | Less prominent | More prominent | Even more prominent |**Background color on hover** | Light grey | Light blue | No change | No change |**Separation between items** | Thin line in light grey | Thicker white space | Thin line in light grey | Thin line in light-grey (edit: added table for mobile front-end - @Jdrewniak )