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

Add acknowledgements

Browse Source
This commit is contained in:
Wim Brand
2020-12-15 16:25:20 +01:00
parent e35e6b0f45
commit 75ca29d06b
10 changed files with 397 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,37 +3,81 @@ import { onMount } from "svelte";
import Spinner from "../util/Spinner.svelte";
import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
let loading = true
let buckets = []
let loading = true;
let buckets = [];
const get_buckets = async () => {
try {
let resp = await fs_get_buckets()
buckets = resp.buckets
let resp = await fs_get_buckets();
buckets = resp.buckets;
} catch (err) {
alert(err)
alert(err);
} finally {
loading = false
loading = false;
}
};
const expand_bucket = () => {
}
onMount(get_buckets)
onMount(get_buckets);
</script>
<div>
{#if loading}
<div class="spinner_container"><Spinner></Spinner></div>
<div class="spinner_container">
<Spinner />
</div>
{/if}
{#each buckets as bucket}
<a href={"/d/"+bucket.id}>{bucket.name}</a>
{/each}
<div class="limit_width">
{#each buckets as bucket}
<a class="bucket_header" href={'/d/' + bucket.id}>
<div class="bucket_title">{bucket.name}</div>
<button class="bucket_expand" on:click|preventDefault={expand_bucket}><i class="icon">expand_more</i></button>
</a>
<div class="bucket_details">
Hello!
</div>
{/each}
</div>
</div>
<style>
.spinner_container {
display: inline-block;
height: 100px;
width: 100px;
}
.spinner_container {
display: inline-block;
height: 100px;
width: 100px;
}
.bucket_header {
display: flex;
flex-direction: row;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);
}
.bucket_header:hover {
box-shadow: 0 0 2px 2px var(--highlight_color), inset 0 0 1px 1px var(--highlight_color);
color: var(--highlight_color);
text-decoration: none;
}
.bucket_title {
flex: 1 1 auto;
align-self: center;
padding: 0.4em;
}
.bucket_expand {
flex: 0 0 auto;
}
.bucket_details {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text_color);
background-color: var(--layer_3_color);
transition: box-shadow 0.5s;
}
</style>