New/Manage Learning Material form revamp #8789

michaelchadwick · 2025-09-04T16:23:31Z

Refs ilios/ilios#4176 ilios/ilios#4300 ilios/ilios#4324 ilios/ilios#5761
Fixes ilios/ilios#5473
Fixes ilios/ilios#5474
Fixes ilios/ilios#6046

Fixes ilios/ilios#6586 (meta ticket)

What This DOES NOT Change

For clarification, this only fixes three issues (and closes the meta ticket I made), but it does refer to others as they were related.

Save / Cancel Buttons Missing on LM >> Instructional Notes ilios#4300 is not addressed, as it would require an actual rewrite of how the form works.
After adding a material transition to the single material managing ilios#4324 is not addressed as the way we handle LM search and creation doesn't make sense to follow through on it.
Consider Better Formatting for Uploading New Learning Material - Course ilios#5761 is not addressed as I decided not to change how the whole thing flows without a consensus on that being the way to go

All other changes were mainly to fix the three issues listed, and do a general space savings. There's more work that can be done, but I wanted to clear out old issues and start fresh from here, if possible.

Select LM Changes

Search results container width matches input
Search input magnifying glass now vertically centered

Manage Form Changes

Removed extra margin and padding around main form to be consistent with rest of page
Removed space around MeSH Manager and Timed Release Schedule
Show something for Timed Release Schedule when there's a start date AND it's in the past
Required boolean added to same row as Display Name and Status
Description and Instructional Notes now on same row
Timed Release section more compact and always on same row regardless of type of LM

New Form Changes

Moved Owner up next to Status to take up less vertical space and make Status dropdown take up less horizontal space
Removed extra spacing around copyright permission notice text
Moved all the "meat" of each LM (the file, the link, the citation) to the same position in the 2-column grid

netlify · 2025-09-04T16:25:30Z

✅ Deploy Preview for ilios-frontend ready!

Name	Link
🔨 Latest commit	`f826049`
🔍 Latest deploy log	https://app.netlify.com/projects/ilios-frontend/deploys/6912476202b1b500086d95a8
😎 Deploy Preview	https://deploy-preview-8789--ilios-frontend.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

dartajax · 2025-09-04T20:03:32Z

I made a cpl of quick space saving and formatting suggestions - no major reformatting ... yet.

Upper part of screen ...

Currently ...

NOTE: slight space saving and no major re-formatting - I thought the "Show Notes to Students" should be on the same horiz area as the Instructional Notes - same with "Required" same line as Display info.

Updated ...

Lower part of screen ...

Currently ...

Updated ...

Blue rectangles show saved space and keep in mind the Start Date and End Date stuff gets stacked up currently making the form even longer and making it farther still be able to save or undo your work.

NOTES:
what did I do? ...

Aligned "Available immediately when published" with the "Timed Release" caption - they were not aligned before.
Start Date and End Date buttons are not the same size and would look better spanning the left and right sides of the screens also saving space especially when those dates are entered - currently they stack all the way down.
I took one line of the search for MeSH captioning out - we'd have to ask if that's acceptable - I just found it redundant.
Removed vertical space wherever possible.

Still no major overhaul. That may still be coming.

michaelchadwick · 2025-09-11T23:34:56Z

In order to know how best to go forward, this needs team discussion for further improvements.

michaelchadwick · 2025-09-16T17:57:52Z

Team discussion: be free with potential revamp. Try using the Session->Offering framework with a <fieldset><legend> direction. Make related fields closer to each other, as well.

stopfstedt

LGTM

stopfstedt · 2025-11-05T21:28:37Z

packages/ilios-common/addon/components/learningmaterial-search.gjs

  });
+
+  resultsAppear = modifier((element) => {
+    element.style.width = `${element.previousElementSibling.clientWidth}px`;


that's cool. also learned about Element.clientWidth.

i noticed that this isn't responsive to screen-resizing, but i think that's acceptable here.

dartajax · 2025-11-07T18:52:47Z

Only two things I could request and even these if they can't happen - well one of them can because it's just a caption change - if approved we can do that - I will start with the caption change - needs approval from @saschaben ...

adjust caption for more accuracy ...

line 'em up ...
this ...

to become this ...

The blue lines are for reference only - too bold and obtrusive anyway.

dartajax

nice work

dartajax · 2025-11-10T19:54:36Z

…not in future

…n session->new LM form

… space between that and the search input

…ms that have 'None' in them

…th based on width of its previousElementSibling (SearchBox)

…down

…ey're both textarea inputs

… each other

…ne up vertically

…less of LM type, which can have variable fields, affecting the grid layout

…of the LM and the upload date are always in the same spot in a 2-column grid layout

…grid and makes description always in the same spot, as well

…me line and not allowing to go full width in container

… and save space

dartajax

it looks better now

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch 3 times, most recently from 015149e to cef2c99 Compare September 11, 2025 15:31

michaelchadwick added the Needs Team Discussion label Sep 11, 2025

michaelchadwick removed the Needs Team Discussion label Sep 26, 2025

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch from cef2c99 to 86c9c56 Compare October 6, 2025 15:16

michaelchadwick mentioned this pull request Oct 9, 2025

Save / Cancel Buttons Missing on LM >> Instructional Notes ilios/ilios#4300

Open

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch 3 times, most recently from dd0f123 to a618694 Compare October 23, 2025 23:38

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch 5 times, most recently from 00b6694 to ea9e04c Compare November 5, 2025 16:20

michaelchadwick marked this pull request as ready for review November 5, 2025 16:23

michaelchadwick requested review from jrjohnson and stopfstedt as code owners November 5, 2025 16:23

stopfstedt approved these changes Nov 5, 2025

View reviewed changes

stopfstedt assigned dartajax Nov 5, 2025

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch 4 times, most recently from af9c233 to 0d25834 Compare November 7, 2025 18:13

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch from 0d25834 to 19758fb Compare November 7, 2025 21:54

dartajax approved these changes Nov 7, 2025

View reviewed changes

dartajax added the run ui tests Run the expensive UI tests label Nov 7, 2025

michaelchadwick added 22 commits November 10, 2025 12:13

remove extra left margin when editing LM

9d28535

removed some spacing around mesh manager and timed release schedule

99d0645

show 'available immediately' message even if start date, but only if …

d9ba4b1

…not in future

remove unnecessary padding around course->new LM form, but maintain o…

754b5d8

…n session->new LM form

added a 'none' result if no mesh terms chosen for LM so that there is…

571cec8

… space between that and the search input

make LMs with no MeSH have an italic 'None' to make distinct from ter…

6c38743

…ms that have 'None' in them

added modifier to LM search results list that dynamically updates wid…

df2fd0d

…th based on width of its previousElementSibling (SearchBox)

vertically centered the magnifying glass icon in the search input

ab921d5

moved Required boolean form field into same grid space as Status drop…

e7aa447

…down

moved description to be in same grid row as instructional notes as th…

b92f4d7

…ey're both textarea inputs

use flexbox so file link, icon, and copy button look more inline with…

e20dc76

… each other

make timed release buttons have a consistent minimum width so they li…

827979d

…ne up vertically

adjust form's time release section to always be on its own row regard…

4e5704a

…less of LM type, which can have variable fields, affecting the grid layout

reorder file/link/citation and upload date sections so that the meat …

c79e819

…of the LM and the upload date are always in the same spot in a 2-column grid layout

move owner section up next to status on new LM form

96fa626

moves meat of new LM (file, link, citation) to same spot in 2-column …

2026a5c

…grid and makes description always in the same spot, as well

removed extra margin around copyright permission notice text

5c71c22

reduced space that timed release takes up but putting date/time on sa…

cff164a

…me line and not allowing to go full width in container

removed doubled form elements due to rebasing

be9bde5

updated MeSH selection title to be more accurate

b5cab65

use css grid to put timed release start/end blocks next to each other…

77a1ece

… and save space

remove extra padding around LM content in course/session

f826049

michaelchadwick force-pushed the frontend-4176-lm-form-revamp branch from 19758fb to f826049 Compare November 10, 2025 20:13

dartajax approved these changes Nov 10, 2025

View reviewed changes

dartajax merged commit 2d88766 into ilios:master Nov 10, 2025
32 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

New/Manage Learning Material form revamp #8789

New/Manage Learning Material form revamp #8789

Uh oh!

michaelchadwick commented Sep 4, 2025 •

edited

Loading

Uh oh!

netlify bot commented Sep 4, 2025 •

edited

Loading

Uh oh!

dartajax commented Sep 4, 2025

Uh oh!

michaelchadwick commented Sep 11, 2025

Uh oh!

michaelchadwick commented Sep 16, 2025

Uh oh!

stopfstedt left a comment

Uh oh!

stopfstedt Nov 5, 2025

Uh oh!

dartajax commented Nov 7, 2025

Uh oh!

dartajax left a comment

Uh oh!

dartajax commented Nov 10, 2025

Uh oh!

dartajax left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

New/Manage Learning Material form revamp #8789

New/Manage Learning Material form revamp #8789

Uh oh!

Conversation

michaelchadwick commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What This DOES NOT Change

Select LM Changes

Manage Form Changes

New Form Changes

Uh oh!

netlify bot commented Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ilios-frontend ready!

Uh oh!

dartajax commented Sep 4, 2025

Uh oh!

michaelchadwick commented Sep 11, 2025

Uh oh!

michaelchadwick commented Sep 16, 2025

Uh oh!

stopfstedt left a comment

Choose a reason for hiding this comment

Uh oh!

stopfstedt Nov 5, 2025

Choose a reason for hiding this comment

Uh oh!

dartajax commented Nov 7, 2025

Uh oh!

dartajax left a comment

Choose a reason for hiding this comment

Uh oh!

dartajax commented Nov 10, 2025

Uh oh!

dartajax left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

michaelchadwick commented Sep 4, 2025 •

edited

Loading

netlify bot commented Sep 4, 2025 •

edited

Loading