Cleanup structure

[skjnldsv]

Fix #4047

@nextcloud/designers

This is a much cleaner structure for our software

Done

• Removed div#content-wrapper
• Removed any absolute positionning of our content
  • Now the whole page is scrolled, not a div within an absolute div
  • Android header is now collapsing because the scrolling behaviour has been restored to its original state
• Merged header and div#header to follow html5 guidelines

Deprecated and guidelines

• Do not use #content-wrapper anymore
• If your app is injecting itself by replacing the #content element, make sure to keep the #content id
• If you use the app-content-list standard, make sure to hide the app-content-details div when the list is visible in mobile mode (full screen) and hide the app-content-list when the details is visible
• This is app-content-details and NOT app-content-detail

Overall structure

<header>
    <div class="header-left">
        <!-- apps menu -->
    </div>
    <div class="header-right">
        <!-- search - contactsmenu - settingsmenu - ... -->
    </div>
</header>
<div id="content" class="app-YOURAPPID">
    <div id="app-navigation" class="">
        <div class="app-navigation-new">
            <!-- app 'new' button -->
        </div>
        <ul id="usergrouplist">
            <!-- app navigation -->
        </ul>
        <div id="app-settings">
            <!-- app settings -->
        </div>
    </div>
    <div id="app-content">
        <div id="app-navigation-toggle" class="icon-menu"></div>
        <!-- app-content-wrapper is optional, only use if app-content-list  -->
        <div id="app-content-wrapper">
            <div class="app-content-list">
                <!-- app list -->
            </div>
            <div class="app-content-details"></div>
            <!-- app content -->
        </div>
    </div>
    <div id="app-sidebar"></div>
</div>

[stefan-niedermann]

May i ask why no nav-tag is used for #app-navigation or .header-left?

[skjnldsv]

@stefan-niedermann We use a nav now in the app list

server/core/templates/layout.user.php

Line 73 in 625bdf0

<nav role="navigation">

But not on the app navigation, which we should, you're completely right :)

[rullzer]

conflicts and failing tests

[juliushaertl]

While I like the new structure in general, scrolling the page instead of the app content causes a weird double scrollbar, when the sidebar is visible:

[skjnldsv]

@juliushaertl Ah damn, it make sense.
The sidebar should be fixed though, I'll change this so the scrollbar is on the real content then!

[codecov]

Codecov Report

Merging #9982 into master will decrease coverage by 2.44%.
The diff coverage is 0%.

@@             Coverage Diff              @@
##             master    #9982      +/-   ##
============================================
- Coverage     31.87%   29.42%   -2.45%     
+ Complexity    26208    26007     -201     
============================================
  Files          1673     1595      -78     
  Lines         96874    88869    -8005     
  Branches       1290        0    -1290     
============================================
- Hits          30874    26152    -4722     
+ Misses        66000    62717    -3283

Impacted Files	Coverage Δ	Complexity Δ
core/templates/layout.public.php	0% <0%> (ø)	0 <0> (ø)	⬇️
core/templates/layout.user.php	0% <0%> (ø)	0 <0> (ø)	⬇️
apps/provisioning_api/lib/Controller/AUserData.php	60.25% <0%> (-0.51%)	15% <0%> (ø)
lib/private/Updater/VersionCheck.php	85.71% <0%> (-0.34%)	8% <0%> (-1%)
config/config.sample.php	0% <0%> (ø)	0% <0%> (ø)	⬇️
apps/dav/lib/Server.php	0% <0%> (ø)	22% <0%> (ø)	⬇️
apps/dav/appinfo/app.php	0% <0%> (ø)	0% <0%> (ø)	⬇️
apps/dav/lib/CalDAV/CalendarRoot.php	0% <0%> (ø)	1% <0%> (-3%)	⬇️
apps/dav/composer/composer/autoload_classmap.php	0% <0%> (ø)	0% <0%> (ø)	⬇️
lib/private/Settings/Personal/PersonalInfo.php	0% <0%> (ø)	16% <0%> (-5%)	⬇️
... and 93 more

[MorrisJobke]

• the sidebar moves below the content on smaller screens:
  

[juliushaertl]

• The sidebar doesn't cause the main content to resize (file actions/edit date are hidden)

[skjnldsv]

@juliushaertl hum, strange, I don't have this. What browser and did you cleaned the cache?

[juliushaertl]

Ah ok, seems that was a caching issue. But #9982 (comment) still exists and the breadcrumbs are not sticky anymore in the files app.

Besides that I really like it. It's a lot cleaner than before 👍

[skjnldsv]

@juliushaertl yep, I have this to fix!
Incoming! 🚢

[skjnldsv]

• Control sticky not working

@juliushaertl sticky is behaving strangely, do you know more about it than I do? :)