phlaym/moshing-mammut
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases 8 Activity

UI improvements

Browse Source
This commit is contained in:
Max Nuding 2023-04-01 20:05:52 +02:00
parent df6f2befeb
commit 963bcbf889
Signed by: phlaym
GPG Key ID: A06651BAB6777237
4 changed files with 83 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app.html
View File

@ -1,12 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

18
src/lib/components/PostComponent.svelte
View File

@ -8,12 +8,15 @@
$: dateCreated = new Date(post.created_at).toLocaleString();
</script>
<div class="wrapper">
<div class="avatar"><AvatarComponent account={post.account} /></div>
<div class="post">
<AccountComponent account={post.account} />
<small><a href={post.url} target="_blank">{dateCreated}</a></small>
{@html post.content}
<div class="meta">
<AccountComponent account={post.account} />
<small><a href={post.url} target="_blank">{dateCreated}</a></small>
</div>
<div class="content">{@html post.content}</div>
</div>
</div>
@ -24,8 +27,17 @@
.post {
display: flex;
flex-direction: column;
flex-grow: 2;
}
.meta {
display: flex;
justify-content: space-between;
}
.avatar {
margin-right: 1em;
}
.content {
max-width: calc(600px - 1em - 50px);
overflow-x: auto;
}
</style>

36
src/routes/+page.svelte
View File

@ -35,7 +35,37 @@ onMount(async () => {
}
})
</script>
<h2>Metalhead.club music list</h2>
<div class="wrapper">
<div></div>
<div class="posts">
{#if data.posts.length === 0}
Sorry, no posts recommending music aave been found yet
{/if}
{#each data.posts as post (post.id)}
<div class="post"><PostComponent {post} /></div>
{/each}
</div>
<div></div>
</div>
<style>
.posts {
display: flex;
flex-direction: column;
}
.post {
width: 100%;
max-width: 600px;
margin-bottom: 1em;
border-bottom: 1px solid var(--color-border);
padding: 1em;
}
.wrapper {
display: flex;
justify-content: space-between;
}
{#each data.posts as post (post.id)}
<PostComponent {post}></PostComponent>
{/each}
h2 {
text-align: center;
}
</style>

25
static/style.css Normal file
View File

@ -0,0 +1,25 @@
body {
--color-text: #2F0C7A;
--color-bg: white;
--color-border: #17063B;
--color-link: #563ACC;
--color-link-visited: #858AFA;
color: var(--color-text);
background-color: var(--color-bg);
}
a {
color: var(--color-link);
}
a:visited {
color: var(--color-link-visited);
}
@media (prefers-color-scheme: dark) {
body {
--color-text: white;
--color-bg: #17063B;
--color-border: white;
}
}