From 2ead93dbd5d532496622121cc87c89c4f1abd6c3 Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Tue, 17 May 2022 21:57:13 +0100
Subject: [PATCH] aspect ratio of images corrected, badges added

---
 learn.db              | Bin 20480 -> 20480 bytes
 src/ItemDetail.svelte | 104 +++++++++++++++---------------------------
 templates/index.html  |   2 +-
 3 files changed, 39 insertions(+), 67 deletions(-)

diff --git a/learn.db b/learn.db
index 9e94015876647de3c8180cf20ef3adf9f94a0207..5cdbd9ca6aa9f5592caf5bb3a4ae90d94896d1ac 100644
GIT binary patch
delta 256
zcmZozz}T>WaRZBj7$@Ir2L4z4r}@|LPvFnu_v1I>=jMC8Sy132U%ebBo1r8xFK<Cn
zetJ=2Zf<5?x?XyIPGVlVJD61EV6znDl}3@zN-Rq(PA<wUDDeu;$Sf|&FRGMcXVVo$
zGp4AtxFiUOrP#2^B~=EMCRI+((sySD>YKbp-&z@@KcliZGr2ebLh&*%FtBnzVc`46
zSHPRc^Njn+#>PwB%#HP|n_t>6GBUDEer?;%$h;WHVd7?*Tx#D9lw+Ly(&qmn2LS+!
C6;k;C

delta 110
zcmZozz}T>WaRZA2A1i+r1OF@j)BJ1rC-7%&78Ho!pPZ%d&dk8TFnNo<wIYx%$fzvN
zOfC+9P`p497M^De{6%~Pyf1j3ZEU>8!`xWUvbfNek%^Ug@=Kd`MyAa`4iHQ(w(DNx
GAOHaN#2|VA

diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index 59a9569..74c92c7 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -6,7 +6,6 @@
         .then(r => r.json())
         .then(data => {
             item = data[itemid];
-            console.log(item)
         });
 
 </script>
@@ -16,55 +15,28 @@
     <div class="mb-10 flex h-64">
       <!-- book image  -->
       <div>
-        <img class="float-left mr-6 mb-6 h-64 w-44 transform rounded-md border border-purple-200 shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
+        <img class="float-left mr-6 mb-6 aspect-auto transform rounded-md shadow-md transition duration-300 ease-out hover:scale-105 md:shadow-xl" src="{item.image}" alt="" />
       </div>
       <!-- book details  -->
       <div class="ml-6 flex w-full flex-col justify-between">
-        
         <!-- title, sub title, author  -->
-        <div>
-          <section>
-            <h1 class="text-2xl">{item.name}</h1>
-            <p class="font text-gray-500">Into Several Rmote Regions of the World</p>
-            <span class="text-sm">{item.creator}</span>
-          </section>
-          <!-- ratings and upload buttons -->
-          <div class="mt-2 mb-6 flex justify-between">
-            <div>
-              <span>★★★★★</span>
-              <br />
-              <span class="text-sm text-gray-500">333 Ratings</span>
-            </div>
-            <div class="flex items-center justify-center gap-3 text-gray-500">
-              <!-- upload svg  -->
-              <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">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
-              </svg>
-              <!-- verticle dots  -->
-              <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">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-              </svg>
-            </div>
+        <section>
+          <h1 class="text-2xl">{item.name}</h1>
+          <p class="font text-gray-500">Into Several Rmote Regions of the World</p>
+          <span class="text-sm">{item.creator}</span>
+        </section>
+        <!-- ratings and upload buttons -->
+        <div class="mt-2 mb-6 flex justify-between">
+          <div>
+            <span class="text-yellow-500">★★★★★</span>
+            <br />
+            <span class="text-sm text-gray-500">333 Ratings</span>
+          </div>
+          <div class="flex items-center justify-center gap-3 text-gray-500">
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"> Book </span>
+
+            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-gray-800"> Video </span>
           </div>
-  
-          <hr />
-        </div>
-  
-        <!-- action buttons  -->
-        <div class="mt-10 grid grid-cols-3 place-items-center gap-1 text-gray-800">
-          <button class="w-full rounded-md border border-gray-300 py-0.5 text-sm shadow">Get</button>
-          <button class="flex w-full items-center justify-center gap-1 rounded-md border border-gray-300 py-0.5 text-sm shadow">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            Want to Read
-          </button>
-          <button class="flex w-full items-center justify-center gap-1 rounded-md border border-gray-300 py-0.5 text-sm shadow">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-            </svg>
-            Sample
-          </button>
         </div>
       </div>
     </div>
@@ -76,8 +48,8 @@
     </section>
     <hr />
     <!-- details  -->
-    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 divide-x-2 py-5">
-      <div class="flex flex-col justify-between items-center gap-1">
+    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
+      <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>
           <!-- book svg  -->
@@ -90,7 +62,7 @@
         <span class="text-xs">Fiction</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <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">released</h3>
           <span>1729</span>
@@ -98,7 +70,7 @@
         <span class="text-xs">December 31</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <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">language</h3>
           <span>EN</span>
@@ -106,7 +78,7 @@
         <span class="text-xs">English</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <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">Length</h3>
           <span>209</span>
@@ -114,14 +86,14 @@
         <span class="text-xs">Pages</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <div class="flex flex-col justify-between items-center gap-1 border border-gray-200 py-5">
         <h3 class="uppercase text-xs text-gray-400">Publisher</h3>
         <span></span>
         <br />
         <span class="text-xs">Public Domain</span>
       </div>
 
-      <div class="flex flex-col justify-between items-center gap-1">
+      <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">Size</h3>
           <span>310.4</span>
@@ -170,7 +142,7 @@
       <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -181,7 +153,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -192,7 +164,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -203,7 +175,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -214,7 +186,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -225,7 +197,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -236,7 +208,7 @@
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           <div class="flex flex-col items-start text-xs gap-1">
             <h4 class="font-semibold">A Modest Proposal</h4>
@@ -257,49 +229,49 @@
         <div class="flex pb-5 mt-3 gap-2 w-full overflow-x-scroll">
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
   
         <div class="shrink-0">
           <div class="" >
-            <img class="mb-4 h-44 w-32 transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
+            <img class="mb-4 h-44 w-auto transform rounded-md border border-purple-200 shadow-md md:shadow-xl" src="{item.image}" alt="" />
           </div>
           
         </div>
diff --git a/templates/index.html b/templates/index.html
index 51e84e9..6317b7f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-gray-100">
+<html lang="en" class="">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />