From 7c65a1194271d5b5cfa25d492a322f00bd07fd1f Mon Sep 17 00:00:00 2001
From: cssbubble <cssbubble@gmail.com>
Date: Mon, 13 Jun 2022 13:26:29 +0100
Subject: [PATCH] Fixed #39 embeded video height fixed, breadcrumbs feature
 added in format detail page

---
 src/BookCard.svelte     | 28 +++++++++++++++-------------
 src/FormatDetail.svelte | 23 ++++++++++++++++++++---
 src/FormatList.svelte   |  2 +-
 src/ItemDetail.svelte   |  2 +-
 src/SearchForm.svelte   |  8 ++++----
 5 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/BookCard.svelte b/src/BookCard.svelte
index 0f75704..3a8200d 100644
--- a/src/BookCard.svelte
+++ b/src/BookCard.svelte
@@ -4,19 +4,21 @@
   
 </script>
 
-<a class="relative flex flex-col items-center mb-4 rounded-md overflow-hidden transform transition ease-out duration-300 drop-shadow-lg hover:drop-shadow-2xl hover:scale-105 break-inside-avoid" href="#/item/{item.rowid}">
-  <img class="object-cover h-36 w-24 lg:h-60 lg:w-40" src={item.image || randomCover(item.iid)} alt="{item.name}"/>
+<a class="relative flex flex-col items-center rounded-md overflow-hidden transform transition ease-out duration-300 drop-shadow-lg hover:drop-shadow-2xl hover:scale-105 break-inside-avoid" href="#/item/{item.rowid}">
   
-  {#if item.rating}
-  <h1 class="text-sm md:text-lg font-semibold p-2 text-white tracking-wider">
-    <sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
-  </h1>
-  {/if}
+    <img class=" h-36 w-24 md:h-56 md:w-40 shrink-0" src={item.image || randomCover(item.iid)} alt="{item.name}"/>
+  
+    {#if item.rating}
+    <h1 class="text-sm md:text-lg font-semibold p-2 text-white tracking-wider">
+      <sl-rating style="--symbol-size: 0.80 rem;" readonly precision="0.1" value={item.rating}></sl-rating>
+    </h1>
+    {/if}
+
+    {#if !item.image}
+      <div class="absolute inset-y-0 pl-3 pr-2 py-4 break-inside-avoid">
+        <p class="font-bold text-xs md:font-extrabold text-primary_light md:text-base">{item.name}</p>
+        <p class="text-xs text-primary_light mt-3">{item.creators}</p>
+      </div>
+    {/if} 
   
-  {#if !item.image}
-    <div class="absolute inset-y-0 px-2 py-4 break-inside-avoid">
-      <p class="font-bold text-xs lg:font-extrabold text-primary_light lg:text-xl">{item.name}</p>
-      <p class="text-xs text-primary_light mt-3">{item.creators}</p>
-    </div>
-  {/if}
 </a>
\ No newline at end of file
diff --git a/src/FormatDetail.svelte b/src/FormatDetail.svelte
index 428661a..e0c1a3c 100644
--- a/src/FormatDetail.svelte
+++ b/src/FormatDetail.svelte
@@ -2,7 +2,6 @@
     import ItemCard from "./ItemCard.svelte"
     import SearchForm from "./SearchForm.svelte"
     import { formats } from "./formats.js"
-import { fix_and_destroy_block } from "svelte/internal";
     
     export let format;
     export let alltopics;
@@ -39,12 +38,30 @@ import { fix_and_destroy_block } from "svelte/internal";
             if(query.sortby == 'year') { return (a.year - b.year)};
             if(query.sortby == 'name') { return a.name.localeCompare(b.name)};
         });
+
+    function capitalize(str){
+        return str.charAt(0).toUpperCase() + str.slice(1)
+    }    
 </script>
 
-<div class="md:flex md:items-center md:justify-between mb-8">
+<!-- <div class="md:flex md:items-center md:justify-between mb-8">
     <div class="flex-1 min-w-0">
-      <h2 class="text-2xl font-bold leading-7 text-lightSecondary2 sm:text-3xl sm:truncate"> {formats.find((f) => f.id === format).name}</h2>
+      <h2 class="text-2xl font-bold leading-7 text-secondary sm:text-3xl sm:truncate"> 
+        {formats.find((f) => f.id === format).name}
+      </h2>
     </div>
+</div> -->
+
+<div class="my-2 flex flex-row">
+    <sl-breadcrumb class="flex-grow">    
+        <sl-breadcrumb-item href="#/formats" class="title">All Formats</sl-breadcrumb-item>
+        <sl-breadcrumb-item href={"#/format/" + format}>
+            {capitalize(format)}
+        </sl-breadcrumb-item>    
+    </sl-breadcrumb>
+    <a href="https://github.com/learn-awesome/learndb" target="_blank" class="underline text-primary hover:font-bold px-2">
+        Help us improve this taxonomy
+    </a>
 </div>
 
 <SearchForm {alltopics} on:queryChanged={handleQueryChanged} hideFormat={true}/>
diff --git a/src/FormatList.svelte b/src/FormatList.svelte
index 903771a..2e23f7c 100644
--- a/src/FormatList.svelte
+++ b/src/FormatList.svelte
@@ -3,7 +3,7 @@
   
 </script>
 
-<div class=" mx-auto grid justify-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 min-h-screen">
+<div class=" mx-auto grid pl-items-center gap-3 sm:grid-cols-3 grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 min-h-screen">
   {#each formats as format}
   <a href="#/format/{format.id}" class="w-32 h-28 lg:w-44 relative flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
       <div class="flex-shrink-0 relative">
diff --git a/src/ItemDetail.svelte b/src/ItemDetail.svelte
index a9fcd0b..232444f 100644
--- a/src/ItemDetail.svelte
+++ b/src/ItemDetail.svelte
@@ -101,7 +101,7 @@ import AdvancedSearch from "./AdvancedSearch.svelte";
             {#if item.links.includes('wiki|')}
               <iframe src={wikiUrlForEmbed(item)} class="w-full h-[48rem]" title="embedded wiki"></iframe>
             {:else if item.links.includes('video|') && oembed_iframe}
-              {@html oembed_iframe.replace('width="200"','width="100%"').replace('height="113"','height="400"')}
+              {@html oembed_iframe.replace('width="200"','width="100%"').replace(/height=["'][0-9]+["']/i,'height="400"')}
             {:else if item.image}
               <div class="">
                 <img class="mr-5 mb-6 sm:w-44 sm:h-64 transform rounded-md shadow-lg transition duration-300 ease-out hover:scale-105 md:shadow-xl " src="{item.image}" alt="{item.name}" />
diff --git a/src/SearchForm.svelte b/src/SearchForm.svelte
index fd062db..b500feb 100644
--- a/src/SearchForm.svelte
+++ b/src/SearchForm.svelte
@@ -25,7 +25,7 @@
   <div class="relative pt-1">
     {#if  showForm == false}
     <div class="bg-primary rounded absolute top-0 right-0">
-      <button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+      <button on:click={e => showForm = true} type="button" class=" p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary lg:hidden">
         <span class="sr-only">Open search form</span>
         <Icon kind="search"/>
       </button>
@@ -34,7 +34,7 @@
 
     {#if showForm}
     <div class="bg-primary rounded absolute top-0 right-0">
-      <button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary md:hidden">
+      <button on:click={e => showForm = false} type="button" class="p-2 text-primary_light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary lg:hidden">
         <span class="sr-only">Close search form</span>
         <Icon kind="close"/>
       </button>
@@ -42,7 +42,7 @@
     {/if}
 
     {#if showForm}
-      <form class="w-full p-2 gap-3 mt-10 flex flex-col xl:flex-row" on:submit|preventDefault>
+      <form class="w-full p-2 gap-3 mt-10 lg:mt-0 flex flex-col xl:flex-row" on:submit|preventDefault>
           <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>
@@ -77,7 +77,7 @@
           </sl-select>
         </div>
 
-        <sl-select class="w-full md:w-2/5" on:sl-change="{e => query.sortby = e.target.value}" value={query.sortby}>
+        <sl-select class="w-full md:w-1/2" 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>