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

1
src/app.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
%sveltekit.head% %sveltekit.head%
</head> </head>

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

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

36
src/routes/+page.svelte
View File

@ -35,7 +35,37 @@ onMount(async () => {
} }
}) })
</script> </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)} h2 {
<PostComponent {post}></PostComponent> text-align: center;
{/each} }
</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;
}
}