Optimize @media breakpoints

[Info 3bits]

Actually there are many media breakpoints and separated in several CSS files like adaptable, extras, menus and slider.

Optimize the code and move it to only one file.

[Björn Bettzüche]

"...Optimize the Code..."

Hopefully this includes some new issues with Adaptable 1.3 + Moodle 3.2. For example:

1. Header menues at screen width below 1068 px. Dropdown menue don't work on hover or click
2. FrontPage, not logged in, small screen (< 768 px ). The width of marketblocks container is to small (see img below, should be 100%)

[Info 3bits]

We are still thinking what will be the breakpoints but probably the lowest will be not less 768px. Lower resolution are not used actually and has no sense to put time and effort in a layout that will not be used.

The default BS2 (used by moodle and Adaptable) breakpoints are: 768, 980 and 1200px so probably those will be used.

[Björn Bettzüche]

Generally I do confirm. What i meant with point 2) was a strange layout for mobile device resolution.

Additionaly I figured out that the problem with marketblocks-width occurs, when you delete the content of infoblock: In html-mode (atto-editor), delete all content, remain in html-mode and safe changes. Then the marketblock area on not-logged-in FrontPage becomes a strange width (see screenshot). The div#theinfo is missing.

Do open the setting-page for marketing block again. Don't change anything (atto automatically fills empty textarea with blanc paragraphs) and safe again. Now all is fine at the frontpage (notloggedin) and we have an div#theinfo

[Björn Bettzüche]

Addition to my first comment: header menus at 768px < resolution <1068px; using M3.2, Adaptable 1.3

Found non-BS2 breakpoint width min-width:1068... Missing 'normal' breakpoints, like for medium devices (>992) or tablets (>768)... This causes the header menu headings to be displayed, but not the dropdown menu on :hover or :active.

Following some CSS found for >1068px, that i didn't expected to find:

@media only screen and (min-width:1068px) { .dropdown:hover > .dropdown-menu { display: block; } .dropdown-menu li:hover .sub-menu, .newmenus:hover .dropdown-menu { visibility: visible; } .newmenus .dropdown-menu { left: 0%; position: absolute; visibility: hidden; margin-top: 0; } } @media all and (max-width:768px) { .newmenu1, .newmenu2, .newmenu3, .newmenu4, .newmenu5, .newmenu6, .newmenu7, .newmenu8, .newmenu9, .newmenu10, .newmenu11, .newmenu12, .newmenu13, .newmenu14, .newmenu15, .newmenu16, #page-footer, .breadcrumb, .customalert, .socialbox, #page-header, #coursetitle, #titlecontainer { display: none; } }

[Info 3bits]

The main problem is that media have very similar values for the same breakpoint: 979, 980, 990 or 767, 768 .. and even 1068 which is totally out of place. This is the main reason of the screen behaviour wne you use these resolutions.

We want to unify these breakpoints in the above indicated: 768, 990 and 1024. This task will fix many issues with mobile devices but will take some time.

[Info 3bits]

Fixed in c3f04f5