Skip to content

Extract Mixin for Ilios Overview #9212

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

Draft
jrjohnson wants to merge 2 commits into
base: master
Choose a base branch
from
+157 −204
Draft

Extract Mixin for Ilios Overview #9212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bcc739b
Extract Mixin for Ilios Overview
jrjohnson Mar 6, 2026
8f921ff
Use Page Selector to Find Titles
jrjohnson Mar 6, 2026
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
12 changes: 6 additions & 6 deletions packages/frontend/app/components/learner-group/root.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,8 +487,8 @@ export default class LearnerGroupRootComponent extends Component {
@sortUsersBy={{this.sortUsersBy}}
@canUpdate={{@canUpdate}}
/>
<section class="learner-group-overview" data-test-overview>
<div class="block" data-test-needs-accommodation>
<section class="ilios-overview learner-group-overview" data-test-overview>
<div class="overview-block" data-test-needs-accommodation>
<label>{{t "general.accommodationIsRequiredForLearnersInThisGroup"}}:</label>
<span>
{{#if @canUpdate}}
Expand All @@ -505,7 +505,7 @@ export default class LearnerGroupRootComponent extends Component {
{{/if}}
</span>
</div>
<div class="block defaultlocation" data-test-location>
<div class="overview-block" data-test-location>
<label for="location-{{templateId}}">
{{t "general.defaultLocation"}}:
</label>
Expand Down Expand Up @@ -538,7 +538,7 @@ export default class LearnerGroupRootComponent extends Component {
{{/if}}
</span>
</div>
<div class="block defaulturl" data-test-url>
<div class="overview-block defaulturl" data-test-url>
<label for="link-{{templateId}}">
{{t "general.defaultVirtualLearningLink"}}:
</label>
Expand Down Expand Up @@ -661,7 +661,7 @@ export default class LearnerGroupRootComponent extends Component {
@done={{fn @setIsBulkAssigning false}}
/>
{{else if @isEditing}}
<div class="learner-group-overview-content">
<div class="overview-content">
<UserManager
@filter={{this.filter}}
@learnerGroupId={{this.learnerGroupId}}
Expand All @@ -681,7 +681,7 @@ export default class LearnerGroupRootComponent extends Component {
{{#if @showCalendar}}
<Calendar @learnerGroup={{@learnerGroup}} />
{{/if}}
<div class="learner-group-overview-content">
<div class="overview-content">
<Members
@filter={{this.filter}}
@learnerGroupId={{this.learnerGroupId}}
Expand Down
8 changes: 4 additions & 4 deletions packages/frontend/app/components/program-year/overview.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { LinkTo } from '@ember/routing';
import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
import { faChartColumn } from '@fortawesome/free-solid-svg-icons';
<template>
<div class="programyear-overview" data-test-program-year-overview ...attributes>
<div class="programyear-overview-header">
<h4 data-test-title>
<div class="ilios-overview programyear-overview" data-test-program-year-overview ...attributes>
<div class="overview-header">
<h4 class="overview-title" data-test-title>
{{t "general.overview"}}
</h4>
<div class="programyear-overview-actions" data-test-actions>
<div class="overview-actions" data-test-actions>
<LinkTo
@route="program-year-visualize-objectives"
@model={{@programYear}}
Expand Down
16 changes: 9 additions & 7 deletions packages/frontend/app/components/program/overview.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,14 @@ export default class ProgramOverviewComponent extends Component {
this.duration = Number(ev.target.value);
}
<template>
<div class="program-overview" data-test-program-overview ...attributes>
<h2>
{{t "general.overview"}}
</h2>
<div class="program-overview-content">
<div class="block programtitleshort" data-test-short-title>
<div class="ilios-overview" data-test-program-overview ...attributes>
<div class="overview-header">
<h2 class="overview-title">
{{t "general.overview"}}
</h2>
</div>
<div class="overview-content">
<div class="overview-block" data-test-short-title>
<label for={{concat this.id "short-title"}}>
{{t "general.programTitleShort"}}:
</label>
Expand Down Expand Up @@ -101,7 +103,7 @@ export default class ProgramOverviewComponent extends Component {
{{/if}}
</span>
</div>
<div class="block programduration" data-test-duration>
<div class="overview-block" data-test-duration>
<label for={{concat this.id "duration"}}>
{{t "general.durationInYears"}}:
</label>
Expand Down
1 change: 1 addition & 0 deletions packages/frontend/app/styles/components/learner-group/members.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@include m.detail-container(var(--blue));
border-bottom: 0;
display: grid;
grid-column: 1 / -1;
grid-template-columns: 3fr 1fr;
padding: 0;

Expand Down
17 changes: 1 addition & 16 deletions packages/frontend/app/styles/components/learner-group/root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,10 @@

.learner-group-root {
.learner-group-overview {
@include m.ilios-overview(var(--orange));
padding: 0;

.block {
@include m.ilios-overview-block;

&.defaulturl {
padding-bottom: 0.5rem;
}
}

.learner-group-overview-actions {
padding: 0.5rem 0;
@include m.detail-container-header;

@include m.detail-container-header;
.title {
@include m.detail-container-title;
}
Expand All @@ -39,10 +28,6 @@
}
}
}

.learner-group-overview-content {
border-bottom: 1px dotted var(--orange);
}
}

.cohortmembers {
Expand Down
17 changes: 3 additions & 14 deletions packages/frontend/app/styles/components/program-overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,9 @@
@use "../ilios-common/mixins" as m;

.program-overview {
@include m.ilios-overview(var(--lightest-grey));
border-bottom: 1px dotted var(--lightest-grey);

h2 {
margin-top: 0.5rem;
@include m.ilios-overview-title;
}

.program-overview-content {
@include m.ilios-overview-content {
padding-top: 0.5rem;
}

.block {
@include m.ilios-overview-block;
}
.overview-content {
padding-top: 0.5rem;
}
}
20 changes: 4 additions & 16 deletions packages/frontend/app/styles/components/programyear-overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,16 @@
@use "../ilios-common/mixins" as m;
@use "../ilios-common/constants";

.programyear-overview {
@include m.ilios-overview(var(--orange));
background: var(--white);
border-top: 1px dotted var(--orange);
border-bottom: 0;
margin: 0 0.5rem;
padding: 0 0 1rem 0;

.programyear-overview-header {
@include m.ilios-overview-header;

h4 {
@include m.ilios-overview-title;
}

.programyear-overview-actions {
@include m.ilios-overview-actions;

a {
color: var(--light-blue);
@include m.font-size("medium");
}
.actions {
a {
color: var(--light-blue);
@include m.font-size("medium");
}
}
}
2 changes: 1 addition & 1 deletion ...es/ilios-common/addon-test-support/ilios-common/page-objects/components/course/details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import detailCohorts from './../detail-cohorts';
export default create({
scope: '[data-test-ilios-course-details]',
collapseControl: clickable('[data-test-expand-course-details]'),
titles: count('.title'),
titles: count('[data-test-title]'),
header,
overview,
leadershipCollapsed,
Expand Down
22 changes: 11 additions & 11 deletions packages/ilios-common/addon/components/course/loading.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,30 @@ import { faSquarePlus } from '@fortawesome/free-solid-svg-icons';
<div class="header">
<span class="title loading-text">&nbsp;</span>
</div>
<div class="overview">
<div class="course-overview-header">
<div class="title loading-text">
<div class="ilios-overview">
<div class="overview-header">
<div class="overview-title loading-text">
{{t "general.overview"}}
</div>
<div class="course-overview-actions"></div>
<div class="overview-actions"></div>
</div>
<div class="course-overview-content">
<div class="block">
<div class="overview-content">
<div class="overview-block">
<label>{{t "general.externalId"}}:</label>
</div>
<div class="block">
<div class="overview-block">
<label>{{t "general.clerkshipType"}}:</label>
</div>
<div class="block">
<div class="overview-block">
<label>{{t "general.start"}}:</label>
</div>
<div class="block">
<div class="overview-block">
<label>{{t "general.end"}}:</label>
</div>
<div class="block">
<div class="overview-block">
<label>{{t "general.level"}}:</label>
</div>
<div class="block">
<div class="overview-block">
<label>{{t "general.universalLocator"}}:</label>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions packages/ilios-common/addon/components/course/overview.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,13 +234,13 @@ export default class CourseOverview extends Component {
this.level = this.args.course.level;
}
<template>
<section class="course-overview" data-test-course-overview>
<section class="ilios-overview" data-test-course-overview>
{{#let (uniqueId) as |templateId|}}
<div class="course-overview-header">
<div class="title">
<div class="overview-header">
<div class="overview-title" data-test-title>
{{t "general.overview"}}
</div>
<div class="course-overview-actions">
<div class="overview-actions">
<LinkTo
@route="course-materials"
@model={{@course}}
Expand Down Expand Up @@ -277,8 +277,8 @@ export default class CourseOverview extends Component {
</LinkTo>
</div>
</div>
<div class="course-overview-content">
<div class="block courseexternalid">
<div class="overview-content">
<div class="overview-block courseexternalid">
<label for="external-id-{{templateId}}">{{t "general.externalId"}}:</label>
<span>
{{#if @editable}}
Expand Down Expand Up @@ -308,7 +308,7 @@ export default class CourseOverview extends Component {
{{/if}}
</span>
</div>
<div class="block clerkshiptype">
<div class="overview-block clerkshiptype">
<label for="clerkship-type-{{templateId}}">{{t "general.clerkshipType"}}:</label>
<span>
{{#if @editable}}
Expand Down Expand Up @@ -342,7 +342,7 @@ export default class CourseOverview extends Component {
{{/if}}
</span>
</div>
<div class="block coursestartdate">
<div class="overview-block coursestartdate">
<label>{{t "general.startDate"}}:</label>
<span>
{{#if @editable}}
Expand Down Expand Up @@ -374,7 +374,7 @@ export default class CourseOverview extends Component {
{{/if}}
</span>
</div>
<div class="block courseenddate">
<div class="overview-block courseenddate">
<label>{{t "general.endDate"}}:</label>
<span>
{{#if @editable}}
Expand All @@ -401,7 +401,7 @@ export default class CourseOverview extends Component {
{{/if}}
</span>
</div>
<div class="block courselevel">
<div class="overview-block courselevel">
<label for="level-{{templateId}}">{{t "general.level"}}:</label>
<span>
{{#if @editable}}
Expand All @@ -423,7 +423,7 @@ export default class CourseOverview extends Component {
{{/if}}
</span>
</div>
<div class="block">
<div class="overview-block">
<label>{{t "general.universalLocator"}}:</label>
<span class="universallocator">
<strong>
Expand Down
20 changes: 10 additions & 10 deletions packages/ilios-common/addon/components/course/summary-header.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,12 @@ export default class CourseSummaryHeaderComponent extends Component {
return this.permissionChecker.canCreateCourse(school);
}
<template>
<div class="course-summary-header" data-test-course-summary-header ...attributes>
<div class="course-summary-header-top">
<h2 data-test-title>
<div class="ilios-overview course-summary-header" data-test-course-summary-header ...attributes>
<div class="overview-header">
<h2 class="overview-title" data-test-title>
{{@course.title}}
</h2>
<div class="course-summary-actions" data-test-actions>
<div class="overview-actions" data-test-actions>
<LinkTo
@route="print-course"
@model={{@course}}
Expand All @@ -56,40 +56,40 @@ export default class CourseSummaryHeaderComponent extends Component {
{{/if}}
</div>
</div>
<div class="course-summary-content">
<div class="block" data-test-start>
<div class="overview-content">
<div class="overview-block" data-test-start>
<label>
{{t "general.startDate"}}:
</label>
<span>
{{formatDate @course.startDate day="2-digit" month="2-digit" year="numeric"}}
</span>
</div>
<div class="block" data-test-external-id>
<div class="overview-block" data-test-external-id>
<label>
{{t "general.externalId"}}:
</label>
<span>
{{@course.externalId}}
</span>
</div>
<div class="block" data-test-end>
<div class="overview-block" data-test-end>
<label>
{{t "general.endDate"}}:
</label>
<span>
{{formatDate @course.endDate day="2-digit" month="2-digit" year="numeric"}}
</span>
</div>
<div class="block" data-test-level>
<div class="overview-block" data-test-level>
<label>
{{t "general.level"}}:
</label>
<span>
{{@course.level}}
</span>
</div>
<div class="block" data-test-status>
<div class="overview-block" data-test-status>
<label>
{{t "general.publicationStatus"}}:
</label>
Expand Down
Loading
Loading