From 35062472c5f5bdca117de5f9ea2de88b1ae9f6ec Mon Sep 17 00:00:00 2001
From: "stephen@cubedesigners.com"
 <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Thu, 19 Mar 2020 12:32:33 +0000
Subject: [PATCH] Done #3471 @1.5

---
 .../src/Elementor/Widgets/ModalList.php       |  3 +-
 .../styles/components/lity-lightbox.styl      |  4 ++
 .../assets/styles/widgets/modal-list.styl     | 27 +++++++++--
 .../views/widgets/modal-list.blade.php        | 45 +++++++++++--------
 .../views/widgets/profile-carousel.blade.php  |  4 +-
 5 files changed, 57 insertions(+), 26 deletions(-)

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 2f98ac77..01368b80 100644
--- 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 3a1d217f..7c008529 100644
--- 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 21225514..c586a994 100644
--- 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 20af9a96..76afe2b5 100644
--- 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 8462008c..aaf88fa7 100644
--- 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">
-- 
2.39.5