SAK-40287 Library: Made the footer positioning more efficient on ever…

…y page load (sakaiproject#5773)
fk-snyk · Jul 9, 2018 · e46fbf3 · e46fbf3
1 parent 0b1360c
commit e46fbf3
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 29 deletions.
diff --git a/content/content-tool/tool/src/webapp/vm/content/sakai_resources_list.vm b/content/content-tool/tool/src/webapp/vm/content/sakai_resources_list.vm
@@ -799,7 +799,6 @@
 			############################################# end of "Other sites" section 
 
 		</table>
-		<div id="bottompadding" style="height:35em"> </div> 
 
 		#foreach($key in $listActions.keySet())
 			<input type="hidden" id="${key}-count" value="$counter.getValue("${key}selected")" />

diff --git a/library/src/morpheus-master/js/src/sakai.morpheus.content.js b/library/src/morpheus-master/js/src/sakai.morpheus.content.js
diff --git a/library/src/morpheus-master/sass/base/_responsive.scss b/library/src/morpheus-master/sass/base/_responsive.scss
@@ -2,6 +2,11 @@
 
 body{
 	@media #{$phone}{
+		.#{$namespace}pagebody{
+			min-height: 100vh;										// alternative for browswers who cannot do calculations
+			min-height: calc(100vh - (#{$banner-height} * 3));		// viewport minus the three top banners
+		}
+
 		&.toolsNav--displayed{
 			// hide the tool body
 			.#{$namespace}pagebody {
@@ -26,7 +31,9 @@ body{
 
 			// show the tool menu
 			#toolMenuWrap{
+				display: block;			// restore the tool menu that was removed when hidden to reduce the height of the page when it isn't visible
 				width: 100%;
+				min-height: auto; 		// to allow the bottom of the tool menu to appear when doesn't have too many tools
 				box-shadow: 0px 0em 1em rgba(0,0,0,0.5);
 				left: 0;
 				z-index: 1001;

diff --git a/library/src/morpheus-master/sass/modules/_main.scss b/library/src/morpheus-master/sass/modules/_main.scss
@@ -20,7 +20,10 @@
 	@include align-items(stretch);
 	@include display-flex(flex);
 	@include flex-direction(row);
+
 	> .#{$namespace}pagebody{
+		@include display-flex(flex);
+		@include flex-direction(column);
 		width: 100%;
 	}
 }
@@ -65,6 +68,7 @@
 }
 
 .#{$namespace}container--footer{
+	margin-top: auto; 	// push the footer to the bottom of the page
 	background-color: $footer-background-color;
 	border-top: 1px solid $footer-border-color;
 }

diff --git a/library/src/morpheus-master/sass/modules/_toolmenu.scss b/library/src/morpheus-master/sass/modules/_toolmenu.scss
@@ -28,12 +28,6 @@ body.is-logged-out{
 
 	// LHS tool menu collapsed to show icons only and not tool titles.
 	body.#{$namespace}toolMenu-collapsed{
-
-		#content, .Mrphs-container--footer {
-			margin: 0 0 0 0;
-
-		}
-
 		#toolMenuWrap{
 			max-width: #{ $tool-menu-width-collapsed };
 			min-width: #{ $tool-menu-width-collapsed };
@@ -182,6 +176,8 @@ body.is-logged-out{
 	display: block;
 	min-width: $tool-menu-width;
 	width: $tool-menu-width;
+	min-height: 100vh;											// alternative for browswers who cannot do calculations
+	min-height: calc(100vh - (#{$banner-height} * 2) - 1px);	// viewport minus the two top banners; "- 1px" for extra pixel somewhere
 	@include flex-basis( $tool-menu-width );
 	padding: 5px 0 0 0;
 	text-align: center;
@@ -191,6 +187,7 @@ body.is-logged-out{
 	@media #{$phone}{
 		left: -100%;
 		position: absolute;
+		display: none;			// remove the height of the tool menu from the page to reduce the length of the page
 		padding: 0;
 		margin: 0;