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

search field, generic card

pull/11/head
cssbubble 2022-06-01 07:20:01 +01:00
rodzic 82a26f5714
commit a7694b9b8e
9 zmienionych plików z 27 dodań i 21 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

@ -31,7 +31,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 w-full">
<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 w-full fixed top-32 max-w-lg">
<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">

6
src/App.svelte
Wyświetl plik

@ -101,17 +101,17 @@
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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"}>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg 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"/>
<h3 class="text-center">Random Topic</h3>
</a>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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"}>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg 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"/>
<h3 class="text-center">Random Item</h3>
</a>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "text-lightSecondary1 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 pl-4"}>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:dark:bg-darkPrimaryBg 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"/>
<h3 class="text-center"> Search</h3>
</button>

10
src/GenericCard.svelte
Wyświetl plik

@ -3,19 +3,11 @@
export let item;
</script>
<a class="flex flex-wrap p-2 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
<a class="flex flex-wrap p-8 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" 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 flex-wrap 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-lightTertiary dark:bg-darkTertiary text-lightBg dark:text-darkBg border" target="_blank"> {type.split("|")[0]}
<span class="ml-0.5 w-4 h-4"><Icon kind="link"/></span>
</a>
{/each}
</div>
</div>
</a>

3
src/ItemCard.svelte
Wyświetl plik

@ -5,6 +5,7 @@
import GenericCard from "./GenericCard.svelte"
export let item;
export let displayType = null;
export let showBadge = false;
</script>
{#if item.links.includes('book|') && item.links.includes('video|')}
@ -18,5 +19,5 @@
{:else if item.links.includes('video|')}
<VideoCard {item}/>
{:else}
<GenericCard {item}/>
<GenericCard {item} {showBadge}/>
{/if}

2
src/ItemDetail.svelte
Wyświetl plik

@ -103,7 +103,7 @@
<!-- title, sub title, author -->
<section>
<h1 class="text-2xl">{item.name}</h1>
<p class="font max-w-lg">{item.description}</p>
<!-- <p class="font max-w-lg">{item.description}</p> -->
<span class="text-sm">{item.creators}</span>
</section>
<!-- ratings and upload buttons -->

15
src/SearchForm.svelte
Wyświetl plik

@ -13,7 +13,8 @@
format: "",
level: "",
quality: "",
sortby: "rating"
sortby: "rating",
tag: ""
};
const dispatch = createEventDispatcher();
@ -22,7 +23,7 @@
</script>
<form class="w-full bg-lightSecondary1 text-lightSecondary2 dark:bg-darkSecondaryBg dark:text-darkSecondary2 p-2 inline-flex" on:submit|preventDefault>
<form class="w-full 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>
@ -40,6 +41,16 @@
</sl-select>
{/if}
<sl-select class="ml-2 w-44" 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="childlike">Inspirational</sl-menu-item>
<sl-menu-item value="beginner">Educational</sl-menu-item>
<sl-menu-item value="intermediate">Challenging</sl-menu-item>
<sl-menu-item value="advanced">Entertaining</sl-menu-item>
<sl-menu-item value="research">Visual</sl-menu-item>
<sl-menu-item value="research">Interactive</sl-menu-item>
</sl-select>
<sl-select class="ml-2 w-44" 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>

4
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -94,9 +94,9 @@
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
{/if}
<div class="mt-2 flex flex-wrap text-sm text-gray-900">
<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-lightSecondary2 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>

2
src/VideoCard.svelte
Wyświetl plik

@ -1,4 +1,5 @@
<script>
import ButtonGroup from "./ButtonGroup.svelte";
export let item;
function youtube_parser(url){
@ -45,6 +46,7 @@
<strong class="font-extrabold">{item.name}</strong>
<span class="text-sm font-medium">{item.creators}</span>
</div>
</div>
</a>

2
templates/index.html
Wyświetl plik

@ -27,7 +27,7 @@
lightPrimary: 'rgb(30 64 175)', //blue-800
lightSecondary: 'rgb(75 85 99)', //gray-600
lightTertiary: 'rgb(168 85 247)', //purple-500
lightBg: 'rgb(239 246 255)', //blue-50
lightBg: '#fafafa', //zinc-50
lightPrimCont: '#dbeafe', // blue-200
lightButtonBg: 'rgb(20 83 45)', //green-900