SAK-40536 Library: fixed a number of layout and design issues with th…

…e page layout, breadcrumbs, and unpublish message (sakaiproject#5935)

lessonbuilder/tool/src/webapp/css/Simplepagetool.css

@@ -374,7 +374,7 @@ a.edit-link:link, a.edit-link:visited, a.section-merge-link:link, a.section-merg
 
 /* only up to 4 cols has been tuned */
 .cols9 {
-    width: calc(100$ / 9  - 17px) !important;
+    width: calc(100% / 9  - 17px) !important;
     margin-right: 2px !important;
 }
 [class~="cols9"][class~="double"] {
@@ -940,7 +940,6 @@ a.peer-eval-stats {
 #toolbar {
   margin: 0;
   margin-bottom: -10px;
-  margin-top: -10px;
   display: inline-block;
 }
 
@@ -995,7 +994,6 @@ a.peer-eval-stats {
 }
 .lessons-siteHierarchy-title {
    font-weight: bold;
-   margin-left: 0;
 }
 .itemAction {
   padding-top: 0px;
@@ -1452,15 +1450,6 @@ padding: 10px 15px 0 15px
 div.navIntraTool {
   border-top:none;
 }
-/* our additions to the top menu */
-
-.top-icon:before {
-   margin-right: 5px;
-}
-#print-view {
-    margin-right: 7px;
-}
-
 /* temporary, to avoid changing old stuff for the moment */
 .edit-col {
   padding-top: 0px !important;
@@ -1638,7 +1627,7 @@ margin-left: 0px;
 
 li.listType .contentCol {
 }
-li.question .contentCol
+li.question .contentCol {
 }
 /* links should be spaced as close as possible to each other, so override padding */
 li.resourceType .right-col {
@@ -1660,13 +1649,6 @@ li.resourceType .right-col {
  padding: 5px 10px;
 }
 
-/* in full width mode, if we don't do this, and the
-   first region is split, the right column doesn't fit
-   must be overridden for narrow format */
-.Mrphs-container--toolTitleNav {
-  margin-bottom:-30px;
-}
-
 /* for ShowItem */
 .itemDate {
 font-family: 'Segoe UI', Segoe, Tahoma, Helvetica, Arial, sans-serif;
@@ -1691,10 +1673,6 @@ font-size: 12px;
   line-height:10px;
   margin-bottom:5px;
 }
-/* fit the actual height, so it doesn't overlap title */
-.Mrphs-toolTitleNav__button_container {
-  height: 30px;
-}
 .portletBody {
   margin-top:2px;
 }
@@ -1762,10 +1740,6 @@ div.portletBody[sakaiversion="12"] {
   padding-left: 7px;
   padding-right: 7px;
 }
-/* Give the repositioned button container some room */
-#toolbar {
-  margin-top: 20px;
-}
 }
 /* 480 is boundary of most phones */
 @media only screen and (max-width: 480px) {
@@ -1839,9 +1813,6 @@ span.nextprev {
 /* nothing - used to save information */
 }
 
-.Mrphs-siteHierarchy span:last-child {
-  margin-left: 6px;
-}
 .Mrphs-siteHierarchy .action .lessonsToolButton {
   background-color: transparent;
   padding-top: 1px;
@@ -1923,7 +1894,7 @@ body > .portletBody > .action {
 }
 
 .cols9 {
-    width: calc(100$ / 9  - 32px) !important;
+    width: calc(100% / 9  - 32px) !important;
 }
 [class~="cols9"][class~="double"] {
     width: calc(200% / 9 - 32px) !important;

lessonbuilder/tool/src/webapp/templates/ShowPage.html

@@ -24,10 +24,6 @@
  /* siteTitle is added by portal, but we don't want it */
 	 .siteTitle{display:none !important;}
 	 .pageTitle{width:auto !important;}
-
-         .Mrphs-toolTitleNav .Mrphs-toolTitleNav__button_container {
-            top: 2px !important;
-         }
  </style>
  <script type="text/javascript" rsf:id="iframeJavascript">
  function resizeiframe(id) {

library/src/morpheus-master/sass/_defaults.scss

@@ -352,7 +352,15 @@ $logo-width: 126px !default;
 $skin-with-icons: true !default;
 $icon-size: 20px !default;
 
-
+/* Unpublished Banner */
+$siteUnpublish-background: $warn-background-color !default;
+$siteUnpublish-color: $text-color !default;
+$siteUnpublish-border: 1px solid $warn-color !default;
+
+/* Site Deletion Banner */
+$siteDelete-background: $info-background-color !default;
+$siteDelete-color: $text-color !default;
+$siteDelete-border: 1px solid $info-color !default;
 
 /* Icon Overrides */
 //$sakai-custom-icons : ( sakai-message-bundle-manager : ( extend : fa-edit ) );

library/src/morpheus-master/sass/base/_compass.scss

@@ -26,6 +26,13 @@
     -webkit-flex-wrap: $p;
     flex-wrap: $p;
 }
+@mixin flex-shorthand($f-grow:0, $f-shrink:1, $f-basis: auto) {
+	-webkit-box-flex: $f-grow;
+	-moz-box-flex: $f-grow;
+	-webkit-flex: $f-grow $f-shrink $f-basis;
+	-ms-flex: $f-grow $f-shrink $f-basis;
+	flex: $f-grow $f-shrink $f-basis;
+}
 @mixin appearance($p: none) {
 	-moz-appearance: $p;
 	-webkit-appearance: $p;

library/src/morpheus-master/sass/modules/_main.scss

@@ -28,43 +28,57 @@
 	}
 }
 
-#content, .#{$namespace}container--footer{
+#content {
+	@include display-flex();
+	@include flex-wrap(wrap);		// allows the site unpublished banner to be on its own line at 100%
 	margin: 0;
 	width: 100%;
 
-	@media #{$nonPhone} {
-		#col1of2, #col2of2{
-			margin: 0 0 0 1%;
-			vertical-align: top;
-	    display: inline-block;
-    }
-		#col1of2 {
-      width: $col1of2-width;
-    }
-    #col2of2 {
-      width: $col2of2-width;
-    }
-  }
+	@media #{$tablet} {
+		@include flex-direction(column);
+	}
+
+	@media #{$phone}{
+		margin: 0;
+		padding-top: $standard-spacing; // make way for the button container
+	}
+
+	#col1of2, #col2of2{
+		@include flex-shorthand(1, 1, 0); 	// flex: 1 1 0; vs flex: 1; because of IE11 bug
+		display: inline-block;
+		margin: 0 0 $standard-spacing $standard-spacing;
+		vertical-align: top;
+
+		@media #{$tablet} {
+			display: block;
+			margin-right: $standard-spacing; 	// space on the right of the column view
+		}
+	}
+	#col1of2 {
+		min-width: $col1of2-width;
+	}
+	#col2of2 {
+		min-width: $col2of2-width;
+		margin-right: $standard-spacing;		// space on the end
+	}
 }
 
 .#{$namespace}mainContent{
 	background: $main-content-background;
-	padding-top: 1em;
 }
 
-#content {
-	@media #{$phone}{
-		margin: 0;
-		padding-top: 2em; // make way for the button container
-	}
-}
-
-.#{$namespace}pageColumns--single, .#{$namespace}footer{
-	margin: 0 1em;
+.#{$namespace}pageColumns--single {
+	margin: 0;
 	clear: both;
+	width: 100%;
+
 	@media #{$phone}{
 		margin: 0;
 	}
+
+	.#{$namespace}container {
+		margin: 0 $standard-spacing;
+	}
 }
 
 .#{$namespace}container--footer{

library/src/morpheus-master/sass/modules/_toolmenu.scss

@@ -175,7 +175,7 @@ body.is-logged-out{
 	min-height: 100vh;											// alternative for browswers who cannot do calculations
 	min-height: calc(100vh - (#{$banner-height} * 2));	// viewport minus the two top banners
 	@include flex-basis( $tool-menu-width );
-	padding: 5px 0 0 0;
+	padding: 6px 0 0 0;
 	text-align: center;
 	border-right: 1px solid $tool-border-color;
 	@include transition( left 0.25s linear 0s );

library/src/morpheus-master/sass/modules/navigation/_base.scss

@@ -1177,22 +1177,36 @@ body.is-logged-out{
 }
 
 .#{$namespace}siteStatus{
+	@include display-flex;
+	@include align-items(center);
+	@include justify-content(center);
+	margin: $standard-spacing $standard-spacing 0 $standard-spacing;
+	padding: $standard-spacing;
+
+	&.is-softly-deleted{
+		color: $siteDelete-color;
+		background-color: $siteDelete-background;
+		border: $siteDelete-border;
+
+		p {
+			margin: 0;
+			padding: 0;
+		}
+	}
+
 	&.is-unpublished{
-		margin-left:0em;
-		width: 100%;
-		padding: 3px;
-		color :$background-color-secondary;
-		display:block;
-		text-align:center;
-		background-color: $warn-background-color;
-		border-bottom: 1px solid $warn-color;
+		color: $siteUnpublish-color;
+		background-color: $siteUnpublish-background;
+		border: $siteUnpublish-border;
+
 		h4{
-			padding: 3px;
 			display: inline-block;
-			vertical-align: top;
+			margin: 0;
+			padding: 0;
 		}
 		button{
 			@extend .button;
+			margin: 0 0 0 $standard-spacing;
 		}
 	}
 }