Done #3471 @1.5

diff --git a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php
index 2f98ac7753fd598716858a668a426f4ab913f90b..01368b801c464f6601dc7ecb255e2de5691c3674 100644 (file)
--- a/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php
+++ b/wp-content/mu-plugins/physioassist/src/Elementor/Widgets/ModalList.php
@@ -102,10 +102,9 @@ class ModalList extends Widget_Base {
      */
     protected function render() {
 
-        $ID = $this->get_id();
         $items = $this->get_settings('items');
 
-        echo \App\template('widgets/modal-list', compact('ID', 'items'));
+        echo \App\template('widgets/modal-list', compact('items'));
     }
 
 }

diff --git a/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl b/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl
index 3a1d217faa8eb95e8d70e30db7648e914ca6bbb2..7c008529c98a0c1560de4b3cbe6ba7ccf1c7695f 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/components/lity-lightbox.styl
@@ -19,6 +19,10 @@
   transition: all 0.3s ease
   transition-delay: 0.15s // Slight delay to give content box time to grow enough
 
+  +below(768px)
+    width: 40px
+    height: @width
+
   // Hide while loading and closing
   .lity-loading &,
   .lity-closed &

diff --git a/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl b/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl
index 21225514b6cd3873bc63ab93eead36c81360949f..c586a994605c2de99d8dc4728924ce9515deeaf4 100644 (file)
--- a/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/widgets/modal-list.styl
@@ -1,5 +1,22 @@
+$breakpoint-modal-list = 768px
+
+.modal-list-wrapper
+  display: flex
+
+  +below($breakpoint-modal-list)
+    display: block
+
 .modal-list
   list-style-type: none
+  flex: 1 1 50%
+  horizontal-spacing(5vw)
+
+  &:not(:last-child)
+    margin-bottom: 1.75em // When columns stack, match spacing between other items
+
+  +below($breakpoint-modal-list)
+    padding-left: 0
+    padding-right: 0
 
   &-item
     position: relative
@@ -9,16 +26,17 @@
 
     a
       color: $colors.headings
+      display: flex
+      align-items: baseline
 
       &:hover
         color: $colors.blue
 
     svg
-      position: absolute
-      top: 0.4em
-      left: -1.3em
+      flex: 0 0 auto
       height: 0.625em
       width: auto
+      margin-right: 0.8em
 
     path
       fill: currentColor
@@ -33,6 +51,9 @@
     max-height: 90vh !important // Gives 5% top and bottom gap
     overflow-y: auto // Scroll internally if content is too tall for screen
 
+    +below(768px)
+      padding-top: 75px
+
   &-title
     color: $colors.headings
     font-size: 26px

diff --git a/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php b/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php
index 20af9a9621e30d292640959a79b333e8088c736b..76afe2b525bbbfba4a6f04c5cff2720acb0a2e34 100644 (file)
--- a/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php
+++ b/wp-content/themes/physioassist/resources/views/widgets/modal-list.blade.php
@@ -1,35 +1,42 @@
 {{-- TEXT MODAL LIST --}}
-<ul class="modal-list">
+<div class="modal-list-wrapper">
 
-  {{--TODO: split into 2 cols? --}}
+  @php
+    // Split items into two list for columns
+    $columns = array_chunk($items, ceil(count($items) / 2));
+  @endphp
 
-  @foreach ($items as $index => $item)
+  @foreach ($columns as $column)
+    <ul class="modal-list">
 
-    @php
-      $lightbox_ID = 'lightbox_'. $ID .'_'. $index; // Unique ID for lightbox content
-    @endphp
+      @foreach ($column as $item)
 
-    <li class="modal-list-item">
+        @php
+          $lightbox_ID = 'lightbox_'. $item['_id']; // Unique ID for lightbox content
+        @endphp
 
-      <a href="#{{ $lightbox_ID }}" data-lity>
+        <li class="modal-list-item">
 
-        @svg('arrow') {{ $item['title'] }}
+          <a href="#{{ $lightbox_ID }}" data-lity>
 
-        {{-- Lightbox Content --}}
-        <div id="{{ $lightbox_ID }}" class="lity-hide modal-list-lightbox">
+            @svg('arrow') {{ $item['title'] }}
 
-          <h3 class="modal-list-title">{{ $item['title'] }}</h3>
+            {{-- Lightbox Content --}}
+            <div id="{{ $lightbox_ID }}" class="lity-hide modal-list-lightbox">
 
-          <div class="modal-list-body">
-            {!! $item['body'] !!}
-          </div>
+              <h3 class="modal-list-title">{{ $item['title'] }}</h3>
 
-        </div>
+              <div class="modal-list-body">
+                {!! $item['body'] !!}
+              </div>
 
-      </a>  {{-- .modal-list-item --}}
+            </div>
 
-    </li>
+          </a>  {{-- .modal-list-item --}}
 
+        </li>
+      @endforeach
+    </ul>
   @endforeach
 
-</ul>
+</div>

diff --git a/wp-content/themes/physioassist/resources/views/widgets/profile-carousel.blade.php b/wp-content/themes/physioassist/resources/views/widgets/profile-carousel.blade.php
index 8462008cc071684b40949b12105f5601734458b1..aaf88fa7571eaa2cdb99c29bbe6d89f339af9fdc 100644 (file)
--- a/wp-content/themes/physioassist/resources/views/widgets/profile-carousel.blade.php
+++ b/wp-content/themes/physioassist/resources/views/widgets/profile-carousel.blade.php
@@ -36,10 +36,10 @@
 
 <div class="profile-carousel elementor-slick-slider" data-slick="{{ $slick }}">
 
-  @foreach ($items as $index => $item)
+  @foreach ($items as $item)
 
     @php
-      $lightbox_ID = 'lightbox_'. $ID .'_'. $index; // Unique ID for lightbox content
+      $lightbox_ID = 'lightbox_'. $item['_id']; // Unique ID for lightbox content
     @endphp
 
     <a href="#{{ $lightbox_ID }}" data-lity class="profile-carousel-item slick-slide">