Skip to content

Commit 953c23b

Browse files
breitybreity
committed
Fixed column layout for MatchGrading choices bucket. #2940 
1 parent 6030428 commit 953c23b

2 files changed

Lines changed: 61 additions & 54 deletions

File tree

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

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,55 +11,10 @@
1111
</mat-card-title>
1212
</mat-card-header>
1313
<mat-card-content class="match-bucket__content">
14-
<mat-list class="match-bucket__contents">
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>
41-
</mat-list>
42-
</mat-card-content>
43-
</mat-card>
44-
<mat-divider class="match-divider {{isHorizontal ? 'match-divider--horizontal' : ''}}"></mat-divider>
45-
</div>
46-
<div fxLayout="row wrap"
47-
fxLayoutAlign="center start"
48-
fxFlex="100"
49-
fxFlex.gt-sm="{{isHorizontal ? 50 : 100}}">
50-
<div *ngFor="let bucket of targetBuckets; index as bucketIndex"
51-
class="match-bucket"
52-
fxFlex="100"
53-
fxFlex.gt-sm="{{isHorizontal ? 100 : bucketWidth}}">
54-
<mat-card>
55-
<mat-card-header>
56-
<mat-card-title [innerHTML]="bucket.value"
57-
class="primary mat-body-2"></mat-card-title>
58-
</mat-card-header>
59-
<mat-card-content class="match-bucket__content">
60-
<mat-list class="match-bucket__contents">
61-
<mat-list-item class="match-bucket__item__contents"
62-
*ngFor="let item of bucket.items">
14+
<mat-list class="match-bucket__contents columns-2">
15+
<div class="match-bucket__item"
16+
*ngFor="let item of sourceBucket.items">
17+
<mat-list-item class="match-bucket__item__contents">
6318
<p mat-line>
6419
<span class="match-bucket__item__contents__text"
6520
[innerHTML]="item.value">
@@ -83,6 +38,54 @@
8338
</span>
8439
</p>
8540
</mat-list-item>
41+
</div>
42+
</mat-list>
43+
</mat-card-content>
44+
</mat-card>
45+
<mat-divider class="match-divider {{isHorizontal ? 'match-divider--horizontal' : ''}}"></mat-divider>
46+
</div>
47+
<div fxLayout="row wrap"
48+
fxLayoutAlign="center start"
49+
fxFlex="100"
50+
fxFlex.gt-sm="{{isHorizontal ? 50 : 100}}">
51+
<div *ngFor="let bucket of targetBuckets; index as bucketIndex"
52+
class="match-bucket"
53+
fxFlex="100"
54+
fxFlex.gt-sm="{{isHorizontal ? 100 : bucketWidth}}">
55+
<mat-card>
56+
<mat-card-header>
57+
<mat-card-title [innerHTML]="bucket.value"
58+
class="primary mat-body-2"></mat-card-title>
59+
</mat-card-header>
60+
<mat-card-content class="match-bucket__content">
61+
<mat-list class="match-bucket__contents">
62+
<div class="match-bucket__item"
63+
*ngFor="let item of bucket.items">
64+
<mat-list-item class="match-bucket__item__contents">
65+
<p mat-line>
66+
<span class="match-bucket__item__contents__text"
67+
[innerHTML]="item.value">
68+
</span>
69+
</p>
70+
<p class="match-feedback mat-body-2"
71+
*ngIf="item.feedback != null && item.feedback !== ''"
72+
mat-line
73+
[ngClass]="{'success-bg': !hasCorrectAnswer || item.isCorrect, 'info-bg': item.isIncorrectPosition, 'warn-bg': hasCorrectAnswer && !item.isCorrect}"
74+
fxLayoutAlign="start center">
75+
<mat-icon *ngIf="hasCorrectAnswer && item.isCorrect">
76+
check
77+
</mat-icon>
78+
<mat-icon *ngIf="hasCorrectAnswer && item.isIncorrectPosition">
79+
warning
80+
</mat-icon>
81+
<mat-icon *ngIf="hasCorrectAnswer && !item.isCorrect && !item.isIncorrectPosition">
82+
clear
83+
</mat-icon>
84+
<span [innerHTML]="item.feedback">
85+
</span>
86+
</p>
87+
</mat-list-item>
88+
</div>
8689
</mat-list>
8790
</mat-card-content>
8891
</mat-card>

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '~style/abstracts/variables', '~style/abstracts/functions';
2+
13
.match-grading {
24
.mat-card {
35
padding: 0px;
@@ -16,16 +18,12 @@
1618
}
1719

1820
.match-bucket__contents {
19-
padding-top: 8px;
21+
min-height: auto;
2022
}
2123

2224
.mat-list-base {
2325
.mat-list-item {
2426
width: auto;
25-
26-
&:not(:last-child) {
27-
margin-bottom: 8px;
28-
}
2927

3028
.mat-list-item-content {
3129
padding: 0px;
@@ -45,4 +43,10 @@
4543
.mat-list .mat-list-item .mat-line {
4644
white-space: pre-wrap;
4745
}
46+
47+
.columns-2 {
48+
@media (min-width: breakpoint('md.min')) {
49+
column-count: 2;
50+
}
51+
}
4852
}

0 commit comments

Comments
 (0)