mirror
/
learndb
kopia lustrzana https://github.com/learn-awesome/learndb
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

advanced search fixed for mobile, sticky search bar fixed

pull/35/head
cssbubble 2022-06-09 13:07:09 +01:00
rodzic bcab499a96
commit f6d8b4e658
12 zmienionych plików z 82 dodań i 82 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
src/AdvancedSearch.svelte
Wyświetl plik

@ -32,7 +32,7 @@
</script>
<sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
<div class="transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all fixed top-32 inset-x-20 sm:inset-x-auto max-w-lg">
<div class="transform overflow-hidden rounded-xl bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all fixed top-32 sm:inset-x-auto w-72 md:w-96">
<div class="relative">
<!-- Heroicon name: solid/search -->
<svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

12
src/App.svelte
Wyświetl plik

@ -108,29 +108,29 @@
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:text-primary_light' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Topic</h3>
<div class={(currentView === "/randomtopic" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
<div class={(currentView === "/randomtopic" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
</div>
</a>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:text-primary_light' : '') + " w-full group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Item</h3>
<div class={(currentView === "/randomitem" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
<div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
</div>
</a>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'text-secondary dark:text-primary_light' : '') + " w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<div class="flex flex-col items-start">
<h3 class="text-center"> Search</h3>
<div class={(currentView === "/search" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
<div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
</div>
</button>

2
src/AppShell.svelte
Wyświetl plik

@ -109,7 +109,7 @@
<a href="/" class="">LearnAwesome</a>
<div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
</div> -->
<div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary">
<div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary dark:bg-neutral_dark dark:text-neutral_light">
<nav class="flex-1 pb-4 space-y-1 pt-5">
<slot name="nav"></slot>
{#if window.location.href.startsWith('http://127.0.0.1')}

4
src/BookCard.svelte
Wyświetl plik

@ -6,8 +6,8 @@
<img class="object-cover h-36 w-24 lg:h-64 lg:w-44" src={item.image || '/static/book-cover.png'} alt="{item.name}"/>
{#if item.rating}
<h1 class="text-lg font-semibold p-2 text-white tracking-wider">
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
<h1 class="text-sm md:text-lg font-semibold p-2 text-white tracking-wider">
<sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
</h1>
{/if}

4
src/NavButtonWithLabel.svelte
Wyświetl plik

@ -7,13 +7,13 @@
</script>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:bg-dark dark:text-darkPrimary' : '') + " w-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:text-primary_light' : '') + " sw-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
<div class="flex justify-start gap-3 items-center">
<slot></slot>
<div class="flex flex-col items-start">
<h3 class="text-center"> {label}</h3>
<div class={(isActive ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
<div class={(isActive ? 'bg-secondary w-full dark:bg-primary_light ' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
</div>
</div>
</a>

121
src/SearchForm.svelte
Wyświetl plik

@ -21,70 +21,69 @@
</script>
<div class="sticky top-24 z-10 md:top-12 bg-primary md:bg-gradient-to-r from-lightGradOne to-lightGradTwo rounded">
{#if showForm == false}
<div class="bg-primary rounded absolute -top-8 right-0">
<button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
<span class="sr-only">Open search form</span>
<Icon kind="search"/>
</button>
</div>
{/if}
<div class="sticky z-10 top-[50px] bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
<div class="relative pt-1">
{#if showForm == false}
<div class="bg-primary rounded absolute top-0 right-0">
<button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
<span class="sr-only">Open search form</span>
<Icon kind="search"/>
</button>
</div>
{/if}
{#if showForm}
<div class="bg-primary rounded absolute -top-8 right-0">
<button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
<span class="sr-only">Close search form</span>
<Icon kind="close"/>
</button>
</div>
{/if}
{#if showForm}
<div class="bg-primary rounded absolute top-0 right-0">
<button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
<span class="sr-only">Close search form</span>
<Icon kind="close"/>
</button>
</div>
{/if}
{#if showForm}
<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
<sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
<sl-icon name="search" slot="prefix"></sl-icon>
</sl-input>
{#if showForm}
<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
<sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
<sl-icon name="search" slot="prefix"></sl-icon>
</sl-input>
{#if !hideTopic}
<fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
{#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
<fluent-option value={topic.name}>{topic.display_name}</fluent-option>
{/each}
</fluent-combobox>
{/if}
{#if !hideTopic}
<fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
{#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
<fluent-option value={topic.name}>{topic.display_name}</fluent-option>
{/each}
</fluent-combobox>
{/if}
<div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
<sl-select class="w-full" on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
<sl-menu-item value="">Any tag</sl-menu-item>
<sl-menu-item value="inspirational">Inspirational</sl-menu-item>
<sl-menu-item value="educational">Educational</sl-menu-item>
<sl-menu-item value="challenging">Challenging</sl-menu-item>
<sl-menu-item value="entertaining">Entertaining</sl-menu-item>
<sl-menu-item value="visual">Visual</sl-menu-item>
<sl-menu-item value="interactive">Interactive</sl-menu-item>
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
<div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
<sl-select class="w-full" on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
<sl-menu-item value="">Any tag</sl-menu-item>
<sl-menu-item value="inspirational">Inspirational</sl-menu-item>
<sl-menu-item value="educational">Educational</sl-menu-item>
<sl-menu-item value="challenging">Challenging</sl-menu-item>
<sl-menu-item value="entertaining">Entertaining</sl-menu-item>
<sl-menu-item value="visual">Visual</sl-menu-item>
<sl-menu-item value="interactive">Interactive</sl-menu-item>
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
</sl-select>
<sl-select class="w-full" on:sl-change="{e => query.level = e.target.value}" value={query.level}>
<sl-menu-item value="">Any level</sl-menu-item>
<sl-menu-item value="childlike">Childlike</sl-menu-item>
<sl-menu-item value="beginner">Beginner</sl-menu-item>
<sl-menu-item value="intermediate">Intermediate</sl-menu-item>
<sl-menu-item value="advanced">Advanced</sl-menu-item>
<sl-menu-item value="research">Research</sl-menu-item>
</sl-select>
</div>
<sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
<sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
<sl-menu-item value="rating">Sort by Rating</sl-menu-item>
<sl-menu-item value="year">Sort by Year</sl-menu-item>
<sl-menu-item value="name">Sort by Name</sl-menu-item>
</sl-select>
<sl-select class="w-full" on:sl-change="{e => query.level = e.target.value}" value={query.level}>
<sl-menu-item value="">Any level</sl-menu-item>
<sl-menu-item value="childlike">Childlike</sl-menu-item>
<sl-menu-item value="beginner">Beginner</sl-menu-item>
<sl-menu-item value="intermediate">Intermediate</sl-menu-item>
<sl-menu-item value="advanced">Advanced</sl-menu-item>
<sl-menu-item value="research">Research</sl-menu-item>
</sl-select>
</div>
<sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
<sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
<sl-menu-item value="rating">Sort by Rating</sl-menu-item>
<sl-menu-item value="year">Sort by Year</sl-menu-item>
<sl-menu-item value="name">Sort by Name</sl-menu-item>
</sl-select>
</form>
{/if}
</form>
{/if}
</div>
</div>

16
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -97,13 +97,13 @@
{#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
{#if parent[0] !== 'Misc'}
<a href={"#/topic/" + parent[0].name}>
<div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-white ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
<div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-extrabold text-lg text-primary underline">{ parent[0] }</span>
{:else}
<div class="group inline-flex">
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span>
<div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg dark:text-primary_light">{ format_topic_name(parent[0]) }</span>
<div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary dark:bg-lightGradOne group-hover:w-full ease-in-out duration-300"></div>
</a>
</div>
@ -111,7 +111,7 @@
<div class="mt-2 flex flex-wrap">
{#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
<a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>
@ -119,16 +119,16 @@
{/if}
{#if parent[0] == 'Misc'}
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-primary dark:border-primary_light bg-primary_light hover:bg-white ">
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light dark:bg-neutral_light ease-in-out duration-300 hover:rounded-3xl">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-semibold text-lg text-primary">{ parent[0] }</span>
<span class="mt-1 p-1 font-semibold text-lg text-primary dark:text-primary_light">{ parent[0] }</span>
{:else}
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary text-lg ">{ format_topic_name(parent[0]) }</span></a>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg dark:text-primary_light">{ format_topic_name(parent[0]) }</span></a>
{/if}
<div class="mt-2 flex flex-wrap">
{#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
<a href={"#/topic/" + child.name} class="text-primary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>

BIN
static/._book-cover-2.png 100644
Wyświetl plik

Plik binarny nie jest wyświetlany.

BIN
static/._book-cover-3.png 100644
Wyświetl plik

Plik binarny nie jest wyświetlany.

BIN
static/book-cover-2.png 100644
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 815 KiB

BIN
static/book-cover-3.png 100644
Wyświetl plik

Plik binarny nie jest wyświetlany.
Side by Side

Po

Szerokość:  |  Wysokość:  |  Rozmiar: 15 KiB

3
templates/index.html
Wyświetl plik

@ -14,6 +14,7 @@
neutral_light: '#737373', // neutral-400
neutral_dark: '#262626', // neutral-800
secondary: '#6B21A8', // purple-800
primary_medium: '#60A5FA', //blue-400
//white: '#ffffff',
lightGradOne: '#DBEAFE', //blue-100
lightGradTwo: '#F3E8FF', //purple-100
@ -43,7 +44,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="max-w-none mx-auto h-full bg-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-nutral_dark dark:text-nutral_light font-serif">
<body class="max-w-none mx-auto h-full bg-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-gradient-to-r dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light font-serif">
<div class="h-full" id="app"></div>
</body>
</html>