C-xC-c
/
wirecake
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Add index.html

Browse Source
ご主人様
not manx 4 years ago
parent 856db4599a
commit 5363954095
Signed by: C-xC-c
GPG Key ID: F52ED472284EF2F4
5 changed files with 49 additions and 19 deletions
Show Stats Download Patch File Download Diff File

3
.gitignore vendored
Unescape View File

@ -1,2 +1,3 @@
node_modules node_modules
public public/*
!public/index.html

13
public/index.html
Unescape View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="out/bundle.css">
<title>Cute and Funny</title>
</head>
<body class="max-w-4xl mx-auto px-4 my-8">
<script src="out/bundle.js"></script>
</body>
</html>

4
rollup.config.js
Unescape View File

@ -43,9 +43,7 @@ export default {
production && terser() production && terser()
], ],
watch: { watch: { clearScreen: false },
clearScreen: false,
},
}; };
function serve() { function serve() {

4
src/index.svelte
Unescape View File

@ -34,9 +34,9 @@
</script> </script>
{#if file_list} {#if file_list}
<section> <section class="flex flex-row justify-center flex-wrap">
{#each thumb_list as thumb, i} {#each thumb_list as thumb, i}
<img on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" /> <img class="m-1" on:click={() => open_lightbox(i)} src="{url.root}{url.thumb}{thumb}" />
{/each} {/each}
</section> </section>
{/if} {/if}

40
src/lightbox.svelte
Unescape View File

@ -47,6 +47,7 @@
switch(e.key) { switch(e.key) {
case 'ArrowRight': case 'ArrowRight':
open = open === (images.length - 2) ? 0 : open + 1; open = open === (images.length - 2) ? 0 : open + 1;
slide_classes = 'slide-in-right';
break; break;
case 'ArrowLeft': case 'ArrowLeft':
open = open === 0 ? images.length - 2 : open - 1; open = open === 0 ? images.length - 2 : open - 1;
@ -62,6 +63,22 @@
</script> </script>
<style> <style>
.slide-in-right {
animation: slide-in-right .3s ease;
}
@keyframes slide-in-right {
from {
visibility: hidden;
transform: translate3d(60%, 0, 0);
opacity: 0;
}
to {
visibility: visible;
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.slide-in-left { .slide-in-left {
animation: slide-in-left .3s ease; animation: slide-in-left .3s ease;
@ -69,14 +86,15 @@
@keyframes slide-in-left { @keyframes slide-in-left {
from { from {
opacity: 0; visibility: hidden;
transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0);
} opacity: 0;
}
to { to {
visibility: visible; visibility: visible;
transform: translate3d( 0, 0, 0); transform: translate3d( 0, 0, 0);
opacity: 1; opactiy: 1;
} }
} }
.lightbox { .lightbox {
@ -85,8 +103,6 @@
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
opacity: 1;
transition: opacity 1s; /* This is being applied when we add `slide_classes' */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -101,8 +117,10 @@
<svelte:window on:keydown={handle_keys} /> <svelte:window on:keydown={handle_keys} />
<div id="lightbox" class="{class_list} {slide_classes}" on:click={close}> <div id="lightbox" class="{class_list}" on:click={close}>
<header>
</header>
<img class=" hidden" rel="preload" src="{image[0]}" /> <img class=" hidden" rel="preload" src="{image[0]}" />
<img class="object-contain max-w-full max-h-full" src="{image[1]}" /> <img class="object-contain max-w-full max-h-full {slide_classes}" src="{image[1]}" />
<img class="hidden" rel="preload" src="{image[2]}" /> <img class="hidden" rel="preload" src="{image[2]}" />
</div> </div>

Write Preview
Loading…
Cancel
Save