Merge pull request #59 from aleevas/DS-1564

[DS-1564][DS-1565][DS-1566][DS-1567][DS-1568][DS-1571][DS-1572][DS-1573] Add fixes after the QA phase
ynorth-projects · Jul 25, 2024 · 0142577 · 0142577
2 parents 8cc9ae3 + dce2c14
commit 0142577
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 101 deletions.
diff --git a/assets/css/repeat.css b/assets/css/repeat.css
diff --git a/assets/scss/repeat.scss b/assets/scss/repeat.scss
@@ -4,6 +4,13 @@
 @import "_functions";
 @import "_mixins";
 @import "_variables";
+// Material Symbols Outlined icons via Google Fonts https://developers.google.com/fonts/docs/material_symbols#using_material_symbols
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+
+/*Variables*/
+:root {
+  --schedules-border-radius: 10px;
+}
 
 .schedule-dashboard {
   &__arrow {
@@ -28,6 +35,7 @@
     .icon {
       border: 1px solid var(--ylb-color-light-grey-3, #ccc);
       border-radius: 4px;
+      color: var(--wsPrimaryColor, #5c2e91);
     }
   }
 
@@ -82,14 +90,14 @@
         }
 
         &:first-child {
-          border-top-left-radius: var(--wsBorderRadius, unset);
-          border-top-right-radius: var(--wsBorderRadius, unset);
+          border-top-left-radius: var(--schedules-border-radius, unset);
+          border-top-right-radius: var(--schedules-border-radius, unset);
         }
 
         &:last-child {
           border-bottom: 1px solid var(--ylb-color-light-grey-3, #ccc);
-          border-bottom-left-radius: var(--wsBorderRadius, unset);
-          border-bottom-right-radius: var(--wsBorderRadius, unset);
+          border-bottom-left-radius: var(--schedules-border-radius, unset);
+          border-bottom-right-radius: var(--schedules-border-radius, unset);
         }
 
         a {
@@ -120,14 +128,30 @@
           }
         }
 
+        .instructor-column {
+          margin-left: 0;
+
+          @include media-breakpoint-between('sm', 'lg') {
+            margin-left: -40px;
+          }
+          @include media-breakpoint-up('lg') {
+            margin-left: -20px;
+          }
+
+          a {
+            display: inline-block;
+          }
+        }
+
         .calendar-column {
           display: inline-block;
-          width: 100%;
           position: relative;
           margin-bottom: 24px;
-          max-width: 130px;
-          @include media-breakpoint-down('md') {
+          width: 150px;
+
+          @include media-breakpoint-between('sm', 'md') {
             margin-bottom: 12px;
+            left: -10px;
           }
 
           .icon {
@@ -174,10 +198,27 @@
 
         .addtocalendar {
           top: 0;
-          right: 0;
+          left: -10px;
           float: none;
 
+          @include media-breakpoint-down('md') {
+            left: 0;
+          }
+
+          &:after {
+            font-family: 'Material Symbols Outlined', serif;
+            content: "add_circle";
+            -webkit-font-feature-settings: 'liga' 1;
+            -moz-font-feature-settings: 'liga' 1;
+            font-feature-settings: 'liga' 1;
+            position: relative;
+            top: -20px;
+            left: 124px;
+            font-size: 18px;
+          }
+
           .atcb-list {
+            box-shadow: var(--wsBoxShadow, none);
             li {
               &:first-child {
                 a {
@@ -213,7 +254,7 @@
               left: -30px;
               top: 30px;
               min-width: 200px;
-              border-radius: var(--wsBorderRadius, unset);
+              border-radius: var(--schedules-border-radius, unset);
             }
           }
         }
@@ -272,7 +313,6 @@
       margin-bottom: 36px;
     }
 
-
     .form-group-date {
       margin-bottom: 24px;
 
@@ -379,6 +419,11 @@
             border: none;
             padding: 16px 24px;
 
+            @include media-breakpoint-down('md') {
+              border-bottom: 1px solid var(--ylb-color-light-grey-3, #ccc);
+              border-top: none;
+            }
+
             .label-mobile-results {
               margin: 0;
             }
@@ -445,13 +490,12 @@
 
         .form-group-wrapper {
           border: solid 1px var(--ylb-color-light-grey-3, #ccc);
-          border-bottom: none;
-          border-top: none;
 
           &.date {
             border: solid 1px var(--ylb-color-light-grey-3, #ccc);
-            border-top-left-radius: var(--wsBorderRadius, unset);
-            border-top-right-radius: var(--wsBorderRadius, unset);
+            border-top-left-radius: var(--schedules-border-radius, unset);
+            border-top-right-radius: var(--schedules-border-radius, unset);
+            border-bottom: none;
             padding: 2px;
             width: auto;
 
@@ -506,8 +550,8 @@
 
         .form-group-wrapper:last-child {
             border: solid 1px var(--ylb-color-light-grey-3, #ccc);
-            border-bottom-left-radius: var(--wsBorderRadius, unset);
-            border-bottom-right-radius: var(--wsBorderRadius, unset);
+            border-bottom-left-radius: var(--schedules-border-radius, unset);
+            border-bottom-right-radius: var(--schedules-border-radius, unset);
             padding-bottom: 3px;
 
             label {
@@ -612,17 +656,28 @@
     .modal-dialog {
       max-width: 60%;
 
+      @include media-breakpoint-down('lg') {
+        max-width: 80%;
+
+        .modal-content {
+          max-width: unset;
+        }
+      }
+      @include media-breakpoint-down('md') {
+        max-width: 95%;
+      }
+
       &:not(.hb-loc-modal__modal) {
         height: 80% !important;
         padding-top: 0;
         top: 12%;
 
         .modal-content {
-          height: 100% !important;
+          height: 100%;
           overflow: visible;
           bottom: 5vh;
           background-color: var(--ylb-color-light-grey-1, #f2f2f2);
-          border-radius: var(--wsBorderRadius, unset);
+          border-radius: var(--schedules-border-radius, unset);
 
           .calendar-column {
             .icon {
@@ -650,12 +705,11 @@
       height: auto;
       padding: 24px;
       width: 100%;
-      border-top-left-radius: var(--wsBorderRadius, unset);
-      border-top-right-radius: var(--wsBorderRadius, unset);
+      border-top-left-radius: var(--schedules-border-radius, unset);
+      border-top-right-radius: var(--schedules-border-radius, unset);
 
       .close {
         background: none !important;
-        //background: none;
         padding: 10px;
         color: var(--ylb-color-dark-grey-2, #231f20);
         opacity: 1;
@@ -687,7 +741,7 @@
         font-weight: 700;
         line-height: 28px;
         border-bottom: 1px solid var(--ylb-color-dark-grey-2, #231f20);
-        padding: 24px 0;
+        padding: 0 0 24px 0;
         margin-bottom: 24px;
       }
 
@@ -729,6 +783,25 @@
         }
       }
 
+      .schedules-data__row {
+        .addtocalendar {
+          top: 14px;
+          left: -20px;
+
+          @include media-breakpoint-down('lg') {
+            left: -40px;
+          }
+
+          .atcb-list {
+            &.active {
+              @include media-breakpoint-down('md') {
+                left: -50px;
+              }
+            }
+          }
+        }
+      }
+
       .calendar-column {
         .icon {
           font-size: 18px;
@@ -767,16 +840,21 @@
     }
 
     &--location {
+      .modal-dialog:not(.hb-loc-modal__modal) {
+        height: auto;
+        max-width: 750px;
+
+        .schedule-dashboard__modal--body,
+        .modal-content {
+          height: auto;
+        }
+      }
       &-link {
         font-size: 14px;
         font-family: var(--ylb-font-family-verdana), serif;
         font-weight: 400;
         line-height: 20px;
       }
-
-      .modal-dialog {
-        max-width: 750px;
-      }
     }
 
     &--instructor {
@@ -804,14 +882,14 @@
     .schedule-dashboard__modal--body {
       .body--content {
         &:first-child {
-          border-top-left-radius: var(--wsBorderRadius, unset);
-          border-top-right-radius: var(--wsBorderRadius, unset);
+          border-top-left-radius: var(--schedules-border-radius, unset);
+          border-top-right-radius: var(--schedules-border-radius, unset);
         }
 
         &:last-child {
           border-bottom: 1px solid var(--ylb-color-light-grey-3, #ccc);
-          border-bottom-left-radius: var(--wsBorderRadius, unset);
-          border-bottom-right-radius: var(--wsBorderRadius, unset);
+          border-bottom-left-radius: var(--schedules-border-radius, unset);
+          border-bottom-right-radius: var(--schedules-border-radius, unset);
         }
       }
     }
@@ -829,7 +907,7 @@
 
     @include media-breakpoint-up('md') {
       margin-bottom: 30px;
-      border-radius: var(--wsBorderRadius, unset);
+      border-radius: var(--schedules-border-radius, unset);
     }
 
     .wizard-bar--buttons {
@@ -948,8 +1026,6 @@
   }
 }
 
-
-
 @media (min-width: 768px) {
 
   .btn-schedule-group {
@@ -1097,5 +1173,10 @@ button.show-date-filter {
 }
 
 .modal-content {
-  border-radius: var(--wsBorderRadius, unset);
+  border-radius: var(--schedules-border-radius, unset);
+}
+
+// We must undo a Font Family used in Canadian Colorway Typography for icons only.
+span.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined', serif !important;
 }
diff --git a/openy_repeat.libraries.yml b/openy_repeat.libraries.yml
@@ -1,5 +1,5 @@
 openy_repeat:
-  version: 0.3.7
+  version: 0.3.8
   js:
     js/repeat.js: {}
   css:
@@ -21,7 +21,6 @@ openy_repeat:
     - openy_repeat/bootstrap-datepicker
     - openy_repeat/openy_repeat.schedules
     - openy_repeat/openy_repeat.natsort
-    - openy_repeat/google.fonts_icon
 
 bootstrap-datepicker:
   version: 0.1
@@ -52,9 +51,3 @@ openy_repeat.natsort:
   version: 1.0
   js:
     /libraries/alphanum/alphanum.js: {}
-
-google.fonts_icon:
-  version: 0.1
-  css:
-    base:
-      'https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined': { type: external }
diff --git a/templates/openy-repeat-schedule-dashboard--sidebar.html.twig b/templates/openy-repeat-schedule-dashboard--sidebar.html.twig
@@ -135,8 +135,8 @@
           <div v-if="getInstructorFilter()" class="form-group-wrapper">
             <label for="form-group-instructor-name" data-toggle="collapse" data-target="#form-group-instructor-name" role="button" class="expanded collapsed" aria-controls="form-group-instructor-name" aria-expanded="false">
               {{ 'Instructor name'|t }}
-              <span class="material-symbols-outlined icon minus">add_circle</span>
-              <span class="material-symbols-outlined icon plus">do_not_disturb_on</span>
+              <span class="material-symbols-outlined icon plus">add_circle</span>
+              <span class="material-symbols-outlined icon minus">do_not_disturb_on</span>
             </label>
             <div id="form-group-instructor-name" class="form-group-instructor-name collapse in" aria-expanded="true">
               <select v-model="instructorName" class="select-instructor-option form-control form-select" id="instructor-name">

diff --git a/templates/openy-repeat-schedule-dashboard--table.html.twig b/templates/openy-repeat-schedule-dashboard--table.html.twig
@@ -68,10 +68,9 @@
               <div class="col-12 col-md-3 col-sm-3">
                 {# location #}
                 <div v-cloak class="location-column">
-                  <a class="d-none d-sm-block schedule-dashboard__modal--location-link" role="button"
+                  <a class="schedule-dashboard__modal--location-link" role="button"
                              v-on:click="$parent.populatePopupLocation(index)" data-toggle="modal"
                              href=".schedule-dashboard__modal--location">${ item.location }</a>
-                    <p class="d-block d-sm-none">${ item.location }</p>
                   <p><span v-if="item.room" class="room">${ item.room }</span></p>
                 </div>
 
@@ -104,7 +103,6 @@
                   <div v-if="item.spottext && item.spottext.search('spot') >= 0" :key="item.productid">
                     <p>${item.spottext}</p>
                   </div>
-                  <span class="material-symbols-outlined icon" aria-hidden="true">add_circle</span>
                 </div>
                 {# register btn #}
                 <div v-if="item.register_url" v-cloak class="register-column" v-if="item.register_url">
@@ -320,7 +318,6 @@
                   <div v-if="item.spottext && item.spottext.search('spot') >= 0" :key="item.productid">
                     <p>${item.spottext}</p>
                   </div>
-                  <span class="material-symbols-outlined icon" aria-hidden="true">add_circle</span>
                 </div>
                 {# register btn #}
                 <div v-if="item.register_url" class="">
@@ -457,7 +454,6 @@
                   <div v-if="item.spottext && item.spottext.search('spot') >= 0" :key="item.productid">
                     <p>${item.spottext}</p>
                   </div>
-                <span class="material-symbols-outlined icon" aria-hidden="true">add_circle</span>
               </div>
             </div>