kopia lustrzana https://github.com/learn-awesome/learndb
sidebar
cssbubble
rodzic
0db3bfbfda
commit
9e3e69bb08
|
|
@ -83,35 +83,35 @@
|
|||
</svelte:fragment>
|
||||
|
||||
<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"}>
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Topics
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Topics</h3>
|
||||
</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"}>
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Formats
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Formats</h3>
|
||||
</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">
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Random Item
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Random Item</h3>
|
||||
</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"}>
|
||||
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Search
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Search</h3>
|
||||
</a>
|
||||
<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"}>
|
||||
<BookmarkIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Want to learn
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Want to learn</h3>
|
||||
</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"}>
|
||||
<BookmarkAltIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Finished learning
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Finished learning</h3>
|
||||
</a>
|
||||
<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">
|
||||
<CogIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
Datasette
|
||||
<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=" flex-shrink-0 h-6 w-6 text-indigo-300"/>
|
||||
<h3 class="text-center"> Datasette</h3>
|
||||
</a>
|
||||
|
||||
</svelte:fragment>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
.then(data => {
|
||||
items = data;
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<SearchForm {alltopics}/>
|
||||
|
|
@ -31,22 +32,21 @@
|
|||
|
||||
<div>
|
||||
<div class="">
|
||||
<sl-tab-group>
|
||||
{#each formats 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>
|
||||
{/each}
|
||||
<sl-tab-group placement="start">
|
||||
{#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format}
|
||||
<sl-tab slot="nav" panel="{format.id}" class="">{format.name}</sl-tab>
|
||||
|
||||
|
||||
{#each formats as format}
|
||||
{#if format.id == 'book'}
|
||||
<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">
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
|
||||
<BookCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
</sl-tab-panel>
|
||||
|
||||
|
||||
{:else if format.id == 'video'}
|
||||
<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">
|
||||
|
|
@ -69,29 +69,6 @@
|
|||
</sl-tab-group>
|
||||
</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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
{/if}
|
||||
|
||||
<!-- 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 -->
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,17 @@
|
|||
<meta charset="UTF-8" />
|
||||
<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>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
clifford: '#da373d',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/static/bundle.js" defer></script>
|
||||
<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" />
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue