moved learners to same column as learner groups and changed column header; only show learners if exist

Author: michaelchadwick

packages/ilios-common/addon/components/offering-manager.gjs

@@ -157,62 +157,66 @@ export default class OfferingManagerComponent extends Component {
             @scrollToBottom={{false}}
           />
         {{else}}
-          <div class="offering-manager-learners">
-            <FadeText
-              @text={{this.sortedIndividualLearners}}
-              @forceExpanded={{@fadeTextExpanded}}
-              @setExpanded={{@setFadeTextExpanded}}
-              as |ft|
-            >
-              {{#if this.individualLearners.length}}
-                <strong>({{this.individualLearners.length}})</strong>
-              {{/if}}
-              {{ft.text}}
-              {{ft.controls}}
-            </FadeText>
-          </div>
-          <div class="offering-manager-learner-groups">
-            <ul>
-              {{#each this.sortedLearnerGroups as |learnerGroup|}}
-                <li
-                  {{this.setLearnerGroupElement learnerGroup.id}}
-                  {{mouseHoverToggle (fn this.toggleHover learnerGroup.id)}}
+          <div class="offering-manager-learners-and-learner-groups">
+            {{#if this.sortedIndividualLearners.length}}
+              <div class="offering-manager-learners">
+                <FadeText
+                  @text={{this.sortedIndividualLearners}}
+                  @forceExpanded={{@fadeTextExpanded}}
+                  @setExpanded={{@setFadeTextExpanded}}
+                  as |ft|
                 >
-                  {{learnerGroup.title}}
-                  {{#if learnerGroup.needsAccommodation}}
-                    <FaIcon
-                      @icon="universal-access"
-                      @title={{t "general.accommodationIsRequiredForLearnersInThisGroup"}}
-                    />
+                  {{#if this.individualLearners.length}}
+                    <strong>({{this.individualLearners.length}})</strong>
                   {{/if}}
-                  {{#unless learnerGroup.isTopLevelGroup}}
-                    {{#if
-                      (and
-                        (get this (concat "learnerGroupElement" learnerGroup.id))
-                        (includes learnerGroup.id this.hoveredGroups)
-                      )
-                    }}
-                      <IliosTooltip
-                        @target={{get this (concat "learnerGroupElement" learnerGroup.id)}}
-                      >
-                        <strong>
-                          {{if
-                            (eq learnerGroup.allParents.length 1)
-                            (t "general.parentGroup")
-                            (t "general.parentGroups")
-                          }}:
-                        </strong>
-                        {{join " » " (reverse (mapBy0 "title" learnerGroup.allParents))}}
-                      </IliosTooltip>
+                  {{ft.text}}
+                  {{ft.controls}}
+                </FadeText>
+              </div>
+            {{/if}}
+            <div class="offering-manager-learner-groups">
+              <ul>
+                {{#each this.sortedLearnerGroups as |learnerGroup|}}
+                  <li
+                    {{this.setLearnerGroupElement learnerGroup.id}}
+                    {{mouseHoverToggle (fn this.toggleHover learnerGroup.id)}}
+                  >
+                    {{learnerGroup.title}}
+                    {{#if learnerGroup.needsAccommodation}}
+                      <FaIcon
+                        @icon="universal-access"
+                        @title={{t "general.accommodationIsRequiredForLearnersInThisGroup"}}
+                      />
                     {{/if}}
-                  {{/unless}}
-                </li>
-              {{else}}
-                <li>
-                  <FaIcon @icon="users" />
-                </li>
-              {{/each}}
-            </ul>
+                    {{#unless learnerGroup.isTopLevelGroup}}
+                      {{#if
+                        (and
+                          (get this (concat "learnerGroupElement" learnerGroup.id))
+                          (includes learnerGroup.id this.hoveredGroups)
+                        )
+                      }}
+                        <IliosTooltip
+                          @target={{get this (concat "learnerGroupElement" learnerGroup.id)}}
+                        >
+                          <strong>
+                            {{if
+                              (eq learnerGroup.allParents.length 1)
+                              (t "general.parentGroup")
+                              (t "general.parentGroups")
+                            }}:
+                          </strong>
+                          {{join " » " (reverse (mapBy0 "title" learnerGroup.allParents))}}
+                        </IliosTooltip>
+                      {{/if}}
+                    {{/unless}}
+                  </li>
+                {{else}}
+                  <li>
+                    <FaIcon @icon="users" />
+                  </li>
+                {{/each}}
+              </ul>
+            </div>
           </div>
           <div class="offering-manager-location">
             <TruncateText @text={{@offering.room}} @length={{10}} data-test-location />

packages/ilios-common/addon/components/session-offerings.gjs

@@ -58,10 +58,7 @@ export default class SessionOfferingsComponent extends Component {
               {{t "general.dateTime"}}
             </div>
             <div>
-              {{t "general.individualLearners"}}
-            </div>
-            <div>
-              {{t "general.learnerGroups"}}
+              {{t "general.learnersAndLearnerGroups"}}
             </div>
             <div>
               {{t "general.location"}}

packages/ilios-common/app/styles/ilios-common/components/offering-manager.scss

@@ -3,12 +3,12 @@
 .offering-manager {
   @include m.font-size("small");
   display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(3, 2fr) 1fr;
   margin-bottom: 0.5rem;
   padding-bottom: 0.5rem;
 
   .offering-manager-learners {
-    padding-right: 1rem;
+    padding: 0 1rem 1rem 0;
   }
 
   .offering-manager-learner-groups {

packages/ilios-common/app/styles/ilios-common/components/session-offerings-list.scss

@@ -5,7 +5,7 @@
 
   .offering-block {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: 1.5fr repeat(3, 2fr) 1fr;
     margin-top: 1rem;
 
     .offering-form {
@@ -32,7 +32,7 @@
       border-bottom: 1px dotted var(--grey);
       display: grid;
       grid-column: 1 / -1;
-      grid-template-columns: repeat(6, 1fr);
+      grid-template-columns: 1.5fr repeat(3, 2fr) 1fr;
       margin-top: 1rem;
 
       .offering-block-time-time {

packages/ilios-common/app/styles/ilios-common/components/session-offerings.scss

@@ -27,7 +27,7 @@
     background-color: var(--lightest-grey);
     display: grid;
     font-weight: 600;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: 1.5fr repeat(3, 2fr) 1fr;
 
     div {
       background-color: var(--blue);

packages/ilios-common/translations/en-us.yaml

@@ -190,7 +190,6 @@ general:
       superscript: Superscript
       undo: Undo (⌘Z)
   icsInstructions: "To add your Ilios calendar to another application or service, use this URL.  This URL is like a password. Anyone who knows it can view your calendar!"
-  individualLearners: Individual Learners
   ilios: Ilios
   iliosUserGuide: Ilios User Guide
   ilm: ILM

packages/ilios-common/translations/es.yaml

@@ -190,7 +190,6 @@ general:
       superscript: Sobrescrita
       undo: Deshacer (⌘Z)
   icsInstructions: "Para agregar tu calendario a otra aplicación o servicio, utiliza esta URL.  Esta URL es como una contraseña.  ¡Cualquiera persona que la sepa puede ver tu calendario!"
-  individualLearners: Aprendedores Individuales
   ilios: Ilios
   iliosUserGuide: Ilios Guía de usuario
   ilm: ILM

packages/ilios-common/translations/fr.yaml

@@ -191,7 +191,6 @@ general:
       superscript: Exposante
       undo: Annuler (⌘Z)
   icsInstructions: "Pour ajouter votre calendrier à des services ou applications autre, utilisez cette URL. Cette URL comme un mot de passe. Toutes les personnes qui le connaissent pouvez voir votre calendrier!"
-  individualLearners: Étudiants Individuels
   ilios: Ilios
   iliosUserGuide: Ilios Guide d'utilisation
   ilm: ILM