Fix sidebar and scrollbar on content

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · Jun 28, 2018 · 8ed58d9 · 8ed58d9
1 parent 723ec29
commit 8ed58d9
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 3,875 deletions.
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
@@ -274,7 +274,7 @@
 
 			if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
 				this._detailsView = new OCA.Files.DetailsView();
-				this._detailsView.$el.insertBefore(this.$el);
+				this._detailsView.$el.insertAfter(this.$el.parent());
 				this._detailsView.$el.addClass('disappear');
 			}
 

diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -16,7 +16,7 @@
  *
  */
 
-/* BASE STYLING ---------------------------------------------------------- */
+/* BASE STYLING ------------------------------------------------------------ */
 
 h2 {
 	font-size: 20px;
@@ -64,20 +64,14 @@ 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 */
@@ -587,7 +581,27 @@ kbd {
 	}
 }
 
-/* APP-CONTENT ---------------------------------------------------------------*/
+
+/* CONTENT  --------------------------------------------------------- */
+#content {
+	/* header height */
+	padding-top: 50px;
+	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;
+	}
+}
+
+/* APP-CONTENT AND WRAPPER ------------------------------------------ */
 /* Part where the content will be loaded into */
 #app-content {
 	margin-left: 250px;
@@ -599,14 +613,35 @@ kbd {
 	> .section:first-child {
 		border-top: none;
 	}
-}
 
-/* APP-SIDEBAR ----------------------------------------------------------------*/
+	/* 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 DETAILS AFTER LIST*/
+		.app-content-detail {
+			/* grow full width */
+			flex-grow: 1;
+			#app-navigation-toggle-back {
+				display: none;
+			}
+		}
+	}
+}
+
+/* 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;
@@ -619,19 +654,16 @@ kbd {
 	display: block;
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);
-	-webkit-transition: margin-right 300ms;
-	transition: margin-right 300ms;
+	transition: right 300ms ease-in-out;
 	overflow-x: hidden;
 	overflow-y: auto;
-	visibility: visible;
 	z-index: 500;
 	&.disappear {
-		visibility: hidden;
+		right: -27vw;
 	}
 }
 
-/* APP-SETTINGS ---------------------------------------------------------------*/
-
+/* APP-SETTINGS ------------------------------------------------------------ */
 /* settings area */
 #app-settings {
 	// To the bottom w/ flex
@@ -716,7 +748,7 @@ kbd {
 	}
 }
 
-/* GENERAL SECTION ---------------------------------------------------------- */
+/* GENERAL SECTION ------------------------------------------------------------ */
 .section {
 	display: block;
 	padding: 30px;
@@ -753,7 +785,7 @@ kbd {
 	}
 }
 
-/* TABS --------------------------------------------------------------------- */
+/* TABS ------------------------------------------------------------ */
 .tabHeaders {
 	display: inline-block;
 	margin: 15px;
@@ -786,7 +818,7 @@ kbd {
 	}
 }
 
-/* POPOVER MENU ------------------------------------------------------------- */
+/* POPOVER MENU ------------------------------------------------------------ */
 $popoveritem-height: 38px;
 $popovericon-size: 16px;
 
@@ -1006,32 +1038,8 @@ $popovericon-size: 16px;
 
 	}
 }
-
-/* CONTENT WRAPPER  --------------------------------------------------------- */
-#content {
-	/* header height */
-	padding-top: 50px;
-	box-sizing: border-box;
-	position: relative;
-	&.with-app-sidebar {
-		margin-right: 27vw;
-	}
-}
-/* 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);
@@ -1184,13 +1192,3 @@ $popovericon-size: 16px;
 	}
 }
 
-/* CONTENT ------------------------------------------------------------------ */
-.app-content-detail {
-	/* grow full width */
-	flex-grow: 1;
-
-	#app-navigation-toggle-back {
-		display: none;
-	}
-}
-
diff --git a/core/js/apps.js b/core/js/apps.js
@@ -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'));
 	};
 
 	/**

diff --git a/settings/js/settings-vue.js b/settings/js/settings-vue.js
diff --git a/settings/js/settings-vue.js.map b/settings/js/settings-vue.js.map
diff --git a/settings/package-lock.json b/settings/package-lock.json