kopia lustrzana https://github.com/learn-awesome/learndb
item detail,combo box update
cssbubble
rodzic
a7694b9b8e
commit
06a0ac28ef
Plik binarny nie jest wyświetlany.
|
|
@ -55,26 +55,27 @@
|
|||
|
||||
<!-- Results, show/hide based on command palette state -->
|
||||
<ul class="scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2" id="options" role="listbox">
|
||||
{#if result_items.length > 0}
|
||||
<li>
|
||||
<h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Items</h2>
|
||||
<ul class="mt-2 text-sm text-gray-800">
|
||||
{#each result_items as item}
|
||||
<li><a href="#/item/{item.rowid}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" role="option" tabindex="-1">{item.name}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{#if result_topics.length > 0}
|
||||
<li>
|
||||
<h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Topics</h2>
|
||||
<ul class="mt-2 text-sm text-gray-800">
|
||||
{#each result_topics as topic}
|
||||
<li><a href="#/topic/{topic.name}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-indigo-600 hover:text-white cursor-pointer" role="option" tabindex="-1">{topic.display_name}</a></li>
|
||||
<li><a href="#/topic/{topic.name}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-lightTertiary hover:text-white cursor-pointer" role="option" tabindex="-1">{topic.display_name}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
{#if result_items.length > 0}
|
||||
<li>
|
||||
<h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900 text-center">Items</h2>
|
||||
<ul class="mt-2 text-sm text-gray-800">
|
||||
{#each result_items as item}
|
||||
<li><a href="#/item/{item.rowid}" on:click={resetQuery} class="block cursor-default select-none px-4 py-2 hover:bg-lightTertiary hover:text-white cursor-pointer" role="option" tabindex="-1">{item.name}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</li>
|
||||
{/if}
|
||||
|
||||
</ul>
|
||||
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -23,12 +23,12 @@
|
|||
{i == 0 && 'rounded-l-md'}
|
||||
{i == tabs.length-1 && 'rounded-r-md'}
|
||||
border border-gray-800 text-sm font-medium focus:z-10 focus:outline-none
|
||||
{currentlySelected === i? 'bg-lightButtonBg text-lightBg dark:bg-darkButtonBg dark:text-darkBg' : 'bg-lightPrimCont text-lightPrimary'}
|
||||
{currentlySelected === i? 'bg-lightTertiary text-lightBg dark:bg-darkTertiary dark:text-darkBg' : 'bg-lightPrimCont text-lightPrimary'}
|
||||
"
|
||||
>
|
||||
{tab}
|
||||
</button>
|
||||
{/each}
|
||||
{/each}
|
||||
|
||||
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
<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-lightSecondary2 sm:text-3xl sm:truncate"> {format.toUpperCase()+"s"}</h2>
|
||||
<h2 class="text-2xl font-bold leading-7 text-lightSecondary2 sm:text-3xl sm:truncate"> {format.toUpperCase()+"s".toUpperCase()}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
</script>
|
||||
|
||||
<h1 class="my-2">Learn from the following formats</h1>
|
||||
<h1 class="my-2">Explore the different formats</h1>
|
||||
<div class=" mx-auto flex flex-wrap gap-5 justify-center items-center">
|
||||
{#each formats as format}
|
||||
<a href="#/format/{format.id}" class="w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
|
||||
|
|
|
|||
|
|
@ -70,16 +70,21 @@
|
|||
</style>
|
||||
|
||||
{#if item}
|
||||
<h3 class="my-2 text-lightButton2 dark:text-darkSecondary2">
|
||||
|
||||
<div class="max-w-4xl mx-auto border shadow-2xl px-20 py-8 rounded-xl mt-20">
|
||||
<h3 class="my-2">
|
||||
{#each item.topics.split(";") as topicname}
|
||||
<a href={"#/topic/" + topicname} class="mr-2 font-bold text-lightSecondary2 dark:text-DarkSecondary2">{topicname}</a>
|
||||
<a href={"#/topic/" + topicname} class="mr-2 font-bold">{topicname.toUpperCase()}</a>
|
||||
{/each}
|
||||
</h3>
|
||||
<div class="">
|
||||
<div class="mt-10">
|
||||
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
|
||||
<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}" />
|
||||
<div class="mr-5">
|
||||
<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}" />
|
||||
</div>
|
||||
|
||||
|
||||
<!-- {: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}" />
|
||||
|
|
@ -99,36 +104,29 @@
|
|||
<!-- <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">
|
||||
<div class="flex w-full flex-col justify-between">
|
||||
<!-- 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>
|
||||
<span class="text-sm mt-5">{item.creators}</span>
|
||||
<div class="mt-5">
|
||||
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
|
||||
<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-lightTertiary dark:bg-darkTertiary text-lightBg dark:text-darkBg border" target="_blank"> {type.split("|")[0]}
|
||||
<a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium border drop-shadow-lg" target="_blank"> {type.split("|")[0]}
|
||||
<span class="ml-0.5 h-4 w-4"><Icon kind="link"/></span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<hr class="bg-lightPrimary"/>
|
||||
|
||||
<!-- Description -->
|
||||
{#if item.description}
|
||||
|
|
@ -138,10 +136,12 @@
|
|||
</section>
|
||||
{/if}
|
||||
|
||||
<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>
|
||||
|
|
@ -204,9 +204,10 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<hr />
|
||||
|
||||
<!-- review -->
|
||||
{#if item.review}
|
||||
<hr />
|
||||
<section class="my-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="text-base font-bold text-gray-100">Reviews</h2>
|
||||
|
|
@ -376,6 +377,7 @@
|
|||
</div>
|
||||
</section> -->
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="loading">loading...</p>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@
|
|||
|
||||
</script>
|
||||
|
||||
<form class="w-full p-2 inline-flex" on:submit|preventDefault>
|
||||
<form class="w-full p-2 inline-flex flex-wrap" 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>
|
||||
|
||||
{#if !hideTopic}
|
||||
<ComboBox options={alltopics.map(t => { return {label: t.display_name, value: t.name}; }).sort((a,b) => a.label.localeCompare(b.label))} selected={null}/>
|
||||
<ComboBox options={alltopics.map(t => { return {label: t.display_name, value: t.name}; }).sort((a,b) => a.label.localeCompare(b.label)).slice(0,10)} selected={null}/>
|
||||
{/if}
|
||||
|
||||
{#if !hideFormat}
|
||||
|
|
@ -75,5 +75,7 @@
|
|||
<sl-menu-item value="year">Sort by Year</sl-menu-item>
|
||||
<sl-menu-item value="name">Sort by Name</sl-menu-item>
|
||||
</sl-select>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,23 @@
|
|||
<script>
|
||||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
// import ButtonGroup from "./ButtonGroup.svelte";
|
||||
// import { oEmdedProviders } from "./oEmbedProviders.js"
|
||||
export let item;
|
||||
let oEmded_image_ytb_url = null;
|
||||
|
||||
function oEmded_image(item){
|
||||
let youtubeformat = item.links.split(";").find(s => s.startsWith('video|') && (s.includes('youtube.com') || s.includes('youtu.be')));
|
||||
let youtubeurl = youtubeformat && youtubeformat.split('|')[1];
|
||||
|
||||
if(!youtubeurl) return;
|
||||
|
||||
return `https://www.youtube.com/oembed?url=${youtubeurl}&format=json`
|
||||
}
|
||||
|
||||
$: oEmded_image(item) && fetch(oEmded_image(item))
|
||||
.then( r => r.json())
|
||||
.then(data => {
|
||||
oEmded_image_ytb_url = data.thumbnail_url
|
||||
});
|
||||
|
||||
function youtube_parser(url){
|
||||
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
|
|
@ -23,10 +40,10 @@
|
|||
<div class="relative w-full max-w-sm w-64 ring-black/5 rounded-xl flex flex-col items-start">
|
||||
<div class="h-32 w-64 flex justify-center items-center relative bg-lightSecondary">
|
||||
|
||||
{#if item.image || get_thumbnail_image_url(item)}
|
||||
{#if item.image || oEmded_image_ytb_url}
|
||||
|
||||
<div>
|
||||
<img src={item.image || get_thumbnail_image_url(item)} class="object-cover " alt="{item.name}">
|
||||
<img src={item.image || oEmded_image_ytb_url} class="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>
|
||||
|
|
|
|||
Plik diff jest za duży
Load Diff
|
|
@ -1,44 +1,15 @@
|
|||
<script>
|
||||
export let options = [];
|
||||
export let selected = {};
|
||||
export let options = [];
|
||||
let userInput = '3';
|
||||
$: filteredOptions = options.filter(x => x.label.startsWith(userInput))
|
||||
$: console.log(userInput)
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="relative ml-2">
|
||||
<input type="text" class="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-12 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm" role="combobox" aria-controls="options" aria-expanded="false" value={selected && selected.label}>
|
||||
<button type="button" class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
|
||||
<!-- Heroicon name: solid/selector -->
|
||||
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm hidden" id="options" role="listbox">
|
||||
{#each options as option}
|
||||
<!--
|
||||
Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
|
||||
|
||||
Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
|
||||
-->
|
||||
<li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" role="option" tabindex="-1">
|
||||
<!-- Selected: "font-semibold" -->
|
||||
<span class={(selected && selected.value == option.value ? 'font-semibold' : '') + ' block truncate'}>{option.label}</span>
|
||||
|
||||
<!--
|
||||
Checkmark, only display for selected option.
|
||||
|
||||
Active: "text-white", Not Active: "text-indigo-600"
|
||||
-->
|
||||
{#if selected && selected.value == option.value}
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
|
||||
<!-- Heroicon name: solid/check -->
|
||||
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
{/if}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<sl-dropdown>
|
||||
<sl-input slot="trigger" on:change="{e => userInput = e.target.value}" value={userInput}></sl-input>
|
||||
<sl-menu>
|
||||
{#each filteredOptions as opt (opt.value)}
|
||||
<sl-menu-item>{opt.label}</sl-menu-item>
|
||||
{/each}
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue