From 6897a1641d394f0707d249ce902bd48b015f0538 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Thu, 15 Aug 2024 18:45:47 +0200
Subject: [PATCH] Wrap filters in dropdown

---
 web-app/src/app.css                           |  59 ++++----
 .../src/routes/(authenticated)/+page.svelte   |  79 ++++++-----
 .../website/[websiteId]/articles/+page.svelte | 128 +++++++++---------
 .../[websiteId]/collaborators/+page.svelte    | 107 +++++++--------
 4 files changed, 193 insertions(+), 180 deletions(-)

diff --git a/web-app/src/app.css b/web-app/src/app.css
index e4deba5..7034160 100644
--- a/web-app/src/app.css
+++ b/web-app/src/app.css
@@ -12,20 +12,20 @@
   --border-primary: 0.0625rem solid var(--bg-tertiary);
   --border-radius: 0.125rem;
 
-  /* Step -1: 14.9953px → 14.9953px */
-  --font-size--1: clamp(0.9372rem, 0.9372rem + 0cqi, 0.9372rem);
+  /* Step -1: 14.9953px → 14.2222px */
+  --font-size--1: clamp(0.8889rem, 0.9592rem + -0.1098cqi, 0.9372rem);
   /* Step 0: 16px → 16px */
   --font-size-0: clamp(1rem, 1rem + 0cqi, 1rem);
-  /* Step 1: 17.072px → 17.072px */
-  --font-size-1: clamp(1.067rem, 1.067rem + 0cqi, 1.067rem);
-  /* Step 2: 18.2158px → 18.2158px */
-  --font-size-2: clamp(1.1385rem, 1.1385rem + 0cqi, 1.1385rem);
-  /* Step 3: 19.4363px → 19.4363px */
-  --font-size-3: clamp(1.2148rem, 1.2148rem + 0cqi, 1.2148rem);
-  /* Step 4: 20.7385px → 20.7385px */
-  --font-size-4: clamp(1.2962rem, 1.2962rem + 0cqi, 1.2962rem);
-  /* Step 5: 22.128px → 22.128px */
-  --font-size-5: clamp(1.383rem, 1.383rem + 0cqi, 1.383rem);
+  /* Step 1: 17.072px → 18px */
+  --font-size-1: clamp(1.067rem, 1.0406rem + 0.1318cqi, 1.125rem);
+  /* Step 2: 18.2158px → 20.25px */
+  --font-size-2: clamp(1.1385rem, 1.0807rem + 0.2889cqi, 1.2656rem);
+  /* Step 3: 19.4363px → 22.7813px */
+  --font-size-3: clamp(1.2148rem, 1.1197rem + 0.4751cqi, 1.4238rem);
+  /* Step 4: 20.7385px → 25.6289px */
+  --font-size-4: clamp(1.2962rem, 1.1572rem + 0.6947cqi, 1.6018rem);
+  /* Step 5: 22.128px → 28.8325px */
+  --font-size-5: clamp(1.383rem, 1.1925rem + 0.9523cqi, 1.802rem);
 
   /* Space 3xs: 4px → 5px */
   --space-3xs: clamp(0.25rem, 0.2336rem + 0.0822cqi, 0.3125rem);
@@ -107,7 +107,8 @@ button,
 textarea,
 select,
 a[role="button"],
-label[for="toggle-mobile-preview"] {
+label[for="toggle-mobile-preview"],
+summary {
   font: inherit;
   color: inherit;
   border: var(--border-primary);
@@ -130,6 +131,10 @@ input[type="file"] {
   inline-size: 100%;
 }
 
+input[type="color"] {
+  padding: 0;
+}
+
 a {
   color: var(--color-accent);
 }
@@ -140,17 +145,26 @@ a[role="button"] {
   text-decoration: none;
 }
 
+summary {
+  max-inline-size: fit-content;
+}
+
+details[open] summary {
+  margin-block-end: var(--space-s);
+}
+
 button,
 a[role="button"],
-label[for="toggle-mobile-preview"] {
+label[for="toggle-mobile-preview"],
+summary {
   background-color: var(--bg-secondary);
 }
 
-:is(button, a[role="button"], label[for="toggle-mobile-preview"]):hover {
+:is(button, a[role="button"], label[for="toggle-mobile-preview"], summary):hover {
   background-color: var(--bg-tertiary);
 }
 
-:is(a, button, input, textarea, select):focus,
+:is(a, button, input, textarea, select, summary):focus,
 #toggle-mobile-preview:checked + label {
   outline: 0.125rem solid var(--color-accent);
   outline-offset: 0.25rem;
@@ -198,7 +212,7 @@ h1 {
   font-size: var(--font-size-5);
 }
 
-form[method="POST"] {
+form {
   display: flex;
   flex-direction: column;
   gap: var(--space-s);
@@ -208,17 +222,6 @@ form > button[type="submit"] {
   max-inline-size: 30ch;
 }
 
-form[method="GET"] {
-  display: grid;
-  gap: var(--space-s);
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
-  align-items: start;
-}
-
-form[method="GET"] > button[type="submit"] {
-  align-self: end;
-}
-
 form label {
   display: flex;
   flex-direction: column;
diff --git a/web-app/src/routes/(authenticated)/+page.svelte b/web-app/src/routes/(authenticated)/+page.svelte
index 746bd44..0c2c1a2 100644
--- a/web-app/src/routes/(authenticated)/+page.svelte
+++ b/web-app/src/routes/(authenticated)/+page.svelte
@@ -49,42 +49,47 @@
   <section>
     <h2>All websites</h2>
 
-    <form method="GET">
-      <label>
-        Search:
-        <input
-          type="text"
-          name="website_search_query"
-          value={$page.url.searchParams.get("website_search_query")}
-        />
-      </label>
-      <label>
-        Sort:
-        <select name="website_sort">
-          {#each sortOptions as { value, text }}
-            <option {value} selected={value === $page.url.searchParams.get("website_sort")}
-              >{text}</option
-            >
-          {/each}
-        </select>
-      </label>
-      <label>
-        Filter:
-        <select name="website_filter">
-          <option value="all">Show all</option>
-          <option value="creations">Created by you</option>
-          <option value="shared">Shared with you</option>
-        </select>
-      </label>
-      <button type="submit">Submit</button>
-    </form>
+    <details>
+      <summary>Search & Sort & Filter</summary>
+      <form method="GET">
+        <label>
+          Search:
+          <input
+            type="text"
+            name="website_search_query"
+            value={$page.url.searchParams.get("website_search_query")}
+          />
+        </label>
+        <label>
+          Sort:
+          <select name="website_sort">
+            {#each sortOptions as { value, text }}
+              <option {value} selected={value === $page.url.searchParams.get("website_sort")}
+                >{text}</option
+              >
+            {/each}
+          </select>
+        </label>
+        <label>
+          Filter:
+          <select name="website_filter">
+            <option value="all">Show all</option>
+            <option value="creations">Created by you</option>
+            <option value="shared">Shared with you</option>
+          </select>
+        </label>
+        <button type="submit">Submit</button>
+      </form>
+    </details>
 
-    <div class="website-grid">
+    <ul class="website-grid">
       {#each data.websites as { id, content_type, title, created_at } (id)}
-        <article class="website-card">
-          <h3>
-            <a href="/website/{id}">{title}</a>
-          </h3>
+        <li class="website-card">
+          <p>
+            <strong>
+              <a href="/website/{id}">{title}</a>
+            </strong>
+          </p>
           <ul>
             <li>
               <strong>Type:</strong>
@@ -148,9 +153,9 @@
               </form>
             </Modal>
           </div>
-        </article>
+        </li>
       {/each}
-    </div>
+    </ul>
   </section>
 {/if}
 
@@ -159,7 +164,7 @@
     display: grid;
     gap: var(--space-s);
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 35ch), 1fr));
-    margin-block-start: var(--space-m);
+    margin-block-start: var(--space-xs);
   }
 
   .website-card {
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
index a0bb03e..400891b 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
@@ -47,68 +47,75 @@
     <section>
       <h2>All articles</h2>
 
-      <form method="GET">
-        <label>
-          Search:
-          <input
-            type="text"
-            name="article_search_query"
-            value={$page.url.searchParams.get("article_search_query")}
-          />
-        </label>
-        <label>
-          Sort:
-          <select name="article_sort">
-            {#each sortOptions as { value, text }}
-              <option {value} selected={value === $page.url.searchParams.get("article_sort")}
-                >{text}</option
-              >
-            {/each}
-          </select>
-        </label>
-        <label>
-          Filter:
-          <select name="article_filter">
-            <option value="all">Show all</option>
-            <option value="creations">Created by you</option>
-            <option value="shared">Created by others</option>
-          </select>
-        </label>
-        <button type="submit">Submit</button>
-      </form>
+      <details>
+        <summary>Search & Sort & Filter</summary>
+        <form method="GET">
+          <label>
+            Search:
+            <input
+              type="text"
+              name="article_search_query"
+              value={$page.url.searchParams.get("article_search_query")}
+            />
+          </label>
+          <label>
+            Sort:
+            <select name="article_sort">
+              {#each sortOptions as { value, text }}
+                <option {value} selected={value === $page.url.searchParams.get("article_sort")}
+                  >{text}</option
+                >
+              {/each}
+            </select>
+          </label>
+          <label>
+            Filter:
+            <select name="article_filter">
+              <option value="all">Show all</option>
+              <option value="creations">Created by you</option>
+              <option value="shared">Created by others</option>
+            </select>
+          </label>
+          <button type="submit">Submit</button>
+        </form>
+      </details>
 
-      {#each data.articles as { id, title } (id)}
-        <article class="article-card">
-          <h3>{title}</h3>
+      <ul>
+        {#each data.articles as { id, title } (id)}
+          <li class="article-card">
+            <p>
+              <strong>{title}</strong>
+            </p>
 
-          <div class="article-card__actions">
-            <a href="/website/{data.website.id}/articles/{id}">Edit</a>
-            <Modal id="delete-article-{id}" text="Delete">
-              <h4>Delete article</h4>
+            <div class="article-card__actions">
+              <a href="/website/{data.website.id}/articles/{id}">Edit</a>
+              <Modal id="delete-article-{id}" text="Delete">
+                <h4>Delete article</h4>
 
-              <p>
-                <strong>Caution!</strong>
-                Deleting this article will irretrievably erase all data.
-              </p>
+                <p>
+                  <strong>Caution!</strong>
+                  Deleting this article will irretrievably erase all data.
+                </p>
 
-              <form
-                method="POST"
-                action="?/deleteArticle"
-                use:enhance={() => {
-                  return async ({ update }) => {
-                    await update();
-                    window.location.hash = "!";
-                  };
-                }}
-              >
-                <input type="hidden" name="id" value={id} />
+                <form
+                  method="POST"
+                  action="?/deleteArticle"
+                  use:enhance={() => {
+                    return async ({ update }) => {
+                      await update();
+                      window.location.hash = "!";
+                    };
+                  }}
+                >
+                  <input type="hidden" name="id" value={id} />
 
-                <button type="submit">Delete article</button>
-              </form>
-            </Modal>
-          </div>
-        </article>
-      {/each}
+                  <button type="submit">Delete article</button>
+                </form>
+              </Modal>
+            </div>
+          </li>
+        {/each}
+      </ul>
     </section>
   {/if}
 </WebsiteEditor>
@@ -121,17 +128,14 @@
     row-gap: var(--space-2xs);
     flex-wrap: wrap;
     justify-content: space-between;
+    margin-block-start: var(--space-xs);
   }
 
   .article-card + .article-card {
-    padding-block-start: var(--space-s);
+    padding-block-start: var(--space-xs);
     border-block-start: var(--border-primary);
   }
 
-  .article-card:nth-of-type(1) {
-    margin-block-start: var(--space-m);
-  }
-
   .article-card__actions {
     display: flex;
     gap: var(--space-s);
diff --git a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
index bdeaee5..c1d4af5 100644
--- a/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
+++ b/web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
@@ -54,61 +54,65 @@
     <section>
       <h2>All collaborators</h2>
 
-      {#each data.collaborators as { website_id, user_id, permission_level, user: { username } } (`${website_id}-${user_id}`)}
-        <article class="collaborator-card">
-          <h3>{username} ({permission_level})</h3>
+      <ul>
+        {#each data.collaborators as { website_id, user_id, permission_level, user: { username } } (`${website_id}-${user_id}`)}
+          <li class="collaborator-card">
+            <p>
+              <strong>{username} ({permission_level})</strong>
+            </p>
 
-          <div class="collaborator-card__actions">
-            <Modal id="update-collaborator-{user_id}" text="Update">
-              <h4>Update collaborator</h4>
+            <div class="collaborator-card__actions">
+              <Modal id="update-collaborator-{user_id}" text="Update">
+                <h4>Update collaborator</h4>
 
-              <form
-                method="POST"
-                action="?/updateCollaborator"
-                use:enhance={() => {
-                  return async ({ update }) => {
-                    await update({ reset: false });
-                    window.location.hash = "!";
-                  };
-                }}
-              >
-                <input type="hidden" name="user-id" value={user_id} />
+                <form
+                  method="POST"
+                  action="?/updateCollaborator"
+                  use:enhance={() => {
+                    return async ({ update }) => {
+                      await update({ reset: false });
+                      window.location.hash = "!";
+                    };
+                  }}
+                >
+                  <input type="hidden" name="user-id" value={user_id} />
 
-                <label>
-                  Permission level:
-                  <select name="permission-level">
-                    <option value="10" selected={10 === permission_level}>10 - View</option>
-                    <option value="20" selected={20 === permission_level}>20 - Edit</option>
-                    <option value="30" selected={30 === permission_level}>30 - Manage</option>
-                  </select>
-                </label>
+                  <label>
+                    Permission level:
+                    <select name="permission-level">
+                      <option value="10" selected={10 === permission_level}>10 - View</option>
+                      <option value="20" selected={20 === permission_level}>20 - Edit</option>
+                      <option value="30" selected={30 === permission_level}>30 - Manage</option>
+                    </select>
+                  </label>
 
-                <button type="submit">Update collaborator</button>
-              </form>
-            </Modal>
-            <Modal id="remove-collaborator-{user_id}" text="Remove">
-              <h4>Remove collaborator</h4>
+                  <button type="submit">Update collaborator</button>
+                </form>
+              </Modal>
+              <Modal id="remove-collaborator-{user_id}" text="Remove">
+                <h4>Remove collaborator</h4>
 
-              <p>Do you really want to remove the collaborator?</p>
+                <p>Do you really want to remove the collaborator?</p>
 
-              <form
-                method="POST"
-                action="?/removeCollaborator"
-                use:enhance={() => {
-                  return async ({ update }) => {
-                    await update();
-                    window.location.hash = "!";
-                  };
-                }}
-              >
-                <input type="hidden" name="user-id" value={user_id} />
+                <form
+                  method="POST"
+                  action="?/removeCollaborator"
+                  use:enhance={() => {
+                    return async ({ update }) => {
+                      await update();
+                      window.location.hash = "!";
+                    };
+                  }}
+                >
+                  <input type="hidden" name="user-id" value={user_id} />
 
-                <button type="submit">Remove collaborator</button>
-              </form>
-            </Modal>
-          </div>
-        </article>
-      {/each}
+                  <button type="submit">Remove collaborator</button>
+                </form>
+              </Modal>
+            </div>
+          </li>
+        {/each}
+      </ul>
     </section>
   {/if}
 </WebsiteEditor>
@@ -121,17 +125,14 @@
     row-gap: var(--space-2xs);
     flex-wrap: wrap;
     justify-content: space-between;
+    margin-block-start: var(--space-xs);
   }
 
   .collaborator-card + .collaborator-card {
-    padding-block-start: var(--space-s);
+    padding-block-start: var(--space-xs);
     border-block-start: var(--border-primary);
   }
 
-  .collaborator-card:nth-of-type(1) {
-    margin-block-start: var(--space-xs);
-  }
-
   .collaborator-card__actions {
     display: flex;
     gap: var(--space-2xs);