Content
View differences
Updated by Parimal Satyal about 2 years ago
### Context
In very wide or high resolution screens, the browser width can be substantially larger than the standard 1280px width we normally design around for desktop.
Some pages benefit from having a max-width to the main content area. Blocks of texts can become illegible (or at least very difficult to read) without columns to better guide the eye.
GitHub have a center-aligned main content area in some pages, with a max-width of 1216.
**A repository home, for example:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74810/content">
**Or a pull request:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74811/content">
Not all pages have this max-width limit
**Actions are full-width:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74812/content">
**As are notifications:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74813/content">
### Goal
The goal of this feature is to:
* Decide if we want to adopt GitHub's this limited-width (centered max-width) approach to some pages (see [Context](https://community.openproject.org/#Context) below) pages.
* If so, decide:
* which features or pages will have a max-width (Meetings for example)
* which ones will not
* how to go about it (max-width, breakpoints...)
* when to prioritise it
### **Acceptance criteria**
For the identified pages (to be done),
* Define a horizontal width limit for the main content area
* _\[open\] A singular max-width (1216px Max-width: 1216px like GitHub?) or multiple breakpoints based on available space?_ GitHub?_
* The This includes the actual content and the right pane is contained in this centered content area
* _\[open\] Make this an option for the main content, since it doesn't apply to all pages_
* The sidebar remains on the far left edge
* The top navigation bar remains 100% width
### **Visuals**
**Meetings module in a very wide screen with max-width in place:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74814/content">
### Context
In very wide or high resolution screens, the browser width can be substantially larger than the standard 1280px width we normally design around for desktop.
Some pages benefit from having a max-width to the main content area. Blocks of texts can become illegible (or at least very difficult to read) without columns to better guide the eye.
GitHub have a center-aligned main content area in some pages, with a max-width of 1216 px.
**A repository home, for example:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74810/content">
**Or a pull request:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74811/content">
Not all pages have this max-width limit
**Actions are full-width:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74812/content">
**As are notifications:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74813/content">
In very wide or high resolution screens, the browser width can be substantially larger than the standard 1280px width we normally design around for desktop.
Some pages benefit from having a max-width to the main content area. Blocks of texts can become illegible (or at least very difficult to read) without columns to better guide the eye.
GitHub have a center-aligned main content area in some pages, with a max-width of 1216.
**A repository home, for example:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74810/content">
**Or a pull request:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74811/content">
Not all pages have this max-width limit
**Actions are full-width:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74812/content">
**As are notifications:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74813/content">
###
The goal of this feature is to:
* Decide if we want to adopt GitHub's
* If so, decide:
* which features or pages will have a max-width (Meetings for example)
* which ones will not
* how to go about it (max-width, breakpoints...)
* when to prioritise it
### **Acceptance criteria**
For the identified pages (to be done),
* Define a horizontal width limit for the main content area
* _\[open\] A singular max-width (1216px
* The
* _\[open\] Make this an option for the main content, since it doesn't apply to all pages_
* The sidebar remains on the far left edge
* The top navigation bar remains 100% width
### **Visuals**
**Meetings module in a very wide screen with max-width in place:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74814/content">
### Context
In very wide or high resolution screens, the browser width can be substantially larger than the standard 1280px width we normally design around for desktop.
Some pages benefit from having a max-width to the main content area. Blocks of texts can become illegible (or at least very difficult to read) without columns to better guide the eye.
GitHub have a center-aligned main content area in some pages, with a max-width of 1216 px.
**A repository home, for example:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74810/content">
**Or a pull request:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74811/content">
Not all pages have this max-width limit
**Actions are full-width:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74812/content">
**As are notifications:**
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/74813/content">