Merge pull request #11 from cssbubble/main

Badges removed and other changes
pull/12/head^2
Nilesh 2022-06-01 18:23:31 +01:00 zatwierdzone przez GitHub
commit 49b7b00432
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
10 zmienionych plików z 93 dodań i 98 usunięć

Wyświetl plik

@ -2,7 +2,7 @@
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let showSearch = false;
export let showSearch = null;
let query = '';
let result_items = [];
let result_topics = [];
@ -30,74 +30,65 @@
</script>
<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
{#if showSearch}
<div class="fixed inset-0 bg-lightSecondary bg-opacity-75 transition-opacity"></div>
{/if}
{#if showSearch}
<div class="fixed z-10 inset-0 overflow-y-auto" on:click="{e => dispatch('closed',{}) }">
<div class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0">
<div class="w-md transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all" on:click|stopPropagation>
<div class="relative">
<!-- Heroicon name: solid/search -->
<svg class="pointer-events-none absolute top-3.5 left-4 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="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
<input id="advancedsearch" bind:this={elm} bind:value={query} type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." role="combobox" aria-expanded="false" aria-controls="options">
</div>
{#if !query }
<!-- Default state, show/hide based on command palette state -->
<div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
<!-- Heroicon name: outline/globe -->
<svg class="mx-auto h-6 w-6 text-gray-400" 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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="mt-4 font-semibold text-gray-900">Search for items, topics and creators</p>
<p class="mt-2 text-gray-500">Quickly look for resources by running a global search.</p>
</div>
{:else if result_items.length + result_topics.length > 0}
<!-- Results, show/hide based on command palette state -->
<ul class="max-h-96 scroll-pt-11 scroll-pb-2 space-y-2 overflow-y-auto pb-2" id="options" role="listbox">
<li>
<h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900">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>
<li>
<h2 class="bg-gray-100 py-2.5 px-4 text-xs font-semibold text-gray-900">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>
{/each}
</ul>
</li>
</ul>
{:else}
<!-- Empty state, show/hide based on command palette state -->
<div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
<!-- Heroicon name: outline/emoji-sad -->
<svg class="mx-auto h-6 w-6 text-gray-400" 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="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="mt-4 font-semibold text-gray-900">No results found</p>
<p class="mt-2 text-gray-500">We couldnt find anything with that term. Please try again.</p>
</div>
{/if}
</div>
<sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
<div class="transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-full fixed top-32 max-w-lg">
<div class="relative">
<!-- Heroicon name: solid/search -->
<svg class="pointer-events-none absolute top-3.5 left-4 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="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
<input bind:value={query} type="text" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-800 placeholder-gray-400 focus:ring-0 sm:text-sm" placeholder="Search..." role="combobox" aria-expanded="false" aria-controls="options" >
</div>
{#if !query }
<!-- Default state, show/hide based on command palette state -->
<div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
<!-- Heroicon name: outline/globe -->
<svg class="mx-auto h-6 w-6 text-gray-400" 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="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="mt-4 font-semibold text-gray-900">Search for items, topics and creators</p>
<p class="mt-2 text-gray-500">Quickly look for resources by running a global search.</p>
</div>
{:else if result_items.length + result_topics.length > 0}
<!-- 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>
{/each}
</ul>
</li>
{/if}
</ul>
{:else}
<!-- Empty state, show/hide based on command palette state -->
<div class="border-t border-gray-100 py-14 px-6 text-center text-sm sm:px-14">
<!-- Heroicon name: outline/emoji-sad -->
<svg class="mx-auto h-6 w-6 text-gray-400" 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="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="mt-4 font-semibold text-gray-900">No results found</p>
<p class="mt-2 text-gray-500">We couldnt find anything with that term. Please try again.</p>
</div>
{/if}
</div>
{/if}
</div>
</sl-dialog>

Wyświetl plik

@ -19,7 +19,7 @@
let randomTopicName;
let randomItemId;
let alltopics = [];
let showSearch = false;
let showSearch = null;
function getRandomItemId(){
fetch('/learn.json?_shape=array&sql=select+rowid+from+items+order+by+random()+limit+1').then(r => r.json())
@ -51,7 +51,6 @@
window.location.hash = '/home';
currentView = '/home'
}
showSearch = false;
}
onMount(getRandomItemId);
@ -90,7 +89,7 @@
<Bookmarks kind={1}/>
{/if}
<AdvancedSearch {showSearch} on:closed="{e => showSearch = false}"/>
<AdvancedSearch {showSearch} on:closed="{e => showSearch = null}"/>
</svelte:fragment>
<svelte:fragment slot="nav">
@ -102,17 +101,17 @@
<ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
</NavButtonWithLabel>
<a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 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" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg 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"/>
<h3 class="text-center">Random Topic</h3>
</a>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 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" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg 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"/>
<h3 class="text-center">Random Item</h3>
</a>
<button on:click="{e => showSearch = true}" class="text-lightSecondary1 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4">
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
<SearchIcon class=" flex-shrink-0 h-6 w-6"/>
<h3 class="text-center"> Search</h3>
</button>

Wyświetl plik

@ -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-lightButton2 text-lightButton1' : 'bg-gray-100 text-gray-800'}
{currentlySelected === i? 'bg-lightButtonBg text-lightBg dark:bg-darkButtonBg dark:text-darkBg' : 'bg-lightPrimCont text-lightPrimary'}
"
>
{tab}

Wyświetl plik

@ -3,19 +3,11 @@
export let item;
</script>
<a class="flex flex-wrap p-2 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
<a class="flex flex-wrap p-8 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
<div class="flex flex-col justify-between">
<div class="flex flex-col">
<strong class="font-extrabold">{item.name}</strong>
<span class="text-sm font-medium">{item.creators}</span>
</div>
<div class="flex flex-wrap items-center justify-start gap-3 mt-2">
{#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]}
<span class="ml-0.5 w-4 h-4"><Icon kind="link"/></span>
</a>
{/each}
</div>
</div>
</a>

Wyświetl plik

@ -5,6 +5,7 @@
import GenericCard from "./GenericCard.svelte"
export let item;
export let displayType = null;
export let showBadge = false;
</script>
{#if item.links.includes('book|') && item.links.includes('video|')}
@ -18,5 +19,5 @@
{:else if item.links.includes('video|')}
<VideoCard {item}/>
{:else}
<GenericCard {item}/>
<GenericCard {item} {showBadge}/>
{/if}

Wyświetl plik

@ -77,7 +77,6 @@
</h3>
<div class="">
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
<!-- book image -->
<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}" />
@ -104,7 +103,7 @@
<!-- title, sub title, author -->
<section>
<h1 class="text-2xl">{item.name}</h1>
<p class="font max-w-lg">{item.description}</p>
<!-- <p class="font max-w-lg">{item.description}</p> -->
<span class="text-sm">{item.creators}</span>
</section>
<!-- ratings and upload buttons -->

Wyświetl plik

@ -13,7 +13,8 @@
format: "",
level: "",
quality: "",
sortby: "rating"
sortby: "rating",
tag: ""
};
const dispatch = createEventDispatcher();
@ -22,7 +23,7 @@
</script>
<form class="w-full bg-lightSecondary1 text-lightSecondary2 dark:bg-darkSecondaryBg dark:text-darkSecondary2 p-2 inline-flex" on:submit|preventDefault>
<form class="w-full p-2 inline-flex" 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>
@ -40,6 +41,16 @@
</sl-select>
{/if}
<sl-select class="ml-2 w-44" 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="childlike">Inspirational</sl-menu-item>
<sl-menu-item value="beginner">Educational</sl-menu-item>
<sl-menu-item value="intermediate">Challenging</sl-menu-item>
<sl-menu-item value="advanced">Entertaining</sl-menu-item>
<sl-menu-item value="research">Visual</sl-menu-item>
<sl-menu-item value="research">Interactive</sl-menu-item>
</sl-select>
<sl-select class="ml-2 w-44" 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>

Wyświetl plik

@ -87,16 +87,16 @@
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 mb-8">
{#each [...map.entries()].sort((t1,t2) => (t1[0].sort_index || 100) - (t2[0].sort_index || 100)) as parent}
<a href={"#/topic/" + parent[0].name}>
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
<div class="rounded-lg shadow-md p-4 break-inside-avoid mb-4 border-8 border-lightPrimCont dark:border-darkPrimCont hover:bg-lightPrimCont dark:bg-darkPrimCont ">
{#if typeof(parent[0]) == "string"}
<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-lightButton2 dark:text-darkButton2 hover:font-extrabold text-lg ">{ format_topic_name(parent[0]) }</span></a>
<a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
{/if}
<div class="mt-2 flex flex-wrap text-sm text-gray-900">
<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-lightSecondary2 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
<a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each}
</div>
</div>

Wyświetl plik

@ -1,4 +1,5 @@
<script>
import ButtonGroup from "./ButtonGroup.svelte";
export let item;
function youtube_parser(url){
@ -14,7 +15,7 @@
let thumbnail_image_url = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
return thumbnail_image_url
}
</script>
@ -45,6 +46,7 @@
<strong class="font-extrabold">{item.name}</strong>
<span class="text-sm font-medium">{item.creators}</span>
</div>
</div>
</a>

Wyświetl plik

@ -27,8 +27,8 @@
lightPrimary: 'rgb(30 64 175)', //blue-800
lightSecondary: 'rgb(75 85 99)', //gray-600
lightTertiary: 'rgb(168 85 247)', //purple-500
lightBg: 'rgb(239 246 255)', //blue-50
lightPrimCont: 'rgb(191 219 254)', // blue-200
lightBg: '#fafafa', //zinc-50
lightPrimCont: '#dbeafe', // blue-200
lightButtonBg: 'rgb(20 83 45)', //green-900
darkPrimary: 'rgb(147 197 253)', //blue-300