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

topic names in alphabetical order, course detail file deleted, minor changes

pull/43/head
cssbubble 2022-06-14 12:55:09 +01:00
rodzic 9c9432d05f
commit 36fc730054
14 zmienionych plików z 118 dodań i 46 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

59
src/AdvancedSearch.svelte
Wyświetl plik

@ -26,10 +26,10 @@
<form class="hidden w-full md:pl-24 md:flex justify-center" on:submit|preventDefault>
<div class="fixed top-2">
<div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-96">
<div class="fixed top-2 w-full">
<div class="transform overflow-hidden rounded-md bg-primary_light shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-2/3 mx-auto">
<sl-input
placeholder="Search..." size="medium" clearable autofocus
placeholder="Search..." size="medium" clearable
class="p-0"
on:sl-input={e => query=e.target.value}
on:keydown={e => e.key === 'Escape' && resetQuery()}
@ -51,7 +51,58 @@
{#if result_items.length > 0}
<sl-menu-label class="bg-gray-200">Items</sl-menu-label>
{#each result_items as item}
<sl-menu-item value="#/item/{item.rowid}">{item.name}</sl-menu-item>
<sl-menu-item value="#/item/{item.rowid}">{item.name}
{#each item.links.split(";") as type}
{#if type.split("|")[0] === 'book'}
<sl-icon name="book" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'video'}
<sl-icon name="play-circle" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'audio'}
<sl-icon name="headphones" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'article'}
<sl-icon name="file-text" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'software'}
<sl-icon name="app" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'blogs'}
<span slot="suffix">b</span>
{/if}
{#if type.split("|")[0] === 'forums'}
<sl-icon name="chat-dots" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'cheatsheets'}
<sl-icon name="list-columns-reverse" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'code'}
<sl-icon name="code" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'conferences'}
<sl-icon name="people" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'course'}
<sl-icon name="lightbulb" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'flashcard'}
<sl-icon name="postcard" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'games'}
<sl-icon name="controller" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'infographics'}
<sl-icon name="images" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'people'}
<sl-icon name="person-circle" slot="suffix"></sl-icon>
{/if}
{#if type.split("|")[0] === 'wiki'}
<sl-icon name="globe2" slot="suffix"></sl-icon>
{/if}
{/each}
</sl-menu-item>
{/each}
{/if}
</sl-menu>

8
src/App.svelte
Wyświetl plik

@ -112,20 +112,20 @@
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'text-secondary dark:text-primary_light' : '') + " w-full 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" ? 'text-secondary' : '') + " w-full 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"/>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Topic</h3>
<div class={(currentView === "/randomtopic" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
<div class={(currentView === "/randomtopic" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</a>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'text-secondary dark:text-primary_light' : '') + " w-full 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" ? 'text-secondary' : '') + " w-full 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"/>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Item</h3>
<div class={(currentView === "/randomitem" ? 'bg-secondary w-full dark:bg-primary_light' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
<div class={(currentView === "/randomitem" ? 'bg-secondary w-full' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</a>

21
src/AppShell.svelte
Wyświetl plik

@ -23,22 +23,15 @@
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}%)`;
tailwind.config.theme.extend.colors.darkTertiary = `hsl(${(hues[2] + 180) % 360}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.darkBg = `hsl(${(hues[3] + 180) % 360}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.darkPrimCont = `hsl(${(hues[4] + 180) % 360}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.darkButtonBg = `hsl(${(hues[5] + 180) % 360}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.dark = `hsl(${(hues[6] + 180) % 360}, ${saturation}%, ${lightness}%)`;
tailwind.config.theme.extend.colors.primary_medium = `hsl(${hues[6]}, ${saturation}%, ${lightness}%)`;
}
</script>
<div >
<!-- sticky top bar -->
<div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-primary_light bg-primary shadow h-16">
<div class="sticky top-0 z-50 flex-shrink-0 flex items-center text-neutral-50 bg-blue-900 shadow h-16">
<div class="flex items-center">
{#if isNavDrawerOpen == false}
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-primary_light text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
@ -56,7 +49,7 @@
<div class=" py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold group">
<a href="/" class="">LearnAwesome</a>
<div class="w-1/5 mt-0.25 h-0.5 bg-primary_light group-hover:w-full ease-in-out duration-300"></div>
<div class="w-1/5 mt-0.25 h-0.5 bg-neutral-50 group-hover:w-full ease-in-out duration-300"></div>
</div>
</div>
@ -94,7 +87,7 @@
<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 pb-4">
<div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
<div class="md:ml-6 flex-1 h-0 overflow-y-auto bg-primary_light text-primary">
<nav class="px-4 space-y-1" on:click={e => isNavDrawerOpen = false}>
<slot name="nav"></slot>
{#if window.location.href.startsWith('http://127.0.0.1')}
@ -115,7 +108,7 @@
<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-12 flex-1 flex flex-col bg-primary_light text-primary dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light">
<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')}

2
src/BookCard.svelte
Wyświetl plik

@ -9,7 +9,7 @@
<img class=" h-36 w-24 md:h-56 md:w-40 shrink-0" src={item.image || randomCover(item.iid)} alt="{item.name}"/>
{#if item.rating}
<h1 class="text-sm md:text-lg font-semibold p-2 text-white tracking-wider">
<h1 class="text-sm md:text-lg font-semibold p-2 text-primary_light tracking-wider">
<sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
</h1>
{/if}

2
src/Bookmarks.svelte
Wyświetl plik

@ -23,6 +23,6 @@
</script>
<h1 class="my-2 text-lightButton2 dark:text-darkButton2">{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
<h1 class="my-2">{kind == 0 ? 'Want to learn' : 'Finished learning'}</h1>
<ItemList {items}/>

0
src/CourseDetail.svelte
Wyświetl plik

2
src/FormatList.svelte
Wyświetl plik

@ -3,7 +3,7 @@
</script>
<div class=" mx-auto grid pl-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 min-h-screen">
<div class=" mx-auto grid place-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 min-h-screen">
{#each formats as format}
<a href="#/format/{format.id}" class="w-32 h-28 lg:w-44 relative flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
<div class="flex-shrink-0 relative">

2
src/GenericCard.svelte
Wyświetl plik

@ -2,7 +2,7 @@
export let item: {name: string, creators: string, rowid: number};
</script>
<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-white text-primary dark:bg-neutral_dark dark:text-primary_light hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
<a class="flex flex-wrap p-2 sm:p-8 justify-between rounded break-inside-avoid sm:w-64 max-w-sm bg-primary_light text-primary hover:rounded-3xl border border-secondary ease-in-out duration-300" href="#/item/{item.rowid}">
<div class="flex flex-col justify-between">
<div class="flex flex-col">
<strong class="font-extrabold text-sm sm:text-lg">{item.name}</strong>

3
src/ItemDetail.svelte
Wyświetl plik

@ -180,10 +180,11 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
</div>
</div>
</div>
<hr class="bg-neutral_light"/>
<!-- Description -->
{#if item.description}
<hr class="bg-neutral_light"/>
<section class="my-8">
<h2 class="font-bold text-lg">Description</h2>
<p class="mt-4 tracking-wide">{item.description}</p>

4
src/NavButtonWithLabel.svelte
Wyświetl plik

@ -7,13 +7,13 @@
</script>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary dark:text-primary_light' : '') + " sw-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
<a href={target} target={target.startsWith('http') ? '_blank' : ''} class={(isActive ? 'text-secondary ' : '') + " sw-full group flex flex-col py-5 pl-4 text-sm font-medium"}>
<div class="flex justify-start gap-3 items-center">
<slot></slot>
<div class="flex flex-col items-start">
<h3 class="text-center"> {label}</h3>
<div class={(isActive ? 'bg-secondary w-full dark:bg-primary_light ' : '') + " w-5 mt-0.25 h-0.5 bg-primary dark:bg-neutral_light group-hover:w-full ease-in-out duration-300"}></div>
<div class={(isActive ? 'bg-secondary w-full ' : '') + " w-5 mt-0.25 h-0.5 bg-primary group-hover:w-full ease-in-out duration-300"}></div>
</div>
</div>
</a>

2
src/Review.svelte
Wyświetl plik

@ -10,7 +10,7 @@
overflow: hidden;
}
</style>
<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">
<article class="px-3 py-4 bg-neutral_light text-neutral_dark 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 line-clamp">{review.blurb}</p>
<div class="mt-3">

2
src/SearchForm.svelte
Wyświetl plik

@ -21,7 +21,7 @@
</script>
<div class="sticky z-10 top-16 lg:-ml-10 bg-gradient-to-r from-lightGradOne to-lightGradTwo dark:bg-gradient-to-r dark:from-neutral_light dark:to-neutral_light rounded">
<div class="sticky z-10 top-16 bg-gradient-to-r from-lightGradOne to-lightGradTwo rounded">
<div class="relative pt-1">
{#if showForm == false}
<div class="bg-primary rounded absolute top-0 right-0">

18
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -98,21 +98,21 @@
{#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
{#if parent[0] !== 'Misc'}
<a href={"#/topic/" + parent[0].name}>
<div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light ease-in-out duration-300 hover:rounded-3xl dark:bg-neutral_light ">
<div class="rounded shadow-md p-4 break-inside-avoid mb-4 border border-secondary bg-primary_light ease-in-out duration-300 hover:rounded-3xl ">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-extrabold text-lg text-primary underline">{ parent[0] }</span>
{:else}
<div class="group inline-flex">
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg dark:text-primary_light">{ format_topic_name(parent[0]) }</span>
<div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary dark:bg-lightGradOne group-hover:w-full ease-in-out duration-300"></div>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span>
<div class="w-5 mt-0.25 h-0.5 ml-1 bg-primary group-hover:w-full ease-in-out duration-300"></div>
</a>
</div>
{/if}
<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-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{#each parent[1].sort((t1,t2) => (t1.name.localeCompare(t2.name))) as child}
<a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>
@ -120,16 +120,16 @@
{/if}
{#if parent[0] == 'Misc'}
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-secondary dark:border-primary_light bg-primary_light dark:bg-neutral_light ease-in-out duration-300 hover:rounded-3xl">
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border border-secondary bg-primary_light ease-in-out duration-300 hover:rounded-3xl">
{#if typeof(parent[0]) == "string"}
<span class="mt-1 p-1 font-semibold text-lg text-primary dark:text-primary_light">{ parent[0] }</span>
<span class="mt-1 p-1 font-semibold text-lg text-primary ">{ parent[0] }</span>
{:else}
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg dark:text-primary_light">{ format_topic_name(parent[0]) }</span></a>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-primary font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span></a>
{/if}
<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-primary dark:text-lightGradOne no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-primary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>

39
templates/index.html
Wyświetl plik

@ -9,15 +9,15 @@
theme: {
extend: {
colors: {
primary: '#1E3A8A', //blue-900
primary: '#1e3a8a', //blue-900
primary_light: '#FAFAFA', //neutral-50
neutral_light: '#737373', // neutral-400
neutral_dark: '#262626', // neutral-800
secondary: '#6B21A8', // purple-800
primary_medium: '#60A5FA', //blue-400
//white: '#ffffff',
lightGradOne: '#DBEAFE', //blue-100
lightGradTwo: '#F3E8FF', //purple-100
// primary_medium: '#60A5FA', //blue-400
gradOne: '#DBEAFE', //blue-100
gradTwo: '#F3E8FF', //purple-100
},
},
fontFamily: {
@ -26,6 +26,33 @@
}
}
}
function darkmode(){
return;
tailwind.config.theme.extend.colors.primary = '#787A91';
tailwind.config.theme.extend.colors.primary_light = '#262626';
tailwind.config.theme.extend.colors.neutral_light = '#737373';
tailwind.config.theme.extend.colors.neutral_dark = '#FAFAFA';
tailwind.config.theme.extend.colors.secondary = '#FAFAFA';
tailwind.config.theme.extend.colors.gradOne = '#444444';
tailwind.config.theme.extend.colors.gradTwo = '#171717';
tailwind.config.theme.extend.colors.primary_medium = '#141E61';
}
function lightmode(){
tailwind.config.theme.extend.colors.primary = '#1E3A8A';
tailwind.config.theme.extend.colors.primary_light = '#FAFAFA';
tailwind.config.theme.extend.colors.neutral_light = '#737373';
tailwind.config.theme.extend.colors.neutral_dark = '#262626';
tailwind.config.theme.extend.colors.secondary = '#6B21A8';
tailwind.config.theme.extend.colors.gradOne = '#DBEAFE';
tailwind.config.theme.extend.colors.gradTwo = '#F3E8FF';
tailwind.config.theme.extend.colors.primary_medium = '#60A5FA';
}
window.matchMedia("(prefers-color-scheme: dark)").matches ? darkmode() : lightmode();
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => e.matches ? darkmode() : lightmode() );
</script>
<script src="/static/bundle.js" defer></script>
<link href="/static/bundle.css" rel="stylesheet" />
@ -44,7 +71,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
</head>
<body class="max-w-none mx-auto h-full bg-gradient-to-r from-lightGradOne to-lightGradTwo text-nutral_dark dark:bg-gradient-to-r dark:from-neutral_dark dark:to-neutral_dark dark:text-primary_light font-serif">
<body class="max-w-none mx-auto h-full bg-gradient-to-r from-gradOne to-gradTwo text-nutral_dark font-serif">
<div class="h-full" id="app"></div>
</body>
</html>