Skip to content

Commit d6b7185

Browse files
skjnldsvMorrisJobke
skjnldsv
authored and
MorrisJobke
committed
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>
1 parent 8425830 commit d6b7185

11 files changed

Lines changed: 111 additions & 105 deletions

File tree

‎apps/files/js/detailsview.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,10 @@
117117
* Renders this details view
118118
*/
119119
render: function() {
120+
// remove old instances
121+
$('#app-sidebar').remove();
122+
this.$el.insertAfter($('#app-content'));
123+
120124
var templateVars = {
121125
closeLabel: t('files', 'Close')
122126
};

‎apps/files/js/filelist.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,6 @@
274274

275275
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
276276
this._detailsView = new OCA.Files.DetailsView();
277-
this._detailsView.$el.insertBefore(this.$el);
278277
this._detailsView.$el.addClass('disappear');
279278
}
280279

‎core/css/apps.scss‎

Lines changed: 75 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
*
1717
*/
1818

19-
/* BASE STYLING ---------------------------------------------------------- */
19+
/* BASE STYLING ------------------------------------------------------------ */
2020

2121
h2 {
2222
font-size: 20px;
@@ -64,24 +64,18 @@ kbd {
6464
}
6565

6666

67-
/* APP STYLING -------------------------------------------------------------- */
67+
/* APP STYLING ------------------------------------------------------------ */
6868

69-
#app {
70-
height: 100%;
71-
width: 100%;
72-
* {
73-
box-sizing: border-box;
74-
}
69+
#content[class*='app-'] * {
70+
box-sizing: border-box;
7571
}
7672

77-
/* APP-NAVIGATION ------------------------------------------------------------*/
78-
73+
/* APP-NAVIGATION ------------------------------------------------------------ */
7974
/* Navigation: folder like structure */
80-
8175
#app-navigation {
8276
width: 250px;
8377
/* header height */
84-
height: calc(100vh - 50px);
78+
height: calc(100vh - #{$header-height});
8579
position: fixed;
8680
box-sizing: border-box;
8781
background-color: var(--color-main-background);
@@ -581,54 +575,100 @@ kbd {
581575
}
582576
}
583577

584-
/* APP-CONTENT ---------------------------------------------------------------*/
578+
579+
/* CONTENT --------------------------------------------------------- */
580+
#content {
581+
/* header height */
582+
padding-top: $header-height;
583+
box-sizing: border-box;
584+
position: relative;
585+
overflow-x: hidden;
586+
transition: margin-right 300ms ease-in-out;
587+
/* trick: scroll #app-content and not the body
588+
* to avoid double scrollbar with sidebar
589+
*/
590+
max-height: 100vh;
591+
&.with-app-sidebar {
592+
// to force the scrollbar to be visible
593+
// and not under the sidebar
594+
margin-right: 27vw;
595+
max-width: calc(100vw - #{$sidebar-width});
596+
}
597+
}
598+
599+
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
585600
/* Part where the content will be loaded into */
586601
#app-content {
587602
margin-left: 250px;
588603
z-index: 1000;
589604
background-color: var(--color-main-background);
590605
position: relative;
591-
min-height: calc(100vh - 50px);
606+
min-height: calc(100vh - #{$header-height});
592607
/* no top border for first settings item */
593608
> .section:first-child {
594609
border-top: none;
595610
}
596-
&.with-app-sidebar {
597-
margin-right: 27%;
611+
612+
/* if app-content-list is present */
613+
#app-content-wrapper {
614+
display: flex;
615+
position: relative;
616+
align-items: start;
617+
.app-content-list,
618+
.app-content-detail {
619+
min-height: calc(100vh - #{$header-height});
620+
max-height: calc(100vh - #{$header-height});
621+
overflow-x: hidden;
622+
overflow-y: auto;
623+
}
624+
625+
/* CONTENT DETAILS AFTER LIST*/
626+
.app-content-detail {
627+
/* grow full width */
628+
flex-grow: 1;
629+
#app-navigation-toggle-back {
630+
display: none;
631+
}
632+
}
598633
}
599634
}
600635

601-
/* APP-SIDEBAR ----------------------------------------------------------------*/
602-
636+
/* APP-SIDEBAR ------------------------------------------------------------ */
603637
/*
604-
Sidebar: a sidebar to be used within #app-content
605-
have it as first element within app-content in order to shrink other
606-
sibling containers properly. Compare Files app for example.
638+
Sidebar: a sidebar to be used within #content
639+
#app-content will be shrinked properly
607640
*/
608641
#app-sidebar {
609642
position: fixed;
610-
top: 50px;
611-
right: 0;
643+
top: $header-height;
612644
left: auto;
613645
bottom: 0;
614-
width: 27%;
615-
min-width: 300px;
646+
width: 27vw;
647+
min-width: $sidebar-width;
616648
display: block;
617649
background: var(--color-main-background);
618650
border-left: 1px solid var(--color-border);
619-
-webkit-transition: margin-right 300ms;
620-
transition: margin-right 300ms;
621651
overflow-x: hidden;
622652
overflow-y: auto;
623-
visibility: visible;
624653
z-index: 500;
654+
animation: slideAndShow 300ms ease-in-out;
655+
animation-fill-mode: both;
625656
&.disappear {
626-
visibility: hidden;
657+
animation: slideAndHide 300ms ease-in-out;
658+
animation-fill-mode: both;
627659
}
628660
}
661+
@keyframes slideAndHide {
662+
0% {right: 0;}
663+
99% {right: -100%;}
664+
100% {right: -100%; display: none;}
665+
}
666+
@keyframes slideAndShow {
667+
0% {right: -100%;}
668+
100% {right: 0;}
669+
}
629670

630-
/* APP-SETTINGS ---------------------------------------------------------------*/
631-
671+
/* APP-SETTINGS ------------------------------------------------------------ */
632672
/* settings area */
633673
#app-settings {
634674
// To the bottom w/ flex
@@ -714,7 +754,7 @@ kbd {
714754
}
715755
}
716756

717-
/* GENERAL SECTION ---------------------------------------------------------- */
757+
/* GENERAL SECTION ------------------------------------------------------------ */
718758
.section {
719759
display: block;
720760
padding: 30px;
@@ -751,7 +791,7 @@ kbd {
751791
}
752792
}
753793

754-
/* TABS --------------------------------------------------------------------- */
794+
/* TABS ------------------------------------------------------------ */
755795
.tabHeaders {
756796
display: inline-block;
757797
margin: 15px;
@@ -784,7 +824,7 @@ kbd {
784824
}
785825
}
786826

787-
/* POPOVER MENU ------------------------------------------------------------- */
827+
/* POPOVER MENU ------------------------------------------------------------ */
788828
$popoveritem-height: 38px;
789829
$popovericon-size: 16px;
790830

@@ -1004,29 +1044,8 @@ $popovericon-size: 16px;
10041044

10051045
}
10061046
}
1007-
1008-
/* CONTENT WRAPPER --------------------------------------------------------- */
1009-
#content {
1010-
/* header height */
1011-
padding-top: 50px;
1012-
box-sizing: border-box;
1013-
position: relative;
1014-
}
1015-
/* if app-content-list is present */
1016-
#app-content-wrapper {
1017-
display: flex;
1018-
position: relative;
1019-
align-items: start;
1020-
.app-content-list,
1021-
.app-content-detail {
1022-
min-height: calc(100vh - 50px);
1023-
max-height: calc(100vh - 50px);
1024-
overflow-x: hidden;
1025-
overflow-y: auto;
1026-
}
1027-
}
10281047

1029-
/* CONTENT LIST ------------------------------------------------------------- */
1048+
/* CONTENT LIST ------------------------------------------------------------ */
10301049
.app-content-list {
10311050
width: 300px;
10321051
border-right: 1px solid var(--color-border);
@@ -1179,13 +1198,3 @@ $popovericon-size: 16px;
11791198
}
11801199
}
11811200

1182-
/* CONTENT ------------------------------------------------------------------ */
1183-
.app-content-detail {
1184-
/* grow full width */
1185-
flex-grow: 1;
1186-
1187-
#app-navigation-toggle-back {
1188-
display: none;
1189-
}
1190-
}
1191-

‎core/css/header.scss‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
left: 0;
5050
right: 0;
5151
z-index: 2000;
52-
height: 50px;
52+
height: $header-height;
5353
background-color: var(--color-primary);
5454
box-sizing: border-box;
5555
justify-content: space-between;
@@ -81,7 +81,7 @@
8181
max-width: 350px;
8282
max-height: 280px;
8383
right: 5px;
84-
top: 50px;
84+
top: $header-height;
8585
margin: 0;
8686

8787
&:not(.popovermenu) {
@@ -165,7 +165,7 @@
165165
display: flex;
166166
justify-content: center;
167167
align-items: center;
168-
width: 50px;
168+
width: $header-height;
169169
height: 100%;
170170
cursor: pointer;
171171
opacity: 0.6;
@@ -224,9 +224,9 @@
224224
/* NAVIGATION --------------------------------------------------------------- */
225225
nav[role='navigation'] {
226226
display: inline-block;
227-
width: 50px;
228-
height: 50px;
229-
margin-left: -50px;
227+
width: $header-height;
228+
height: $header-height;
229+
margin-left: -$header-height;
230230
}
231231

232232
.header-left #navigation {
@@ -439,28 +439,21 @@ nav[role='navigation'] {
439439

440440
/* Apps menu */
441441
#appmenu {
442-
display: inline-block;
443-
width: auto;
444-
min-width: 50px;
445-
height: 100%;
446-
clear: both;
442+
display: inline-flex;
443+
min-width: $header-height;
447444

448445
li {
449-
float: left;
450-
display: inline-block;
451446
position: relative;
452-
vertical-align: top !important;
453-
height: 100%;
454447
cursor: pointer;
455448

456449
a {
457450
position: relative;
458-
display: inline-block;
451+
display: flex;
459452
margin: 0;
460-
padding: 15px 15px;
461-
height: 20px;
462-
text-align: center;
463-
vertical-align: top !important;
453+
height: $header-height;
454+
width: $header-height;
455+
align-items: center;
456+
justify-content: center;
464457
opacity: .6;
465458
}
466459
}
@@ -582,7 +575,7 @@ nav[role='navigation'] {
582575

583576
&:focus,
584577
&:active {
585-
top: 50px;
578+
top: $header-height;
586579
}
587580
}
588581

‎core/css/mobile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
#app-navigation-toggle {
8585
position: fixed;
8686
display: inline-block !important;
87-
top: 50px;
87+
top: $header-height;
8888
left: 0;
8989
width: 44px;
9090
height: 44px;

‎core/css/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -819,7 +819,7 @@ span.ui-icon {
819819
}
820820

821821
.content {
822-
max-height: calc(100% - 50px);
822+
max-height: calc(100% - $header-height);
823823
height: 100%;
824824
overflow-y: auto;
825825

‎core/css/variables.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,8 @@ $color-border-dark: nc-darken($color-main-background, 14%) !default;
7575
$border-radius: 3px !default;
7676

7777
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
78+
79+
80+
// various structure data
81+
$header-height: 50px;
82+
$sidebar-width: 300px;

‎core/js/apps.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@
2727
*/
2828
exports.Apps.showAppSidebar = function($el) {
2929
var $appSidebar = $el || $('#app-sidebar');
30-
$appSidebar.removeClass('disappear')
31-
.show('slide', { direction: 'right' }, 200);
32-
$('#app-content').addClass('with-app-sidebar', 200).trigger(new $.Event('appresized'));
30+
$appSidebar.removeClass('disappear');
31+
$('#content').addClass('with-app-sidebar').trigger(new $.Event('appresized'));
3332
};
3433

3534
/**
@@ -40,11 +39,8 @@
4039
*/
4140
exports.Apps.hideAppSidebar = function($el) {
4241
var $appSidebar = $el || $('#app-sidebar');
43-
$appSidebar.hide('slide', { direction: 'right' }, 100,
44-
function() {
45-
$appSidebar.addClass('disappear');
46-
});
47-
$('#app-content').removeClass('with-app-sidebar', 100).trigger(new $.Event('appresized'));
42+
$appSidebar.addClass('disappear');
43+
$('#content').removeClass('with-app-sidebar').trigger(new $.Event('appresized'));
4844
};
4945

5046
/**

‎settings/js/settings-vue.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎settings/js/settings-vue.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)