Project overview page updates
Problem
Over the years we have been adding more and more information to the project overview page and there could be an opportunity to revisit this page so that it displays the metadata and main page content in the best way possible.
My concern with adding another link to the stats link area is that we are approaching a visual space limit here.
Also the project overview currently has 4 different content that are configurable in Preference > User Settings
:
- Files and Readme (default)
- Activity
- Readme
- Wiki
Files and Readme | Activity | Readme | Wiki |
---|---|---|---|
Proposal
Reorganize the project overview to introduce a sidebar.
-
Create sidebar to display project overview meta... (#431537 - closed)
- Project description
- Topics
- Badges
- Links for files
- Readme
- License
- Changelog
- Contribution guidelines
- Section for project stats
- Issues
- Merge requests
- Storage
- Environments
- Section for release
- Display current release title
- Clicking links to release page
- Date of release
- Link to all releases
- Total number of release - 1
- Display current release title
- Section for languages breakdown
- Removing the bar to represent the different languages
- Display top 3 languages
- Link to repository analytics
- Related: Fix display of languages in repository analytics should not be bar chart #431540
- Section for extra features
- Display actions to add functionality to project
-
Display repository stats in top area of project... (#431538 - closed)
- Display commits, branches, and tags
- Move "History" as a button to the commits area as a link
-
Project name area updates for Project Overview (#431539 - closed)
- Increase size of H1
- Move Project ID into overflow menu
- To be considered: Change the icons into badges for clarity
Current | Proposal |
---|---|
Leave feedback |
Create sidebar to present project links and metadata
Looking at the default layout "Files and Readme", one area that did not align with how Files are displayed in Repository was this block of buttons:
It is a mix of links disguised as buttons. If the lines are solid then those files exists. The intent of the sidebar is to highlight those files important to a project and make it accessible regardless of whatever project overview content the user selects.
Relationship of Readme and Files
From Option to show README.md on top instead of bott... (#24746)
Users new to GitLab are not used to scroll down on the main project page to check the README.md, and there is usually important information there that goes unnoticed for them
It was explored to display both the README next to the Code in a tabbed layout as the default view of the project overview. However this change may be too drastic for developers who are familiar with the project so would be more interested in the code rather than the README #429186 (comment 1633221276).
In GitLab we allow users to configure which content to appear in the project overview. We can use the "README" view to focus on highlighting the README.
Files and Readme | README view |
---|---|
Leave feedback | Leave feedback |
Why didn't we use a tabbed layout here since it was explored?
The tab layout was explored by having the code near the README would allow users to access the code easily. This approach would allow for toggling between the views and does not introduce the need to truncate content with respect to available vertical screen heights #429186 (comment 1637459514).
From #24746 (comment 1562768879)
I've just switched mine to "Readme" and now it's a nightmare to easily find the actual files.
For all projects, there should be a branch selector in the project overview. We currently don't display the selector in the README but we display actions to clone the project. However the selector determines the content of the README file. It is assumed that GitLab is displaying the default branch. For clarity we should display it especially if we are displaying the clone buttons.
Since the selector drives the content, then it should be displayed above the README. In the scenario of using tabs, this would push the README content down a bit more than if we were just to display the README file directly.
Adding the "Files" link should provide enough of a visual cue to help users navigate to the code.
What about Activity and Wiki views?
Both of these content should fit into the new layout with the project overview metadata/links.
At the moment, it looks like there is a bug with the wiki view in that the empty state is always displayed even when the project has a wiki.
Reference
-
✍ Leave feedback - Figma