Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

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>
pull/9982/head
John Molakvoæ (skjnldsv) 8 years ago
committed by Morris Jobke
parent
842583038b
commit
d6b718584e
No known key found for this signature in database GPG Key ID: FE03C3A163FEDE68
11 changed files with 111 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      apps/files/js/detailsview.js
  2. 1
      apps/files/js/filelist.js
  3. 141
      core/css/apps.scss
  4. 35
      core/css/header.scss
  5. 2
      core/css/mobile.scss
  6. 2
      core/css/styles.scss
  7. 5
      core/css/variables.scss
  8. 12
      core/js/apps.js
  9. 2
      settings/js/settings-vue.js
  10. 2
      settings/js/settings-vue.js.map
  11. 10
      settings/src/views/Apps.vue

4
apps/files/js/detailsview.js
View File

@ -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')
};

1
apps/files/js/filelist.js
View File

@ -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');
}

141
core/css/apps.scss
View File

@ -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;
}
}

35
core/css/header.scss
View File

@ -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;
}
}

2
core/css/mobile.scss
View File

@ -84,7 +84,7 @@
#app-navigation-toggle {
position: fixed;
display: inline-block !important;
top: 50px;
top: $header-height;
left: 0;
width: 44px;
height: 44px;

2
core/css/styles.scss
View File

@ -819,7 +819,7 @@ span.ui-icon {
}
.content {
max-height: calc(100% - 50px);
max-height: calc(100% - $header-height);
height: 100%;
overflow-y: auto;

5
core/css/variables.scss
View File

@ -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;

12
core/js/apps.js
View File

@ -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'));
};
/**

2
settings/js/settings-vue.js
File diff suppressed because it is too large
View File

2
settings/js/settings-vue.js.map
File diff suppressed because it is too large
View File

10
settings/src/views/Apps.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save