_preview.html.erb in lookbook-0.5.0.beta.0

- old
+ new
@@ -1,24 +1,52 @@
-<div id="preview" class="h-full md:h-auto md:min-h-0 w-full bg-gray-50">
-  <div class="relative mx-auto bg-white h-full w-full" x-data="previewWindow" :style="`width: ${$store.layout.desktop ? $store.inspector.preview.width : '100%'}`" x-show="!showSource">
-    <iframe seamless
-      class="absolute h-full inset-0 w-full border-l border-gray-300 md:pr-4 md:-mx-px"
-      src="<%= url_for lookbook.preview_path %>"
-      srcdoc="<%== srcdoc %>"
-      frameborder="0"
-      x-data="sizes"
-      x-effect="preview.width = width; preview.height = height;"
-    ></iframe>
-    <div class="absolute opacity-0 inset-0 pointer-events-none" :class="{ 'pointer-events-none': !$store.layout.reflowing }"></div>
-    <div
-      class="border-l border-r border-gray-300 bg-white hover:bg-indigo-100 hover:bg-opacity-20 transition absolute right-0 inset-y-0 flex items-center w-4 cursor-[col-resize] select-none"
-      style="touch-action: none"
-      @pointerdown="onResizeStart"
-      @dblclick="toggleFullWidth"
-      x-show="$store.layout.desktop"
-    >
-      <svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
-        <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
-      </svg>
+<div id="preview" class="h-auto min-h-0 w-full checked-bg">
+  <div
+    class="mx-auto h-full w-full"
+    :style="`max-width: ${maxWidth}; max-height: ${maxHeight};`"
+    x-data="previewWindow"
+  >
+    <div class="grid bg-white relative grid-cols-[1fr_17px] grid-rows-[1fr_17px] -inset-px" style="width: calc(100% + 2px); height: calc(100% + 2px)">
+
+      <iframe seamless
+        class="h-full w-full border border-gray-300"
+         :class="{ 'pointer-events-none': $store.layout.reflowing }"
+        src="<%= url_for lookbook.preview_path %>"
+        <% if config.preview_srcdoc %>srcdoc="<%== srcdoc %>"<% end %>
+        frameborder="0"
+        x-data="sizes"
+        x-effect="preview.width = width; preview.height = height;"
+      ></iframe>
+
+      <div
+        class="resize-handle border-r border-t cursor-[col-resize]"
+        @pointerdown="onResizeWidthStart"
+        @dblclick="toggleFullWidth"
+      >
+        <svg class="h-4 w-4 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+        </svg>
+      </div>
+
+      <div
+        class="resize-handle border-b border-l cursor-[col-resize]"
+        @pointerdown="onResizeHeightStart"
+        @dblclick="toggleFullHeight"
+      >
+        <svg class="h-4 w-4 pointer-events-none rotate-90" fill="currentColor" viewBox="0 0 24 24" >
+          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+        </svg>
+      </div>
+
+      <div
+        class="resize-handle border-r border-b cursor-[nwse-resize]"
+        @pointerdown="onResizeStart"
+        @dblclick="toggleFullSize"
+      >
+        <svg class="h-3.5 w-3.5 pointer-events-none rotate-45 relative -top-px -left-px" fill="currentColor" viewBox="0 0 24 24" >
+          <path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
+        </svg>
+      </div>
+
     </div>
+
   </div>
 </div>
\ No newline at end of file