pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace CSS classes with semantic HTML

Browse Source
This commit is contained in:
Fornax
2022-01-11 13:28:22 +01:00
parent c6f0421ad3
commit 8719d9b0f9
37 changed files with 1215 additions and 1279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
svelte/src/user_buckets/UserBucket.svelte
View File

@@ -1,13 +1,10 @@
<script>
import { fs_delete_bucket } from "../filesystem/FilesystemAPI.svelte";
import { createEventDispatcher } from "svelte";
import Expandable from "../util/Expandable.svelte";
let dispatch = createEventDispatcher()
export let bucket
let details_hidden = true
const expand_bucket = () => {
details_hidden = !details_hidden
}
const save_bucket = () => {
alert("save")
@@ -32,21 +29,14 @@ const delete_bucket = async () => {
</script>
<div class="bucket">
<div class="bucket_header">
<Expandable>
<div slot="header">
<a href={'/d/' + bucket.id} class="bucket_title">
<img class="bucket_icon" src="/res/img/mime/folder-remote.png" alt="Bucket icon"/>
{bucket.name}
</a>
<button class="bucket_expand" on:click={expand_bucket}>
{#if details_hidden}
<i class="icon">expand_more</i>
{:else}
<i class="icon">expand_less</i>
{/if}
</button>
</div>
<div class="bucket_details" class:hidden={details_hidden}>
<div>
<form on:submit|preventDefault={save_bucket}>
<table class="form">
<tr class="form">
@@ -66,26 +56,9 @@ const delete_bucket = async () => {
</table>
</form>
</div>
</div>
</Expandable>
<style>
.bucket {
text-decoration: none;
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px 5px 0 var(--shadow_color);
margin: 1em 0;
border-radius: 8px;
overflow: hidden;
}
.bucket_header {
display: flex;
flex-direction: row;
color: var(--text_color);
}
.bucket_header:hover {
background-color: var(--input_color_dark)
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
@@ -98,18 +71,4 @@ const delete_bucket = async () => {
margin: 4px;
vertical-align: middle;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
padding: 0.4em;
flex-direction: column;
text-decoration: none;
border-top: 1px solid var(--layer_3_color_border);
color: var(--text_color);
}
.hidden {
display: none;
}
</style>

82
svelte/src/user_buckets/UserBuckets.svelte
View File

@@ -41,51 +41,49 @@ const create_bucket = async () => {
onMount(get_buckets);
</script>
<div>
{#if loading}
<div class="spinner_container">
<Spinner />
{#if loading}
<div class="spinner_container">
<Spinner />
</div>
{/if}
<section>
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
on:click={() => {creating_bucket = !creating_bucket}}
>
<i class="icon">create_new_folder</i> New bucket
</button>
</div>
{#if creating_bucket}
<div class="highlight_light">
<form on:submit|preventDefault={create_bucket}>
<table class="form">
<tr>
<td>
Name
</td>
<td>
<input type="text" bind:this={new_bucket_name}/>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
</form>
</div>
{/if}
<div class="limit_width">
<div class="toolbar" style="text-align: right;">
<button
class:button_highlight={creating_bucket}
on:click={() => {creating_bucket = !creating_bucket}}
>
<i class="icon">create_new_folder</i> New bucket
</button>
</div>
{#if creating_bucket}
<div class="highlight_light">
<form on:submit|preventDefault={create_bucket}>
<table class="form">
<tr>
<td>
Name
</td>
<td>
<input type="text" bind:this={new_bucket_name}/>
</td>
</tr>
<tr>
<td colspan="2">
<button class="button_highlight" type="submit" style="float: right;">
<i class="icon">save</i> Save
</button>
</td>
</tr>
</table>
</form>
</div>
{/if}
{#each buckets as bucket}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</div>
</div>
{#each buckets as bucket (bucket.id)}
<UserBucket bucket={bucket} on:refresh={get_buckets}></UserBucket>
{/each}
</section>
<style>
.spinner_container {