mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #10421 from nextcloud/content-wrapper-cleanup 

Really cleanup the content-wrapper
This commit is contained in:
Roeland Jago Douma 2018-07-30 14:01:55 +02:00 committed by GitHub
parent d29e86b395 2be323d195
commit b1af610069
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 34 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
core/css/apps.scss
View File

@ -77,7 +77,7 @@ kbd {
position: fixed; position: fixed;
top: $header-height; top: $header-height;
left: 0; left: 0;
z-index: 500; z-index: 1000;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
// Do not use vh because of mobile headers // Do not use vh because of mobile headers
@ -583,31 +583,25 @@ kbd {
/* CONTENT --------------------------------------------------------- */ /* CONTENT --------------------------------------------------------- */
#content-wrapper {
// everything not related to content but needs to be on the window
// goes here (popups, tooltips...)
position: relative;
min-height: 100%;
display: unset;
}
#content { #content {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
display: flex; display: flex;
margin-top: $header-height; // padding is included in height
padding-top: $header-height;
min-height: 100%; min-height: 100%;
} }
/* APP-CONTENT AND WRAPPER ------------------------------------------ */ /* APP-CONTENT AND WRAPPER ------------------------------------------ */
/* Part where the content will be loaded into */ /* Part where the content will be loaded into */
#app-content { #app-content {
z-index: 1000; z-index: 500;
background-color: var(--color-main-background); background-color: var(--color-main-background);
position: relative; position: relative;
min-height: 100%;
flex-basis: 100vw; flex-basis: 100vw;
min-height: 100%;
/* margin if navigation element is here */ /* margin if navigation element is here */
#app-navigation + & { #app-navigation + & {
margin-left: $navigation-width; margin-left: $navigation-width;
} }
/* no top border for first settings item */ /* no top border for first settings item */
@ -619,17 +613,10 @@ kbd {
#app-content-wrapper { #app-content-wrapper {
display: flex; display: flex;
position: relative; position: relative;
align-items: start; align-items: stretch;
.app-content-list,
.app-content-detail {
min-height: calc(100vh - #{$header-height});
max-height: calc(100vh - #{$header-height});
overflow-x: hidden;
overflow-y: auto;
}
/* CONTENT DETAILS AFTER LIST*/ /* CONTENT DETAILS AFTER LIST*/
.app-content-detail { .app-content-details {
/* grow full width */ /* grow full width */
flex-grow: 1; flex-grow: 1;
#app-navigation-toggle-back { #app-navigation-toggle-back {
@ -1049,10 +1036,17 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------ */ /* CONTENT LIST ------------------------------------------------------------ */
.app-content-list { .app-content-list {
width: 300px; width: 300px;
position: sticky;
top: $header-height;
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: transform 250ms ease-in-out; transition: transform 250ms ease-in-out;
min-height: calc(100vh - #{$header-height});
max-height: calc(100vh - #{$header-height});
overflow-y: auto;
overflow-x: hidden;
flex: 0 0 300px;
/* Default item */ /* Default item */
.app-content-list-item { .app-content-list-item {

37
core/css/mobile.scss
View File

@ -35,19 +35,18 @@
/* full width for message list on mobile */ /* full width for message list on mobile */
.app-content-list { .app-content-list {
width: 100%;
background: var(--color-main-background); background: var(--color-main-background);
position: relative; flex: 1 1 100%;
z-index: 100; // make full height scroll since app-content-details is hidden
} max-height: unset;
+ .app-content-details {
/* since list and content are only displayed full window size display: none;
* we don't ant inner scrolling }
*/ &.showdetails {
#app-content-wrapper { display: none;
.app-content-list, + .app-content-details {
.app-content-detail { display: initial;
max-height: unset; }
} }
} }
@ -59,7 +58,7 @@
#app-navigation-toggle-back { #app-navigation-toggle-back {
position: fixed; position: fixed;
display: inline-block !important; display: inline-block !important;
top: 45px; top: $header-height;
left: 0; left: 0;
width: 44px; width: 44px;
height: 44px; height: 44px;
@ -73,18 +72,11 @@
transform: translateX(-100%); transform: translateX(-100%);
} }
/* end of media query */
}
/* allow horizontal scrollbar in settings
otherwise user management is not usable on mobile */
#body-settings #app-content {
overflow-x: auto !important;
} }
#app-navigation-toggle { #app-navigation-toggle {
position: fixed; position: fixed;
display: inline-block !important; display: inline-block !important;
top: $header-height;
left: 0; left: 0;
width: 44px; width: 44px;
height: 44px; height: 44px;
@ -132,11 +124,6 @@
max-width: 80%; max-width: 80%;
} }
/* fix controls bar jumping when navigation is slid out */
.snapjs-left #app-navigation-toggle,
.snapjs-left #controls {
top: 0;
}
.snapjs-left table.multiselect thead { .snapjs-left table.multiselect thead {
top: 44px; top: 44px;
} }

6
core/templates/layout.base.php
View File

@ -18,10 +18,8 @@
</head> </head>
<body id="body-public"> <body id="body-public">
<?php include 'layout.noscript.warning.php'; ?> <?php include 'layout.noscript.warning.php'; ?>
<div id="content-wrapper"> <div id="content" class="app-public" role="main">
<div id="content" class="app-public" role="main"> <?php print_unescaped($_['content']); ?>
<?php print_unescaped($_['content']); ?>
</div>
</div> </div>
</body> </body>
</html> </html>

8
core/templates/layout.public.php
View File

@ -70,11 +70,9 @@
</div> </div>
<?php } ?> <?php } ?>
</header> </header>
<div id="content-wrapper"> <div id="content" class="app-<?php p($_['appid']) ?>" role="main">
<div id="content" class="app-<?php p($_['appid']) ?>" role="main"> <?php print_unescaped($_['content']); ?>
<?php print_unescaped($_['content']); ?> </div>
</div>
</div
<?php if($template->getFooterVisible()) { ?> <?php if($template->getFooterVisible()) { ?>
<footer> <footer>
<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p> <p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>

6
core/templates/layout.user.php
View File

@ -159,10 +159,8 @@
<input class="confirm" value="<?php p($l->t('Confirm')); ?>" type="submit"> <input class="confirm" value="<?php p($l->t('Confirm')); ?>" type="submit">
</form> </form>
<div id="content-wrapper"> <div id="content" class="app-<?php p($_['appid']) ?>" role="main">
<div id="content" class="app-<?php p($_['appid']) ?>" role="main"> <?php print_unescaped($_['content']); ?>
<?php print_unescaped($_['content']); ?>
</div>
</div> </div>
</body> </body>