Improve layout for smaller devices

This commit is contained in:
Max Nuding 2023-04-11 15:49:50 +02:00
parent e3c15be31c
commit 268128c2f4
Signed by: phlaym
GPG Key ID: A06651BAB6777237
3 changed files with 217 additions and 168 deletions

View File

@ -5,21 +5,25 @@
<div class="footer"> <div class="footer">
<div> <div>
<span>Made with &#x1F918; by&nbsp;</span> <span class="label"
<a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a> >Made<span class="secretIngredient">&nbsp;with &#x1F918;</span>&nbsp;by&nbsp;</span
>
<a href="https://metalhead.club/@aymm" rel="me"
>@aymm<span class="mastodonInstance">@metalhead.club</span></a
>
</div> </div>
| |
<div> <div>
<a href="https://phlaym.net/git/phlaym/moshing-mammut"> <a href="https://phlaym.net/git/phlaym/moshing-mammut">
<img alt="Git branch" src={git} class="icon" /> <img alt="Git branch" src={git} class="icon" />
Source Code <span class="label">Source Code</span>
</a> </a>
</div> </div>
| |
<div> <div>
<a href="/feed.xml"> <a href="/feed.xml">
<img alt="RSS" src={rss} class="icon" /> <img alt="RSS" src={rss} class="icon" />
RSS Feed <span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
</a> </a>
</div> </div>
</div> </div>
@ -53,4 +57,27 @@
background-color: var(--color-grey-translucent); background-color: var(--color-grey-translucent);
} }
} }
@media only screen and (max-device-width: 620px) {
.mastodonInstance,
.feedSuffix {
display: none;
}
.footer {
justify-content: center;
}
}
@media only screen and (max-device-width: 430px) {
.mastodonInstance,
.feedSuffix,
.secretIngredient {
display: none;
}
}
@media only screen and (max-device-width: 370px) {
.label {
display: none;
}
}
</style> </style>

View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import FooterComponent from '$lib/components/FooterComponent.svelte' import FooterComponent from '$lib/components/FooterComponent.svelte';
import { SvelteToast } from '@zerodevx/svelte-toast'; import { SvelteToast } from '@zerodevx/svelte-toast';
const options = { const options = {
@ -7,6 +7,7 @@
classes: ['toast'] classes: ['toast']
}; };
</script> </script>
<slot /> <slot />
<SvelteToast {options} /> <SvelteToast {options} />
<div class="footer"> <div class="footer">
@ -33,4 +34,9 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
@media only screen and (max-device-width: 620px) {
.footer {
width: calc(100% + 16px);
}
}
</style> </style>

View File

@ -1,25 +1,27 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from 'svelte';
import type { PageData } from './$types'; import type { PageData } from './$types';
import type { Post } from '$lib/mastodon/response'; import type { Post } from '$lib/mastodon/response';
import { PUBLIC_REFRESH_INTERVAL, PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public'; import {
PUBLIC_REFRESH_INTERVAL,
PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME
} from '$env/static/public';
import PostComponent from '$lib/components/PostComponent.svelte'; import PostComponent from '$lib/components/PostComponent.svelte';
import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte'; import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
import { fly, type FlyParams } from 'svelte/transition'; import { fly, type FlyParams } from 'svelte/transition';
import { cubicInOut } from 'svelte/easing'; import { cubicInOut } from 'svelte/easing';
import { errorToast } from '$lib/errorToast' import { errorToast } from '$lib/errorToast';
export let data: PageData; export let data: PageData;
interface FetchOptions { interface FetchOptions {
since?: string, since?: string;
before?: string, before?: string;
count?: number count?: number;
} }
interface EdgeFlyParams extends FlyParams { interface EdgeFlyParams extends FlyParams {
created_at: string created_at: string;
} }
const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL); const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
@ -39,7 +41,8 @@ let oldestBeforeLastFetch: number | null = null;
function edgeFly(node: Element, opts: EdgeFlyParams) { function edgeFly(node: Element, opts: EdgeFlyParams) {
const createdAt = new Date(opts.created_at).getTime(); const createdAt = new Date(opts.created_at).getTime();
const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt); const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
const oldest = oldestBeforeLastFetch !== null const oldest =
oldestBeforeLastFetch !== null
? oldestBeforeLastFetch ? oldestBeforeLastFetch
: new Date(data.posts[data.posts.length - 1].created_at).getTime(); : new Date(data.posts[data.posts.length - 1].created_at).getTime();
const diffOldest = Math.abs(oldest - createdAt); const diffOldest = Math.abs(oldest - createdAt);
@ -70,7 +73,7 @@ async function fetchPosts(options: FetchOptions): Promise<Post[]> {
function filterDuplicates(posts: Post[]): Post[] { function filterDuplicates(posts: Post[]): Post[] {
return posts.filter((obj, index, arr) => { return posts.filter((obj, index, arr) => {
return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index; return arr.map((mapObj) => mapObj.url).indexOf(obj.url) === index;
}); });
} }
@ -79,7 +82,8 @@ function refresh() {
if (data.posts.length > 0) { if (data.posts.length > 0) {
filter = { since: data.posts[0].created_at }; filter = { since: data.posts[0].created_at };
} }
fetchPosts(filter).then(resp => { fetchPosts(filter)
.then((resp) => {
if (resp.length > 0) { if (resp.length > 0) {
// Prepend new posts, filter dupes // Prepend new posts, filter dupes
// There shouldn't be any duplicates, but better be safe than sorry // There shouldn't be any duplicates, but better be safe than sorry
@ -109,9 +113,9 @@ onMount(async () => {
return () => { return () => {
if (interval !== null) { if (interval !== null) {
clearInterval(interval) clearInterval(interval);
}
} }
};
}); });
function loadOlderPosts() { function loadOlderPosts() {
@ -123,8 +127,8 @@ function loadOlderPosts() {
oldestBeforeLastFetch = new Date(before).getTime(); oldestBeforeLastFetch = new Date(before).getTime();
} }
fetchPosts(filter)
fetchPosts(filter).then(resp => { .then((resp) => {
if (resp.length > 0) { if (resp.length > 0) {
// Append old posts, filter dupes // Append old posts, filter dupes
// There shouldn't be any duplicates, but better be safe than sorry // There shouldn't be any duplicates, but better be safe than sorry
@ -136,20 +140,19 @@ function loadOlderPosts() {
} }
loadingOlderPosts = false; loadingOlderPosts = false;
}) })
.catch(e => { .catch((e) => {
loadingOlderPosts = false; loadingOlderPosts = false;
errorToast('Error loading older posts: ' + e.message); errorToast('Error loading older posts: ' + e.message);
}); });
} }
</script> </script>
<svelte:head> <svelte:head>
<title>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</title> <title>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</title>
</svelte:head> </svelte:head>
<h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2> <h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
<div class="wrapper"> <div class="wrapper">
<div></div> <div />
<div class="posts"> <div class="posts">
{#if data.posts.length === 0} {#if data.posts.length === 0}
Sorry, no posts recommending music aave been found yet Sorry, no posts recommending music aave been found yet
@ -157,7 +160,12 @@ function loadOlderPosts() {
{#each data.posts as post (post.url)} {#each data.posts as post (post.url)}
<div <div
class="post" class="post"
transition:edgeFly="{{ y: 10, created_at: post.created_at, duration: 300, easing: cubicInOut }}" transition:edgeFly={{
y: 10,
created_at: post.created_at,
duration: 300,
easing: cubicInOut
}}
> >
<PostComponent {post} /> <PostComponent {post} />
</div> </div>
@ -165,10 +173,12 @@ function loadOlderPosts() {
<LoadMoreComponent <LoadMoreComponent
on:loadOlderPosts={loadOlderPosts} on:loadOlderPosts={loadOlderPosts}
moreAvailable={moreOlderPostsAvailable} moreAvailable={moreOlderPostsAvailable}
isLoading={loadingOlderPosts}/> isLoading={loadingOlderPosts}
/>
</div> </div>
<div></div> <div />
</div> </div>
<style> <style>
.posts { .posts {
display: flex; display: flex;
@ -191,4 +201,10 @@ function loadOlderPosts() {
text-align: center; text-align: center;
z-index: 100; z-index: 100;
} }
@media only screen and (max-device-width: 650px) {
.post {
max-width: 100vw;
}
}
</style> </style>