Merge pull request #8020 from michaelchadwick/frontend-5605-mobile-ca…

…l-style-fixes fixes some mobile style issues with Calendar route
ilios · Jul 30, 2024 · bdb9d20 · bdb9d20
2 parents 7172d41 + 442c5cd
commit bdb9d20
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 29 deletions.
diff --git a/packages/ilios-common/addon/components/ilios-calendar.hbs b/packages/ilios-common/addon/components/ilios-calendar.hbs
@@ -1,32 +1,34 @@
 <div class="ilios-calendar" data-test-ilios-calendar>
-  <ul class="inline calendar-view-picker">
-    {{#each (array "day" "week" "month") as |viewType|}}
-      <li data-test-view-mode>
-        {{#if (eq @selectedView viewType)}}
-          {{t (concat "general." viewType)}}
-        {{else}}
-          <LinkTo @route="dashboard.calendar" @query={{hash view=viewType}}>{{t (concat "general." viewType)}}</LinkTo>
-        {{/if}}
+  <div class="ilios-calendar-pickers">
+    <ul class="inline calendar-time-picker">
+      <li>
+        <LinkTo @route="dashboard.calendar" @query={{hash date=this.backDate}} data-test-go-back>
+          <FaIcon @title={{t "general.back"}} @icon="backward" />
+        </LinkTo>
       </li>
-    {{/each}}
-  </ul>
-  <ul class="inline calendar-time-picker">
-    <li>
-      <LinkTo @route="dashboard.calendar" @query={{hash date=this.backDate}} data-test-go-back>
-        <FaIcon @title={{t "general.back"}} @icon="backward" />
-      </LinkTo>
-    </li>
-    <li>
-      <LinkTo @route="dashboard.calendar" @query={{hash date=this.todayDate}} data-test-go-to-today>
-        {{t "general.today"}}
-      </LinkTo>
-    </li>
-    <li>
-      <LinkTo @route="dashboard.calendar" @query={{hash date=this.forwardDate}} data-test-go-forward>
-        <FaIcon @title={{t "general.forward"}} @icon="forward" />
-      </LinkTo>
-    </li>
-  </ul>
+      <li>
+        <LinkTo @route="dashboard.calendar" @query={{hash date=this.todayDate}} data-test-go-to-today>
+          {{t "general.today"}}
+        </LinkTo>
+      </li>
+      <li>
+        <LinkTo @route="dashboard.calendar" @query={{hash date=this.forwardDate}} data-test-go-forward>
+          <FaIcon @title={{t "general.forward"}} @icon="forward" />
+        </LinkTo>
+      </li>
+    </ul>
+    <ul class="inline calendar-view-picker">
+      {{#each (array "day" "week" "month") as |viewType|}}
+        <li data-test-view-mode>
+          {{#if (eq @selectedView viewType)}}
+            {{t (concat "general." viewType)}}
+          {{else}}
+            <LinkTo @route="dashboard.calendar" @query={{hash view=viewType}}>{{t (concat "general." viewType)}}</LinkTo>
+          {{/if}}
+        </li>
+      {{/each}}
+    </ul>
+  </div>
   <div class="ilios-calendar-calendar">
     <this.calendarViewComponent
       @isLoadingEvents={{@isLoadingEvents}}

diff --git a/packages/ilios-common/app/styles/ilios-common/components/dashboard/calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/dashboard/calendar.scss
@@ -50,6 +50,10 @@
           border-bottom: 0.5px solid c.$davysGrey;
           padding: 0.25em;
           width: 100%;
+
+          @include m.for-phone-only {
+            height: 7vh;
+          }
         }
 
         h6 {
@@ -70,7 +74,7 @@
           height: 14em;
           overflow-x: hidden;
           overflow-y: scroll;
-          padding-bottom: 1em;
+          padding: 0.25em 0.25em 1em;
         }
 
         &.small-filter-list {

diff --git a/packages/ilios-common/app/styles/ilios-common/components/ilios-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/ilios-calendar.scss
@@ -2,6 +2,18 @@
 @use "../mixins" as m;
 
 .ilios-calendar {
+  .ilios-calendar-pickers {
+    align-items: center;
+    clear: both;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @include m.for-tablet-and-up {
+      flex-direction: row;
+    }
+  }
+
   .ilios-calendar-calendar {
     clear: both;
     position: relative;

diff --git a/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss b/packages/ilios-common/app/styles/ilios-common/components/weekly-calendar.scss
@@ -6,7 +6,7 @@
 .weekly-calendar {
   $hour-height: 0.3rem;
   $minute-rows: math.div(24 * 60, 5); //every 5 minutes
-  --hour-space: 2.9rem;
+  --hour-space: 3.3rem;
 
   @include m.for-tablet-and-up {
     --hour-space: 5.5rem;