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

Merge pull request #9 from cssbubble/main 

Some ui cah
pull/10/head^2
Nilesh 2022-05-30 16:53:50 +01:00 zatwierdzone przez GitHub
rodzic ea4483604f c06823a2ec
commit e8efa8ff3c
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
14 zmienionych plików z 71 dodań i 55 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

43
src/App.svelte
Wyświetl plik

@ -12,7 +12,8 @@
import ItemDetail from "./ItemDetail.svelte"
import ItemList from "./ItemList.svelte"
import AdvancedSearch from "./AdvancedSearch.svelte"
import { SearchIcon, CogIcon, BookmarkAltIcon, BookmarkIcon } from "@rgossiaux/svelte-heroicons/outline";
import NavButtonWithLabel from './NavButtonWithLabel.svelte';
import { SearchIcon, LibraryIcon, ViewGridIcon, GiftIcon, CogIcon, BookmarkAltIcon, BookmarkIcon } from "@rgossiaux/svelte-heroicons/outline";
let currentView = "/topics";
let randomItemId;
@ -81,33 +82,33 @@
</svelte:fragment>
<svelte:fragment slot="nav">
<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 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 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"/>
<NavButtonWithLabel isActive={currentView === "/topics"} target="#/topics" label="Topics">
<LibraryIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<NavButtonWithLabel isActive={currentView === "/formats"} target="#/formats" label="Formats">
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<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 justify-start gap-3 items-center py-5 text-sm font-medium mb-5 pl-4">
<GiftIcon class=" flex-shrink-0 h-6 w-6"/>
<h3 class="text-center"> Random Item</h3>
</a>
<button on:click="{e => showSearch = true}" class="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>
</button>
<NavButtonWithLabel isActive={currentView === "/wanttolearn"} target="#/wanttolearn" label="Want to learn">
<BookmarkIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<NavButtonWithLabel isActive={currentView === "/finishedlearning"} target="#/finishedlearning" label="Finished learning">
<BookmarkAltIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<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 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>
<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">
<a href="/learn" class="text-indigo-100 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium hover:dark:text-darkSecondary2 mb-5 pl-4">
<CogIcon class=" flex-shrink-0 h-6 w-6 "/>
<h3 class="text-center"> Datasette</h3>
</a>

2
src/BookCard.svelte
Wyświetl plik

@ -2,7 +2,7 @@
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:bg-lightButton2 hover:shadow-xl bg-lightSecondary1 break-inside-avoid dark:bg-darkSecondaryBg dark:text-darkSecondary2" href="#/item/{item.rowid}">
<a class="relative flex flex-col w-44 items-center mb-4 rounded-md overflow-hidden transform transition ease-out duration-300 hover:bg-lightSecondary2 hover:shadow-xl 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>

4
src/FormatDetail.svelte
Wyświetl plik

@ -42,14 +42,14 @@
<div class="md:flex md:items-center md:justify-between mb-8">
<div class="flex-1 min-w-0">
<h2 class="text-2xl font-bold leading-7 text-gray-100 sm:text-3xl sm:truncate"> {format}</h2>
<h2 class="text-2xl font-bold leading-7 text-lightSecondary2 sm:text-3xl sm:truncate"> {format.toUpperCase()+"s"}</h2>
</div>
</div>
<SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideFormat={true}/>
{#if format == '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-6 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 filteredItems as item}
<ItemCard {item} displayType={format}/>
{/each}

4
src/GenericCard.svelte
Wyświetl plik

@ -3,7 +3,7 @@
export let item;
</script>
<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}">
<a class="flex flex-wrap bg-white p-2 rounded-lg mb-8 justify-between overflow-hidden rounded-lg dark:bg-darkSecondaryBg dark:text-darkSecondary2 border-2 border-lightButton2 break-inside-avoid hover:bg-lightSecondary2 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>
@ -13,7 +13,7 @@
<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>
<span class="ml-0.5 w-4 h-4"><Icon kind="link"/></span>
</a>
{/each}
</div>

2
src/ItemDetail.svelte
Wyświetl plik

@ -122,7 +122,7 @@
<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>
<span class="ml-0.5 h-4 w-4"><Icon kind="link"/></span>
</a>
{/each}
</div>

2
src/ItemList.svelte
Wyświetl plik

@ -25,8 +25,6 @@
<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}/>

13
src/NavButtonWithLabel.svelte 100644
Wyświetl plik

@ -0,0 +1,13 @@
<script>
export let isActive;
export let label;
export let target;
</script>
<a href={target} class={(isActive ? '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 justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
<slot></slot>
<h3 class="text-center"> {label}</h3>
</a>

2
src/TopicDetail.svelte
Wyświetl plik

@ -81,7 +81,7 @@
{:else}
<sl-tab-panel name={format.id} active={i == 0}>
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-4 2xl:grid-cols-6 ">
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
<GenericCard {item}/>
{/each}

30
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -84,21 +84,23 @@
</sl-breadcrumb>
</div>
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 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 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 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 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>
<a href={"#/topic/" + parent[0].name}>
<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 dark:text-darkButton2 hover: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 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>
</a>
{/each}
</div>

6
src/VideoCard.svelte
Wyświetl plik

@ -18,14 +18,14 @@
</script>
<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}">
<a class="flex flex-wrap w-full mb-8 justify-between overflow-hidden rounded-lg border-2 border-lightButton2 hover:bg-lightSecondary2 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">
<div class="h-28 w-44 flex justify-center items-center border-r border-gray-500 relative bg-lightButton2">
{#if item.image || get_thumbnail_image_url(item)}
<div>
<img src={item.image || get_thumbnail_image_url(item)} class="h-28 object-cover" alt="{item.name}">
<img src={item.image || get_thumbnail_image_url(item)} class="h-28 object-cover " 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>

2
src/formats.js
Wyświetl plik

@ -1,6 +1,6 @@
export const 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: "audio", 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"},

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

@ -7,7 +7,7 @@
</script>
<div style="font-family: 'Quicksand', sans-serif;" class="max-w-7xl mx-auto">
<div >
<!-- 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,7 +73,7 @@
{/if}
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:w-44 md:flex-col md:fixed md:inset-y-0">
<div class="hidden md:flex md:w-64 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:text-darkSecondary1 overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider">
@ -86,7 +86,7 @@
</div>
</div>
</div>
<div class="md:pl-44 flex flex-col flex-1">
<div class="md:pl-64 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>
@ -111,7 +111,7 @@
<main class="">
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<div class="max-w-none mx-auto px-4 sm:px-6 md:px-8">
<slot name="content"></slot>
</div>
</div>

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

@ -29,7 +29,7 @@
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
</svg>
{:else if kind === "link"}
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z" clip-rule="evenodd" />
</svg>
{/if}

6
templates/index.html
Wyświetl plik

@ -33,12 +33,14 @@
<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>
<title>LearnAwesome</title>
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body class="h-full bg-lightPrimaryBg dark:bg-darkPrimaryBg text-lightPrimaryText dark:text-darkPrimaryText">
<body style="font-family: 'Libre Franklin', sans-serif;" class="max-w-none mx-auto h-full bg-lightPrimaryBg dark:bg-darkPrimaryBg text-lightPrimaryText dark:text-darkPrimaryText">
<div class="h-full" id="app"></div>
</body>
</html>