Skip to content

Commit 8e346aa

Browse files
skjnldsvskjnldsv
committed
Sidebar fix
Fix sidebar and scrollbar on content Acceptance fixes Sidebar fixes, and sidebar-width + header-height variables Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
1 parent a7255ec commit 8e346aa

File tree

13 files changed

+135
-179
lines changed

13 files changed

+135
-179
lines changed

‎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);
@@ -587,54 +581,100 @@ kbd {
587581
}
588582
}
589583

590-
/* APP-CONTENT ---------------------------------------------------------------*/
584+
585+
/* CONTENT --------------------------------------------------------- */
586+
#content {
587+
/* header height */
588+
padding-top: $header-height;
589+
box-sizing: border-box;
590+
position: relative;
591+
overflow-x: hidden;
592+
transition: margin-right 300ms ease-in-out;
593+
/* trick: scroll #app-content and not the body
594+
* to avoid double scrollbar with sidebar
595+
*/
596+
max-height: 100vh;
597+
&.with-app-sidebar {
598+
// to force the scrollbar to be visible
599+
// and not under the sidebar
600+
margin-right: 27vw;
601+
max-width: calc(100vw - #{$sidebar-width});
602+
}
603+
}
604+
605+
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
591606
/* Part where the content will be loaded into */
592607
#app-content {
593608
margin-left: 250px;
594609
z-index: 1000;
595610
background-color: var(--color-main-background);
596611
position: relative;
597-
min-height: calc(100vh - 50px);
612+
min-height: calc(100vh - #{$header-height});
598613
/* no top border for first settings item */
599614
> .section:first-child {
600615
border-top: none;
601616
}
602-
&.with-app-sidebar {
603-
margin-right: 27%;
617+
618+
/* if app-content-list is present */
619+
#app-content-wrapper {
620+
display: flex;
621+
position: relative;
622+
align-items: start;
623+
.app-content-list,
624+
.app-content-detail {
625+
min-height: calc(100vh - #{$header-height});
626+
max-height: calc(100vh - #{$header-height});
627+
overflow-x: hidden;
628+
overflow-y: auto;
629+
}
630+
631+
/* CONTENT DETAILS AFTER LIST*/
632+
.app-content-detail {
633+
/* grow full width */
634+
flex-grow: 1;
635+
#app-navigation-toggle-back {
636+
display: none;
637+
}
638+
}
604639
}
605640
}
606641

607-
/* APP-SIDEBAR ----------------------------------------------------------------*/
608-
642+
/* APP-SIDEBAR ------------------------------------------------------------ */
609643
/*
610-
Sidebar: a sidebar to be used within #app-content
611-
have it as first element within app-content in order to shrink other
612-
sibling containers properly. Compare Files app for example.
644+
Sidebar: a sidebar to be used within #content
645+
#app-content will be shrinked properly
613646
*/
614647
#app-sidebar {
615648
position: fixed;
616-
top: 50px;
617-
right: 0;
649+
top: $header-height;
618650
left: auto;
619651
bottom: 0;
620-
width: 27%;
621-
min-width: 300px;
652+
width: 27vw;
653+
min-width: $sidebar-width;
622654
display: block;
623655
background: var(--color-main-background);
624656
border-left: 1px solid var(--color-border);
625-
-webkit-transition: margin-right 300ms;
626-
transition: margin-right 300ms;
627657
overflow-x: hidden;
628658
overflow-y: auto;
629-
visibility: visible;
630659
z-index: 500;
660+
animation: slideAndShow 300ms ease-in-out;
661+
animation-fill-mode: both;
631662
&.disappear {
632-
visibility: hidden;
663+
animation: slideAndHide 300ms ease-in-out;
664+
animation-fill-mode: both;
633665
}
634666
}
667+
@keyframes slideAndHide {
668+
0% {right: 0;}
669+
99% {right: -100%;}
670+
100% {right: -100%; display: none;}
671+
}
672+
@keyframes slideAndShow {
673+
0% {right: -100%;}
674+
100% {right: 0;}
675+
}
635676

636-
/* APP-SETTINGS ---------------------------------------------------------------*/
637-
677+
/* APP-SETTINGS ------------------------------------------------------------ */
638678
/* settings area */
639679
#app-settings {
640680
// To the bottom w/ flex
@@ -719,7 +759,7 @@ kbd {
719759
}
720760
}
721761

722-
/* GENERAL SECTION ---------------------------------------------------------- */
762+
/* GENERAL SECTION ------------------------------------------------------------ */
723763
.section {
724764
display: block;
725765
padding: 30px;
@@ -756,7 +796,7 @@ kbd {
756796
}
757797
}
758798

759-
/* TABS --------------------------------------------------------------------- */
799+
/* TABS ------------------------------------------------------------ */
760800
.tabHeaders {
761801
display: inline-block;
762802
margin: 15px;
@@ -789,7 +829,7 @@ kbd {
789829
}
790830
}
791831

792-
/* POPOVER MENU ------------------------------------------------------------- */
832+
/* POPOVER MENU ------------------------------------------------------------ */
793833
$popoveritem-height: 38px;
794834
$popovericon-size: 16px;
795835

@@ -1009,29 +1049,8 @@ $popovericon-size: 16px;
10091049

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

1034-
/* CONTENT LIST ------------------------------------------------------------- */
1053+
/* CONTENT LIST ------------------------------------------------------------ */
10351054
.app-content-list {
10361055
width: 300px;
10371056
border-right: 1px solid var(--color-border);
@@ -1184,13 +1203,3 @@ $popovericon-size: 16px;
11841203
}
11851204
}
11861205

1187-
/* CONTENT ------------------------------------------------------------------ */
1188-
.app-content-detail {
1189-
/* grow full width */
1190-
flex-grow: 1;
1191-
1192-
#app-navigation-toggle-back {
1193-
display: none;
1194-
}
1195-
}
1196-

‎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

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,6 +575,6 @@ nav[role='navigation'] {
582575

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

‎core/css/mobile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
#app-navigation-toggle {
100100
position: fixed;
101101
display: inline-block !important;
102-
top: 50px;
102+
top: $header-height;
103103
left: 0;
104104
width: 44px;
105105
height: 44px;

‎core/css/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1224,7 +1224,7 @@ span.ui-icon {
12241224
}
12251225

12261226
.content {
1227-
max-height: calc(100% - 50px);
1227+
max-height: calc(100% - $header-height);
12281228
height: 100%;
12291229
overflow-y: auto;
12301230

‎core/css/variables.scss‎

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

5252
$font-face: 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
53+
54+
55+
// various structure data
56+
$header-height: 50px;
57+
$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 & 13 deletions
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 & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)