Skip to content

Commit 6030428

Browse files
breitybreity
committed
Updated MatchGrading styles; removed ::ng-deep and !important from component css. #2940 
1 parent f97e0e1 commit 6030428

3 files changed

Lines changed: 102 additions & 89 deletions

File tree

‎src/main/webapp/wise5/components/match/match-grading/match-grading.component.html‎

Lines changed: 57 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
<div class="component--grading__response__content">
1+
<div class="component--grading__response__content match-grading">
22
<div class="match-content">
33
<div fxLayout="row wrap">
44
<div class="match-bucket match-bucket--choices"
55
fxFlex="100"
66
fxFlex.gt-sm="{{isHorizontal ? 50: 100}}">
77
<mat-card>
88
<mat-card-header>
9-
<mat-card-title [innerHTML]="sourceBucket.value">
9+
<mat-card-title [innerHTML]="sourceBucket.value"
10+
class="primary mat-body-2">
1011
</mat-card-title>
1112
</mat-card-header>
1213
<mat-card-content class="match-bucket__content">
1314
<mat-list class="match-bucket__contents">
14-
<div class="match-bucket__item"
15-
*ngFor="let item of sourceBucket.items">
16-
<mat-list-item class="match-bucket__item__contents">
17-
<div class="md-list-item-text">
18-
<div fxLayout="row"
19-
fxLayoutAlign="start center"
20-
mat-line>
21-
<span class="match-bucket__item__contents__text"
22-
[innerHTML]="item.value">
23-
</span>
24-
</div>
25-
<p class="match-feedback md-body-2"
26-
mat-line
27-
*ngIf="item.feedback != null && item.feedback !== ''"
28-
[ngClass]="{'success-bg': !hasCorrectAnswer || item.isCorrect, 'info-bg': item.isIncorrectPosition, 'warn-bg': hasCorrectAnswer && !item.isCorrect}">
29-
<mat-icon *ngIf="hasCorrectAnswer && item.isCorrect">
30-
check
31-
</mat-icon>
32-
<mat-icon *ngIf="hasCorrectAnswer && item.isIncorrectPosition">
33-
warning
34-
</mat-icon>
35-
<mat-icon *ngIf="hasCorrectAnswer && !item.isCorrect && !item.isIncorrectPosition">
36-
clear
37-
</mat-icon>
38-
<span [innerHTML]="item.feedback">
39-
</span>
40-
</p>
41-
</div>
42-
</mat-list-item>
43-
</div>
15+
<mat-list-item class="match-bucket__item__contents"
16+
*ngFor="let item of sourceBucket.items"
17+
fxFlex.gt-sm="{{isHorizontal ? 100 : 50}}">
18+
<p mat-line>
19+
<span class="match-bucket__item__contents__text"
20+
[innerHTML]="item.value">
21+
</span>
22+
</p>
23+
<p class="match-feedback mat-body-2"
24+
*ngIf="item.feedback != null && item.feedback !== ''"
25+
mat-line
26+
[ngClass]="{'success-bg': !hasCorrectAnswer || item.isCorrect, 'info-bg': item.isIncorrectPosition, 'warn-bg': hasCorrectAnswer && !item.isCorrect}"
27+
fxLayoutAlign="start center">
28+
<mat-icon *ngIf="hasCorrectAnswer && item.isCorrect">
29+
check
30+
</mat-icon>
31+
<mat-icon *ngIf="hasCorrectAnswer && item.isIncorrectPosition">
32+
warning
33+
</mat-icon>
34+
<mat-icon *ngIf="hasCorrectAnswer && !item.isCorrect && !item.isIncorrectPosition">
35+
clear
36+
</mat-icon>
37+
<span [innerHTML]="item.feedback">
38+
</span>
39+
</p>
40+
</mat-list-item>
4441
</mat-list>
4542
</mat-card-content>
4643
</mat-card>
@@ -56,40 +53,36 @@
5653
fxFlex.gt-sm="{{isHorizontal ? 100 : bucketWidth}}">
5754
<mat-card>
5855
<mat-card-header>
59-
<mat-card-title [innerHTML]="bucket.value"></mat-card-title>
56+
<mat-card-title [innerHTML]="bucket.value"
57+
class="primary mat-body-2"></mat-card-title>
6058
</mat-card-header>
6159
<mat-card-content class="match-bucket__content">
6260
<mat-list class="match-bucket__contents">
63-
<div class="match-bucket__item"
61+
<mat-list-item class="match-bucket__item__contents"
6462
*ngFor="let item of bucket.items">
65-
<mat-list-item class="match-bucket__item__contents">
66-
<div class="md-list-item-text">
67-
<div fxLayout="row"
68-
fxLayoutAlign="start center"
69-
mat-line>
70-
<span class="match-bucket__item__contents__text"
71-
[innerHTML]="item.value">
72-
</span>
73-
</div>
74-
<p class="match-feedback md-body-2"
75-
*ngIf="item.feedback != null && item.feedback !== ''"
76-
mat-line
77-
[ngClass]="{'success-bg': !hasCorrectAnswer || item.isCorrect, 'info-bg': item.isIncorrectPosition, 'warn-bg': hasCorrectAnswer && !item.isCorrect}">
78-
<mat-icon *ngIf="hasCorrectAnswer && item.isCorrect">
79-
check
80-
</mat-icon>
81-
<mat-icon *ngIf="hasCorrectAnswer && item.isIncorrectPosition">
82-
warning
83-
</mat-icon>
84-
<mat-icon *ngIf="hasCorrectAnswer && !item.isCorrect && !item.isIncorrectPosition">
85-
clear
86-
</mat-icon>
87-
<span [innerHTML]="item.feedback">
88-
</span>
89-
</p>
90-
</div>
91-
</mat-list-item>
92-
</div>
63+
<p mat-line>
64+
<span class="match-bucket__item__contents__text"
65+
[innerHTML]="item.value">
66+
</span>
67+
</p>
68+
<p class="match-feedback mat-body-2"
69+
*ngIf="item.feedback != null && item.feedback !== ''"
70+
mat-line
71+
[ngClass]="{'success-bg': !hasCorrectAnswer || item.isCorrect, 'info-bg': item.isIncorrectPosition, 'warn-bg': hasCorrectAnswer && !item.isCorrect}"
72+
fxLayoutAlign="start center">
73+
<mat-icon *ngIf="hasCorrectAnswer && item.isCorrect">
74+
check
75+
</mat-icon>
76+
<mat-icon *ngIf="hasCorrectAnswer && item.isIncorrectPosition">
77+
warning
78+
</mat-icon>
79+
<mat-icon *ngIf="hasCorrectAnswer && !item.isCorrect && !item.isIncorrectPosition">
80+
clear
81+
</mat-icon>
82+
<span [innerHTML]="item.feedback">
83+
</span>
84+
</p>
85+
</mat-list-item>
9386
</mat-list>
9487
</mat-card-content>
9588
</mat-card>
@@ -104,12 +97,12 @@
10497
You have used {{componentState.studentData.submitCounter}} of {{componentContent.maxSubmitCount}} attempt(s)
10598
</div>
10699
<div *ngIf="hasCorrectAnswer && componentState.studentData.isCorrect === true"
107-
style="color: green"
100+
class="success"
108101
i18n>
109102
Correct
110103
</div>
111104
<div *ngIf="hasCorrectAnswer && componentState.studentData.isCorrect === false"
112-
style="color: red"
105+
class="warn"
113106
i18n>
114107
Incorrect
115108
</div>

‎src/main/webapp/wise5/components/match/match-grading/match-grading.component.scss‎

Lines changed: 42 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,48 @@
1-
.mat-card {
2-
padding: 0px;
3-
margin: 8px;
4-
}
1+
.match-grading {
2+
.mat-card {
3+
padding: 0px;
4+
margin: 8px;
5+
}
56

6-
.mat-card-title {
7-
font-size: 15px;
8-
font-weight: 500;
9-
color: #1c8ca8;
10-
margin-top: 8px;
11-
margin-bottom: 8px !important;
12-
}
7+
.mat-card-header {
8+
.mat-card-title {
9+
margin-top: 8px;
10+
margin-bottom: 8px;
11+
}
12+
}
1313

14-
.match-bucket__item {
15-
cursor: auto !important;
16-
}
14+
.match-bucket__item {
15+
cursor: auto;
16+
}
1717

18-
.mat-list-item {
19-
width: 90% !important;
20-
height: 100% !important;
21-
}
18+
.match-bucket__contents {
19+
padding-top: 8px;
20+
}
2221

23-
::ng-deep .mat-list-item-content {
24-
padding: 0px !important;
25-
}
22+
.mat-list-base {
23+
.mat-list-item {
24+
width: auto;
25+
26+
&:not(:last-child) {
27+
margin-bottom: 8px;
28+
}
29+
30+
.mat-list-item-content {
31+
padding: 0px;
32+
}
33+
}
34+
35+
.mat-list-item.mat-2-line {
36+
height: auto;
37+
}
38+
39+
.mat-line.match-feedback {
40+
margin-top: 0.5rem;
41+
padding: 4px;
42+
}
43+
}
2644

27-
::ng-deep .mat-list .mat-list-item .mat-line {
28-
white-space: pre-wrap;
45+
.mat-list .mat-list-item .mat-line {
46+
white-space: pre-wrap;
47+
}
2948
}

‎src/main/webapp/wise5/components/match/match-grading/match-grading.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ViewEncapsulation } from '@angular/core';
22
import { ComponentGrading } from '../../../classroomMonitor/classroomMonitorComponents/shared/component-grading.component';
33

44
@Component({
55
selector: 'match-grading',
66
templateUrl: 'match-grading.component.html',
7-
styleUrls: ['match-grading.component.scss']
7+
styleUrls: ['match-grading.component.scss'],
8+
encapsulation: ViewEncapsulation.None
89
})
910
export class MatchGrading extends ComponentGrading {
1011
sourceBucketId = '0';

0 commit comments

Comments
 (0)