qml: Enhancements for layouts consistency
This MR focuses on achieving concistency in layouts (grid and table view), in preparation for the responsive-design MR
Changes regarding to the title of layouts:
Added the ViewHeader QML component, to avoid code duplication, and maintain consistent padding across all layouts. This component provides a title for layouts and includes a "See All" button when necessary. As a result, the BrowseDeviceHeader component has been removed.
Example of a padding inconsistency
"See All" missalignment in the previous BrowseDeviceHeader
Introduced a title header to all Video and Music views (+discovery).
Example before & after
Increased top padding of the first layout's title by 4px, and the bottom padding of every layout's title by 2px
Example grid&list padding, before&after:
Reasoning: A comparison with other apps/websites
Title font size is OK.
Top padding seems to be too low
Bottom padding seems to be too low
For the table view at the Video page, the ListView.InlineHeader is now only used when we are at the Video page, and there are recent videos (basically titles can be scrollable when there are 2 vertically aligned tables)
before & after of seeing all recent videos page
Spacing between layouts:
Standardized spacing between vertically-aligned grid and list layouts, resolving inconsistencies on the Videos and Browse pages.
Example grid/list spacing difference:
Consistent 42px spacing in grid/list at Videos/Browse:
Comparison with other apps/websites:
Spacing between vertically-aligned layouts is now the same in Videos/Browse
Playlist:
Adjusted the playlistview topPadding to match the layout's padding for uniformity.
Before
