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

Closes #32

pull/34/head
cssbubble 2022-06-09 11:08:14 +01:00
rodzic 6d8950c03c
commit bcab499a96
4 zmienionych plików z 85 dodań i 76 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

44
src/AppShell.svelte
Wyświetl plik

@ -13,13 +13,13 @@
var saturation = randint(0,100) var saturation = randint(0,100)
var lightness = randint(0,100) var lightness = randint(0,100)
tailwind.config.theme.extend.colors.lightPrimary = `hsl(${hues[0]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.primary = `hsl(${hues[0]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.lightSecondary = `hsl(${hues[1]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.primary_light = `hsl(${hues[1]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.lightTertiary = `hsl(${hues[2]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.neutral_light = `hsl(${hues[2]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.lightBg = `hsl(${hues[3]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.neutral_dark = `hsl(${hues[3]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.lightPrimCont = `hsl(${hues[4]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.secondary = `hsl(${hues[4]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.lightButtonBg = `hsl(${hues[5]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.lightGradOne = `hsl(${hues[5]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.light = `hsl(${hues[6]}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.lightGradTwo = `hsl(${hues[6]}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.darkPrimary = `hsl(${(hues[0] + 180) % 360}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.darkPrimary = `hsl(${(hues[0] + 180) % 360}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.darkSecondary = `hsl(${(hues[1] + 180) % 360}, ${saturation}%, ${lightness}%)`; tailwind.config.theme.extend.colors.darkSecondary = `hsl(${(hues[1] + 180) % 360}, ${saturation}%, ${lightness}%)`;
@ -88,20 +88,6 @@
<div class="fixed inset-y-0 left-0 flex z-50 mt-12"> <div class="fixed inset-y-0 left-0 flex z-50 mt-12">
<div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-primary_light text-primary dark:bg-neutral_dark dark:text-primary_light"> <div class="relative flex-1 flex flex-col w-64 w-full pt-5 pb-4 bg-primary_light text-primary dark:bg-neutral_dark dark:text-primary_light">
<!-- <div class="absolute top-0 right-0 -mr-12 pt-2"> -->
<!-- <button on:click={e => isNavDrawerOpen = false} type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<span class="sr-only">Close sidebar</span> -->
<!-- Heroicon name: outline/x -->
<!-- <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button> -->
<!-- </div> -->
<!-- <div class="flex-shrink-0 flex items-center tracking-wider font-bold text-lightPrimCont">
<a href="#/" class="">LearnAwesome</a>
</div> -->
<div class="md:ml-6 flex-1 h-0 overflow-y-auto"> <div class="md:ml-6 flex-1 h-0 overflow-y-auto">
<nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}> <nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
<slot name="nav"></slot> <slot name="nav"></slot>
@ -111,24 +97,20 @@
</nav> </nav>
</div> </div>
</div> </div>
<!-- <div class="flex-shrink-0 w-14" aria-hidden="true"> -->
<!-- Dummy element to force sidebar to shrink to fit close icon -->
<!-- </div> -->
</div> </div>
</div> </div>
{/if} {/if}
<!-- Static sidebar for desktop --> <!-- Static sidebar for desktop -->
<div class="hidden md:flex md:w-64 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 --> <!-- Sidebar component -->
<div class="flex flex-col flex-grow pt-5 border-r-8 overflow-y-auto"> <div class="flex flex-col flex-grow border-r-8 overflow-y-auto">
<div class="flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-primary"> <!-- <div class="flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-primary">
<a href="/" class="">LearnAwesome</a> <a href="/" class="">LearnAwesome</a>
<div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div> <div class="w-1/5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"></div>
</div> </div> -->
<div class="mt-5 flex-1 flex flex-col bg-primary_light text-primary"> <div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary">
<nav class="flex-1 pb-4 space-y-1"> <nav class="flex-1 pb-4 space-y-1 pt-5">
<slot name="nav"></slot> <slot name="nav"></slot>
{#if window.location.href.startsWith('http://127.0.0.1')} {#if window.location.href.startsWith('http://127.0.0.1')}
<button class="" on:click={themeRandomize}>Randomize</button> <button class="" on:click={themeRandomize}>Randomize</button>

8
src/ItemDetail.svelte
Wyświetl plik

@ -95,15 +95,15 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
</h3> </h3>
<div class="mt-10"> <div class="mt-10">
<div class="mb-10 flex md:flex-wrap justify-start"> <div class="mb-10 flex flex-wrap justify-start">
<div class="w-full"> <div class="w-full">
{#if item.links.includes('wiki|')} {#if item.links.includes('wiki|')}
<iframe src={wikiUrlForEmbed(item)} class="w-full h-[48rem]" title="embedded wiki"></iframe> <iframe src={wikiUrlForEmbed(item)} class="w-full h-[48rem]" title="embedded wiki"></iframe>
{:else if item.links.includes('video|') && oembed_iframe} {:else if item.links.includes('video|') && oembed_iframe}
{@html oembed_iframe.replace('width="200"','width="100%"').replace('height="113"','height="400"')} {@html oembed_iframe.replace('width="200"','width="100%"').replace('height="113"','height="400"')}
{:else if item.image} {:else if item.image}
<div class="sm:mr-10"> <div class="">
<img class="mr-28 mb-6 sm:w-44 sm:h-64 transform rounded-md shadow-lg transition duration-300 ease-out hover:scale-105 md:shadow-xl " src="{item.image}" alt="{item.name}" /> <img class="mr-5 mb-6 sm:w-44 sm:h-64 transform rounded-md shadow-lg transition duration-300 ease-out hover:scale-105 md:shadow-xl " src="{item.image}" alt="{item.name}" />
</div> </div>
{:else if item.links.includes('video') } {:else if item.links.includes('video') }
<div class="relative mr-5 rounded-lg overflow-hidden shadow-lg"> <div class="relative mr-5 rounded-lg overflow-hidden shadow-lg">
@ -129,7 +129,7 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
</div> </div>
<!-- item details --> <!-- item details -->
<div class="w-full mt-10 flex flex-col justify-between"> <div class="w-full mt-10 flex flex-col justify-between flex-1">
<!-- title, sub title, author --> <!-- title, sub title, author -->
<section> <section>
<h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1> <h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1>

31
src/SearchForm.svelte
Wyświetl plik

@ -1,9 +1,12 @@
<script> <script>
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Icon from "./Icon.svelte"
export let alltopics; export let alltopics;
export let hideTopic = false; export let hideTopic = false;
let showForm = true;
let query = { let query = {
text: "", text: "",
topic: "", topic: "",
@ -18,7 +21,28 @@
</script> </script>
<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row sticky top-14 z-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo" on:submit|preventDefault> <div class="sticky top-24 z-10 md:top-12 bg-primary md:bg-gradient-to-r from-lightGradOne to-lightGradTwo rounded">
{#if showForm == false}
<div class="bg-primary rounded absolute -top-8 right-0">
<button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
<span class="sr-only">Open search form</span>
<Icon kind="search"/>
</button>
</div>
{/if}
{#if showForm}
<div class="bg-primary rounded absolute -top-8 right-0">
<button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
<span class="sr-only">Close search form</span>
<Icon kind="close"/>
</button>
</div>
{/if}
{#if showForm}
<form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
<sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}"> <sl-input type="search" placeholder="Search by keywords" size="medium" clearable class="w-full 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-icon name="search" slot="prefix"></sl-icon>
</sl-input> </sl-input>
@ -59,5 +83,8 @@
<sl-menu-item value="year">Sort by Year</sl-menu-item> <sl-menu-item value="year">Sort by Year</sl-menu-item>
<sl-menu-item value="name">Sort by Name</sl-menu-item> <sl-menu-item value="name">Sort by Name</sl-menu-item>
</sl-select> </sl-select>
</form> </form>
{/if}
</div>

2
templates/index.html
Wyświetl plik

@ -14,7 +14,7 @@
neutral_light: '#737373', // neutral-400 neutral_light: '#737373', // neutral-400
neutral_dark: '#262626', // neutral-800 neutral_dark: '#262626', // neutral-800
secondary: '#6B21A8', // purple-800 secondary: '#6B21A8', // purple-800
white: '#ffffff', //white: '#ffffff',
lightGradOne: '#DBEAFE', //blue-100 lightGradOne: '#DBEAFE', //blue-100
lightGradTwo: '#F3E8FF', //purple-100 lightGradTwo: '#F3E8FF', //purple-100
}, },