Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Discover Discover
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 4
    • Issues 4
    • List
    • Boards
    • Service Desk
    • Milestones
  • Bugzilla
    • Bugzilla
  • Merge requests 18
    • Merge requests 18
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Releases
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • PlasmaPlasma
  • DiscoverDiscover
  • Merge requests
  • !465

ApplicationPage: Condense and improve header layout

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Nate Graham requested to merge ngraham/discover:redo-app-page-layout-again into master Feb 06, 2023
  • Overview 10
  • Commits 1
  • Pipelines 7
  • Changes 4

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 Feb 22, 2023 by Nate Graham
Assignee
Assign to
Reviewers
Request review from
Time tracking
Source branch: redo-app-page-layout-again