Sidebar fix

Fix sidebar and scrollbar on content Sidebar fixes, and sidebar-width + header-height variables Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>
nextcloud · MorrisJobke · Jul 20, 2018 · Jun 25, 2018 · Jun 26, 2018 · Jul 6, 2018
commit d6b718584e8aff74a0e76f77d2c1c5689f78cc78
@@ -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'));
 	};
 
 	/**