Skip to content

Commit c1b99d9

Browse files
hirokiterashimahirokiterashima
authored
Merge pull request #2837 from WISE-Community/issue-2835-cm-horizontal-scrollbar
Removed horizontal scrollbar for screens less than 1360px wide
2 parents 763ece0 + 25aecc1 commit c1b99d9

16 files changed

Lines changed: 210 additions & 205 deletions

File tree

‎src/main/webapp/site/src/messages.xlf‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5329,28 +5329,28 @@
53295329
<source>Expand or collapse lesson content</source>
53305330
<context-group purpose="location">
53315331
<context context-type="sourcefile">../../wise5/vle/nav-item/nav-item.component.html</context>
5332-
<context context-type="linenumber">4</context>
5332+
<context context-type="linenumber">5</context>
53335333
</context-group>
53345334
</trans-unit>
53355335
<trans-unit datatype="html" id="21b4a27510afaf13943eed74935b8a88b69725d4">
53365336
<source><x equiv-text="{{nodeStatus.progress.completionPct}}" id="INTERPOLATION"/>% completed</source>
53375337
<context-group purpose="location">
53385338
<context context-type="sourcefile">../../wise5/vle/nav-item/nav-item.component.html</context>
5339-
<context context-type="linenumber">24</context>
5339+
<context context-type="linenumber">25</context>
53405340
</context-group>
53415341
</trans-unit>
53425342
<trans-unit datatype="html" id="d5af5e83b5a9ff687251f2871c50161ec34301c8">
53435343
<source><x equiv-text="{{nodeStatus.progress.completedItems}}" id="INTERPOLATION"/>/<x equiv-text="{{nodeStatus.progress.totalItems}}" id="INTERPOLATION_1"/> items </source>
53445344
<context-group purpose="location">
53455345
<context context-type="sourcefile">../../wise5/vle/nav-item/nav-item.component.html</context>
5346-
<context context-type="linenumber">26</context>
5346+
<context context-type="linenumber">27</context>
53475347
</context-group>
53485348
</trans-unit>
53495349
<trans-unit datatype="html" id="3a46d8b67c3dede35e374f9c0a758feb64e7032b">
53505350
<source>Lesson is locked</source>
53515351
<context-group purpose="location">
53525352
<context context-type="sourcefile">../../wise5/vle/nav-item/nav-item.component.html</context>
5353-
<context context-type="linenumber">34</context>
5353+
<context context-type="linenumber">35</context>
53545354
</context-group>
53555355
</trans-unit>
53565356
<trans-unit datatype="html" id="b73fb34ae49aef54ad30ef3b47b73bb3987c8c51">
@@ -5364,7 +5364,7 @@
53645364
<source>Go to <x equiv-text="{{nodeTitle}}" id="INTERPOLATION"/></source>
53655365
<context-group purpose="location">
53665366
<context context-type="sourcefile">../../wise5/vle/nav-item/nav-item.component.html</context>
5367-
<context context-type="linenumber">39</context>
5367+
<context context-type="linenumber">40</context>
53685368
</context-group>
53695369
</trans-unit>
53705370
<trans-unit datatype="html" id="1cde0ecb1655843b8b682674d1ed9ff8138073b2">

‎src/main/webapp/wise5/authoringTool/components/shared/topBar/topBar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const TopBar = {
138138
<md-icon>info</md-icon>
139139
<md-tooltip>{{ $ctrl.projectInfo }}</md-tooltip>
140140
</md-button>
141-
<md-button ng-if="$ctrl.runId" aria-label="{{ ::'switchToGradingView' | translate }}" class="md-icon-button" ng-click="$ctrl.switchToGradingView()">
141+
<md-button ng-if="$ctrl.runId" hide-xs aria-label="{{ ::'switchToGradingView' | translate }}" class="md-icon-button" ng-click="$ctrl.switchToGradingView()">
142142
<md-icon> assignment_turned_in </md-icon>
143143
<md-tooltip>{{ ::'switchToGradingView' | translate }}</md-tooltip>
144144
</md-button>

‎src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/nodeGradingView/nodeGradingView.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h2 class="content-head__item" ng-if="$ctrl.nodeHasWork">
1212
</div>
1313
</div>
1414
<span flex></span>
15-
<div class="content-head__more" layout="row" layout-align="center center">
15+
<div class="content-head__more" layout="row" layout-align="center center" layout-wrap>
1616
<component-select node-id="{{ ::$ctrl.nodeId }}" custom-class="'md-no-underline md-button'"
1717
on-change="$ctrl.onUpdateHiddenComponents(value)"></component-select>
1818
<md-button ng-if="$ctrl.milestoneReport" ng-click="$ctrl.showReport($event)"

‎src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/nodeGrading/stepTools/stepTools.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const StepTools = {
110110
<md-icon> {{ ::$ctrl.icons.prev }} </md-icon>
111111
<md-tooltip md-direction="bottom">{{ ::'PREVIOUS_STEP' | translate }}</md-tooltip>
112112
</md-button>
113-
<node-icon ng-if="$ctrl.nodeId" [node-id]="$ctrl.nodeId" size="18"></node-icon>&nbsp;
113+
<node-icon ng-if="$ctrl.nodeId" hide-xs [node-id]="$ctrl.nodeId" size="18"></node-icon>&nbsp;
114114
<md-select id="stepSelectMenu" md-theme="cm"
115115
class="md-button md-no-underline toolbar__select toolbar__select--fixedwidth"
116116
md-container-class="stepSelectMenuContainer"

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

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
11
<div class="view-content--with-sidemenu" ng-if="$ctrl.isGroupNode($ctrl.nodeId)">
2-
<div class="l-constrained l-constrained-md md-padding nav">
3-
<div class="flex md-subhead" layout="row" layout-align="start center" layout-wrap layout-margin>
4-
<span flex></span>
5-
<md-button ng-if="$ctrl.showRubricButton"
6-
ng-click="$ctrl.showRubric($event)"
7-
class="info md-raised">
8-
<md-icon class="info"> info_outline </md-icon>
9-
{{ ::'projectInfo' | translate }}
10-
</md-button>
11-
</div>
2+
<div class="l-constrained l-constrained-md nav">
3+
<div ng-if="$ctrl.showRubricButton" class="flex md-subhead" layout="row"
4+
layout-align="start center" layout-wrap layout-margin>
5+
<span flex></span>
6+
<md-button ng-click="$ctrl.showRubric($event)" class="info md-raised">
7+
<md-icon class="info"> info_outline </md-icon>
8+
{{ ::'projectInfo' | translate }}
9+
</md-button>
10+
</div>
1211

13-
<div class="nav-contents nav-contents--root">
14-
<div layout="row" layout-wrap layout-align="center start">
15-
<nav-item ng-repeat="id in $ctrl.rootNode.ids"
16-
class="nav-item nav-item--root"
17-
ng-class="{'expanded': itemExpanded}"
18-
node-id="::id"
19-
show-position="true"
20-
type="'card'"
21-
flex="100" flex-sm="50" flex-gt-sm="50"></nav-item>
22-
</div>
23-
</div>
12+
<div class="nav-contents nav-contents--root">
13+
<div layout="row" layout-wrap layout-align="center start">
14+
<nav-item ng-repeat="id in $ctrl.rootNode.ids" class="nav-item nav-item--root"
15+
ng-class="{'expanded': itemExpanded}" node-id="::id" show-position="true"
16+
type="'card'" flex="100" flex-sm="50" flex-gt-sm="50"></nav-item>
17+
</div>
2418
</div>
19+
</div>
2520
</div>
2621

2722
<div class="view-content--with-sidemenu" ng-if="$ctrl.isApplicationNode($ctrl.nodeId)">
28-
<node-grading-view node-id="$ctrl.nodeId"></node-grading-view>
29-
<!-- <div class="md-padding" ng-cloak ui-view="nodeView"></div> -->
23+
<node-grading-view node-id="$ctrl.nodeId"></node-grading-view>
24+
<!-- <div class="md-padding" ng-cloak ui-view="nodeView"></div> -->
3025
</div>

‎src/main/webapp/wise5/classroomMonitor/classroomMonitorComponents/shared/topBar/topBar.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -210,11 +210,11 @@ const TopBar = {
210210
<md-icon>info</md-icon>
211211
<md-tooltip>{{ $ctrl.runInfo }}</md-tooltip>
212212
</md-button>
213-
<md-button ng-if="$ctrl.canAuthorProject" aria-label="{{ ::'switchToAuthoringView' | translate }}" class="md-icon-button" ng-click="$ctrl.switchToAuthoringView()">
213+
<md-button ng-if="$ctrl.canAuthorProject" hide-xs aria-label="{{ ::'switchToAuthoringView' | translate }}" class="md-icon-button" ng-click="$ctrl.switchToAuthoringView()">
214214
<md-icon md-menu-origin> edit </md-icon>
215215
<md-tooltip>{{ ::'switchToAuthoringView' | translate }}</md-tooltip>
216216
</md-button>
217-
<md-button aria-label="{{ ::'previewProject' | translate }}" class="md-icon-button" ng-click="$ctrl.previewProject()">
217+
<md-button aria-label="{{ ::'previewProject' | translate }}" hide-xs class="md-icon-button" ng-click="$ctrl.previewProject()">
218218
<md-icon md-menu-origin> visibility </md-icon>
219219
<md-tooltip>{{ ::'previewProject' | translate }}</md-tooltip>
220220
</md-button>

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
position: relative;
99

1010
@media (min-width: $layout-breakpoint-xs) {
11-
width: 100%;
12-
max-width: $layout-breakpoint-md;
11+
width: $layout-breakpoint-md;
1312
}
1413
}
1514

1615
.l-constrained-md {
17-
max-width: $layout-breakpoint-sm;
16+
width: $layout-breakpoint-sm;
17+
max-width: 100%;
1818
}

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

Lines changed: 76 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,99 +2,109 @@
22

33
// 2. Base
44
.l-main {
5-
background-color: color('body-bg');
5+
background-color: color('body-bg');
66
}
77

88
.l-main--with-toolbar {
9-
margin-top: $wise-toolbar-height;
9+
margin-top: $wise-toolbar-height;
1010
}
1111

1212
#content {
13-
transition: margin-top .5s;
13+
transition: margin-top 0.5s;
1414
}
1515

1616
.view-content {
17-
margin: 0 auto;
18-
padding: 8px;
19-
position: absolute;
20-
left: 0;
21-
right: 0;
22-
transition: opacity 500ms;
23-
24-
@media only screen and (min-width: $layout-breakpoint-sm) {
25-
padding: 16px;
26-
}
27-
28-
&.ng-enter {
29-
opacity: 0;
30-
}
31-
32-
.ng-enter-active {
33-
opacity: 1;
34-
transition-delay: 250ms;
35-
}
36-
37-
&.ng-leave-active, &.ng-hide {
38-
opacity: 0;
39-
}
40-
41-
&.ng-hide-add, &.ng-hide-add-active,
42-
&.ng-hide-remove, &.ng-hide-remove-active {
43-
opacity: 0;
44-
}
17+
margin: 0 auto;
18+
padding: 8px;
19+
position: absolute;
20+
left: 0;
21+
right: 0;
22+
transition: opacity 500ms;
23+
24+
@media only screen and (min-width: $layout-breakpoint-sm) {
25+
padding: 16px;
26+
}
27+
28+
&.ng-enter {
29+
opacity: 0;
30+
}
31+
32+
.ng-enter-active {
33+
opacity: 1;
34+
transition-delay: 250ms;
35+
}
36+
37+
&.ng-leave-active,
38+
&.ng-hide {
39+
opacity: 0;
40+
}
41+
42+
&.ng-hide-add,
43+
&.ng-hide-add-active,
44+
&.ng-hide-remove,
45+
&.ng-hide-remove-active {
46+
opacity: 0;
47+
}
4548
}
4649

4750
.view-content--with-sidemenu {
48-
@media only screen and (min-width: $layout-breakpoint-xs) {
49-
margin-left: 54px;
50-
}
51+
padding: 8px;
52+
53+
@media only screen and (min-width: $layout-breakpoint-xs) {
54+
margin-left: 54px;
55+
padding: 16px;
56+
}
5157
}
52-
[dir=rtl] .view-content--with-sidemenu {
53-
@media only screen and (min-width: $layout-breakpoint-xs) {
54-
margin-left: auto;
55-
margin-right: 54px;
56-
}
58+
[dir='rtl'] .view-content--with-sidemenu {
59+
@media only screen and (min-width: $layout-breakpoint-xs) {
60+
margin-left: auto;
61+
margin-right: 54px;
62+
}
5763
}
5864

5965
.content-head {
60-
margin: 8px 0;
61-
62-
h1, h2, h3 {
63-
font-weight: 300;
64-
margin-top: 0;
65-
margin-bottom: 0;
66-
font-size: rem(3.6);
67-
68-
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
69-
font-size: rem(3.2);
70-
text-align: center;
71-
}
66+
margin: 8px 0;
67+
68+
h1,
69+
h2,
70+
h3 {
71+
font-weight: 300;
72+
margin-top: 0;
73+
margin-bottom: 0;
74+
font-size: rem(3.6);
75+
76+
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
77+
font-size: rem(3.2);
78+
text-align: center;
7279
}
80+
}
7381
}
7482

7583
.content-head__more {
76-
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
77-
margin-top: 8px;
78-
}
84+
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
85+
margin-top: 8px;
86+
}
7987
}
8088

81-
.content-head__item, h2.content-head__item {
82-
margin: 0 8px;
89+
.content-head__item,
90+
h2.content-head__item {
91+
margin: 0 8px;
8392

84-
.md-subhead {
85-
padding-left: 4px;
93+
.md-subhead {
94+
padding-left: 4px;
8695

87-
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
88-
display: block;
89-
padding-left: 0;
90-
}
96+
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
97+
display: block;
98+
padding-left: 0;
9199
}
100+
}
92101

93-
md-icon {
94-
vertical-align: text-bottom;
95-
}
102+
md-icon {
103+
vertical-align: text-bottom;
104+
}
96105
}
97106

98-
.stepSelectMenuContainer md-select-menu, .stepSelectMenuContainer md-select-menu md-content {
107+
.stepSelectMenuContainer md-select-menu,
108+
.stepSelectMenuContainer md-select-menu md-content {
99109
max-height: 500px;
100110
}

0 commit comments

Comments
 (0)