thohlt/archtika
1
0
Fork 0
mirror of https://github.com/thiloho/archtika.git synced 2025-11-22 10:51:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Wrap filters in dropdown

Browse Source
This commit is contained in:
thiloho
2024-08-15 18:45:47 +02:00
parent 2a1ada1c70
commit 6897a1641d
4 changed files with 193 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
web-app/src/app.css
View File

@@ -12,20 +12,20 @@
--border-primary: 0.0625rem solid var(--bg-tertiary); --border-primary: 0.0625rem solid var(--bg-tertiary);
--border-radius: 0.125rem; --border-radius: 0.125rem;
/* Step -1: 14.9953px → 14.9953px */ /* Step -1: 14.9953px → 14.2222px */
--font-size--1: clamp(0.9372rem, 0.9372rem + 0cqi, 0.9372rem); --font-size--1: clamp(0.8889rem, 0.9592rem + -0.1098cqi, 0.9372rem);
/* Step 0: 16px → 16px */ /* Step 0: 16px → 16px */
--font-size-0: clamp(1rem, 1rem + 0cqi, 1rem); --font-size-0: clamp(1rem, 1rem + 0cqi, 1rem);
/* Step 1: 17.072px → 17.072px */ /* Step 1: 17.072px → 18px */
--font-size-1: clamp(1.067rem, 1.067rem + 0cqi, 1.067rem); --font-size-1: clamp(1.067rem, 1.0406rem + 0.1318cqi, 1.125rem);
/* Step 2: 18.2158px → 18.2158px */ /* Step 2: 18.2158px → 20.25px */
--font-size-2: clamp(1.1385rem, 1.1385rem + 0cqi, 1.1385rem); --font-size-2: clamp(1.1385rem, 1.0807rem + 0.2889cqi, 1.2656rem);
/* Step 3: 19.4363px → 19.4363px */ /* Step 3: 19.4363px → 22.7813px */
--font-size-3: clamp(1.2148rem, 1.2148rem + 0cqi, 1.2148rem); --font-size-3: clamp(1.2148rem, 1.1197rem + 0.4751cqi, 1.4238rem);
/* Step 4: 20.7385px → 20.7385px */ /* Step 4: 20.7385px → 25.6289px */
--font-size-4: clamp(1.2962rem, 1.2962rem + 0cqi, 1.2962rem); --font-size-4: clamp(1.2962rem, 1.1572rem + 0.6947cqi, 1.6018rem);
/* Step 5: 22.128px → 22.128px */ /* Step 5: 22.128px → 28.8325px */
--font-size-5: clamp(1.383rem, 1.383rem + 0cqi, 1.383rem); --font-size-5: clamp(1.383rem, 1.1925rem + 0.9523cqi, 1.802rem);
/* Space 3xs: 4px → 5px */ /* Space 3xs: 4px → 5px */
--space-3xs: clamp(0.25rem, 0.2336rem + 0.0822cqi, 0.3125rem); --space-3xs: clamp(0.25rem, 0.2336rem + 0.0822cqi, 0.3125rem);
@@ -107,7 +107,8 @@ button,
textarea, textarea,
select, select,
a[role="button"], a[role="button"],
label[for="toggle-mobile-preview"] { label[for="toggle-mobile-preview"],
summary {
font: inherit; font: inherit;
color: inherit; color: inherit;
border: var(--border-primary); border: var(--border-primary);
@@ -130,6 +131,10 @@ input[type="file"] {
inline-size: 100%; inline-size: 100%;
} }
input[type="color"] {
padding: 0;
}
a { a {
color: var(--color-accent); color: var(--color-accent);
} }
@@ -140,17 +145,26 @@ a[role="button"] {
text-decoration: none; text-decoration: none;
} }
summary {
max-inline-size: fit-content;
}
details[open] summary {
margin-block-end: var(--space-s);
}
button, button,
a[role="button"], a[role="button"],
label[for="toggle-mobile-preview"] { label[for="toggle-mobile-preview"],
summary {
background-color: var(--bg-secondary); 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); 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 { #toggle-mobile-preview:checked + label {
outline: 0.125rem solid var(--color-accent); outline: 0.125rem solid var(--color-accent);
outline-offset: 0.25rem; outline-offset: 0.25rem;
@@ -198,7 +212,7 @@ h1 {
font-size: var(--font-size-5); font-size: var(--font-size-5);
} }
form[method="POST"] { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-s); gap: var(--space-s);
@@ -208,17 +222,6 @@ form > button[type="submit"] {
max-inline-size: 30ch; 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 { form label {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

79
web-app/src/routes/(authenticated)/+page.svelte
View File

@@ -49,42 +49,47 @@
<section> <section>
<h2>All websites</h2> <h2>All websites</h2>
<form method="GET"> <details>
<label> <summary>Search & Sort & Filter</summary>
Search: <form method="GET">
<input <label>
type="text" Search:
name="website_search_query" <input
value={$page.url.searchParams.get("website_search_query")} type="text"
/> name="website_search_query"
</label> value={$page.url.searchParams.get("website_search_query")}
<label> />
Sort: </label>
<select name="website_sort"> <label>
{#each sortOptions as { value, text }} Sort:
<option {value} selected={value === $page.url.searchParams.get("website_sort")} <select name="website_sort">
>{text}</option {#each sortOptions as { value, text }}
> <option {value} selected={value === $page.url.searchParams.get("website_sort")}
{/each} >{text}</option
</select> >
</label> {/each}
<label> </select>
Filter: </label>
<select name="website_filter"> <label>
<option value="all">Show all</option> Filter:
<option value="creations">Created by you</option> <select name="website_filter">
<option value="shared">Shared with you</option> <option value="all">Show all</option>
</select> <option value="creations">Created by you</option>
</label> <option value="shared">Shared with you</option>
<button type="submit">Submit</button> </select>
</form> </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)} {#each data.websites as { id, content_type, title, created_at } (id)}
<article class="website-card"> <li class="website-card">
<h3> <p>
<a href="/website/{id}">{title}</a> <strong>
</h3> <a href="/website/{id}">{title}</a>
</strong>
</p>
<ul> <ul>
<li> <li>
<strong>Type:</strong> <strong>Type:</strong>
@@ -148,9 +153,9 @@
</form> </form>
</Modal> </Modal>
</div> </div>
</article> </li>
{/each} {/each}
</div> </ul>
</section> </section>
{/if} {/if}
@@ -159,7 +164,7 @@
display: grid; display: grid;
gap: var(--space-s); gap: var(--space-s);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 35ch), 1fr)); 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 { .website-card {

128
web-app/src/routes/(authenticated)/website/[websiteId]/articles/+page.svelte
View File

@@ -47,68 +47,75 @@
<section> <section>
<h2>All articles</h2> <h2>All articles</h2>
<form method="GET"> <details>
<label> <summary>Search & Sort & Filter</summary>
Search: <form method="GET">
<input <label>
type="text" Search:
name="article_search_query" <input
value={$page.url.searchParams.get("article_search_query")} type="text"
/> name="article_search_query"
</label> value={$page.url.searchParams.get("article_search_query")}
<label> />
Sort: </label>
<select name="article_sort"> <label>
{#each sortOptions as { value, text }} Sort:
<option {value} selected={value === $page.url.searchParams.get("article_sort")} <select name="article_sort">
>{text}</option {#each sortOptions as { value, text }}
> <option {value} selected={value === $page.url.searchParams.get("article_sort")}
{/each} >{text}</option
</select> >
</label> {/each}
<label> </select>
Filter: </label>
<select name="article_filter"> <label>
<option value="all">Show all</option> Filter:
<option value="creations">Created by you</option> <select name="article_filter">
<option value="shared">Created by others</option> <option value="all">Show all</option>
</select> <option value="creations">Created by you</option>
</label> <option value="shared">Created by others</option>
<button type="submit">Submit</button> </select>
</form> </label>
<button type="submit">Submit</button>
</form>
</details>
{#each data.articles as { id, title } (id)} <ul>
<article class="article-card"> {#each data.articles as { id, title } (id)}
<h3>{title}</h3> <li class="article-card">
<p>
<strong>{title}</strong>
</p>
<div class="article-card__actions"> <div class="article-card__actions">
<a href="/website/{data.website.id}/articles/{id}">Edit</a> <a href="/website/{data.website.id}/articles/{id}">Edit</a>
<Modal id="delete-article-{id}" text="Delete"> <Modal id="delete-article-{id}" text="Delete">
<h4>Delete article</h4> <h4>Delete article</h4>
<p> <p>
<strong>Caution!</strong> <strong>Caution!</strong>
Deleting this article will irretrievably erase all data. Deleting this article will irretrievably erase all data.
</p> </p>
<form <form
method="POST" method="POST"
action="?/deleteArticle" action="?/deleteArticle"
use:enhance={() => { use:enhance={() => {
return async ({ update }) => { return async ({ update }) => {
await update(); await update();
window.location.hash = "!"; window.location.hash = "!";
}; };
}} }}
> >
<input type="hidden" name="id" value={id} /> <input type="hidden" name="id" value={id} />
<button type="submit">Delete article</button> <button type="submit">Delete article</button>
</form> </form>
</Modal> </Modal>
</div> </div>
</article> </li>
{/each} {/each}
</ul>
</section> </section>
{/if} {/if}
</WebsiteEditor> </WebsiteEditor>
@@ -121,17 +128,14 @@
row-gap: var(--space-2xs); row-gap: var(--space-2xs);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-block-start: var(--space-xs);
} }
.article-card + .article-card { .article-card + .article-card {
padding-block-start: var(--space-s); padding-block-start: var(--space-xs);
border-block-start: var(--border-primary); border-block-start: var(--border-primary);
} }
.article-card:nth-of-type(1) {
margin-block-start: var(--space-m);
}
.article-card__actions { .article-card__actions {
display: flex; display: flex;
gap: var(--space-s); gap: var(--space-s);

107
web-app/src/routes/(authenticated)/website/[websiteId]/collaborators/+page.svelte
View File

@@ -54,61 +54,65 @@
<section> <section>
<h2>All collaborators</h2> <h2>All collaborators</h2>
{#each data.collaborators as { website_id, user_id, permission_level, user: { username } } (`${website_id}-${user_id}`)} <ul>
<article class="collaborator-card"> {#each data.collaborators as { website_id, user_id, permission_level, user: { username } } (`${website_id}-${user_id}`)}
<h3>{username} ({permission_level})</h3> <li class="collaborator-card">
<p>
<strong>{username} ({permission_level})</strong>
</p>
<div class="collaborator-card__actions"> <div class="collaborator-card__actions">
<Modal id="update-collaborator-{user_id}" text="Update"> <Modal id="update-collaborator-{user_id}" text="Update">
<h4>Update collaborator</h4> <h4>Update collaborator</h4>
<form <form
method="POST" method="POST"
action="?/updateCollaborator" action="?/updateCollaborator"
use:enhance={() => { use:enhance={() => {
return async ({ update }) => { return async ({ update }) => {
await update({ reset: false }); await update({ reset: false });
window.location.hash = "!"; window.location.hash = "!";
}; };
}} }}
> >
<input type="hidden" name="user-id" value={user_id} /> <input type="hidden" name="user-id" value={user_id} />
<label> <label>
Permission level: Permission level:
<select name="permission-level"> <select name="permission-level">
<option value="10" selected={10 === permission_level}>10 - View</option> <option value="10" selected={10 === permission_level}>10 - View</option>
<option value="20" selected={20 === permission_level}>20 - Edit</option> <option value="20" selected={20 === permission_level}>20 - Edit</option>
<option value="30" selected={30 === permission_level}>30 - Manage</option> <option value="30" selected={30 === permission_level}>30 - Manage</option>
</select> </select>
</label> </label>
<button type="submit">Update collaborator</button> <button type="submit">Update collaborator</button>
</form> </form>
</Modal> </Modal>
<Modal id="remove-collaborator-{user_id}" text="Remove"> <Modal id="remove-collaborator-{user_id}" text="Remove">
<h4>Remove collaborator</h4> <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 <form
method="POST" method="POST"
action="?/removeCollaborator" action="?/removeCollaborator"
use:enhance={() => { use:enhance={() => {
return async ({ update }) => { return async ({ update }) => {
await update(); await update();
window.location.hash = "!"; window.location.hash = "!";
}; };
}} }}
> >
<input type="hidden" name="user-id" value={user_id} /> <input type="hidden" name="user-id" value={user_id} />
<button type="submit">Remove collaborator</button> <button type="submit">Remove collaborator</button>
</form> </form>
</Modal> </Modal>
</div> </div>
</article> </li>
{/each} {/each}
</ul>
</section> </section>
{/if} {/if}
</WebsiteEditor> </WebsiteEditor>
@@ -121,17 +125,14 @@
row-gap: var(--space-2xs); row-gap: var(--space-2xs);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-block-start: var(--space-xs);
} }
.collaborator-card + .collaborator-card { .collaborator-card + .collaborator-card {
padding-block-start: var(--space-s); padding-block-start: var(--space-xs);
border-block-start: var(--border-primary); border-block-start: var(--border-primary);
} }
.collaborator-card:nth-of-type(1) {
margin-block-start: var(--space-xs);
}
.collaborator-card__actions { .collaborator-card__actions {
display: flex; display: flex;
gap: var(--space-2xs); gap: var(--space-2xs);