Design pattern: Define page widths
Determine whether all pages should use limit-container-width
or define when it should and should not be used. Applies to page breadcrumb and content.
- Check if the existing width definitions are working fine and consistent for each page
-
Go through existing pages to figure if there are further exceptions/edge cases -
Re-define990px
page with for more readable text flow (orientate towards 120 characters?) -
https://gitlab.com/gitlab-org/design.gitlab.com/merge_requests/73: Add documentation to Design System -
https://gitlab.com/gitlab-org/gitlab-ce/issues/49032: Remove "Fluid" preferences option? -
https://gitlab.com/gitlab-org/gitlab-ce/issues/48782: Fix exceptions to rules we define via this ~"design artifact"
Overview of currently assigned page container widths attached.
Legend
| Icon | Meaning |
| --- | --- | --- |
|
Custom containers
Page | Path | Width review | Status |
---|---|---|---|
Projects | |||
Project/Cycle Analytics | /cycle_analytics |
990px
|
|
CI-CD/Jobs/View | /jobs/{id} |
|
|
Admin Area | |||
Overview/ConDev Index | /admin/conversational_development_index |
1280px
|
|
Instance Statistics | |||
ConvDev Index | /stats/conv-dev? |
1280px (with padding) |
990px
Page | Path | Width review | Status |
---|---|---|---|
Projects | |||
Project/Details (with repository or wiki enabled) | / |
||
Project/Details (with just issues enabled) | / |
1280px
|
|
Project/Files | /tree |
||
Repository/Commits/View | /commits/{sha} |
||
Issues/View | /issues/{id} |
||
Merge requests/View | /merge_requests/{id} |
||
Wiki (page created) | wikis/home |
||
Wiki/New | /wikis/*?view=create |
||
Wiki/Edit | /wikis/*/edit |
||
Settings/(General, Integrations, Repository, and CI/CD) | /[edit OR [settings/[integrations OR repository OR ci_cd]]] |
||
Groups | |||
Epics/View | /epics/{id} |
||
User-related | |||
All Settings but Billing | /profile/*[!billing] |
||
Admin Area | |||
Settings | /admin/application_settings |
1280px
Page | Path | Width review | Status |
---|---|---|---|
Projects | |||
Project/Activity | /activity |
||
Project/Security Dashboard | /security/dashboard |
||
Repository/Fork | /forks/new |
||
Repository/Blob | /blob/* |
990px
|
|
Repository/Blame | /blame/* |
||
Repository/New OR Edit file | /[new OR edit/*] |
990px
|
|
Repository/Find file | /find_file/* |
990px
|
|
Repository/Commits | /commits |
990px
|
|
Repository/Branches | /branches |
990px
|
|
Repository/Branches/New | /branches/new |
990px
|
|
Repository/Tags | /tags |
990px
|
|
Repository/Tag | /tags/* |
990px
|
|
Repository/Tags/New OR Edit OR View | /tags/[new OR {id} OR {id}/release/edit] |
990px
|
|
Repository/Contributors | /graphs |
||
Repository/Graph | /network |
|
|
Repository/Compare | /compare |
990px
|
|
Repository/Compare/* | /compare/* |
||
Repository/Charts | /graphs/*/charts |
||
Repository/File lock | /path_locks |
990px
|
|
Issues/New | /issues/new |
990px
|
|
Issues/Edit | /issues/?? |
990px
|
|
Issues/List | /issues |
|
|
Issues/Labels | /labels |
||
Issues/Labels/New OR Edit | /labels/[new OR {id}/edit] |
990px
|
|
Issues/Service Desk | /service_desk |
||
Issues/Milestones | /milestones |
||
Issues/Milestones/New OR Edit | /milestones/[new OR {id}/edit] |
||
Issues/Milestones/View | /milestones/{id} |
990px
|
|
Merge requests | /merge_requests |
|
|
Merge requests/New OR Edit | /merge_requests/new OR {id}/edit |
990px
|
|
CI-CD/Pipelines (List and view) | /pipelines |
||
CI-CD/Pipelines/Run pipeline | /pipelines/new |
990px
|
|
CI-CD/Pipelines/CI Lint | /ci/lint |
990px
|
|
CI-CD/Jobs | /jobs |
||
CI-CD/Jobs/View/Browse artifacts | /jobs/{id}/artifacts/browse |
990px
|
|
CI-CD/Schedules | /pipeline_schedules |
990px
|
|
CI-CD/Schedules/New | /pipeline_schedules/new |
990px
|
|
CI-CD/Charts | /pipelines/charts |
||
Operations/Environment | /environments |
||
Operations/Environment/New | /environments/new |
990px
|
|
Operations/Kubernetes (Empty state and list) | /clusters |
990px
|
|
Operations/Kubernetes/New | /clusters/new |
990px
|
|
Operations/Kubernetes/Create cluster on GKE | /clusters/providers/gcp/* |
990px
|
|
Operations/Kubernetes/Add an existing cluster | /clusters/providers/user/* |
990px
|
|
Registry | /container_registry |
990px
|
|
Wiki (empty) | /wikis/* |
990px
|
|
Wiki/History | /wikis/*/history |
990px
|
|
Wiki/Pages | /wikis/pages |
990px
|
|
Snippets | /snippets |
990px
|
|
Snippets/New | /snippets/new |
990px
|
|
Snippets/Edit | /snippets/edit |
990px
|
|
Members | /project_members |
990px
|
|
Members/Import | /project_members/import |
990px
|
|
Settings/Badges | /badges |
990px
|
|
Settings/Integrations/Edit webhook | /hooks/*/edit |
990px
|
|
Settings/Integrations/Edit integration | /services/{id}/edit |
||
Settings/Repository/Edit deploy key | /deploy_keys/{id}/edit |
990px
|
|
Settings/CI-CD/Runner details | /runners/* |
990px
|
|
Settings/CI-CD/Edit runner | /runners/{id}/edit |
990px
|
|
Settings/CI-CD/Edit trigger | /triggers/{id}/edit |
990px
|
|
Settings/Pages | /pages |
990px
|
|
Settings/Pages/New domain | /pages/domains/new |
990px
|
|
Settings/Pages/Edit domain | /pages/domains/{id}/edit |
990px
|
|
Settings/Pages/Domain details | /pages/domains/{id} |
990px
|
|
Settings/Audit Events | /audit_events |
||
Groups-specific | |||
Overview/Details | / |
||
Activity | /activity |
||
Contribution Analytics | /analytics |
||
Epics/List | /epics |
||
Settings/Projects | /projects |
990px
|
|
Settings/CI-CD | /ci_cd |
990px
|
|
Settings/Webhooks | /hooks |
990px
|
|
Settings/Pipeline quota | /pipeline_quota |
990px
|
|
Settings/Billing | /profile/billings |
||
Dashboards | |||
Search | /search/* |
||
All dashboard lists | /dashboard/[projects OR groups OR activity OR milestones OR snippets OR issues OR merge_requests OR todos]/* |
||
Projects/Import/(First auth step for all importers) | /import/*/new |
990px
|
|
Projects/Import/(Second list mapping step for all importers) | /import/*/status |
||
Projects/Importing… | /import |
990px
|
|
Snippets/New | /snippets/new |
990px
|
|
Snippets/Edit | /snippets/edit |
990px
|
|
User | |||
Profile page | /{username} |
||
Settings/Billings | /profile/billings |
||
Admin Area | |||
Overview | /admin |
||
Overview/Project | /admin/projects |
||
Overview/Users | /admin/users |
990px
|
|
Overview/Groups | /admin/groups |
||
Overview/Jobs | /admin/jobs |
||
Overview/Runners | /admin/runners |
990px
|
|
Overview/Cohorts | /admin/cohorts |
||
Monitoring/System Info | /admin/system_info |
||
Monitoring/Background Jobs | /admin/background_jobs |
||
Monitoring/Logs | /admin/logs |
||
Monitoring/Health Check | /admin/health_check |
990px
|
|
Monitoring/Requests Profiles | /admin/requests_profiles |
990px
|
|
Monitoring/Audit Log | /admin/audit_logs |
||
Messages (List/add OR Edit) | /admin/broadcast_messages[/{id}/edit] |
990px
|
|
System Hooks (List/add OR Edit) | /admin/hooks[/{id}/edit] |
990px
|
|
Applications (List OR New OR Edit) | /admin/applications[/new OR /{id}/edit] |
990px
|
|
Abuse Reports | /admin/abuse_reports |
||
License | /admin/license |
||
Push Rules | /admin/push_rule |
990px
|
|
Geo Nodes and all child pages | /admin/geo_nodes/* |
990px
|
|
Deploy Keys and all child pages | /admin/deploy_keys/* |
990px
|
|
Service Templates/List | /admin/application_settings/services |
||
Service Templates/Edit integration | /admin/application_settings/services/{id}/edit |
990px
|
|
Labels/List | /admin/labels |
||
Labels/New OR Edit | /admin/labels/[new OR {id}/edit] |
990px
|
|
Appearance | /admin/appearance |
990px
|
|
Instance Statistics | |||
Cohorts | /stats/cohorts? |
||
Help | /help/* |
990px
|
Full-width (always fluid)
Page | Path | Width review | Status |
---|---|---|---|
Issues/Boards | /boards |
||
Epics/Roadmap | /roadmap |
Edited by Andreas Kämmerle