dan/design
1
0
Fork 0
mirror of https://github.com/danbulant/design synced 2026-07-05 11:00:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix removal of reldate

Browse source
This commit is contained in:
Daniel Bulant 2022-04-10 21:27:58 +02:00
parent 1806f7ffca
commit 5052ec0356
2 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/lib/components/heroPost.svelte
View file

@ -1,12 +1,17 @@
<script> <script>
import { DateTime } from "luxon";
export var bigThumbnail; export var bigThumbnail;
// export var categories = []; // export var categories = [];
export var author; // export var author;
export var relDate; export var date;
export var title; export var title;
export var authorIcon; // export var authorIcon;
export var description; export var description;
export var path; export var path;
let dt = DateTime.fromISO(date);
$: dt = DateTime.fromISO(date);
</script> </script>
<a href={path} class="post"> <a href={path} class="post">
@ -26,7 +31,7 @@
<span class="spacer">—</span> <span class="spacer">—</span>
<span class="author">{author}</span> <span class="author">{author}</span>
<span class="spacer">—</span> --> <span class="spacer">—</span> -->
<span class="date">{relDate}</span> <span class="date">{dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
</div> </div>
</div> </div>
</a> </a>
@ -43,9 +48,9 @@
border-radius: 5px; border-radius: 5px;
width: 100%; width: 100%;
} }
.categories { /* .categories {
color: #0054E2; color: #0054E2;
} } */
.author { .author {
display: flex; display: flex;
align-items: center; align-items: center;
@ -67,9 +72,9 @@
.author > * { .author > * {
padding: 0 5px; padding: 0 5px;
} }
.author img { /* .author img {
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
padding-right: 5px; padding-right: 5px;
} } */
</style> </style>

8
src/lib/components/post.svelte
View file

@ -1,10 +1,11 @@
<script> <script>
import darkmode from "$lib/stores/darkmode"; import darkmode from "$lib/stores/darkmode";
import { DateTime } from "luxon";
export var thumbnail; export var thumbnail;
// export var categories = []; // export var categories = [];
// export var author; // export var author;
export var relDate; export var date;
export var title; export var title;
// export var authorIcon; // export var authorIcon;
export var currentHover; export var currentHover;
@ -20,6 +21,9 @@
function mouseleave() { function mouseleave() {
if(currentHover == title) currentHover = null; if(currentHover == title) currentHover = null;
} }
let dt = DateTime.fromISO(date);
$: dt = DateTime.fromISO(date);
</script> </script>
<a href={path} class:dark={$darkmode} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}> <a href={path} class:dark={$darkmode} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
@ -41,7 +45,7 @@
<span class="spacer">—</span> <span class="spacer">—</span>
<span class="author">{author}</span> <span class="author">{author}</span>
<span class="spacer">—</span> --> <span class="spacer">—</span> -->
<span class="date">{relDate}</span> <span class="date">{dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
</div> </div>
</div> </div>
</a> </a>