Updates

sebnitu · Jul 5, 2024 · c3eb035 · c3eb035
1 parent afb3bf9
commit c3eb035
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 4 deletions.
diff --git a/assets/index-D9bD1jqP.css b/assets/index-D9bD1jqP.css
diff --git a/assets/index-DLd6jGpy.js b/assets/index-DLd6jGpy.js
diff --git a/assets/index-gxmCmxhF.js b/assets/index-gxmCmxhF.js
diff --git a/index.html b/index.html
@@ -4,10 +4,11 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="robots" content="noindex, nofollow">
-  <title>sandbox &rarr; main</title>
+  <title>sandbox &rarr; prototype-sortable</title>
   <link rel="icon" type="image/png" href="https://sebnitu.com/icons/favicon.png">
   <link rel="stylesheet" href="https://unpkg.com/vrembem@next/dist/index.css">
-  <script type="module" crossorigin src="/assets/index-gxmCmxhF.js"></script>
+  <script type="module" crossorigin src="/assets/index-DLd6jGpy.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-D9bD1jqP.css">
 </head>
 <body>
 
@@ -23,11 +24,97 @@ <h1 class="text-size-lg">Sandbox</h1>
         <li class="foreground-neutral-80">/</li>
         <li class="flex flex_gap_sm align-items-center">
           <svg class="icon icon_size_sm" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg>
-          <a class="link" target="_blank" href="https://github.com/sebnitu/sandbox/tree/main">main</a>
+          <a class="link" target="_blank" href="https://github.com/sebnitu/sandbox/tree/prototype-sortable">prototype-sortable</a>
         </li>
       </ol>
     </div>
   </header>
 
+  <div class="section">
+    <div class="section__container max-width-xs">
+
+      <ul class="sortable">
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightblue;">1</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Sebastian Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightpink;">2</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Emilia Tatiana Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightpink;">3</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Lea Hadassah Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightpink;">4</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Ava Emily Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightpink;">5</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Ella Grace Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightblue;">6</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Luke Sebastian Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+        <li class="sortable__item" draggable="true">
+          <div class="sortable__content flex flex_gap_lg align-items-center">
+            <div class="avatar" style="--avatar-color: lightpink;">7</div>
+            <div class="flex-grow">
+              <h2 class="font-size-lg font-weight-regular">Emma Gianna Nitu</h2>
+            </div>
+          </div>
+          <button class="sortable__handle">
+            <svg class="dragdots" xmlns="http://www.w3.org/2000/svg" width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 7H2.0001" /><path d="M7 7H7.0001" /><path d="M2 2H2.0001" /><path d="M7 2H7.0001" /><path d="M2 12H2.0001" /><path d="M7 12H7.0001" /></svg>
+          </button>
+        </li>
+      </ul>
+
+    </div>
+  </div>
+
 </body>
 </html>