Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#12279] Instructor home page: Improve display of card header on mobile #12567

Merged
merged 22 commits into from
Sep 20, 2023
Merged

[#12279] Instructor home page: Improve display of card header on mobile #12567

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
c7d56c3
Update instructor-home-page.component.scss
Mex7180 Aug 24, 2023
8c16a4e
Update instructor-home-page.component.html
Mex7180 Aug 24, 2023
86472d8
Update instructor-home-page.component.scss
Mex7180 Aug 24, 2023
a32e106
Update instructor-home-page.component.html
Mex7180 Aug 24, 2023
b3a56c1
Update instructor-home-page.component.html
Mex7180 Aug 25, 2023
9f7c8ca
Changed card-header to button and tm-panel-chevron inside toolbar wit…
Mex7180 Sep 3, 2023
1b8c89c
Refactor code for lint tests and update snapshots
Mex7180 Sep 3, 2023
6a5b8e4
Merge branch 'master' into #12279-mobile-display-course-card-header
Mex7180 Sep 12, 2023
4f3d128
Change header back to div
Mex7180 Sep 12, 2023
237e68a
Update snapshots
Mex7180 Sep 12, 2023
686b41b
Merge branch '#12279-mobile-display-course-card-header' of https://gi…
Mex7180 Sep 12, 2023
a4c35a2
Update panel-chevron.component.html
Mex7180 Sep 12, 2023
14a91ed
Add type attribute and update snapshots
Mex7180 Sep 12, 2023
55c8acf
Update tests
Mex7180 Sep 12, 2023
47d9966
Resolve axe-tests
Mex7180 Sep 12, 2023
95bc775
Update snapshots
Mex7180 Sep 12, 2023
d22211b
Merge branch 'master' into #12279-mobile-display-course-card-header
Mex7180 Sep 13, 2023
36c7683
Change button styling and aria-label
Mex7180 Sep 14, 2023
601aedc
Change active styling
Mex7180 Sep 14, 2023
fe9ee97
Merge branch 'master' into #12279-mobile-display-course-card-header
Mex7180 Sep 15, 2023
40228a6
tm-rich-text-editor add role and aria-labels
Mex7180 Sep 17, 2023
44c879d
Merge branch 'master' into #12279-mobile-display-course-card-header
Mex7180 Sep 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/web/app/components/panel-chevron/panel-chevron.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="chevron">
<button type="button" class="chevron btn-course btn btn-primary btn-sm" aria-label="Expand panel" [attr.aria-expanded]=isExpanded>
<i class="fas fa-chevron-down" *ngIf="!isExpanded"></i>
<i class="fas fa-chevron-up" *ngIf="isExpanded"></i>
</div>
</button>
8 changes: 7 additions & 1 deletion src/web/app/components/panel-chevron/panel-chevron.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
.chevron {
button.chevron {
display: inline-flex;
vertical-align: middle;
background-color: inherit;
border-width: 0;
}

button.chevron:active {
background-color: inherit;
}
9 changes: 6 additions & 3 deletions ...app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,16 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
class="collapse-caret"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
<div
Expand Down
8 changes: 4 additions & 4 deletions src/web/app/components/question-submission-form/question-submission-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div id="question-submission-form-qn-{{ model.questionNumber }}" class="card">
<button class="card-header bg-primary text-white question-header cursor-pointer border-0" (click)="toggleQuestionTab();"
[ngClass]="isSaved ? 'bg-success' : 'bg-primary'" [attr.aria-expanded]="this.model.isTabExpanded">
<div class="card-header bg-primary text-white question-header cursor-pointer border-0" (click)="toggleQuestionTab();"
[ngClass]="isSaved ? 'bg-success' : 'bg-primary'">
<div class="collapse-caret">
<tm-panel-chevron [isExpanded]="model.isTabExpanded" aria-hidden="true"></tm-panel-chevron>
<tm-panel-chevron [isExpanded]="model.isTabExpanded"></tm-panel-chevron>
</div>
<i class="fas fa-check me-2" *ngIf="isSaved" aria-hidden="true"></i>
<h2 class="question-details"><b>Question {{ model.questionNumber }}: </b>{{ model.questionBrief }}</h2>
</button>
</div>

<div *ngIf="model.isTabExpanded" @collapseAnim>
<div class="card-body" *tmIsLoading="model.isLoading">
Expand Down
2 changes: 1 addition & 1 deletion ...ts/question-types/question-edit-answer-form/text-question-edit-answer-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="plain-text-area" *ngIf="!questionDetails.shouldAllowRichText">
<textarea [ngModel]="responseDetails.answer" (ngModelChange)="triggerResponseDetailsChange('answer', $event)" [attr.aria-label]="getAriaLabel()" [disabled]="isDisabled"></textarea>
</div>
<tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" [attr.aria-label]="getAriaLabel()" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
<tm-rich-text-editor *ngIf="questionDetails.shouldAllowRichText" [richText]="responseDetails.answer" (richTextChange)="triggerResponseDetailsChange('answer', $event)" [isDisabled]="isDisabled"></tm-rich-text-editor>
Mex7180 marked this conversation as resolved.
Show resolved Hide resolved
<div class="margin-top-7px text-secondary text-end">
<div id="recommended-length" *ngIf="questionDetails.recommendedLength">
Recommended length for the answer: {{ questionDetails.recommendedLength }} words
Expand Down
72 changes: 48 additions & 24 deletions ...ents/user-notifications-list/__snapshots__/user-notifications-list.component.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,16 @@ exports[`UserNotificationsListComponent should snap when all loaded notification
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="false"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-down"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand All @@ -109,13 +112,16 @@ exports[`UserNotificationsListComponent should snap when all loaded notification
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="false"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-down"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -253,13 +259,16 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -307,13 +316,16 @@ exports[`UserNotificationsListComponent should snap when it loads the provided n
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -430,13 +442,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -484,13 +499,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -607,13 +625,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -661,13 +682,16 @@ exports[`UserNotificationsListComponent should snap when it sorts the notificati
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down
45 changes: 30 additions & 15 deletions ...rses-modal/__snapshots__/copy-instructors-from-other-courses-modal.component.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,13 +81,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when feedback
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -218,13 +221,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when instruct
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -478,13 +484,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap when instruct
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="true"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-up"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down Expand Up @@ -612,13 +621,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap with courses
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="false"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-down"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand All @@ -640,13 +652,16 @@ exports[`CopyInstructorsFromOtherCoursesModalComponent should snap with courses
class="card-header-btn-toolbar"
>
<tm-panel-chevron>
<div
class="chevron"
<button
aria-expanded="false"
aria-label="Expand panel"
class="chevron btn-course btn btn-primary btn-sm"
type="button"
>
<i
class="fas fa-chevron-down"
/>
</div>
</button>
</tm-panel-chevron>
</div>
</div>
Expand Down
Loading
Loading