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

colors, reviews

pull/4/head
cssbubble 2022-05-20 14:28:53 +01:00
rodzic 9b817fe454
commit 6989ed40f7
6 zmienionych plików z 92 dodań i 103 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

15
src/App.svelte
Wyświetl plik

@ -36,6 +36,7 @@
</script> </script>
<svelte:window on:hashchange={hashchange}/> <svelte:window on:hashchange={hashchange}/>
<TailwindUI.AppShell> <TailwindUI.AppShell>
@ -66,33 +67,33 @@
</svelte:fragment> </svelte:fragment>
<svelte:fragment slot="nav"> <svelte:fragment slot="nav">
<a href="#/topics" class={(currentView === "/topics" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/topics" class={(currentView === "/topics" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Topics Topics
</a> </a>
<a href="#/formats" class={(currentView === "/formats" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/formats" class={(currentView === "/formats" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Formats Formats
</a> </a>
<a href="#/item/1" class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md"> <a href="#/item/1" class="text-indigo-100 hover:bg-gray-900 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Random Item Random Item
</a> </a>
<a href="#/search" class={(currentView === "/search" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/search" class={(currentView === "/search" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Search Search
</a> </a>
<hr/> <hr/>
<a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/wanttolearn" class={(currentView === "/wanttolearn" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Want to learn Want to learn
</a> </a>
<a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-indigo-800' : '') + " text-white w-full hover:bg-indigo-600 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}> <a href="#/finishedlearning" class={(currentView === "/finishedlearning" ? 'bg-gray-900' : '') + " text-white w-full hover:bg-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md"}>
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Finished learning Finished learning
</a> </a>
<hr/> <hr/>
<a href="/learn" class="text-indigo-100 hover:bg-indigo-600 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md"> <a href="/learn" class="text-indigo-100 hover:bg-gray-900 w-full group flex items-center px-2 py-2 text-sm font-medium rounded-md">
<SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/> <SearchIcon class="mr-4 flex-shrink-0 h-6 w-6 text-indigo-300"/>
Datasette Datasette
</a> </a>

6
src/FormatList.svelte
Wyświetl plik

@ -35,14 +35,14 @@
] ]
</script> </script>
<div class="max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none"> <div class="max-w-lg mx-auto grid grid-cols-2 gap-5 lg:grid-cols-3 lg:max-w-none">
{#each formats as format} {#each formats as format}
<a href="#/format/{format.id}" class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl"> <a href="#/format/{format.id}" class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition ease-out duration-300 hover:scale-105 hover:shadow-xl">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src={format.image} alt=""> <img class="h-48 w-full object-cover" src={format.image} alt="">
</div> </div>
<h1 class="text-2xl font-bold p-2 bg-indigo-500 text-white">{format.name}</h1> <h1 class="text-lg font-semibold p-2 bg-gray-800 text-white tracking-wider">{format.name}</h1>
</a> </a>
{/each} {/each}

131
src/ItemDetail.svelte
Wyświetl plik

@ -21,11 +21,51 @@
bookmarks.set(newobj) bookmarks.set(newobj)
} }
let reviews =[
{
heading: "About the book , My favourite book ever, everyone should read it before the death or else it will be difficult to hold it in hands",
details: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.",
ratings: 5,
by: "Priyanka Nilesh kumar khemji jani trivedi daryavardi",
date: "Sep 22, 2021",
image: "https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
},
{
heading: "Highly recommended book",
details: "Lorem ipsum",
ratings: 4,
by: "anka",
date: "Sep 22, 2081",
image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
},
{
heading: "Nice Book",
details: "iusto expedita enim, optio dignissimos eaque officiis perferendis eum",
ratings: 3,
by: "riya",
date: "Sep 22, 2027",
image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
}
];
</script> </script>
<style>
.line-clamp{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.scroll{
scrollbar-width: thin;
scrollbar-color: red;
}
</style>
{#if item} {#if item}
<main class="px-12 py-10"> <main class="px-12 py-10">
<h3 class="py-2 mb-5"><a href={"#/topic/" + item.topics} class="font-bold text-violet-800">{item.topics}</a></h3> <h3 class="py-2 mb-5"><a href={"#/topic/" + item.topics} class="font-bold text-cyan-400">{item.topics}</a></h3>
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row"> <div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
<!-- book image --> <!-- book image -->
<div class="flex-nowrap"> <div class="flex-nowrap">
@ -35,8 +75,8 @@
<div class="flex w-full flex-col justify-between"> <div class="flex w-full flex-col justify-between">
<!-- title, sub title, author --> <!-- title, sub title, author -->
<section> <section>
<h1 class="text-2xl">{item.name}</h1> <h1 class="text-2xl text-white">{item.name}</h1>
<p class="font text-gray-500">Into Several Rmote Regions of the World</p> <p class="font text-gray-400">Into Several Rmote Regions of the World</p>
<span class="text-sm">{item.creators}</span> <span class="text-sm">{item.creators}</span>
</section> </section>
<!-- ratings and upload buttons --> <!-- ratings and upload buttons -->
@ -65,15 +105,15 @@
<!-- Description --> <!-- Description -->
<section class="my-8"> <section class="my-8">
<h2 class="text-base font-bold">Description</h2> <h2 class="text-base font-bold text-gray-100 ">Description</h2>
<p class="mt-4 text-sm">{item.description}</p> <p class="mt-4 text-sm text-gray-200">{item.description}</p>
</section> </section>
<hr /> <hr />
<!-- details --> <!-- details -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6"> <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 text-gray-400">
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5"> <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<h3 class="uppercase text-xs text-gray-400">genre</h3> <h3 class="uppercase text-xs">genre</h3>
<!-- book svg --> <!-- book svg -->
<span> <span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@ -81,7 +121,7 @@
</svg> </svg>
</span> </span>
</div> </div>
<span class="text-xs">Fiction</span> <span class="text-xs ">Fiction</span>
</div> </div>
<div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5"> <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
@ -127,62 +167,33 @@
<!-- review --> <!-- review -->
<section class="my-8"> <section class="my-8">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h2 class="text-base font-bold">Reviews</h2> <h2 class="text-base font-bold text-gray-100">Reviews</h2>
</div> </div>
<div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2"> <div class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2 scroll">
<article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0"> {#each reviews as review}
<h3 class="font-semibold">About the book</h3> <article class="px-3 pt-4 bg-gray-800 rounded-lg text-sm shrink-0 w-full lg:w-1/2 flex flex-col justify-between h-48">
<p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p> <div>
<div class="mt-3"> <h3 class="font-semibold truncate text-gray-50">{review.heading}</h3>
<span>★★★★★</span> <p class="mt-2 line-clamp text-gray-200">{review.details}</p>
<span class="ml-2">Sep 22, 2021</span> </div>
<span class="ml-2">Priyanka Trivedi</span> <div class="mt-4">
</div> <div class="flex justify-start items-center">
</article> <img src={review.image} class="rounded-full w-10 h-10" alt="user avatar"/>
<div class="flex flex-col items-start ml-2 overflow-hidden text-xs text-gray-300">
<article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0"> <p class="truncate pr-2">By {review.by}</p>
<h3 class="font-semibold">About the book</h3> <span class="">{review.date}</span>
<p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p> </div>
<div class="mt-3"> </div>
<span>★★★★★</span> <div class="ml-10 mt-1">
<span class="ml-2">Sep 22, 2021</span> <sl-rating style="--symbol-size: 1rem" readonly precision="0.1" value={review.rating}></sl-rating>
<span class="ml-2">Priyanka Trivedi</span> </div>
</div>
</article> </div>
</article>
<article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0"> {/each}
<h3 class="font-semibold">About the book</h3>
<p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
<div class="mt-3">
<span>★★★★★</span>
<span class="ml-2">Sep 22, 2021</span>
<span class="ml-2">Priyanka Trivedi</span>
</div>
</article>
<article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
<h3 class="font-semibold">About the book</h3>
<p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
<div class="mt-3">
<span>★★★★★</span>
<span class="ml-2">Sep 22, 2021</span>
<span class="ml-2">Priyanka Trivedi</span>
</div>
</article>
<article class="px-3 py-4 bg-gray-200 rounded-lg text-xs w-48 max-w-sm shrink-0">
<h3 class="font-semibold">About the book</h3>
<p class="mt-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit architecto praesentium expedita? Similique dolor iusto expedita enim, optio dignissimos eaque officiis perferendis eum ullam voluptas esse quia tenetur natus modi.</p>
<div class="mt-3">
<span>★★★★★</span>
<span class="ml-2">Sep 22, 2021</span>
<span class="ml-2">Priyanka Trivedi</span>
</div>
</article>
</div> </div>
</section> </section>
<hr />
<!-- more books by same author --> <!-- more books by same author -->
<!-- <section class="my-8 overflow-hidden"> <!-- <section class="my-8 overflow-hidden">

20
src/TopicMasonryGrid.svelte
Wyświetl plik

@ -72,7 +72,7 @@
</script> </script>
<h1 class="text-2xl font-bold mb-4 title-color"> <h1 class="text-2xl font-bold mb-4 text-gray-100">
{#if topic} {#if topic}
{capitalize(topic.display_name)} {capitalize(topic.display_name)}
{:else} {:else}
@ -83,28 +83,16 @@
<div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8"> <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
{#each [...map.entries()] as parent} {#each [...map.entries()] as parent}
<div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 gradient"> <div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 bg-cyan-900">
<a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-white font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a> <a href={"#/topic/" + parent[0]?.name || parent}><span class="mt-1 p-1 text-gray-100 font-semibold text-lg">{ format_topic_name(parent[0]) }</span></a>
<div class="mt-2 flex flex-wrap text-sm text-gray-900"> <div class="mt-2 flex flex-wrap text-sm text-gray-900">
{#each parent[1] as child} {#each parent[1] as child}
<a href={"#/topic/" + child.name} class="link-color no-underline hover:underline hover:text-white hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a> <a href={"#/topic/" + child.name} class="text-gray-200 no-underline hover:underline hover:text-white hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
{/each} {/each}
</div> </div>
</div> </div>
{/each} {/each}
</div> </div>
<style>
.gradient{
background-color: #224161;
/* background-image: linear-gradient(135deg, #224161 0%, #7084ac 100%); */
}
.link-color{
color: #a7b7d4;
}
.title-color{
color: #84a1cd;
}
</style>

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

@ -7,13 +7,6 @@
</script> </script>
<style>
.aside-colors{
background-color: #224161;
color: #a7b7d4;
}
</style>
<div> <div>
<!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
{#if isNavDrawerOpen} {#if isNavDrawerOpen}
@ -41,7 +34,7 @@
From: "translate-x-0" From: "translate-x-0"
To: "-translate-x-full" To: "-translate-x-full"
--> -->
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 aside-colors"> <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-cyan-900 text-white">
<!-- <!--
Close button, show/hide based on off-canvas menu state. Close button, show/hide based on off-canvas menu state.
@ -82,8 +75,8 @@
<!-- 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, swap this element with another sidebar if you like -->
<div class="flex flex-col flex-grow pt-5 aside-colors overflow-y-auto"> <div class="flex flex-col flex-grow pt-5 bg-cyan-900 text-white overflow-y-auto">
<div class="flex items-center flex-shrink-0 px-4 text-white tracking-wide"> <div class="flex items-center flex-shrink-0 px-4 text-white tracking-wider text-2xl">
<a href="/" class="">LearnAwesome</a> <a href="/" class="">LearnAwesome</a>
</div> </div>
<div class="mt-5 flex-1 flex flex-col"> <div class="mt-5 flex-1 flex flex-col">
@ -94,7 +87,7 @@
</div> </div>
</div> </div>
<div class="md:pl-64 flex flex-col flex-1"> <div class="md:pl-64 flex flex-col flex-1">
<div class="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white shadow"> <div class="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-cyan-900 text-white shadow">
<button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"> <button on:click={e => isNavDrawerOpen = true} type="button" class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden">
<span class="sr-only">Open sidebar</span> <span class="sr-only">Open sidebar</span>
<Icon kind="menu"/> <Icon kind="menu"/>

8
templates/index.html
Wyświetl plik

@ -9,13 +9,9 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script> <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>
<title>LearnAwesome</title> <title>LearnAwesome</title>
<style>
.bg{
background-color: #232a34 ;
}
</style>
</head> </head>
<body class="h-full bg"> <body class="h-full bg-gray-900">
<div class="h-full" id="app"></div> <div class="h-full" id="app"></div>
</body> </body>
</html> </html>