Skip to content

ApplicationPage: Condense and improve header layout

The current header layout is quite space-inefficient, and it also shows some information redundantly, like both the app's name and source in the toolbar as well as the page header. This can be improved upon.

This commit improves upon it in the following ways:

  • Show the source only in the toolbar, in the source switcher. Now the thing you use to switch between sources also shows you the current source. No more redundancy!
  • Show the app name only in the page header, not redundantly in the toolbar. No more redundancy!
  • Delete the metadata row that currently lives below the screenshows, and put its data on the right side of the row that currently has the app icon, name, author, and rating. This saves a ton of space and also locates all the metadata in the same place, improving scannability. When horizontal space is limited (e.g. in the mobile UI), the side-by-side row layout switches to a stacked column layout.
  • Move screenshots out of the gray background header, which reduces the visual weight.
  • Tint the header's background color with the app icon's dominant color, for a bit of visual flair!
Single-source app from distro Multi-source app from distro Multi-source app from Flathub Mobile layout but everything fits in one row Mobile layout, two rows
Single-source_from_Fedora Multi-source_from_Fedora Multi-source_from_Flathub Narrow_but_everything_fits Narrow_but_it_shows_the_two-row_layout

@teams/vdg

Edited by Nate Graham

Merge request reports

Loading