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

hover effect on nav buttons, search form responsive

pull/26/head
cssbubble 2022-06-07 10:49:40 +01:00
rodzic 1dc45a7f4d
commit a55a3b74af
7 zmienionych plików z 47 dodań i 27 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
src/AdvancedSearch.svelte
Wyświetl plik

@ -32,7 +32,7 @@
</script>
<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="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 fixed top-32 inset-x-20 sm:inset-x-auto 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">

24
src/App.svelte
Wyświetl plik

@ -108,19 +108,31 @@
<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' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary 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-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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"/>
<h3 class="text-center">Random Topic</h3>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Topic</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
</div>
</a>
<a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary 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-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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"/>
<h3 class="text-center">Random Item</h3>
<div class="flex flex-col items-start">
<h3 class="text-center">Random Item</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
</div>
</a>
<button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:bg-lightBg hover:dark:text-darkPrimary hover:dark:bg-darkBg hover:text-lightPrimary 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-light text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " 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>
<div class="flex flex-col items-start">
<h3 class="text-center"> Search</h3>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
</div>
</button>
<NavButtonWithLabel isActive={currentView === "/wanttolearn"} target="#/wanttolearn" label="Want to learn">

2
src/FormatList.svelte
Wyświetl plik

@ -5,7 +5,7 @@
<div class=" mx-auto flex flex-wrap gap-5 justify-center items-center">
{#each formats as format}
<a href="#/format/{format.id}" class="w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
<a href="#/format/{format.id}" class="w-52 sm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src={format.image} alt="">
</div>

11
src/NavButtonWithLabel.svelte
Wyświetl plik

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

29
src/SearchForm.svelte
Wyświetl plik

@ -19,11 +19,21 @@
</script>
<form class="w-full p-2 gap-3 mt-12 inline-flex flex-wrap" on:submit|preventDefault>
<sl-input type="search" placeholder="Search 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}">
<form class="w-full p-2 gap-3 mt-12 flex flex-col xl:flex-row" on:submit|preventDefault>
<div class="flex flex-col md:flex-row justify-center items-center gap-3 w-full">
<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>
<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>
</div>
{#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}
@ -32,7 +42,8 @@
</fluent-combobox>
{/if}
<sl-select class="w-52" on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
<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>
@ -43,7 +54,7 @@
<sl-menu-item value="oer">Open (no login or pay)</sl-menu-item>
</sl-select>
<sl-select class="w-44" on:sl-change="{e => query.level = e.target.value}" value={query.level}>
<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>
@ -51,14 +62,6 @@
<sl-menu-item value="advanced">Advanced</sl-menu-item>
<sl-menu-item value="research">Research</sl-menu-item>
</sl-select>
<sl-select class="w-52" 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>
</div>
</form>

2
src/TopicList.svelte
Wyświetl plik

@ -4,7 +4,7 @@
import SearchForm from "./SearchForm.svelte"
</script>
<div class="flex justify-end">
<div class="hidden lg:flex lg:justify-end">
<a href="#/map" class="font-semibold bg-lightTertiary text-lightBg rounded-lg hover:scale-110 px-3 py-2 hover:ease-in-out transition duration-200">Explore Map</a>
</div>
<TopicMasonryGrid {alltopics}/>

4
src/tailwindui/AppShell.svelte
Wyświetl plik

@ -41,7 +41,7 @@
<div class="md:hidden py-3 flex flex-col items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightPrimCont group">
<a href="/" class="">LearnAwesome</a>
<div class="w-1/5 mt-0.25 h-0.5 bg-white group-hover:w-full ease-in-out duration-300"></div>
<div class="w-1/5 mt-0.25 h-0.5 bg-light group-hover:w-full ease-in-out duration-300"></div>
</div>
<div class="flex-1 flex justify-between">
@ -115,7 +115,7 @@
<div class="flex items-center flex-shrink-0 px-4 tracking-wider font-bold text-lightTertiary">
<a href="/" class="">LearnAwesome</a>
</div>
<div class="mt-5 flex-1 flex flex-col bg-lightTertiary text-lightBg">
<div class="mt-5 flex-1 flex flex-col bg-lightPrimary text-lightBg">
<nav class="flex-1 pb-4 space-y-1">
<slot name="nav"></slot>
</nav>