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

sidebar

pull/7/head
cssbubble 2022-05-26 11:47:14 +01:00
rodzic 0db3bfbfda
commit 9e3e69bb08
4 zmienionych plików z 41 dodań i 53 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

42
src/App.svelte
Wyświetl plik

@ -83,35 +83,35 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="nav"> <svelte:fragment slot="nav">
<a href="#/topics" class={(currentView === "/topics" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/topics" class={(currentView === "/topics" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Topics <h3 class="text-center"> Topics</h3>
</a> </a>
<a href="#/formats" class={(currentView === "/formats" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/formats" class={(currentView === "/formats" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Formats <h3 class="text-center"> Formats</h3>
</a> </a>
<a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md"> <a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-gray-900 w-full group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md">
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Random Item <h3 class="text-center"> Random Item</h3>
</a> </a>
<a href="#/search" class={(currentView === "/search" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/search" class={(currentView === "/search" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Search <h3 class="text-center"> Search</h3>
</a> </a>
<hr/> <hr/>
<a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<BookmarkIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <BookmarkIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Want to learn <h3 class="text-center"> Want to learn</h3>
</a> </a>
<a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<BookmarkAltIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <BookmarkAltIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Finished learning <h3 class="text-center"> Finished learning</h3>
</a> </a>
<hr/> <hr/>
<a href="/learn" class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md"> <a href="/learn" class="text-indigo-100 hover:bg-gray-900 w-full group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md">
<CogIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <CogIcon class=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
Datasette <h3 class="text-center"> Datasette</h3>
</a> </a>
</svelte:fragment> </svelte:fragment>

35
src/TopicDetail.svelte
Wyświetl plik

@ -17,6 +17,7 @@
.then(data => { .then(data => {
items = data; items = data;
}); });
</script> </script>
<SearchForm {alltopics}/> <SearchForm {alltopics}/>
@ -31,22 +32,21 @@
<div> <div>
<div class=""> <div class="">
<sl-tab-group> <sl-tab-group placement="start">
{#each formats as format} {#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format}
<sl-tab slot="nav" panel="{format.id}" class="px-2 py-1 bg-gray-900 rounded-md mr-3 mb-3 text-gray-200 shadow hover:text-gray-100 hover:bg-gray-800">{format.name}</sl-tab> <sl-tab slot="nav" panel="{format.id}" class="">{format.name}</sl-tab>
{/each}
{#each formats as format}
{#if format.id == 'book'} {#if format.id == 'book'}
<sl-tab-panel name="{format.id}"> <sl-tab-panel name="{format.id}">
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center"> <div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
{#each items.filter(x => x.links.includes(format.id + '|')) as item} {#each items.filter(x => x.links.includes(format.id + '|')) as item}
<BookCard {item}/> <BookCard {item}/>
{/each} {/each}
</div> </div>
</sl-tab-panel> </sl-tab-panel>
{:else if format.id == 'video'} {:else if format.id == 'video'}
<sl-tab-panel name="{format.id}"> <sl-tab-panel name="{format.id}">
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3"> <div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
@ -69,29 +69,6 @@
</sl-tab-group> </sl-tab-group>
</div> </div>
<!-- {#each formats as format}
<h1>{format.name}</h1>
{#if format.id == 'book'}
<div class="mt-12 grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 justify-items-center">
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
<BookCard {item}/>
{/each}
</div>
{:else if format.id == 'video'}
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
<VideoCard {item}/>
{/each}
</div>
{:else}
<div class="mt-12 max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
<GenericCard {item}/>
{/each}
</div>
{/if}
{/each} -->
</div> </div>

2
src/tailwindui/AppShell.svelte
Wyświetl plik

@ -73,7 +73,7 @@
{/if} {/if}
<!-- Static sidebar for desktop --> <!-- Static sidebar for desktop -->
<div class="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0"> <div class="hidden md:flex md:w-32 md:flex-col md:fixed md:inset-y-0">
<!-- Sidebar component, swap this element with another sidebar if you like --> <!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col flex-grow pt-5 bg-cyan-900 text-white overflow-y-auto"> <div class="flex flex-col flex-grow pt-5 bg-cyan-900 text-white overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider text-2xl"> <div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider text-2xl">

11
templates/index.html
Wyświetl plik

@ -4,6 +4,17 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="//cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script> <script src="//cdn.tailwindcss.com/?plugins=forms,typography,aspect-ratio,line-clamp"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
<script src="/static/bundle.js" defer></script> <script src="/static/bundle.js" defer></script>
<link href="/static/bundle.css" rel="stylesheet" /> <link href="/static/bundle.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />