dan/Mangades
1
0
Fork 0
mirror of https://github.com/danbulant/Mangades synced 2026-06-14 03:41:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

small style improvements

Browse source
This commit is contained in:
Daniel Bulant 2022-12-09 17:26:17 +01:00
parent 98f2a6b5b8
commit db45055d25
2 changed files with 77 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/routes/+layout.svelte
View file

@ -49,15 +49,23 @@
<style lang="postcss">
.darkmode-toggle {
position: fixed;
position: absolute;
top: 0;
right: 0;
z-index: 1000;
background: none;
border: none;
font-size: 1.5em;
font-size: 1.3rem;
padding: 0.5em;
cursor: pointer;
color: black;
border: 2px solid black;
border-top-width: 0;
border-right-width: 0;
border-radius: 0;
border-bottom-left-radius: 5px;
background: rgba(255,255,255,0.3);
backdrop-filter: blur(25px);
}
.main {
/* min-width: max(100%, 100vw);
@ -72,11 +80,8 @@
background: black;
}
button.dark {
border: 2px solid white;
border-top-width: 0;
border-right-width: 0;
border-radius: 0;
border-bottom-left-radius: 5px;
border-color: white;
background: rgba(0,0,0,0.3);
}
.flow {
position: fixed;

79
src/routes/[manga]/+page.svelte
View file

@ -273,9 +273,25 @@
}
var selectedImage = null;
const relatedMangaMap = {
spin_off: "Spin off",
doujinshi: "Doujinshi",
side_story: "Side story",
colored: "Colored version",
monochrome: "Monochrome version",
adapted_from: "Adapted from",
based_on: "Based on",
shared_universe: "Shared universe"
};
var width;
var smallScreenMode = width < 660;
$: smallScreenMode = width < 660;
</script>
<svelte:window on:beforeUnload={beforeUnload} />
<svelte:window on:beforeUnload={beforeUnload} bind:innerWidth={width} />
<svelte:head>
<title>Chapters of {title}</title>
@ -290,7 +306,7 @@
<ArtDialog bind:selectedImage />
<main>
<main class:smallScreenMode>
<h1>{title}</h1>
<h3>
@ -302,13 +318,24 @@
{/if}
{#if anilistData} {#await anilistData then data} {data.status} &middot; {/await} {/if}
{manga.contentRating}
{#if smallScreenMode}
<br>
{#if relationships.find(t => t.type === "author")}
Author: {relationships.find(t => t.type === "author").attributes.name}
{#if relationships.find(t => t.type === "artist")} &middot; {/if}
{/if}
{#if relationships.find(t => t.type === "artist")}
Artist: {relationships.find(t => t.type === "artist").attributes.name}
{/if}
{/if}
</h3>
<div class="flex">
<div class="flex infoflex">
{#if relationships.find(t => t.type === "cover_art")}
<img class="cover" class:r18={!["safe", "suggestive"].includes(manga.contentRating)} draggable="false" src="{imageproxy}https://uploads.mangadex.org/covers/{mangaId}/{relationships.find(t => t.type === "cover_art").attributes.fileName}.512.jpg" alt="" on:click={() => selectedImage = `https://uploads.mangadex.org/covers/${mangaId}/${relationships.find(t => t.type === "cover_art").attributes.fileName}.512.jpg`}>
{/if}
<div class="info">
<div class="info" class:hidden={smallScreenMode}>
{#if relationships.find(t => t.type === "author")}
<span class="block">Author: {relationships.find(t => t.type === "author").attributes.name}</span>
{/if}
@ -419,6 +446,19 @@
AL score: {data.averageScore} <br>
Also known as: {data.synonyms.join(", ")} {Object.values(manga.title).filter(t => t !== title).join(", ")}
{#if smallScreenMode}
{#if relationships.find(t => t.type === "author")}
<span class="block">Author: {relationships.find(t => t.type === "author").attributes.name}</span>
{/if}
{#if relationships.find(t => t.type === "artist")}
<span class="block">Artist: {relationships.find(t => t.type === "artist").attributes.name}</span>
{/if}
{#if manga.description.en}
<p><SvelteMarkdown source={manga.description.en} isInline /></p>
{/if}
{/if}
<br><br>
{/await} {/if}
@ -427,16 +467,7 @@
<div>
<h4>Related manga</h4>
{#each relationships.filter(t => t.type === "manga") as relatedManga}
<a href="/{relatedManga.id}">{{
spin_off: "Spin off",
doujinshi: "Doujinshi",
side_story: "Side story",
colored: "Colored version",
monochrome: "Monochrome version",
adapted_from: "Adapted from",
based_on: "Based on",
shared_universe: "Shared universe"
}[relatedManga.related] || relatedManga.related}</a> <br>
<a href="/{relatedManga.id}">{relatedMangaMap[relatedManga.related] || relatedManga.related}</a> <br>
{/each}
</div>
{/if}
@ -479,6 +510,14 @@
{/if}
</div>
{/if}
{#if manga.tags}
<div>
<h4>Tags</h4>
{#each manga.tags as tag}
<span class="block">{tag.attributes.name.en || tag.attributes.name.jp || Object.values(tag.attributes.name)[0]}</span>
{/each}
</div>
{/if}
</div>
</div>
</SwiperSlide>
@ -486,6 +525,12 @@
</main>
<style lang="postcss">
.hidden {
display: none;
}
.infoflex {
margin: 15px;
}
h4 { margin: 0; }
.flex-wrapped {
display: flex;
@ -535,6 +580,12 @@
height: 350px;
margin-right: 15px;
}
.smallScreenMode .cover {
margin: 0;
}
.smallScreenMode .infoflex {
justify-content: center;
}
.block {
display: block;
}