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

light and dark mode,badges, padding

pull/8/head
cssbubble 2022-05-28 17:30:17 +01:00
rodzic c31d6e8a7e
commit 854017a7b0
13 zmienionych plików z 345 dodań i 457 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

47
src/App.svelte
Wyświetl plik

@ -46,38 +46,11 @@
onMount(getRandomItemId);
onMount(hashchange);
</script>
<style>
#checkbox:checked + label .switch-ball{
background-color: white;
transform: translateX(24px);
transition: transform 0.3s linear;
}
</style>
<svelte:window on:hashchange={hashchange}/>
<div class="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<div class="flex justify-end items-center space-x-2 mx-auto relative">
<span class="text-xs font-extralight">Light
<div>
<input type="checkbox" name="" id="checkbox" class="hidden" />
<label for="checkbox" class="cursor-pointer">
<div class="w-9 h-5 flex items-center bg-gray-300 rounded-full p2">
<div class="w-4 h-4 bg-white rounded-full shadow switch-ball"></div>
</div>
</label>
</div>
</span>
<span class="text-xs font-semibold">Dark</span>
</div>
</div>
<TailwindUI.AppShell>
<TailwindUI.AppShell>
<svelte:fragment slot="content">
{#if currentView === "/home" || currentView === "/"}
<Home/>
@ -107,33 +80,33 @@
</svelte:fragment>
<svelte:fragment slot="nav">
<a href="#/topics" class={(currentView === "/topics" ? 'bg-lightSecondary1 text-lightSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<a href="#/topics" class={(currentView === "/topics" ? 'bg-lightSecondary1 text-lightSecondary2 dark:bg-darkPrimaryBg dark:text-darkSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 group flex flex-col items-center py-2 text-sm font-medium"}>
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<h3 class="text-center"> Topics</h3>
</a>
<a href="#/formats" class={(currentView === "/formats" ? 'bg-lightSecondary1 text-lightSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<a href="#/formats" class={(currentView === "/formats" ? 'bg-lightSecondary1 text-lightSecondary2 dark:bg-darkPrimaryBg dark:text-darkSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg group flex flex-col items-center py-2 text-sm font-medium"}>
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<h3 class="text-center"> Formats</h3>
</a>
<a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-lightSecondary1 hover:text-lightSecondary2 w-full group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md">
<a href="#/random" on:click={getRandomItemId} class="text-indigo-100 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex flex-col items-center py-2 text-sm font-medium">
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<h3 class="text-center"> Random Item</h3>
</a>
<a href="#/search" class={(currentView === "/search" ? 'bg-lightSecondary1 text-lightSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<a href="#/search" class={(currentView === "/search" ? 'bg-lightSecondary1 text-lightSecondary2 dark:bg-darkPrimaryBg dark:text-darkSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg group flex flex-col items-center py-2 text-sm font-medium"}>
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<h3 class="text-center"> Search</h3>
</a>
<hr/>
<a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-lightSecondary1 text-lightSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-lightSecondary1 text-lightSecondary2 dark:bg-darkPrimaryBg dark:text-darkSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg group flex flex-col items-center py-2 text-sm font-medium"}>
<BookmarkIcon class=" flex-shrink-0 h-6 w-6 "/>
<h3 class="text-center"> Want to learn</h3>
</a>
<a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-lightSecondary1 text-lightSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md"}>
<a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-lightSecondary1 text-lightSecondary2 dark:bg-darkPrimaryBg dark:text-darkSecondary2' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg group flex flex-col items-center py-2 text-sm font-medium"}>
<BookmarkAltIcon class=" flex-shrink-0 h-6 w-6 "/>
<h3 class="text-center"> Finished learning</h3>
</a>
<hr/>
<a href="/learn" class="text-indigo-100 hover:bg-lightSecondary1 hover:text-lightSecondary2 w-full group flex flex-col items-center px-2 py-2 text-sm font-medium rounded-md">
<a href="/learn" class="text-indigo-100 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex flex-col items-center py-2 text-sm font-medium hover:dark:text-darkSecondary2">
<CogIcon class=" flex-shrink-0 h-6 w-6 "/>
<h3 class="text-center"> Datasette</h3>
</a>

4
src/BookCard.svelte
Wyświetl plik

@ -2,13 +2,13 @@
export let item;
</script>
<a class="relative flex flex-col w-44 items-center mb-4 rounded-md shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl bg-lightSecondary1" href="#/item/{item.rowid}">
<a class="relative flex flex-col w-44 items-center mb-4 rounded-md shadow-lg overflow-hidden transform transition ease-out duration-300 hover:bg-lightButton2 hover:shadow-xl bg-lightSecondary1 break-inside-avoid dark:bg-darkSecondaryBg dark:text-darkSecondary2" href="#/item/{item.rowid}">
<img class="object-cover h-64 w-44" src={item.image || '/static/book-cover.png'} alt="{item.name}"/>
<h1 class="text-lg font-semibold p-2 text-white tracking-wider">
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
</h1>
{#if !item.image}
<div class="absolute inset-y-0 px-2 py-4">
<div class="absolute inset-y-0 px-2 py-4 break-inside-avoid">
<p class="font-extrabold text-white text-xl">{item.name}</p>
<p class="text-sm text-white mt-3">{item.creators}</p>
</div>

53
src/FormatList.svelte
Wyświetl plik

@ -1,49 +1,16 @@
<script>
import { formats } from "./formats.js"
// let formats = [
// {id: "book", name: "Books", image: "https://images.unsplash.com/photo-1524578271613-d550eacf6090?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGJvb2tzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=300"},
// {id: "podcast", name: "Podcasts / Audio", image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "video", name: "Videos / Films", image: "https://images.unsplash.com/photo-1611162616475-46b635cb6868?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "article", name: "Articles", image: "https://images.unsplash.com/photo-1623039405147-547794f92e9e?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "app", name: "Apps / Software", image: "https://images.unsplash.com/photo-1601034913836-a1f43e143611?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTV8fGFwcHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
// {id: "blog", name: "Blogs / Microblogs", image: "https://images.unsplash.com/photo-1649180554466-0c15f6c70d51?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTM2fHx0d2l0dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "chat", name: "Chat groups / Forums", image: "https://images.unsplash.com/photo-1611746869696-d09bce200020?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "cheatsheet", name: "Cheatsheets", image: "https://images.unsplash.com/photo-1432888498266-38ffec3eaf0a?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "code", name: "Code", image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzF8fGNvZGV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
// {id: "conference", name: "Conferences", image: "https://images.unsplash.com/photo-1477281765962-ef34e8bb0967?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "course", name: "Courses", image: "https://images.unsplash.com/photo-1604134967494-8a9ed3adea0d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "flashcard", name: "Flashcards", image: "https://images.unsplash.com/photo-1616628188859-7a11abb6fcc9?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "game", name: "Games", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "image", name: "Pictures & Infographics", image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "interactive", name: "Interactives & Explorables", image: "https://images.unsplash.com/photo-1516321497487-e288fb19713f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "journal", name: "Journals & Magazines", image: "https://images.unsplash.com/photo-1516179257071-71a54dbb4853?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bWFnYXppbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
// {id: "learning_plan", name: "Syllabuses", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "livestream", name: "Livestreams", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "meetup", name: "Meetups", image: "https://images.unsplash.com/photo-1591115765373-5207764f72e7?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "newsletter", name: "Newsletters", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "people", name: "People", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "qna", name: "Q&A forums", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "research_paper", name: "Research Papers", image: "https://images.unsplash.com/photo-1532153955177-f59af40d6472?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "website", name: "Websites", image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "wiki", name: "Wikis", image: "https://images.unsplash.com/photo-1566396223585-c8fbf7fa6b6d?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "thread", name: "Discussion threads", image: "https://images.unsplash.com/photo-1493711662062-fa541adb3fc8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmlkZW8lMjBnYW1lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400"},
// {id: "project", name: "Projects", image: "https://images.unsplash.com/photo-1620325867502-221cfb5faa5f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cHJvamVjdHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=400"},
// {id: "webmeet", name: "Online meetups", image: "https://images.unsplash.com/photo-1586543354240-2187898bb2e8?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "webconf", name: "Online conferences", image: "https://images.unsplash.com/photo-1586985564150-11ee04838034?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400"},
// {id: "thing", name: "Things & Toys", image: "https://images.unsplash.com/photo-1416339134316-0e91dc9ded92?ixlib=rb-1.2.1&raw_url=true&q=60&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8c3R1ZmZ8ZW58MHx8MHx8&auto=format&fit=crop&w=400"},
// ]
</script>
<h1 class="my-10 text-lightButton2 dark:text-darkButton2">Learn from the following formats</h1>
<div class="max-w-lg mx-auto grid grid-cols-2 gap-5 lg:grid-cols-3 lg:max-w-none">
{#each formats as format}
<a href="#/format/{format.id}" class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src={format.image} alt="">
</div>
<h1 class="text-lg font-semibold p-2 bg-lightButton2 text-lightButton1 tracking-wider">{format.name}</h1>
</a>
{/each}
{#each formats as format}
<a href="#/format/{format.id}" class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src={format.image} alt="">
</div>
<h1 class="text-lg font-semibold p-2 bg-lightButton2 text-lightButton1 tracking-wider">{format.name}</h1>
</a>
{/each}
</div>

22
src/GenericCard.svelte
Wyświetl plik

@ -1,10 +1,22 @@
<script>
import Icon from "./tailwindui/Icon.svelte"
export let item;
</script>
<a class="flex flex-wrap w-80 bg-white p-2 rounded-lg mb-8 justify-between overflow-hidden text-gray-50 rounded-lg" href="#/item/{item.rowid}">
<div class="flex flex-col">
<strong class="text-gray-900 text-lg font-extrabold">{item.name}</strong>
<span class="text-gray-900 text-sm font-medium">{item.creators}</span>
</div>
<a class="flex flex-wrap bg-white p-2 rounded-lg mb-8 justify-between overflow-hidden rounded-lg bg-lightSecondary1 dark:bg-darkSecondaryBg dark:text-darkSecondary2 border-2 border-lightButton2 break-inside-avoid hover:bg-lightButton2 text-gray-900 hover:text-gray-50" href="#/item/{item.rowid}">
<div class="flex flex-col justify-between">
<div class="flex flex-col">
<strong class="font-extrabold">{item.name}</strong>
<span class="text-sm font-medium">{item.creators}</span>
</div>
<div class="flex items-center justify-start gap-3 mt-2">
{#each item.links.split(";") as type}
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondaryBg dark:text-darkSecondary2 border" target="_blank"> {type.split("|")[0]}
<span class="ml-0.5"><Icon kind="link"/></span>
</a>
{/each}
</div>
</div>
</a>

51
src/ItemCard.svelte
Wyświetl plik

@ -7,57 +7,6 @@
export let displayType = null;
</script>
<!-- <a class="flex flex-col mb-8 bg-gray-700 justify-between overflow-hidden text-gray-50 p-2 rounded-lg max-w-sm w-96" href="#/item/{item.rowid}">
<div class="flex flex-col justify-center">
{#if item.image}
<img class="h-64 w-44 object-contain py-2 mb-6 float-left rounded-md transform transition ease-out duration-300 hover:scale-105"
src={item.image} alt="{item.name}">
{:else if item.links.includes('book|')}
<div class="h-64 w-44 text-center pt-5 px-3 book text-gray-50">
<h1 class="font-extrabold text-lg flex-wrap">{item.name}</h1>
</div>
{:else if item.links.includes('course|')}
<div class="h-64 w-44 text-center pt-5 px-3 course text-gray-50">
<h1 class="font-extrabold text-lg flex-wrap">{item.name}</h1>
</div>
{/if}
</div>
<div>
<h1 class="font-bold flex-wrap">{item.name}</h1>
<sl-rating style="--symbol-size: 1rem" readonly precision="0.1" value={item.rating}></sl-rating>
<div class="flex items-center justify-start gap-3 text-gray-500 mt-5">
{#each item.links.split(";") as type}
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-cyan-800 text-gray-50" target="_blank"> {type.split("|")[0]}
<span class="ml-0.5"><Icon kind="link"/></span>
</a>
{/each}
</div>
</div>
</a>
<style>
.book{
background-image: url(../static/book-cover.png);
}
.course{
background-image: url(../static/course.jpg);
background-size: cover;
background-repeat: no-repeat;
}
</style> -->
{#if item.links.includes('book|') && item.links.includes('video|')}
{#if displayType == 'video'}
<VideoCard {item}/>

561
src/ItemDetail.svelte
Wyświetl plik

@ -70,310 +70,313 @@
</style>
{#if item}
<main class="px-12 py-10">
<h3 class="py-2 mb-5">
<h3 class="my-10 text-lightButton2 dark:text-darkSecondary2">
{#each item.topics.split(";") as topicname}
<a href={"#/topic/" + topicname} class="mr-2 font-bold text-lightSecondary2 dark:text-DarkSecondary2">{topicname}</a>
{/each}
</h3>
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
<!-- book image -->
<div class="flex-nowrap">
{#if item.image}
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="{item.name}" />
{:else if item.links.includes('book')}
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="/static/book-cover.png" alt="{item.name}" />
{:else if item.links.includes('video')}
<div class="relative">
<img class="h-28 w-44 flex justify-center items-center border-r border-gray-500 relative" src="{get_thumbnail_image_url(item)}" alt="{item.name}">
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
<div>
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
<!-- book image -->
<div class="flex-nowrap">
{#if item.image}
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="{item.name}" />
{:else if item.links.includes('book')}
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="/static/book-cover.png" alt="{item.name}" />
{:else if item.links.includes('video')}
<div class="relative">
<img class="h-28 w-44 flex justify-center items-center border-r border-gray-500 relative" src="{get_thumbnail_image_url(item)}" alt="{item.name}">
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
</div>
</div>
</div>
{:else}
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="/static/book-cover.png" alt="{item.name}" />
{/if}
<!-- <img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image || '/static/book-cover.png'}" alt="" /> -->
</div>
<!-- book details -->
<div class="flex w-full flex-col justify-between ml-5">
<!-- title, sub title, author -->
<section>
<h1 class="text-2xl">{item.name}</h1>
<p class="font">{item.description}</p>
<span class="text-sm">{item.creators}</span>
</section>
<!-- ratings and upload buttons -->
<div class="mt-2 mb-6 flex flex-col justify-between">
<div class="flex justify-between items-center">
<div>
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
{:else}
<img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="/static/book-cover.png" alt="{item.name}" />
{/if}
<!-- <img class="mr-6 mb-6 w-44 h-64 transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image || '/static/book-cover.png'}" alt="" /> -->
</div>
<!-- book details -->
<div class="flex w-full flex-col justify-between ml-5">
<!-- title, sub title, author -->
<section>
<h1 class="text-2xl">{item.name}</h1>
<p class="font max-w-lg">{item.description}</p>
<span class="text-sm">{item.creators}</span>
</section>
<!-- ratings and upload buttons -->
<div class="mt-2 mb-6 flex flex-col justify-between">
<div class="flex justify-between items-center">
<div>
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
</div>
<ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
</div>
<ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
</div>
<div class="flex items-center justify-start gap-3 mt-5">
{#each item.links.split(";") as type}
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 border" target="_blank"> {type.split("|")[0]}
<span class="ml-0.5"><Icon kind="link"/></span>
</a>
{/each}
<div class="flex items-center justify-start gap-3 mt-5">
{#each item.links.split(";") as type}
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondaryBg dark:text-darkSecondary2 border" target="_blank"> {type.split("|")[0]}
<span class="ml-0.5"><Icon kind="link"/></span>
</a>
{/each}
</div>
</div>
</div>
</div>
</div>
<hr />
<!-- Description -->
<section class="my-8">
<h2 class="text-base font-bold ">Description</h2>
<p class="mt-4 text-sm">{item.description}</p>
</section>
<hr />
<!-- details -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
{#if item.genre}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs">genre</h3>
<!-- book svg -->
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</span>
</div>
<span class="text-xs ">{item.genre}</span>
</div>
{/if}
{#if item.year}
<div class="flex flex-col justify-between items-center gap-1 border py-5 border-gray-200">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs ">year</h3>
<span>{item.year}</span>
</div>
</div>
{/if}
{#if item.difficulty}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs ">Difficulty</h3>
<span></span>
</div>
<span class="text-xs">{item.difficulty}</span>
</div>
{/if}
{#if item.creators}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs ">Creator</h3>
<span></span>
</div>
<span class="text-xs">{item.creators}</span>
</div>
{/if}
<!-- {#if }
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<h3 class="uppercase text-xs ">Publisher</h3>
<span></span>
<br />
<span class="text-xs">Public Domain</span>
</div>
{/if} -->
{#if item.size}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs text-gray-400">Size</h3>
<span></span>
</div>
<span class="text-xs">{item.size}</span>
</div>
{/if}
</div>
<hr />
<!-- review -->
{#if item.review}
<section class="my-8">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold text-gray-100">Reviews</h2>
</div>
<hr />
<div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
{#each reviews as review}
<article class="px-3 py-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 rounded-lg text-xs w-48 max-w-sm shrink-0">
<h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
<p class="mt-2">{review.blurb}</p>
<div class="mt-3">
<sl-rating value={review.rating}></sl-rating>
<span class="ml-2">...{review.by}</span>
</div>
</article>
{/each}
</div>
</section>
{/if}
<!-- more books by same author -->
<!-- Description -->
{#if item.description}
<section class="my-8">
<h2 class="text-base font-bold ">Description</h2>
<p class="mt-4 text-sm max-w-lg">{item.description}</p>
</section>
{/if}
<!-- <section class="my-8 overflow-hidden">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold">More Books by Priyanka Trivedi</h2>
<button class="float-right text-xs hover:underline">See All</button>
<hr />
<!-- details -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
{#if item.genre}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs">genre</h3>
<!-- book svg -->
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
</span>
</div>
<span class="text-xs ">{item.genre}</span>
</div>
{/if}
{#if item.year}
<div class="flex flex-col justify-between items-center gap-1 border py-5 border-gray-200">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs ">year</h3>
<span>{item.year}</span>
</div>
</div>
{/if}
{#if item.difficulty}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs ">Difficulty</h3>
<span></span>
</div>
<span class="text-xs">{item.difficulty}</span>
</div>
{/if}
{#if item.creators}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs ">Creator</h3>
<span></span>
</div>
<span class="text-xs">{item.creators}</span>
</div>
{/if}
<!-- {#if }
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<h3 class="uppercase text-xs ">Publisher</h3>
<span></span>
<br />
<span class="text-xs">Public Domain</span>
</div>
{/if} -->
{#if item.size}
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center">
<h3 class="uppercase text-xs text-gray-400">Size</h3>
<span></span>
</div>
<span class="text-xs">{item.size}</span>
</div>
{/if}
</div>
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-auto">
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
<hr />
<!-- review -->
{#if item.review}
<section class="my-8">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold text-gray-100">Reviews</h2>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
</div>
</section>
<hr /> -->
<!-- Also bought -->
<!-- <section class="my-8 overflow-hidden">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold">Other items on the same topics</h2>
<button class="text-xs hover:underline">See All</button>
</div>
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2 scroll">
{#each reviews as review}
<article class="px-3 py-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 rounded-lg text-xs w-48 max-w-sm shrink-0">
<h3 class="font-semibold">{review.blurb.toString().slice(0,10)}...</h3>
<p class="mt-2 line-clamp">{review.blurb}</p>
<div class="mt-3">
<sl-rating value={review.rating}></sl-rating>
<span class="ml-2">...{review.by}</span>
</div>
</article>
{/each}
</div>
</section>
{/if}
<!-- more books by same author -->
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<!-- <section class="my-8 overflow-hidden">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold">More Books by Priyanka Trivedi</h2>
<button class="float-right text-xs hover:underline">See All</button>
</div>
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-auto">
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<div class="flex flex-col items-start text-xs gap-1">
<h4 class="font-semibold">A Modest Proposal</h4>
<span class="text-gray-500">Priyanka Trivedi</span>
<button class="border rounded-2xl uppercase px-2 py-0.5 border-black">Get</button>
</div>
</div>
</div>
</section>
<hr /> -->
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<!-- Also bought -->
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
<!-- <section class="my-8 overflow-hidden">
<div class="flex justify-between items-center">
<h2 class="text-base font-bold">Other items on the same topics</h2>
<button class="text-xs hover:underline">See All</button>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
<div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
<div class="shrink-0">
<div class="" >
<img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
</div>
</div>
</div>
</div>
</section> -->
</main>
</section> -->
</div>
{:else}
<p class="loading">loading...</p>
{/if}

8
src/ItemList.svelte
Wyświetl plik

@ -22,10 +22,12 @@
</script>
<h1>{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
<h1 class="my-10 text-lightButton2 dark:text-darkButton2">{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
<!-- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-3 xl:grid-cols-3"> -->
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
{#each items as item}
<ItemCard {item}/>
{/each}

2
src/SearchForm.svelte
Wyświetl plik

@ -18,7 +18,7 @@
</script>
<form class="w-full bg-gray-100 p-2 inline-flex" on:submit|preventDefault>
<form class="w-full bg-lightSecondary1 text-lightSecondary2 dark:bg-darkSecondaryBg dark:text-darkSecondary2 p-2 inline-flex" on:submit|preventDefault>
<sl-input type="search" placeholder="Type something to search items by keywords" size="medium" clearable class="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>

2
src/TopicDetail.svelte
Wyświetl plik

@ -67,7 +67,7 @@
{#if format.id == 'book'}
<sl-tab-panel name="{format.id}">
<div class="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="grid gap-5 grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-items-center">
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
<BookCard {item}/>
{/each}

6
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -86,16 +86,16 @@
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
{#each [...map.entries()] as parent}
<div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 bg-lightSecondary1 border-2 border-lightButton2 ">
<div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 bg-lightSecondary1 border-2 border-lightButton2 dark:bg-darkSecondaryBg">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-semibold text-lg">{ parent[0] }</span>
{:else}
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightButton2 font-extrabold text-lg">{ format_topic_name(parent[0]) }</span></a>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightButton2 dark:text-darkButton2 font-extrabold text-lg">{ format_topic_name(parent[0]) }</span></a>
{/if}
<div class="mt-2 flex flex-wrap text-sm text-gray-900">
{#each parent[1] as child}
<a href={"#/topic/" + child.name} class="text-lightSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-lightSecondary2 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>

6
src/VideoCard.svelte
Wyświetl plik

@ -18,7 +18,7 @@
</script>
<a class="flex flex-wrap w-full mb-8 justify-between overflow-hidden rounded-lg bg-lightSecondary1 border-2 border-lightButton2 hover:scale-105 duration-300" href="#/item/{item.rowid}">
<a class="flex flex-wrap w-full mb-8 justify-between overflow-hidden rounded-lg bg-lightSecondary1 border-2 border-lightButton2 hover:bg-lightButton2 duration-300 break-inside-avoid text-lightPrimary dark:bg-darkSecondaryBg dark:text-darkSecondary2 hover:text-gray-50" href="#/item/{item.rowid}">
<div class="relative w-full h-28 max-w-sm shadow-lg ring-1 ring-black/5 rounded-xl flex items-start">
<div class="h-28 w-44 flex justify-center items-center border-r border-gray-500 relative">
@ -42,8 +42,8 @@
</div>
<div class="flex flex-col ml-5 w-2/3 mt-2">
<strong class="text-lightPrimaryText font-extrabold">{item.name}</strong>
<span class="text-lightSecondary2 text-sm font-medium">{item.creators}</span>
<strong class="font-extrabold">{item.name}</strong>
<span class="text-sm font-medium">{item.creators}</span>
</div>
</div>
</a>

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

@ -7,7 +7,7 @@
</script>
<div style="font-family: 'Quicksand', sans-serif;">
<div style="font-family: 'Quicksand', sans-serif;" class="max-w-7xl mx-auto">
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
{#if isNavDrawerOpen}
<div class="relative z-40 md:hidden" role="dialog" aria-modal="true">
@ -73,20 +73,20 @@
{/if}
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:w-32 md:flex-col md:fixed md:inset-y-0">
<div class="hidden md:flex md:w-44 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-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1 overflow-y-auto">
<div class="flex flex-col flex-grow pt-5 bg-lightSecondary2 text-lightSecondary1 dark:text-darkSecondary1 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider">
<a href="/" class="">LearnAwesome</a>
</div>
<div class="mt-5 flex-1 flex flex-col">
<nav class="flex-1 px-2 pb-4 space-y-1">
<nav class="flex-1 pb-4 space-y-1">
<slot name="nav"></slot>
</nav>
</div>
</div>
</div>
<div class="md:pl-64 flex flex-col flex-1">
<div class="md:pl-44 flex flex-col flex-1">
<div class="sticky top-0 z-10 flex-shrink-0 flex bg-cyan-900 text-white shadow">
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<span class="sr-only">Open sidebar</span>

30
templates/index.html
Wyświetl plik

@ -1,12 +1,11 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en">
<head>
<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 = {
darkMode: "dark",
theme: {
extend: {
colors: {
@ -21,32 +20,15 @@
darkPrimaryText: 'rgb(248 250 252)', //bg-slate-50
darkSecondary1: 'rgb(88 28 135)', //bg-purple-900
darkSecondary2: 'rgb(250 245 255)', //bg-purple-50
DarkButton1: 'rgb(19 78 74)', //bg-teal-900
DarkButton2: 'rgb(240 253 250)', //bg-teal-50
darkButton1: 'rgb(19 78 74)', //bg-teal-900
darkButton2: 'rgb(240 253 250)', //bg-teal-50
darkSecondaryBg: 'rgb(30 41 59)', //bg-slate-800
}
}
}
}
</script>
<script>
// light and darkmode toggle button
const checkbox = document.querySelector("#checkbox");
const html = document.querySelector("html");
const toggleDarkMode = function () {
checkbox.checked
? html.classList.add("dark")
: html.classList.remove("dark");
}
//calling the function directly
toggleDarkMode();
checkbox.addEventListener("click",toggleDarkMode);
</script>
<script src="/static/bundle.js" defer></script>
</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" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>