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

better toggle between list and grid

Browse source
This commit is contained in:
Daniel Bulant 2022-05-21 09:49:08 +02:00
parent e2c35a624a
commit d1d1d1f08e
2 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/components/listOrGrid.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
export var list = false;
</script>
<div>
<button on:click={() => list = !list} class:active={list == false}>Grid</button><!--
--><button on:click={() => list = !list} class:active={list == true}>List</button>
</div>
<style>
div {
margin-left: auto;
width: max-content;
}
button {
border-radius: 0;
margin: 0;
}
button:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
button:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
button.active {
background: rgb(202, 202, 202);
}
</style>

7
src/pages/index.svelte
View file

@ -3,6 +3,7 @@
import { goto } from '@roxi/routify/runtime/helpers';
import { getUserDetails, getUserManga, isLogedIn } from "../util/anilist";
import Items from "../components/items.svelte";
import ListOrGrid from "../components/listOrGrid.svelte";
var name = "";
@ -61,11 +62,7 @@
<a href="https://mangadex.org">Mangadex.org</a>
</div>
<div>
<label for="list-style">Show as list</label>
<input type="checkbox" name="list-style" id="list-style" bind:checked={listStyle}>
</div>
<ListOrGrid bind:list={listStyle} />
{#if isLogedIn()}
<div>