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

responsive format list for mobile

pull/31/head
cssbubble 2022-06-08 17:32:47 +01:00
rodzic 48bfb65c62 fb051624cd
commit 0b670a2587
3 zmienionych plików z 87 dodań i 24 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

3
src/FormatList.svelte
Wyświetl plik

@ -5,7 +5,7 @@
<div class=" mx-auto flex flex-wrap gap-3 justify-center items-center">
{#each formats as format}
<a href="#/format/{format.id}" class="w-32 h-28 relativesm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
<a href="#/format/{format.id}" class="w-32 h-28 relative sm:w-64 flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
<div class="flex-shrink-0">
<img class="w-32 h-28 object-cover" src={format.image} alt="">
<div class="absolute inset-0 bg-neutral_Light mix-blend-multiply"></div>
@ -13,7 +13,6 @@
<div class="absolute flex justify-center items-center inset-0">
<h1 class="text-sm text-center md:text-lg font-semibold p-2 tracking-wider text-lightGradOne">{format.name}</h1>
</div>
</a>
{/each}
</div>

88
src/ItemDetail.svelte
Wyświetl plik

@ -108,6 +108,7 @@
</h3>
<div class="mt-10">
{#if !item.links.includes('video|') && oembed_iframe}
<div class="mb-10 flex flex-col sm:flex-row md:flex-col lg:flex-row">
<div class="flex-nowrap">
@ -194,16 +195,15 @@
</div>
</div>
<hr class="bg-lightPrimary"/>
<!-- Description -->
{#if item.description}
<section class="my-8">
<h2 class="font-bold text-lg">Description</h2>
<p class="mt-4 tracking-wide">{item.description}</p>
</section>
<!-- Description -->
{#if item.description}
<section class="my-8">
<h2 class="font-bold text-lg">Description</h2>
<p class="mt-4 tracking-wide">{item.description}</p>
</section>
{/if}
{/if}
<!-- details -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6">
@ -288,11 +288,71 @@
</section>
{/if}
{#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"')}
{/if}
<div>
{#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"')}
{/if}
<div class="mt-10 flex w-full flex-col justify-between">
<!-- title, sub title, author -->
<section>
<h1 class="text-xl md:text-4xl font-extrabold">{item.name}</h1>
<span class="text-sm mt-5">{item.creators}</span>
<div class="mt-5">
<sl-rating readonly precision="0.1" value={item.rating}></sl-rating>
</div>
</section>
<!-- Description -->
{#if item.description}
<section class="my-8">
<h2 class="font-bold text-lg">Description</h2>
<p class="mt-4 tracking-wide">{item.description}</p>
</section>
{/if}
<!-- ratings and upload buttons -->
<div class="mt-2 mb-6 flex flex-col justify-between">
<div class="flex flex-wrap items-center justify-start gap-3 mt-5">
{#each item.links.split(";") as type}
<sl-button-group>
<sl-button size="small" href={type.split("|")[1]} target="_blank" class="linkButton">{type.split("|")[0]} at {get_tld(type.split("|")[1])} <sl-icon name="link-45deg"></sl-icon></sl-button>
{#if type.split("|")[2] || type.split("|")[0] === 'book'}
<sl-dropdown placement="bottom-end" on:sl-select="{e => window.open(e.detail.item.value, '_blank')}">
<sl-button slot="trigger" size="small" caret>
<sl-icon name="cloud-download"></sl-icon>
</sl-button>
<sl-menu style="width: 200px;">
{#if type.split("|")[2] && type.split("|")[2].startsWith('ipfs:')}
<sl-menu-label>Download via IPFS:</sl-menu-label>
<sl-menu-item value={'https://cloudflare-ipfs.com/ipfs/' + type.split("|")[2].replace('ipfs:','')}>Cloudflare</sl-menu-item>
<sl-menu-item value={'https://ipfs.io/ipfs/' + type.split("|")[2].replace('ipfs:','')}>IPFS.io</sl-menu-item>
<sl-menu-item value={'https://ipfs.infura.io/ipfs/' + type.split("|")[2].replace('ipfs:','')}>Infura</sl-menu-item>
<sl-menu-item value={'https://gateway.pinata.cloud/ipfs/' + type.split("|")[2].replace('ipfs:','')}>Pinata</sl-menu-item>
{/if}
{#if type.split("|")[2] && type.split("|")[2].startsWith('doi:')}
<sl-menu-item value={'https://sci-hub.se/' + type.split("|")[2].replace('doi:','')}>On SciHub</sl-menu-item>
{/if}
{#if type.split("|")[0] === 'book'}
<sl-divider></sl-divider>
<sl-menu-label>Look up on:</sl-menu-label>
<sl-menu-item value={'http://libgen.rs/search.php?req=' + encodeURIComponent(item.name)}>LibGen</sl-menu-item>
<sl-menu-item value={'https://openlibrary.org/search?q=' + encodeURIComponent(item.name)}>OpenLibrary</sl-menu-item>
<sl-menu-item value={'https://www.goodreads.com/search?q=' + encodeURIComponent(item.name)}>GoodReads</sl-menu-item>
{/if}
</sl-menu>
</sl-dropdown>
{/if}
</sl-button-group>
{/each}
</div>
<ButtonGroup tabs={['Want to learn','Finished']} currentlySelected={$bookmarks[itemid]} on:change={saveStatusToLocalStorage}/>
</div>
</div>
</div>
</div>
</div>
{:else}

20
src/VideoCard.svelte
Wyświetl plik

@ -36,14 +36,14 @@
</script>
<a class="flex flex-wrap justify-between overflow-hidden rounded-lg duration-300 break-inside-avoid max-w-lg bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
<div class="relative w-full max-w-sm w-64 ring-black/5 rounded-xl flex flex-col items-start">
<div class="h-32 w-64 flex justify-center items-center relative bg-lightSecondary">
<a class="flex flex-wrap justify-between overflow-hidden w-full rounded-lg duration-300 break-inside-avoid max-w-lg bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary border-secondary" href="#/item/{item.rowid}">
<div class="relative w-full max-w-sm w-full md:w-64 ring-black/5 rounded-xl flex flex-col items-start">
<div class="h-36 w-full md:w-64 flex justify-center items-center relative ">
{#if item.image || oEmded_image_ytb_url}
<div>
<img src={item.image || oEmded_image_ytb_url} class="object-cover " alt="{item.name}">
<div class="rounded-lg">
<img src={item.image || oEmded_image_ytb_url} class="object-cover w-48 h-full" alt="{item.name}">
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
</div>
@ -52,14 +52,18 @@
{:else}
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
<div class="w-full flex justify-center items-center rounded-lg">
<div class="w-48 h-36 bg-primary"></div>
<div class="absolute inset-0 w-full h-full flex items-center justify-center" aria-hidden="true">
<svg class="h-12 w-12 text-indigo-500" fill="currentColor" viewBox="0 0 84 84"><circle opacity="0.9" cx="42" cy="42" r="42" fill="white"></circle><path d="M55.5039 40.3359L37.1094 28.0729C35.7803 27.1869 34 28.1396 34 29.737V54.263C34 55.8604 35.7803 56.8131 37.1094 55.9271L55.5038 43.6641C56.6913 42.8725 56.6913 41.1275 55.5039 40.3359Z"></path></svg>
</div>
</div>
{/if}
</div>
<div class="flex flex-col ml-5 mt-10 mb-5">
<div class="flex flex-col ml-5 my-5">
<strong class="font-extrabold">{item.name}</strong>
<span class="text-sm font-medium">{item.creators}</span>
</div>