Removed horizontal scrollbar for Classroom Monitor views on screens less than 1360px. #2835

Author: breity

src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeProgress/nodeProgressView/nodeProgressView.html

@@ -1,30 +1,25 @@
 <div class="view-content--with-sidemenu" ng-if="$ctrl.isGroupNode($ctrl.nodeId)">
-    <div class="l-constrained l-constrained-md md-padding nav">
-        <div class="flex md-subhead" layout="row" layout-align="start center" layout-wrap layout-margin>
-            <span flex></span>
-            <md-button ng-if="$ctrl.showRubricButton"
-                       ng-click="$ctrl.showRubric($event)"
-                       class="info md-raised">
-                <md-icon class="info"> info_outline </md-icon>
-                {{ ::'projectInfo' | translate }}
-            </md-button>
-        </div>
+  <div class="l-constrained l-constrained-md nav">
+    <div class="flex md-subhead" layout="row" layout-align="start center" layout-wrap layout-margin>
+      <span flex></span>
+      <md-button ng-if="$ctrl.showRubricButton" ng-click="$ctrl.showRubric($event)"
+                 class="info md-raised">
+        <md-icon class="info"> info_outline </md-icon>
+        {{ ::'projectInfo' | translate }}
+      </md-button>
+    </div>
 
-        <div class="nav-contents nav-contents--root">
-            <div layout="row" layout-wrap layout-align="center start">
-                <nav-item ng-repeat="id in $ctrl.rootNode.ids"
-                          class="nav-item nav-item--root"
-                          ng-class="{'expanded': itemExpanded}"
-                          node-id="::id"
-                          show-position="true"
-                          type="'card'"
-                          flex="100" flex-sm="50" flex-gt-sm="50"></nav-item>
-            </div>
-        </div>
+    <div class="nav-contents nav-contents--root">
+      <div layout="row" layout-wrap layout-align="center start">
+        <nav-item ng-repeat="id in $ctrl.rootNode.ids" class="nav-item nav-item--root"
+                  ng-class="{'expanded': itemExpanded}" node-id="::id" show-position="true"
+                  type="'card'" flex="100" flex-sm="50" flex-gt-sm="50"></nav-item>
+      </div>
     </div>
+  </div>
 </div>
 
 <div class="view-content--with-sidemenu" ng-if="$ctrl.isApplicationNode($ctrl.nodeId)">
-    <node-grading-view node-id="$ctrl.nodeId"></node-grading-view>
-    <!-- <div class="md-padding" ng-cloak ui-view="nodeView"></div> -->
+  <node-grading-view node-id="$ctrl.nodeId"></node-grading-view>
+  <!-- <div class="md-padding" ng-cloak ui-view="nodeView"></div> -->
 </div>

src/main/webapp/wise5/themes/default/style/author.css

@@ -8,11 +8,11 @@
   position: relative;
 
   @media (min-width: $layout-breakpoint-xs) {
-      width: 100%;
-      max-width: $layout-breakpoint-md;
+      width: $layout-breakpoint-md;
   }
 }
 
 .l-constrained-md {
-  max-width: $layout-breakpoint-sm;
+  width: $layout-breakpoint-sm;
+  max-width: 100%;
 }

src/main/webapp/wise5/themes/default/style/author.css.map

@@ -2,99 +2,109 @@
 
 // 2. Base
 .l-main {
-    background-color: color('body-bg');
+  background-color: color('body-bg');
 }
 
 .l-main--with-toolbar {
-    margin-top: $wise-toolbar-height;
+  margin-top: $wise-toolbar-height;
 }
 
 #content {
-    transition: margin-top .5s;
+  transition: margin-top 0.5s;
 }
 
 .view-content {
-    margin: 0 auto;
-    padding: 8px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    transition: opacity 500ms;
-
-    @media only screen and (min-width: $layout-breakpoint-sm) {
-        padding: 16px;
-    }
-
-    &.ng-enter {
-        opacity: 0;
-    }
-
-    .ng-enter-active {
-        opacity: 1;
-        transition-delay: 250ms;
-    }
-
-    &.ng-leave-active, &.ng-hide {
-        opacity: 0;
-    }
-
-    &.ng-hide-add, &.ng-hide-add-active,
-    &.ng-hide-remove, &.ng-hide-remove-active {
-        opacity: 0;
-    }
+  margin: 0 auto;
+  padding: 8px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  transition: opacity 500ms;
+
+  @media only screen and (min-width: $layout-breakpoint-sm) {
+    padding: 16px;
+  }
+
+  &.ng-enter {
+    opacity: 0;
+  }
+
+  .ng-enter-active {
+    opacity: 1;
+    transition-delay: 250ms;
+  }
+
+  &.ng-leave-active,
+  &.ng-hide {
+    opacity: 0;
+  }
+
+  &.ng-hide-add,
+  &.ng-hide-add-active,
+  &.ng-hide-remove,
+  &.ng-hide-remove-active {
+    opacity: 0;
+  }
 }
 
 .view-content--with-sidemenu {
-    @media only screen and (min-width: $layout-breakpoint-xs) {
-        margin-left: 54px;
-    }
+  padding: 8px;
+
+  @media only screen and (min-width: $layout-breakpoint-xs) {
+    margin-left: 54px;
+    padding: 16px;
+  }
 }
-[dir=rtl] .view-content--with-sidemenu {
-    @media only screen and (min-width: $layout-breakpoint-xs) {
-        margin-left: auto;
-        margin-right: 54px;
-    }
+[dir='rtl'] .view-content--with-sidemenu {
+  @media only screen and (min-width: $layout-breakpoint-xs) {
+    margin-left: auto;
+    margin-right: 54px;
+  }
 }
 
 .content-head {
-    margin: 8px 0;
-
-    h1, h2, h3 {
-        font-weight: 300;
-        margin-top: 0;
-        margin-bottom: 0;
-        font-size: rem(3.6);
-
-        @media only screen and (max-width: $layout-breakpoint-sm - 1) {
-            font-size: rem(3.2);
-            text-align: center;
-        }
+  margin: 8px 0;
+
+  h1,
+  h2,
+  h3 {
+    font-weight: 300;
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: rem(3.6);
+
+    @media only screen and (max-width: $layout-breakpoint-sm - 1) {
+      font-size: rem(3.2);
+      text-align: center;
     }
+  }
 }
 
 .content-head__more {
-    @media only screen and (max-width: $layout-breakpoint-sm - 1) {
-        margin-top: 8px;
-    }
+  @media only screen and (max-width: $layout-breakpoint-sm - 1) {
+    margin-top: 8px;
+  }
 }
 
-.content-head__item, h2.content-head__item {
-    margin: 0 8px;
+.content-head__item,
+h2.content-head__item {
+  margin: 0 8px;
 
-    .md-subhead {
-        padding-left: 4px;
+  .md-subhead {
+    padding-left: 4px;
 
-        @media only screen and (max-width: $layout-breakpoint-sm - 1) {
-            display: block;
-            padding-left: 0;
-        }
+    @media only screen and (max-width: $layout-breakpoint-sm - 1) {
+      display: block;
+      padding-left: 0;
     }
+  }
 
-    md-icon {
-        vertical-align: text-bottom;
-    }
+  md-icon {
+    vertical-align: text-bottom;
+  }
 }
 
-.stepSelectMenuContainer md-select-menu, .stepSelectMenuContainer md-select-menu md-content {
+.stepSelectMenuContainer md-select-menu,
+.stepSelectMenuContainer md-select-menu md-content {
   max-height: 500px;
 }

src/main/webapp/wise5/themes/default/style/layouts/_l-default.scss

@@ -1,21 +1,15 @@
 .grading {
-    padding-left: 8px;
-    padding-right: 8px;
-
-    @media (min-width: $layout-breakpoint-xs) {
-        padding: 8px 16px;
-    }
 }
 
 .grading__item-container {
-    margin: 0 0 16px;
-    padding: 0 !important;
+  margin: 0 0 16px;
+  padding: 0 !important;
 }
 
 .grading__item {
-    background-color: #ffffff;
+  background-color: #ffffff;
 
-    .component {
-        padding: 0;
-    }
+  .component {
+    padding: 0;
+  }
 }