Skip to content

Commit 7dfb263

Browse files
breitybreity
committed
Improved some additional layout issues for small screens (mobile); fixed table border style bug
1 parent 714cf48 commit 7dfb263

6 files changed

Lines changed: 99 additions & 93 deletions

File tree

‎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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<div class="view-content--with-sidemenu" ng-if="$ctrl.isGroupNode($ctrl.nodeId)">
22
<div class="l-constrained l-constrained-md nav">
3-
<div class="flex md-subhead" layout="row" layout-align="start center" layout-wrap layout-margin>
3+
<div ng-if="$ctrl.showRubricButton" class="flex md-subhead" layout="row"
4+
layout-align="start center" layout-wrap layout-margin>
45
<span flex></span>
5-
<md-button ng-if="$ctrl.showRubricButton" ng-click="$ctrl.showRubric($event)"
6-
class="info md-raised">
6+
<md-button ng-click="$ctrl.showRubric($event)" class="info md-raised">
77
<md-icon class="info"> info_outline </md-icon>
88
{{ ::'projectInfo' | translate }}
99
</md-button>

‎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/modules/_table.scss‎

Lines changed: 91 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,139 @@
11
.table {
2-
max-width: 100%;
3-
width: auto;
4-
min-width: 100px;
5-
margin: 8px 0;
6-
7-
thead, tbody, tfoot { // TODO: remove chaining when bootstrap dependency is removed
8-
> tr > th,
9-
> tr > td {
10-
border: 1px solid color('gray');
11-
padding: 6px;
12-
font-size: rem(1.5);
13-
min-height: 32px;
14-
height: 32px;
15-
min-width: 32px;
16-
vertical-align: top;
17-
}
2+
max-width: 100%;
3+
width: auto;
4+
min-width: 100px;
5+
margin: 8px 0;
6+
7+
thead,
8+
tbody,
9+
tfoot {
10+
// TODO: remove chaining when bootstrap dependency is removed
11+
> tr > th,
12+
> tr > td {
13+
border: 1px solid color('gray');
14+
padding: 6px;
15+
font-size: rem(1.5);
16+
min-height: 32px;
17+
height: 32px;
18+
min-width: 32px;
19+
vertical-align: top;
1820
}
21+
}
1922

20-
td.inactive, th {
21-
background-color: color('gray-lightest');
22-
opacity: 1;
23-
visibility: visible;
24-
}
23+
td.inactive,
24+
th {
25+
background-color: color('gray-lightest');
26+
opacity: 1;
27+
visibility: visible;
28+
}
2529

26-
md-input-container {
27-
margin: 0;
28-
}
30+
md-input-container {
31+
margin: 0;
32+
}
2933

30-
.md-errors-spacer {
31-
display: none;
32-
}
34+
.md-errors-spacer {
35+
display: none;
36+
}
3337
}
3438

3539
.table--student {
36-
td {
37-
&.inactive {
38-
padding: 8px 10px;
39-
}
40+
td {
41+
&.inactive {
42+
padding: 8px 10px;
4043
}
44+
}
4145
}
4246

4347
.table--full-width {
44-
width: 100%;
48+
width: 100%;
4549
}
4650

4751
.table--list {
52+
border: 0 none;
53+
border-collapse: collapse;
54+
background-color: #ffffff;
55+
max-width: 100%;
56+
overflow: auto;
57+
58+
th,
59+
td {
60+
padding: 0 4px;
4861
border: 0 none;
49-
background-color: #ffffff;
50-
max-width: 100%;
51-
overflow: auto;
52-
53-
th, td {
54-
padding: 0 4px;
55-
border: 0 none;
56-
}
57-
58-
td {
59-
min-height: 56px;
60-
height: 56px;
61-
}
62-
63-
tr {
64-
&.md-button {
65-
display: table-row;
66-
text-align: left;
67-
width: auto;
68-
text-transform: none;
69-
font-size: inherit;
70-
font-weight: normal;
71-
}
62+
}
63+
64+
td {
65+
min-height: 56px;
66+
height: 56px;
67+
}
68+
69+
tr {
70+
&.md-button {
71+
display: table-row;
72+
text-align: left;
73+
width: auto;
74+
text-transform: none;
75+
font-size: inherit;
76+
font-weight: normal;
7277
}
78+
}
7379
}
7480

7581
.table--list__wrap {
76-
min-width: $layout-breakpoint-xs;
82+
min-width: $layout-breakpoint-xs;
7783
}
7884

7985
.table-wrap-sticky {
80-
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
81-
overflow-x: auto;
82-
}
86+
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
87+
overflow-x: auto;
88+
}
8389
}
8490

8591
.table--list__thead {
86-
font-size: rem(1.4);
87-
font-weight: 700;
92+
font-size: rem(1.4);
93+
font-weight: 700;
8894
}
8995

9096
.table--list__thead__tr {
91-
height: 100%;
92-
margin: 0;
97+
height: 100%;
98+
margin: 0;
9399
}
94100

95101
.table--list__thead__th {
96-
background-color: color('gray-darker');
97-
color: color('text-light');
98-
min-height: $wise-toolbar-height;
99-
height: $wise-toolbar-height;
102+
background-color: color('gray-darker');
103+
color: color('text-light');
104+
min-height: $wise-toolbar-height;
105+
height: $wise-toolbar-height;
100106
}
101107

102108
.table--list__thead__link {
103-
color: #ffffff;
104-
text-transform: none;
105-
margin: 0;
106-
min-width: 0;
107-
white-space: normal;
108-
line-height: 1.4;
109-
width: 100%;
109+
color: #ffffff;
110+
text-transform: none;
111+
margin: 0;
112+
min-width: 0;
113+
white-space: normal;
114+
line-height: 1.4;
115+
width: 100%;
110116
}
111117

112118
.table--list__thead__sort {
113-
margin: 0;
119+
margin: 0;
114120
}
115121

116122
.table--list__thead__sort--reverse {
117-
transform: rotate(180deg);
123+
transform: rotate(180deg);
118124
}
119125

120126
.td--wrap {
121-
min-width: 180px;
122-
white-space: normal;
123-
line-height: 1.2;
127+
min-width: 180px;
128+
white-space: normal;
129+
line-height: 1.2;
124130
}
125131

126132
.td--max-width {
127-
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
128-
max-width: 180px;
129-
overflow: hidden;
130-
text-overflow: ellipsis;
131-
white-space: nowrap;
132-
}
133+
@media only screen and (max-width: $layout-breakpoint-sm - 1) {
134+
max-width: 180px;
135+
overflow: hidden;
136+
text-overflow: ellipsis;
137+
white-space: nowrap;
138+
}
133139
}

0 commit comments

Comments
 (0)