dan/Mangades
1
0
Fork 0
mirror of https://github.com/danbulant/Mangades synced 2026-07-06 19:40:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve styles for chapter selection

Browse source
This commit is contained in:
Daniel Bulant 2021-05-23 17:07:24 +02:00
parent 7327c1b724
commit 67f6032832
2 changed files with 50 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/global.css
View file

@ -18,7 +18,7 @@ h1 {
main main
{ {
max-width: 450px; max-width: 550px;
margin: auto; margin: auto;
} }

60
src/pages/[manga]/index.svelte
View file

@ -140,23 +140,61 @@
{#if chapters.results.filter(c => c.data.attributes.translatedLanguage === "en").length === 0} {#if chapters.results.filter(c => c.data.attributes.translatedLanguage === "en").length === 0}
<p>No chapters found.</p> <p>No chapters found.</p>
{/if} {/if}
<ol class="hide-nums"> <table>
{#each chapters.results.filter(c => c.data.attributes.translatedLanguage === "en") as chapter} <tbody>
<li on:click={() => prepare(chapter)}> {#each chapters.results.filter(c => c.data.attributes.translatedLanguage === "en") as chapter}
{chapter.data.attributes.volume ? "Vol " + chapter.data.attributes.volume : ""} <tr>
Chapter {chapter.data.attributes.chapter} <td>{chapter.data.attributes.volume ? "Vol " + chapter.data.attributes.volume : ""}</td>
{chapter.data.attributes.title} <td>Chapter {chapter.data.attributes.chapter}</td>
- Download - <a href={$url("./" + chapter.data.id)} on:click|stopPropagation>View</a> <td>{chapter.data.attributes.title}</td>
</li> <td class="action"><span on:click={() => prepare(chapter)}>Download</span></td>
{/each} <td class="action"><a href={$url("./" + chapter.data.id)} on:click|stopPropagation>View</a></td>
</ol> </tr>
{/each}
</tbody>
</table>
{/await} {/await}
</main> </main>
<style> <style>
.hide-nums { main {
font-size: 1.1rem;
}
tbody {
list-style-type: disc; list-style-type: disc;
} }
table {
border-collapse: collapse;
width: 100%;
}
tr {
border: 1px solid black;
}
tr:hover {
background: rgba(0,0,0,0.1);
}
td {
padding: 5px 5px;
}
td.action {
font-weight: bold;
color: black;
text-decoration: none;
cursor: pointer;
}
td.action:hover {
text-decoration: underline;
color: rgb(0,100,200);
}
td.action a {
color: inherit;
}
.state { .state {
border-radius: 10px; border-radius: 10px;