dev app - add drag n drop playground page

BeaconCMS · Sep 16, 2024 · b2aa928 · b2aa928
1 parent 7660dca
commit b2aa928
Showing 1 changed file with 90 additions and 0 deletions.
diff --git a/dev.exs b/dev.exs
@@ -374,6 +374,96 @@ dev_seeds = fn ->
     })
 
   Beacon.Content.publish_page(page_markdown)
+
+  page_drag_drop_playground =
+    Beacon.Content.create_page!(%{
+      path: "/drag-drop",
+      site: "dev",
+      title: "dev drag and drop playground",
+      layout_id: layout.id,
+      template: """
+      <!-- 1. Row using Margins -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">1. Row using Margins</h2>
+        <div class="flex">
+          <div class="mr-4 p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="mr-4 p-2 border rounded">Item 2<br />Small text.</div>
+          <div class="mr-4 p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="mr-4 p-2 border rounded flex-grow">Item 3<br />Wider element text.</div>
+          <div class="mr-4 p-2 border rounded">Item 5<br />Small text.</div>
+        </div>
+      </div>
+      <!-- 2. Vertical using Margins -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">2. Vertical using Margins</h2>
+        <div>
+          <div class="mb-4 p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="mb-4 p-2 border rounded">Item 2<br />Small text.</div>
+          <div class="mb-4 p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="mb-4 p-2 border rounded">Item 3<br />Small text. <br /> But taller</div>
+          <div class="mb-4 p-2 border rounded">Item 5<br />Small text.</div>
+        </div>
+      </div>
+      <!-- 3. Row using Flexbox -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">3. Row using Flexbox</h2>
+        <div class="flex space-x-4">
+          <div class="p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="p-2 border rounded">Item 2<br />Small text.</div>
+          <div class="p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="p-2 border rounded flex-grow">Item 3<br />Wider element text.</div>
+          <div class="p-2 border rounded">Item 5<br />Small text.</div>
+        </div>
+      </div>
+      <!-- 4. Vertical using Flexbox -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">4. Vertical using Flexbox</h2>
+        <div class="flex flex-col space-y-4">
+          <div class="p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="p-2 border rounded">Item 2<br />Small text.</div>
+          <div class="p-2 border rounded">Item 3<br />Small text. <br /> But taller</div>
+          <div class="p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="p-2 border rounded">Item 5<br />Small text.</div>
+        </div>
+      </div>
+      <!-- 5. Row using CSS Grid -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">5. Row using CSS Grid (Single Row)</h2>
+        <div class="grid grid-cols-6 gap-4">
+          <div class="p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="p-2 border rounded">Item 2<br />Small text.</div>
+          <div class="p-2 border rounded col-span-2">Item 3<br />Wider element text.</div>
+          <div class="p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="p-2 border rounded">Item 5<br />Small text.</div>
+        </div>
+      </div>
+      <!-- 6. Vertical using CSS Grid -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">6. Vertical using CSS Grid</h2>
+        <div class="grid gap-4 grid-rows-6">
+          <div class="p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="p-2 border rounded">Item 2<br />Small text.</div>
+          <div class="p-2 border rounded row-span-2">Item 3<br />Small text. <br /> But taller</div>
+          <div class="p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="p-2 border rounded">Item 5<br />Small text.</div>
+        </div>
+      </div>
+      <!-- 7. 2x3 Grid of Elements -->
+      <div class="mb-8">
+        <h2 class="text-lg font-semibold mb-4">7. 2x3 Grid of Elements</h2>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="p-2 border rounded">Item 1<br />Small text.</div>
+          <div class="p-2 border rounded">Item 2<br />Small text.<br /> But taller</div>
+          <div class="p-2 border rounded">Item 3<br />Small text.</div>
+          <div class="p-2 border rounded">Item 4<br />Small text.</div>
+          <div class="p-2 border rounded">Item 5<br />Small text.</div>
+          <div class="p-2 border rounded">Item 6<br />Small text.</div>
+        </div>
+      </div>
+      """
+    })
+
+  Beacon.Content.publish_page(page_drag_drop_playground)
 end
 
 dy_seeds = fn ->