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

improved small screen search

Browse source
This commit is contained in:
Daniel Bulant 2022-12-09 21:00:16 +01:00
parent 72d9cd30d6
commit fc9d555ecc
1 changed files with 17 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/lib/components/navbar.svelte
View file

@ -17,13 +17,19 @@
$: if(validate(name)) open(); $: if(validate(name)) open();
const anilistID = hostname === "manga.danbulant.eu" ? "8374" : "8375"; const anilistID = hostname === "manga.danbulant.eu" ? "8374" : "8375";
var focused = false;
var width;
var small = width < 600;
$: small = width < 600;
</script> </script>
<div class="navbar flex"> <svelte:window bind:innerWidth={width} />
<div class="navbar flex" class:full-text={small && focused}>
<h1>Library</h1> <h1>Library</h1>
<div class="search"> <div class="search">
<input type="text" placeholder="{isLogedIn() ? "Search for manga or enter URL of mangadex.org manga" : "Enter UUID or URL of mangadex.org manga"}" bind:value={name}> <input type="text" on:focus={() => focused = true} on:blur={() => focused = false} placeholder="{isLogedIn() ? "Search for manga or enter URL of mangadex.org manga" : "Enter UUID or URL of mangadex.org manga"}" bind:value={name}>
<button on:click={open}>➜</button> <button on:click={open}>➜</button>
</div> </div>
@ -44,6 +50,12 @@
<div class="spacer"></div> <div class="spacer"></div>
<style> <style>
.full-text h1, .full-text .right {
display: none;
}
.full-text .search {
max-width: 100vw;
}
.spacer { .spacer {
height: 4rem; height: 4rem;
} }
@ -76,10 +88,12 @@
.search { .search {
display: flex; display: flex;
margin: 0; margin: 0;
max-width: 30rem;
flex-grow: 1;
} }
.search input { .search input {
margin: 0; margin: 0;
width: min(30rem, 100vw - 18rem); width: calc(100% - 2rem);
border: none; border: none;
background: none; background: none;
color: white; color: white;