kopia lustrzana https://github.com/learn-awesome/learndb
Closes #32
cssbubble
rodzic
6d8950c03c
commit
bcab499a96
|
|
@ -13,13 +13,13 @@
|
|||
var saturation = randint(0,100)
|
||||
var lightness = randint(0,100)
|
||||
|
||||
tailwind.config.theme.extend.colors.lightPrimary = `hsl(${hues[0]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.lightSecondary = `hsl(${hues[1]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.lightTertiary = `hsl(${hues[2]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.lightBg = `hsl(${hues[3]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.lightPrimCont = `hsl(${hues[4]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.lightButtonBg = `hsl(${hues[5]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.light = `hsl(${hues[6]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.primary = `hsl(${hues[0]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.primary_light = `hsl(${hues[1]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.neutral_light = `hsl(${hues[2]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.neutral_dark = `hsl(${hues[3]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.secondary = `hsl(${hues[4]}, ${saturation}%, ${lightness}%)`;
|
||||
tailwind.config.theme.extend.colors.lightGradOne = `hsl(${hues[5]}, ${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.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="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">
|
||||
<nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
|
||||
<slot name="nav"></slot>
|
||||
|
|
@ -111,24 +97,20 @@
|
|||
</nav>
|
||||
</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>
|
||||
{/if}
|
||||
|
||||
<!-- Static sidebar for desktop -->
|
||||
<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 border-r-8 overflow-y-auto">
|
||||
<div class="flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-primary">
|
||||
<!-- Sidebar component -->
|
||||
<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">
|
||||
<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>
|
||||
<div class="mt-5 flex-1 flex flex-col bg-primary_light text-primary">
|
||||
<nav class="flex-1 pb-4 space-y-1">
|
||||
</div> -->
|
||||
<div class="mt-12 flex-1 flex flex-col bg-primary_light text-primary">
|
||||
<nav class="flex-1 pb-4 space-y-1 pt-5">
|
||||
<slot name="nav"></slot>
|
||||
{#if window.location.href.startsWith('http://127.0.0.1')}
|
||||
<button class="" on:click={themeRandomize}>Randomize</button>
|
||||
|
|
|
|||
|
|
@ -95,15 +95,15 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
|
|||
</h3>
|
||||
|
||||
<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">
|
||||
{#if item.links.includes('wiki|')}
|
||||
<iframe src={wikiUrlForEmbed(item)} class="w-full h-[48rem]" title="embedded wiki"></iframe>
|
||||
{:else if item.links.includes('video|') && oembed_iframe}
|
||||
{@html oembed_iframe.replace('width="200"','width="100%"').replace('height="113"','height="400"')}
|
||||
{:else if item.image}
|
||||
<div class="sm:mr-10">
|
||||
<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}" />
|
||||
<div class="">
|
||||
<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>
|
||||
{:else if item.links.includes('video') }
|
||||
<div class="relative mr-5 rounded-lg overflow-hidden shadow-lg">
|
||||
|
|
@ -129,7 +129,7 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
|
|||
</div>
|
||||
|
||||
<!-- 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 -->
|
||||
<section>
|
||||
<h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Icon from "./Icon.svelte"
|
||||
|
||||
export let alltopics;
|
||||
export let hideTopic = false;
|
||||
|
||||
let showForm = true;
|
||||
|
||||
let query = {
|
||||
text: "",
|
||||
topic: "",
|
||||
|
|
@ -18,46 +21,70 @@
|
|||
|
||||
</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>
|
||||
<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-input>
|
||||
|
||||
{#if !hideTopic}
|
||||
<fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
|
||||
{#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
|
||||
<fluent-option value={topic.name}>{topic.display_name}</fluent-option>
|
||||
{/each}
|
||||
</fluent-combobox>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
|
||||
<sl-select class="w-full" 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="inspirational">Inspirational</sl-menu-item>
|
||||
<sl-menu-item value="educational">Educational</sl-menu-item>
|
||||
<sl-menu-item value="challenging">Challenging</sl-menu-item>
|
||||
<sl-menu-item value="entertaining">Entertaining</sl-menu-item>
|
||||
<sl-menu-item value="visual">Visual</sl-menu-item>
|
||||
<sl-menu-item value="interactive">Interactive</sl-menu-item>
|
||||
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
|
||||
</sl-select>
|
||||
|
||||
<sl-select class="w-full" 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>
|
||||
<sl-menu-item value="beginner">Beginner</sl-menu-item>
|
||||
<sl-menu-item value="intermediate">Intermediate</sl-menu-item>
|
||||
<sl-menu-item value="advanced">Advanced</sl-menu-item>
|
||||
<sl-menu-item value="research">Research</sl-menu-item>
|
||||
</sl-select>
|
||||
<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}
|
||||
|
||||
<sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
|
||||
<sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="rating">Sort by Rating</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-select>
|
||||
</form>
|
||||
{#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-icon name="search" slot="prefix"></sl-icon>
|
||||
</sl-input>
|
||||
|
||||
{#if !hideTopic}
|
||||
<fluent-combobox autocomplete="both" placeholder="Any topic" class="ml-2 mt-1 outline-none border-2 border-grey-600" on:change="{e => query.topic = e.target.value}">
|
||||
{#each alltopics.sort((a,b) => a.display_name.localeCompare(b.display_name)) as topic}
|
||||
<fluent-option value={topic.name}>{topic.display_name}</fluent-option>
|
||||
{/each}
|
||||
</fluent-combobox>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
|
||||
<sl-select class="w-full" 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="inspirational">Inspirational</sl-menu-item>
|
||||
<sl-menu-item value="educational">Educational</sl-menu-item>
|
||||
<sl-menu-item value="challenging">Challenging</sl-menu-item>
|
||||
<sl-menu-item value="entertaining">Entertaining</sl-menu-item>
|
||||
<sl-menu-item value="visual">Visual</sl-menu-item>
|
||||
<sl-menu-item value="interactive">Interactive</sl-menu-item>
|
||||
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
|
||||
</sl-select>
|
||||
|
||||
<sl-select class="w-full" 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>
|
||||
<sl-menu-item value="beginner">Beginner</sl-menu-item>
|
||||
<sl-menu-item value="intermediate">Intermediate</sl-menu-item>
|
||||
<sl-menu-item value="advanced">Advanced</sl-menu-item>
|
||||
<sl-menu-item value="research">Research</sl-menu-item>
|
||||
</sl-select>
|
||||
</div>
|
||||
|
||||
<sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
|
||||
<sl-icon name="sort-down-alt" slot="prefix"></sl-icon>
|
||||
<sl-menu-item value="rating">Sort by Rating</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-select>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
neutral_light: '#737373', // neutral-400
|
||||
neutral_dark: '#262626', // neutral-800
|
||||
secondary: '#6B21A8', // purple-800
|
||||
white: '#ffffff',
|
||||
//white: '#ffffff',
|
||||
lightGradOne: '#DBEAFE', //blue-100
|
||||
lightGradTwo: '#F3E8FF', //purple-100
|
||||
},
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue