From 1eb788ae74df7f8060083a9b056c9f0537a76239 Mon Sep 17 00:00:00 2001
From: Paul Ibeabuchi C <49737323+NARUDESIGNS@users.noreply.github.com>
Date: Tue, 15 Mar 2022 19:11:45 +0100
Subject: [PATCH] refined mainImage section to account for responsiveness fixes
 #842 (#843)

* refined mainImage section to account for responsiveness

* refined main image section UI

* refined image UI section and accounted for tablet views

* refined image UI section and accounted for tablet views

Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
---
 dist/PublicLab.Editor.css | 67 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 62 insertions(+), 5 deletions(-)

diff --git a/dist/PublicLab.Editor.css b/dist/PublicLab.Editor.css
index 8544732f..adef09d8 100644
--- a/dist/PublicLab.Editor.css
+++ b/dist/PublicLab.Editor.css
@@ -320,6 +320,53 @@ https://github.com/sliptree/bootstrap-tokenfield/pull/287 */
   background-color: #007bff !important;
 }
 
+@media (max-width: 992px) {
+  .ple-module-main_image .ple-module-guide  {
+    display: flex !important;
+    align-items: flex-start !important;
+    width: 100% !important;
+    gap: 30px !important;
+  }
+  .ple-image_module_guide {
+    max-width: 100% !important;
+  }
+  .ple-module-main_image {
+    flex-direction: column;
+  }
+  .module-mainImage {
+    padding: 0;
+    align-items: flex-start;
+    flex: 50% 50%;
+  }
+  .mainImageBox {
+    margin-bottom: 30px;
+  }
+  .mainImageBox .ple-drag-drop {
+    background: url(/i/45384);
+    background-repeat: no-repeat !important;
+    border-color: rgb(204, 204, 204);
+    background-size: cover !important;
+    background-position: center !important;
+    height: 200px;
+    width: 100% !important;
+  }
+  #imageButtons .thumbnailBtn {
+    padding: 0.5rem 1rem;
+    font-size: 1.25rem;
+    line-height: 1.5;
+    border-radius: 0.3rem;
+    color: #6c757d;
+    border-color: #6c757d;
+    margin-bottom: 10px;
+    width: 100%;
+  }
+  #imageButtons .thumbnailBtn:hover {
+    color: #fff;
+    background-color: #6c757d;
+    border-color: #6c757d;
+  }
+}
+
 @media (max-width: 550px) {
   .ple-module-content a.btn {
     font-size: 0px !important;
@@ -330,14 +377,24 @@ https://github.com/sliptree/bootstrap-tokenfield/pull/287 */
   .module-mainImage {
     flex-direction: column;
   }
-  .thumbnailBtn {
-    width: 120px;
-  }
   #imageButtons {
     flex-direction: row;
     justify-content: space-between;
   }
   .mainImageBox {
-    width: auto;
+    width: 100%;
   }
-}
+  .ple-module-main_image {
+    flex-direction: column;
+  }
+  .ple-image_module_guide {
+    max-width: 100% !important;
+  }
+  .ple-module-content .help {
+    margin-top: 25px;
+    padding: 0;
+  }
+  #imageButtons {
+    flex-direction: column;
+  }
+}
\ No newline at end of file