From 6989ed40f773722f1bfd274c8642294b9e6bc472 Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Fri, 20 May 2022 14:28:53 +0100
Subject: [PATCH] colors, reviews

---
 src/App.svelte                 |  15 ++--
 src/FormatList.svelte          |   6 +-
 src/ItemDetail.svelte          | 131 ++++++++++++++++++---------------
 src/TopicMasonryGrid.svelte    |  20 +----
 src/tailwindui/AppShell.svelte |  15 +---
 templates/index.html           |   8 +-
 6 files changed, 92 insertions(+), 103 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 6aa1ebe..96296ed 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -36,6 +36,7 @@
     
 </script>
 
+
 <svelte:window on:hashchange={hashchange}/>
 
 <TailwindUI.AppShell>
@@ -66,33 +67,33 @@
     </svelte:fragment>
 
     <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"/>
             Topics
         </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"/>
             Formats
         </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"/>
             Random Item
         </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"/>
             Search
         </a>
         <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"/>
             Want to learn
         </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"/>
             Finished learning
         </a>
         <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"/>
             Datasette
         </a>
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index 1009641..074775c 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -35,14 +35,14 @@
   ]
 </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}
 <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">
-    <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>
-    <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>
 {/each}
 
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 8c10f12..11f3735 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -21,11 +21,51 @@
       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>
 
+<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}
   <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">
       <!-- book image  -->
       <div class="flex-nowrap">
@@ -35,8 +75,8 @@
       <div class="flex w-full flex-col justify-between">
         <!-- title, sub title, author  -->
         <section>
-          <h1 class="text-2xl">{item.name}</h1>
-          <p class="font text-gray-500">Into Several Rmote Regions of the World</p>
+          <h1 class="text-2xl text-white">{item.name}</h1>
+          <p class="font text-gray-400">Into Several Rmote Regions of the World</p>
           <span class="text-sm">{item.creators}</span>
         </section>
         <!-- ratings and upload buttons -->
@@ -65,15 +105,15 @@
     
     <!-- Description  -->
     <section class="my-8">
-      <h2 class="text-base font-bold">Description</h2>
-      <p class="mt-4 text-sm">{item.description}</p>
+      <h2 class="text-base font-bold text-gray-100 ">Description</h2>
+      <p class="mt-4 text-sm text-gray-200">{item.description}</p>
     </section>
     <hr />
     <!-- 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 items-center">
-          <h3 class="uppercase text-xs text-gray-400">genre</h3>
+          <h3 class="uppercase text-xs">genre</h3>
           <!-- book svg  -->
           <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">
@@ -81,7 +121,7 @@
             </svg>
           </span>
         </div>
-        <span class="text-xs">Fiction</span>
+        <span class="text-xs ">Fiction</span>
       </div>
 
       <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
@@ -127,62 +167,33 @@
     <!-- review  -->
     <section class="my-8">
       <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 class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2">
-        <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>
-
-        <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>
-
-        <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 class="flex flex-col md:flex-row md:overflow-x-auto md:pb-5 mt-3 gap-2 scroll">
+        {#each reviews as review}
+          <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">
+            <div>
+              <h3 class="font-semibold truncate text-gray-50">{review.heading}</h3>
+              <p class="mt-2 line-clamp text-gray-200">{review.details}</p>
+            </div>
+            <div class="mt-4">
+              <div class="flex justify-start items-center">
+                <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">
+                  <p class="truncate pr-2">By {review.by}</p>
+                  <span class="">{review.date}</span>  
+                </div>
+              </div>
+              <div class="ml-10 mt-1">
+                <sl-rating style="--symbol-size: 1rem" readonly precision="0.1" value={review.rating}></sl-rating>
+              </div>
+              
+            </div>
+          </article>
+        {/each}  
       </div>
     </section>
-    <hr />
     <!-- more books by same author  -->
 
     <!-- <section class="my-8 overflow-hidden">
diff --git a/src/TopicMasonryGrid.svelte b/src/TopicMasonryGrid.svelte
index f5f355a..6ac51c5 100644
--- a/src/TopicMasonryGrid.svelte
+++ b/src/TopicMasonryGrid.svelte
@@ -72,7 +72,7 @@
 </script>
 
 
-<h1 class="text-2xl font-bold mb-4 title-color">
+<h1 class="text-2xl font-bold mb-4 text-gray-100">
 {#if topic}
     {capitalize(topic.display_name)}
 {:else}
@@ -83,28 +83,16 @@
 
 <div class="gap-8 columns-1 sm:columns-2 lg:columns-3 mb-8">
   {#each [...map.entries()] as parent}
-  <div class="rounded-lg shadow-lg p-4 break-inside-avoid mb-4 gradient">
-    <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>
+  <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-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">
     {#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}
     </div>    
   </div>
   {/each}
 </div>
 
-<style>
-    .gradient{
-        background-color: #224161;
-        /* background-image: linear-gradient(135deg, #224161 0%, #7084ac 100%); */
-    }
-    .link-color{
-        color: #a7b7d4;
-    }
-    .title-color{
-        color: #84a1cd;
-    }
-</style>
 
diff --git a/src/tailwindui/AppShell.svelte b/src/tailwindui/AppShell.svelte
index ae3f370..aa4f0ad 100644
--- a/src/tailwindui/AppShell.svelte
+++ b/src/tailwindui/AppShell.svelte
@@ -7,13 +7,6 @@
 
 </script>
 
-<style>
-  .aside-colors{
-    background-color: #224161;
-    color: #a7b7d4;   
-  }
-</style>
-
 <div>
     <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. -->
     {#if isNavDrawerOpen}
@@ -41,7 +34,7 @@
             From: "translate-x-0"
             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.
   
@@ -82,8 +75,8 @@
     <!-- 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 aside-colors overflow-y-auto">
-        <div class="flex items-center flex-shrink-0 px-4 text-white tracking-wide">
+      <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-wider text-2xl">
           <a href="/" class="">LearnAwesome</a>
         </div>
         <div class="mt-5 flex-1 flex flex-col">
@@ -94,7 +87,7 @@
       </div>
     </div>
     <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">
           <span class="sr-only">Open sidebar</span>
           <Icon kind="menu"/>
diff --git a/templates/index.html b/templates/index.html
index f7eb10a..c82813d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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" />
 		<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>
 		<title>LearnAwesome</title>
-		<style>
-			.bg{
-				background-color:  #232a34 ;
-			}
-		</style>
+		
 	</head>
-	<body class="h-full bg">
+	<body class="h-full bg-gray-900">
 		<div class="h-full" id="app"></div>
 	</body>
 </html>