kopia lustrzana https://github.com/learn-awesome/learndb
pri and sec colors added, minor ui changes
cssbubble
rodzic
1d0c906ccb
commit
c31d6e8a7e
|
|
@ -46,14 +46,38 @@
|
|||
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>
|
||||
|
||||
|
||||
<svelte:fragment slot="content">
|
||||
{#if currentView === "/home" || currentView === "/"}
|
||||
<Home/>
|
||||
|
|
@ -83,34 +107,34 @@
|
|||
</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 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"/>
|
||||
<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"}>
|
||||
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
<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 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"/>
|
||||
<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"}>
|
||||
<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-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"/>
|
||||
<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">
|
||||
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
<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 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"/>
|
||||
<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"}>
|
||||
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
|
||||
<h3 class="text-center"> Search</h3>
|
||||
</a>
|
||||
<hr/>
|
||||
<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"/>
|
||||
<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"}>
|
||||
<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-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"/>
|
||||
<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"}>
|
||||
<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-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"/>
|
||||
<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">
|
||||
<CogIcon class=" flex-shrink-0 h-6 w-6 "/>
|
||||
<h3 class="text-center"> Datasette</h3>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -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:scale-105 hover:shadow-xl" 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:scale-105 hover:shadow-xl bg-lightSecondary1" 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>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
{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-green-800 text-white' : 'bg-gray-100 text-gray-800'}
|
||||
{currentlySelected === i? 'bg-lightButton2 text-lightButton1' : 'bg-gray-100 text-gray-800'}
|
||||
"
|
||||
>
|
||||
{tab}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import ItemCard from "./ItemCard.svelte"
|
||||
|
||||
|
||||
export let format;
|
||||
export let alltopics;
|
||||
let items = [];
|
||||
|
|
@ -18,6 +18,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{#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">
|
||||
{#each items as item}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<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-gray-800 text-white tracking-wider">{format.name}</h1>
|
||||
<h1 class="text-lg font-semibold p-2 bg-lightButton2 text-lightButton1 tracking-wider">{format.name}</h1>
|
||||
</a>
|
||||
{/each}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,11 +2,25 @@
|
|||
import ButtonGroup from "./ButtonGroup.svelte";
|
||||
import { bookmarks } from "./stores.js"
|
||||
import Icon from "./tailwindui/Icon.svelte"
|
||||
|
||||
|
||||
export let itemid;
|
||||
let item;
|
||||
let reviews = [];
|
||||
|
||||
function youtube_parser(url){
|
||||
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
var match = url.match(regExp);
|
||||
return (match&&match[7].length==11)? match[7] : false;
|
||||
}
|
||||
|
||||
function get_thumbnail_image_url(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];
|
||||
let ytid = youtubeurl && youtube_parser(youtubeurl);
|
||||
let thumbnail_image_url = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
|
||||
return thumbnail_image_url
|
||||
}
|
||||
|
||||
$: fetch(`/learn/items/${itemid}.json?_shape=object`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
|
|
@ -59,20 +73,38 @@
|
|||
<main class="px-12 py-10">
|
||||
<h3 class="py-2 mb-5">
|
||||
{#each item.topics.split(";") as topicname}
|
||||
<a href={"#/topic/" + topicname} class="mr-2 font-bold text-cyan-400">{topicname}</a>
|
||||
<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">
|
||||
<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="" />
|
||||
{#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>
|
||||
|
||||
{: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 text-white">{item.name}</h1>
|
||||
<p class="font text-gray-400">{item.description}</p>
|
||||
<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 -->
|
||||
|
|
@ -87,9 +119,9 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center justify-start gap-3 text-gray-500 mt-5">
|
||||
<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-violet-800 text-gray-50 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 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}
|
||||
|
|
@ -101,12 +133,13 @@
|
|||
|
||||
<!-- Description -->
|
||||
<section class="my-8">
|
||||
<h2 class="text-base font-bold text-gray-100 ">Description</h2>
|
||||
<p class="mt-4 text-sm text-gray-200">{item.description}</p>
|
||||
<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 text-gray-400">
|
||||
<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>
|
||||
|
|
@ -117,50 +150,61 @@
|
|||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-xs ">Fiction</span>
|
||||
<span class="text-xs ">{item.genre}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
|
||||
{#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 text-gray-400">year</h3>
|
||||
<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 text-gray-400">language</h3>
|
||||
<span>EN</span>
|
||||
<h3 class="uppercase text-xs ">Difficulty</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<span class="text-xs">English</span>
|
||||
<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 text-gray-400">Length</h3>
|
||||
<span>209</span>
|
||||
<h3 class="uppercase text-xs ">Creator</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<span class="text-xs">Pages</span>
|
||||
<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 text-gray-400">Publisher</h3>
|
||||
<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>310.4</span>
|
||||
<span></span>
|
||||
</div>
|
||||
<span class="text-xs">KB</span>
|
||||
<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>
|
||||
|
|
@ -168,7 +212,7 @@
|
|||
|
||||
<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-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
|
||||
<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">
|
||||
|
|
@ -180,6 +224,7 @@
|
|||
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
<!-- more books by same author -->
|
||||
|
||||
<!-- <section class="my-8 overflow-hidden">
|
||||
|
|
|
|||
|
|
@ -46,17 +46,19 @@
|
|||
|
||||
</script>
|
||||
|
||||
<SearchForm {alltopics} on:queryChanged={handleQueryChanged}/>
|
||||
|
||||
|
||||
<TopicMasonryGrid {topicname} {alltopics}/>
|
||||
|
||||
<SearchForm {alltopics} on:queryChanged={handleQueryChanged}/>
|
||||
|
||||
<!-- <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{#each items as item}
|
||||
<ItemCard {item}/>
|
||||
{/each}
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<div class="mt-10">
|
||||
<div class="">
|
||||
<sl-tab-group placement="start">
|
||||
{#each formats.filter(f => items.filter(x => x.links.includes(f.id + '|')).length > 0) as format}
|
||||
|
|
@ -65,13 +67,8 @@
|
|||
|
||||
{#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">
|
||||
<<<<<<< HEAD
|
||||
{#each items.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
|
||||
=======
|
||||
<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">
|
||||
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
>>>>>>> upstream/main
|
||||
<BookCard {item}/>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
@ -79,7 +76,7 @@
|
|||
|
||||
{: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">
|
||||
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<VideoCard {item}/>
|
||||
{/each}
|
||||
|
|
@ -88,7 +85,7 @@
|
|||
|
||||
{:else}
|
||||
<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">
|
||||
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-2 lg:max-w-none xl:grid-cols-3">
|
||||
{#each filteredItems.filter(x => x.links.includes(format.id + '|')) as item}
|
||||
<GenericCard {item}/>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -66,9 +66,9 @@
|
|||
|
||||
</script>
|
||||
|
||||
<div class="my-10">
|
||||
<div class="my-10 text-lightButton2">
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item href="#/topics">All Topics</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item href="#/topics" class="text-lg">All Topics</sl-breadcrumb-item>
|
||||
{#if topic}
|
||||
{#if topic.parent_id}
|
||||
<sl-breadcrumb-item href={"#/topic/" + topic.parent_id}>
|
||||
|
|
@ -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-cyan-900">
|
||||
<div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 bg-lightSecondary1 border-2 border-lightButton2 ">
|
||||
{#if typeof(parent[0]) == "string"}
|
||||
<span class="mt-1 p-1 text-gray-100 font-semibold text-lg">{ parent[0] }</span>
|
||||
<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-gray-100 font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
|
||||
<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>
|
||||
{/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-gray-200 no-underline hover:underline hover:text-white hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
|
||||
<a href={"#/topic/" + child.name} class="text-lightSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,49 @@
|
|||
<script>
|
||||
export let 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];
|
||||
|
||||
|
||||
function youtube_parser(url){
|
||||
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
|
||||
var match = url.match(regExp);
|
||||
return (match&&match[7].length==11)? match[7] : false;
|
||||
}
|
||||
|
||||
let ytid = youtubeurl && youtube_parser(youtubeurl);
|
||||
let thumbnail_image_url = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
|
||||
function get_thumbnail_image_url(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];
|
||||
let ytid = youtubeurl && youtube_parser(youtubeurl);
|
||||
let thumbnail_image_url = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
|
||||
return thumbnail_image_url
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<a class="flex flex-wrap w-full mb-8 justify-between overflow-hidden text-gray-50 rounded-lg border border-gray-500 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:scale-105 duration-300" 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">
|
||||
|
||||
{#if item.image || thumbnail_image_url}
|
||||
|
||||
{#if item.image || get_thumbnail_image_url(item)}
|
||||
|
||||
<div>
|
||||
<img src={item.image || thumbnail_image_url} class="h-28 object-cover" alt="{item.name}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="absolute top-1/3 left-1/3 z-20 h-10 w-10 fill-gray-500"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="h-10 w-10 fill-gray-500"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>
|
||||
<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>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col ml-5 w-2/3 mt-2">
|
||||
<strong class="text-white font-extrabold">{item.name}</strong>
|
||||
<span class="text-white text-sm font-medium">{item.creators}</span>
|
||||
<strong class="text-lightPrimaryText font-extrabold">{item.name}</strong>
|
||||
<span class="text-lightSecondary2 text-sm font-medium">{item.creators}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
From: "translate-x-0"
|
||||
To: "-translate-x-full"
|
||||
-->
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-cyan-900 text-white">
|
||||
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-lightSecondary2 text-lightSecondary1 dark:bg-darkSecondary2 dark:text-darkSecondary1">
|
||||
<!--
|
||||
Close button, show/hide based on off-canvas menu state.
|
||||
|
||||
|
|
@ -75,8 +75,8 @@
|
|||
<!-- Static sidebar for desktop -->
|
||||
<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">
|
||||
<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 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">
|
||||
|
|
|
|||
|
|
@ -1,20 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" class="">
|
||||
<html lang="en" class="dark">
|
||||
<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: {
|
||||
clifford: '#da373d',
|
||||
lightPrimaryBg: 'rgb(248 250 252)', //bg-slate-50
|
||||
lightPrimaryText: 'rgb(15 23 42)', //bg-slate-900
|
||||
lightSecondary1: 'rgb(250 245 255)', //bg-purple-50
|
||||
lightSecondary2: 'rgb(88 28 135)', //bg-purple-900
|
||||
lightButton1: 'rgb(240 253 250)', //bg-teal-50
|
||||
lightButton2: 'rgb(19 78 74)', //bg-teal-900
|
||||
|
||||
darkPrimaryBg: 'rgb(15 23 42)', //bg-slate-900
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<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" />
|
||||
|
|
@ -25,7 +56,7 @@
|
|||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Quicksand&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="h-full bg-gray-900">
|
||||
<body class="h-full bg-lightPrimaryBg dark:bg-darkPrimaryBg text-lightPrimaryText dark:text-darkPrimaryText">
|
||||
<div class="h-full" id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue