Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Really cleanup the content-wrapper #10421

Merged
merged 5 commits into from
Jul 30, 2018
Merged

Really cleanup the content-wrapper #10421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
88db07d
Really cleanup the content-wrapper
skjnldsv Jul 27, 2018
09f80df
Height fix for content
skjnldsv Jul 27, 2018
e3d1353
App-content list fixes for new layout
skjnldsv Jul 27, 2018
3de1eb4
Mobile fixes and list fixes
skjnldsv Jul 27, 2018
2be323d
Mobile scroll fixes
skjnldsv Jul 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 15 additions & 21 deletions core/css/apps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ kbd {
position: fixed;
top: $header-height;
left: 0;
z-index: 500;
z-index: 1000;
overflow-y: auto;
overflow-x: hidden;
// Do not use vh because of mobile headers
Expand Down Expand Up @@ -583,31 +583,25 @@ kbd {


/* 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 {
box-sizing: border-box;
position: relative;
display: flex;
margin-top: $header-height;
// padding is included in height
padding-top: $header-height;
min-height: 100%;
}

/* APP-CONTENT AND WRAPPER ------------------------------------------ */
/* Part where the content will be loaded into */
#app-content {
z-index: 1000;
z-index: 500;
background-color: var(--color-main-background);
position: relative;
min-height: 100%;
flex-basis: 100vw;
min-height: 100%;
/* margin if navigation element is here */
#app-navigation + & {
#app-navigation + & {
margin-left: $navigation-width;
}
/* no top border for first settings item */
Expand All @@ -619,17 +613,10 @@ kbd {
#app-content-wrapper {
display: flex;
position: relative;
align-items: start;
.app-content-list,
.app-content-detail {
min-height: calc(100vh - #{$header-height});
max-height: calc(100vh - #{$header-height});
overflow-x: hidden;
overflow-y: auto;
}
align-items: stretch;

/* CONTENT DETAILS AFTER LIST*/
.app-content-detail {
.app-content-details {
/* grow full width */
flex-grow: 1;
#app-navigation-toggle-back {
Expand Down Expand Up @@ -1049,10 +1036,17 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------ */
.app-content-list {
width: 300px;
position: sticky;
top: $header-height;
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
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 */
.app-content-list-item {
Expand Down
37 changes: 12 additions & 25 deletions core/css/mobile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,18 @@

/* full width for message list on mobile */
.app-content-list {
width: 100%;
background: var(--color-main-background);
position: relative;
z-index: 100;
}

/* since list and content are only displayed full window size
* we don't ant inner scrolling
*/
#app-content-wrapper {
.app-content-list,
.app-content-detail {
max-height: unset;
flex: 1 1 100%;
// make full height scroll since app-content-details is hidden
max-height: unset;
+ .app-content-details {
display: none;
}
&.showdetails {
display: none;
+ .app-content-details {
display: initial;
}
}
}

Expand All @@ -59,7 +58,7 @@
#app-navigation-toggle-back {
position: fixed;
display: inline-block !important;
top: 45px;
top: $header-height;
left: 0;
width: 44px;
height: 44px;
Expand All @@ -73,18 +72,11 @@
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 {
position: fixed;
display: inline-block !important;
top: $header-height;
left: 0;
width: 44px;
height: 44px;
Expand Down Expand Up @@ -132,11 +124,6 @@
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 {
top: 44px;
}
Expand Down
6 changes: 2 additions & 4 deletions core/templates/layout.base.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,8 @@
</head>
<body id="body-public">
<?php include 'layout.noscript.warning.php'; ?>
<div id="content-wrapper">
<div id="content" class="app-public" role="main">
<?php print_unescaped($_['content']); ?>
</div>
<div id="content" class="app-public" role="main">
<?php print_unescaped($_['content']); ?>
</div>
</body>
</html>
8 changes: 3 additions & 5 deletions core/templates/layout.public.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,9 @@
</div>
<?php } ?>
</header>
<div id="content-wrapper">
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
<?php print_unescaped($_['content']); ?>
</div>
</div
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
<?php print_unescaped($_['content']); ?>
</div>
<?php if($template->getFooterVisible()) { ?>
<footer>
<p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p>
Expand Down
6 changes: 2 additions & 4 deletions core/templates/layout.user.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,10 +159,8 @@
<input class="confirm" value="<?php p($l->t('Confirm')); ?>" type="submit">
</form>

<div id="content-wrapper">
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
<?php print_unescaped($_['content']); ?>
</div>
<div id="content" class="app-<?php p($_['appid']) ?>" role="main">
<?php print_unescaped($_['content']); ?>
</div>

</body>
Expand Down