Sidebar fix
Fix sidebar and scrollbar on content Sidebar fixes, and sidebar-width + header-height variables Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
Morris Jobke
parent
842583038b
commit
d6b718584e
11 changed files with 111 additions and 105 deletions
|
|
@ -117,6 +117,10 @@
|
|||
* Renders this details view
|
||||
*/
|
||||
render: function() {
|
||||
// remove old instances
|
||||
$('#app-sidebar').remove();
|
||||
this.$el.insertAfter($('#app-content'));
|
||||
|
||||
var templateVars = {
|
||||
closeLabel: t('files', 'Close')
|
||||
};
|
||||
|
|
|
|||
|
|
@ -274,7 +274,6 @@
|
|||
|
||||
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
|
||||
this._detailsView = new OCA.Files.DetailsView();
|
||||
this._detailsView.$el.insertBefore(this.$el);
|
||||
this._detailsView.$el.addClass('disappear');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
/* BASE STYLING ---------------------------------------------------------- */
|
||||
/* BASE STYLING ------------------------------------------------------------ */
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
|
|
@ -64,24 +64,18 @@ kbd {
|
|||
}
|
||||
|
||||
|
||||
/* APP STYLING -------------------------------------------------------------- */
|
||||
/* APP STYLING ------------------------------------------------------------ */
|
||||
|
||||
#app {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#content[class*='app-'] * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* APP-NAVIGATION ------------------------------------------------------------*/
|
||||
|
||||
/* APP-NAVIGATION ------------------------------------------------------------ */
|
||||
/* Navigation: folder like structure */
|
||||
|
||||
#app-navigation {
|
||||
width: 250px;
|
||||
/* header height */
|
||||
height: calc(100vh - 50px);
|
||||
height: calc(100vh - #{$header-height});
|
||||
position: fixed;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--color-main-background);
|
||||
|
|
@ -581,54 +575,100 @@ kbd {
|
|||
}
|
||||
}
|
||||
|
||||
/* APP-CONTENT ---------------------------------------------------------------*/
|
||||
|
||||
/* CONTENT --------------------------------------------------------- */
|
||||
#content {
|
||||
/* header height */
|
||||
padding-top: $header-height;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
transition: margin-right 300ms ease-in-out;
|
||||
/* trick: scroll #app-content and not the body
|
||||
* to avoid double scrollbar with sidebar
|
||||
*/
|
||||
max-height: 100vh;
|
||||
&.with-app-sidebar {
|
||||
// to force the scrollbar to be visible
|
||||
// and not under the sidebar
|
||||
margin-right: 27vw;
|
||||
max-width: calc(100vw - #{$sidebar-width});
|
||||
}
|
||||
}
|
||||
|
||||
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
|
||||
/* Part where the content will be loaded into */
|
||||
#app-content {
|
||||
margin-left: 250px;
|
||||
z-index: 1000;
|
||||
background-color: var(--color-main-background);
|
||||
position: relative;
|
||||
min-height: calc(100vh - 50px);
|
||||
min-height: calc(100vh - #{$header-height});
|
||||
/* no top border for first settings item */
|
||||
> .section:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
&.with-app-sidebar {
|
||||
margin-right: 27%;
|
||||
|
||||
/* if app-content-list is present */
|
||||
#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;
|
||||
}
|
||||
|
||||
/* CONTENT DETAILS AFTER LIST*/
|
||||
.app-content-detail {
|
||||
/* grow full width */
|
||||
flex-grow: 1;
|
||||
#app-navigation-toggle-back {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* APP-SIDEBAR ----------------------------------------------------------------*/
|
||||
|
||||
/* APP-SIDEBAR ------------------------------------------------------------ */
|
||||
/*
|
||||
Sidebar: a sidebar to be used within #app-content
|
||||
have it as first element within app-content in order to shrink other
|
||||
sibling containers properly. Compare Files app for example.
|
||||
Sidebar: a sidebar to be used within #content
|
||||
#app-content will be shrinked properly
|
||||
*/
|
||||
#app-sidebar {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
top: $header-height;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
width: 27%;
|
||||
min-width: 300px;
|
||||
width: 27vw;
|
||||
min-width: $sidebar-width;
|
||||
display: block;
|
||||
background: var(--color-main-background);
|
||||
border-left: 1px solid var(--color-border);
|
||||
-webkit-transition: margin-right 300ms;
|
||||
transition: margin-right 300ms;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
visibility: visible;
|
||||
z-index: 500;
|
||||
animation: slideAndShow 300ms ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
&.disappear {
|
||||
visibility: hidden;
|
||||
animation: slideAndHide 300ms ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
@keyframes slideAndHide {
|
||||
0% {right: 0;}
|
||||
99% {right: -100%;}
|
||||
100% {right: -100%; display: none;}
|
||||
}
|
||||
@keyframes slideAndShow {
|
||||
0% {right: -100%;}
|
||||
100% {right: 0;}
|
||||
}
|
||||
|
||||
/* APP-SETTINGS ---------------------------------------------------------------*/
|
||||
|
||||
/* APP-SETTINGS ------------------------------------------------------------ */
|
||||
/* settings area */
|
||||
#app-settings {
|
||||
// To the bottom w/ flex
|
||||
|
|
@ -714,7 +754,7 @@ kbd {
|
|||
}
|
||||
}
|
||||
|
||||
/* GENERAL SECTION ---------------------------------------------------------- */
|
||||
/* GENERAL SECTION ------------------------------------------------------------ */
|
||||
.section {
|
||||
display: block;
|
||||
padding: 30px;
|
||||
|
|
@ -751,7 +791,7 @@ kbd {
|
|||
}
|
||||
}
|
||||
|
||||
/* TABS --------------------------------------------------------------------- */
|
||||
/* TABS ------------------------------------------------------------ */
|
||||
.tabHeaders {
|
||||
display: inline-block;
|
||||
margin: 15px;
|
||||
|
|
@ -784,7 +824,7 @@ kbd {
|
|||
}
|
||||
}
|
||||
|
||||
/* POPOVER MENU ------------------------------------------------------------- */
|
||||
/* POPOVER MENU ------------------------------------------------------------ */
|
||||
$popoveritem-height: 38px;
|
||||
$popovericon-size: 16px;
|
||||
|
||||
|
|
@ -1004,29 +1044,8 @@ $popovericon-size: 16px;
|
|||
|
||||
}
|
||||
}
|
||||
|
||||
/* CONTENT WRAPPER --------------------------------------------------------- */
|
||||
#content {
|
||||
/* header height */
|
||||
padding-top: 50px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
/* if app-content-list is present */
|
||||
#app-content-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: start;
|
||||
.app-content-list,
|
||||
.app-content-detail {
|
||||
min-height: calc(100vh - 50px);
|
||||
max-height: calc(100vh - 50px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* CONTENT LIST ------------------------------------------------------------- */
|
||||
/* CONTENT LIST ------------------------------------------------------------ */
|
||||
.app-content-list {
|
||||
width: 300px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
|
|
@ -1179,13 +1198,3 @@ $popovericon-size: 16px;
|
|||
}
|
||||
}
|
||||
|
||||
/* CONTENT ------------------------------------------------------------------ */
|
||||
.app-content-detail {
|
||||
/* grow full width */
|
||||
flex-grow: 1;
|
||||
|
||||
#app-navigation-toggle-back {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2000;
|
||||
height: 50px;
|
||||
height: $header-height;
|
||||
background-color: var(--color-primary);
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
max-width: 350px;
|
||||
max-height: 280px;
|
||||
right: 5px;
|
||||
top: 50px;
|
||||
top: $header-height;
|
||||
margin: 0;
|
||||
|
||||
&:not(.popovermenu) {
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 50px;
|
||||
width: $header-height;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
|
|
@ -224,9 +224,9 @@
|
|||
/* NAVIGATION --------------------------------------------------------------- */
|
||||
nav[role='navigation'] {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-left: -50px;
|
||||
width: $header-height;
|
||||
height: $header-height;
|
||||
margin-left: -$header-height;
|
||||
}
|
||||
|
||||
.header-left #navigation {
|
||||
|
|
@ -439,28 +439,21 @@ nav[role='navigation'] {
|
|||
|
||||
/* Apps menu */
|
||||
#appmenu {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
min-width: 50px;
|
||||
height: 100%;
|
||||
clear: both;
|
||||
display: inline-flex;
|
||||
min-width: $header-height;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: top !important;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 15px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
vertical-align: top !important;
|
||||
height: $header-height;
|
||||
width: $header-height;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
|
@ -582,7 +575,7 @@ nav[role='navigation'] {
|
|||
|
||||
&:focus,
|
||||
&:active {
|
||||
top: 50px;
|
||||
top: $header-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@
|
|||
#app-navigation-toggle {
|
||||
position: fixed;
|
||||
display: inline-block !important;
|
||||
top: 50px;
|
||||
top: $header-height;
|
||||
left: 0;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
|
|
|||
|
|
@ -819,7 +819,7 @@ span.ui-icon {
|
|||
}
|
||||
|
||||
.content {
|
||||
max-height: calc(100% - 50px);
|
||||
max-height: calc(100% - $header-height);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -75,3 +75,8 @@ $color-border-dark: nc-darken($color-main-background, 14%) !default;
|
|||
$border-radius: 3px !default;
|
||||
|
||||
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
||||
|
||||
|
||||
// various structure data
|
||||
$header-height: 50px;
|
||||
$sidebar-width: 300px;
|
||||
|
|
@ -27,9 +27,8 @@
|
|||
*/
|
||||
exports.Apps.showAppSidebar = function($el) {
|
||||
var $appSidebar = $el || $('#app-sidebar');
|
||||
$appSidebar.removeClass('disappear')
|
||||
.show('slide', { direction: 'right' }, 200);
|
||||
$('#app-content').addClass('with-app-sidebar', 200).trigger(new $.Event('appresized'));
|
||||
$appSidebar.removeClass('disappear');
|
||||
$('#content').addClass('with-app-sidebar').trigger(new $.Event('appresized'));
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -40,11 +39,8 @@
|
|||
*/
|
||||
exports.Apps.hideAppSidebar = function($el) {
|
||||
var $appSidebar = $el || $('#app-sidebar');
|
||||
$appSidebar.hide('slide', { direction: 'right' }, 100,
|
||||
function() {
|
||||
$appSidebar.addClass('disappear');
|
||||
});
|
||||
$('#app-content').removeClass('with-app-sidebar', 100).trigger(new $.Event('appresized'));
|
||||
$appSidebar.addClass('disappear');
|
||||
$('#content').removeClass('with-app-sidebar').trigger(new $.Event('appresized'));
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -21,13 +21,13 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div id="content" class="app-settings">
|
||||
<div id="content" class="app-settings" :class="{ 'with-app-sidebar': currentApp}">
|
||||
<app-navigation :menu="menu" />
|
||||
<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
|
||||
<div id="app-content" class="app-settings-content" :class="{ 'icon-loading': loadingList }">
|
||||
<app-list :category="category" :app="currentApp" :search="searchQuery"></app-list>
|
||||
<div id="app-sidebar" v-if="id && currentApp">
|
||||
<app-details :category="category" :app="currentApp"></app-details>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-sidebar" v-if="id && currentApp">
|
||||
<app-details :category="category" :app="currentApp"></app-details>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue