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><divclass="header-left"><!-- apps menu --></div><divclass="header-right"><!-- search - contactsmenu - settingsmenu - ... --></div></header><divid="content" class="app-YOURAPPID"><divid="app-navigation" class=""><divclass="app-navigation-new"><!-- app 'new' button --></div><ulid="usergrouplist"><!-- app navigation --></ul><divid="app-settings"><!-- app settings --></div></div><divid="app-content"><divid="app-navigation-toggle" class="icon-menu"></div><!-- app-content-wrapper is optional, only use if app-content-list --><divid="app-content-wrapper"><divclass="app-content-list"><!-- app list --></div><divclass="app-content-details"></div><!-- app content --></div></div><divid="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

[juliusknorr]

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:
  

[juliusknorr]

• 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?

[juliusknorr]

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? :)