Proposal: Streamlining of content width sizing

[ShUl0w]

In its current form, the new Moodle 4.0 UI uses an inconsistent approach to content sizing for center column content. This is especially notable on pages where the center column alternates between a .container for its course related contents (e.g. course navigation), and a .container-fluid for elements that contain tables etc. (e.g. gradebook).

This becomes even more of a problem when modals are involved, as they seem to always use a .container, which in turn loses precious screen real estate; the new question bank UI is a good example of this.

Given how the 4.0 UI is already trying to use the full screen width by including a drawer on the left and right side of the screen respectively, I propose to streamline the content width across all screens if possible and simultaneously increase the size of the center column. Adapting the drawers to reduce the middle column size when visible shouldn't be that much of a problem.

[lucaboesch]

Liebe @ShUl0w kontrollier doch mal nachdem heute MDL-74062 integriert wurde, an welchen Stellen dies noch auftritt.

[ShUl0w]

Hey @lucaboesch, in dem von Dir verlinkten Issue geht es darum, dass die Navi in Kursen eine durchgängige max-width besitzt - darauf wollte ich aber nicht hinaus; vielmehr wollte ich auf das Ergebnis der Schritte 1-5 hinaus.

Vgl. hierzu die von mir angehängten Screenshots (basierend auf dem aktuellen Master-Branch):

Die Tatsache, dass in der Kursansicht die Navigation eine Max-Width besitzt, die Einstellungen zu einer Quiz-Frage hingegen nicht sorgt für einen sehr unruhigen Seitenaufbau. Content in einem Modal wiederum orientiert sich an der Breite des Navigations-Containers.

Mein Proposal zielte dementsprechend darauf ab, a) diesen Seitenaufbau zu vereinheitlichen und b) die Center-Column allgemein breiter zu machen - für Mobilgeräte ist die Seite bereits responsiv, dafür leidet nun die Usability auf dem Desktop.

[dbnschools]

$course-content-maxwidth: 100% !default;
makes the pages all full-width. Drop it in the Raw SCSS box of Boost.

[abias]

In #45, I just submitted a PR which allows admins to overwrite the $course-content-maxwidth SCSS variable in the GUI. This can help to resolve this issue, but I assume that it is not sufficient at all.

[abias]

#18 closed this automatically.
I reopen this issue for further discussions

[ralf-krause]

Yes, I like the feature for setting the course width to 1200px for large displays.
But it would also be nice to reduce the borders on the right and the left side for small displays as we have with smartphones or tablets. I tested this in the raw scss section.

/* Seitenränder für kleine Displays reduzieren */
@media (max-width: 767.98px) { 
#page.drawers, #page.drawers div[role="main"] { padding: 0 3px 0 3px; } 
}
@media (min-width: 768px) { 
#page.drawers { padding: 0 10px 0 10px; } 
}

[wiebkemueller-hsh]

As discussed with @ShUl0w this can be closed!