zoriya/vex
1
0
Fork 0
mirror of https://github.com/zoriya/vex.git synced 2026-08-16 02:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Post card now is clickable

Browse Source
This commit is contained in:
Clément Le Bihan
2024-05-05 16:33:17 +02:00
parent 37dacb0d79
commit ee9966d1fb
5 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app.html
+1 -1
View File
@@ -16,7 +16,7 @@
</body> </body>
<style> <style>
body { body {
margin-right: 10%; padding: 40px;
font-family: 'Hanken Grotesk', sans-serif; font-family: 'Hanken Grotesk', sans-serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-weight: 400; font-weight: 400;
web/src/lib/posts/card.svelte
+32 -32
View File
@@ -1,46 +1,45 @@
<script lang="ts"> <script lang="ts">
import type { Post } from "$lib/types"; import type { Post } from "$lib/types";
import Time, { dayjs } from "svelte-time"; import Time, { dayjs } from "svelte-time";
import TagList from "./tag-list.svelte";
import QuillPenLine from "virtual:icons/mingcute/quill-pen-line"; import QuillPenLine from "virtual:icons/mingcute/quill-pen-line";
export let post: Post; export let post: Post;
</script> </script>
<article> <a
<div class="origin"> href={post.link}
<img src={post.feed.faviconUrl} alt={post.feed.title} /> target="_blank"
<span>{post.feed.title}</span> | on:click={() => {
{#if post.author} console.log("clicked");
<div class="author"> }}
<QuillPenLine /> >
<span>{post.author}</span> <article>
</div> <div class="origin">
| <img src={post.feed.faviconUrl} alt={post.feed.title} />
{/if} <span>{post.feed.title}</span> |
<Time {#if post.author}
timestamp={post.date} <div class="author">
relative={true} <QuillPenLine />
title={dayjs(post.date).locale("en").toString()} <span>{post.author}</span>
/> </div>
</div> |
<content> {/if}
<h2>{post.title}</h2> <Time
<p>{post.content}</p> timestamp={post.date}
</content> relative={true}
<!-- <footer> title={dayjs(post.date).locale("en").toString()}
/>
</div>
<content>
<h2>{post.title}</h2>
<p>{post.content}</p>
</content>
<!-- <footer>
<TagList tags={post.feed.tags} /> <TagList tags={post.feed.tags} />
</footer> --> </footer> -->
</article> </article>
</a>
<style> <style>
article {
/* border-radius: 10px;
box-shadow: 0px 0px 12px 9px rgba(0, 0, 0, 0.28);
border: 1px solid #e0e0e0;
padding: 0.7rem;
background-color: rgb(220, 220, 220); */
}
.origin { .origin {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -58,6 +57,7 @@
h2 { h2 {
margin: 0.5rem; margin: 0.5rem;
font-size: 1.3rem; font-size: 1.3rem;
font-weight: 600;
} }
p { p {
web/src/lib/posts/list.svelte
+11 -12
View File
@@ -4,24 +4,23 @@
export let posts: Post[] = []; export let posts: Post[] = [];
</script> </script>
<div> <ul>
<h1>Posts</h1> {#each posts as post, index}
<li>
<ul> <Card {post} />
{#each posts as post} </li>
<li> {#if index !== posts.length - 1}
<Card {post} /> <hr />
</li> {/if}
<hr> {/each}
{/each} </ul>
</ul>
</div>
<style> <style>
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
display: flex; display: flex;
gap: 1rem;
flex-direction: column; flex-direction: column;
} }
</style> </style>
web/src/routes/+layout.svelte
+23 -1
View File
@@ -1 +1,23 @@
<script>import "../app.pcss";</script><slot></slot> <script>
import "../app.pcss";
import { BottomNav, BottomNavItem } from "flowbite-svelte";
import { HomeSolid, UserCircleSolid } from "flowbite-svelte-icons";
</script>
<slot></slot>
<footer>
<BottomNav position="absolute" classInner="grid-cols-2">
<BottomNavItem btnName="Posts">
<HomeSolid
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
/>
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
/>
</BottomNavItem>
</BottomNav>
</footer>
web/src/routes/+page.svelte
+3 -24
View File
@@ -6,7 +6,7 @@
Skeleton, Skeleton,
ImagePlaceholder, ImagePlaceholder,
} from "flowbite-svelte"; } from "flowbite-svelte";
import List from "$lib/posts/list.svelte"; import List from "$lib/posts/list.svelte";
import { import {
HomeSolid, HomeSolid,
WalletSolid, WalletSolid,
@@ -16,33 +16,12 @@
</script> </script>
<main> <main>
<section> <List posts={data.posts} />
<List posts={data.posts} />
</section>
<footer>
<BottomNav position="absolute" classInner="grid-cols-2">
<BottomNavItem btnName="Posts">
<HomeSolid
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
/>
</BottomNavItem>
<BottomNavItem btnName="Profile">
<UserCircleSolid
class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
/>
</BottomNavItem>
</BottomNav>
</footer>
</main> </main>
<style> <style>
main { main {
display: flex; display: flex;
} justify-content: center;
.sidebar {
display: flex;
flex-direction: column-reverse;
width: 400px;
height: 100vh;
} }
</style> </style>