Skip to content

Commit 048fac1

Browse files
Ysn4IrixYsn4Irix
committed
add: now displaying cards instead of buttons in search results
1 parent 2fa89c1 commit 048fac1

7 files changed

Lines changed: 110 additions & 64 deletions

File tree

‎client/.prettierrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"useTabs": true,
33
"singleQuote": true,
44
"trailingComma": "none",
5-
"printWidth": 100,
5+
"printWidth": 120,
66
"semi": false,
77
"plugins": ["prettier-plugin-svelte"],
88
"pluginSearchDirs": ["."],

‎client/src/app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width" />
7-
<script defer src="%sveltekit.assets%/switcher.js"></script>
7+
<script src="%sveltekit.assets%/switcher.js"></script>
88
%sveltekit.head%
99
</head>
1010

‎client/src/lib/components/Nav.svelte‎

Lines changed: 59 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</script>
55

66
<div class="flex justify-between p-5 sm:order-3 sm:justify-between sm:gap-x-3">
7-
<div class="flex flex-row justify-between gap-2">
7+
<div class="flex flex-row justify-between gap-2 dark:text-gray-200">
88
{#if arrowBack}
99
<a
1010
data-sveltekit-preload-data="hover"
@@ -19,51 +19,70 @@
1919
stroke="currentColor"
2020
class="h-6 w-6"
2121
>
22-
<path
23-
stroke-linecap="round"
24-
stroke-linejoin="round"
25-
d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
26-
/>
22+
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
2723
</svg>
2824
</a>
2925
{/if}
3026
</div>
3127

32-
<div class="flex flex-row justify-between gap-2">
33-
<button
34-
class="hs-dark-mode hs-dark-mode-active:hidden group flex items-center pr-3 font-medium text-red-500 hover:text-red-400 dark:text-red-700 dark:hover:text-red-600"
35-
data-hs-theme-click-value="dark"
36-
>
37-
<svg
38-
class="h-5 w-5"
39-
xmlns="http://www.w3.org/2000/svg"
40-
width="16"
41-
height="16"
42-
fill="currentColor"
43-
viewBox="0 0 16 16"
28+
<div class="flex flex-row justify-between gap-2 px-1">
29+
<div class="hs-dropdown" data-hs-dropdown-placement="bottom-right" data-hs-dropdown-offset="30">
30+
<a
31+
class="hs-dropdown-toggle hs-dark-mode group flex items-center font-medium text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-gray-500"
32+
href="#/"
4433
>
45-
<path
46-
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"
47-
/>
48-
</svg>
49-
</button>
50-
<button
51-
class="hs-dark-mode hs-dark-mode-active:block group hidden items-center pr-3 font-medium text-red-500 hover:text-red-400 dark:text-red-700 dark:hover:text-red-600"
52-
href="#!"
53-
data-hs-theme-click-value="light"
54-
>
55-
<svg
56-
class="h-5 w-5"
57-
xmlns="http://www.w3.org/2000/svg"
58-
width="16"
59-
height="16"
60-
fill="currentColor"
61-
viewBox="0 0 16 16"
34+
<svg
35+
class="hs-dark-mode-active:hidden block h-4 w-4"
36+
xmlns="http://www.w3.org/2000/svg"
37+
width="16"
38+
height="16"
39+
fill="currentColor"
40+
viewBox="0 0 16 16"
41+
>
42+
<path
43+
d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"
44+
/>
45+
</svg>
46+
<svg
47+
class="hs-dark-mode-active:block hidden h-4 w-4"
48+
xmlns="http://www.w3.org/2000/svg"
49+
width="16"
50+
height="16"
51+
fill="currentColor"
52+
viewBox="0 0 16 16"
53+
>
54+
<path
55+
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
56+
/>
57+
</svg>
58+
</a>
59+
60+
<div
61+
id="selectThemeDropdown"
62+
class="hs-dropdown-menu hs-dropdown-open:opacity-100 z-10 mb-2 mt-2 hidden origin-bottom-left space-y-1 rounded-lg bg-white p-2 opacity-0 shadow-md transition-[margin,opacity] duration-300 dark:divide-gray-700 dark:border dark:border-gray-700 dark:bg-gray-800"
6263
>
63-
<path
64-
d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"
65-
/>
66-
</svg>
67-
</button>
64+
<a
65+
class="hs-auto-mode-active:bg-gray-100 flex items-center gap-x-3.5 rounded-md px-3 py-2 text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
66+
href="#/"
67+
data-hs-theme-click-value="auto"
68+
>
69+
Auto (system default)
70+
</a>
71+
<a
72+
class="hs-default-mode-active:bg-gray-100 flex items-center gap-x-3.5 rounded-md px-3 py-2 text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
73+
href="#/"
74+
data-hs-theme-click-value="default"
75+
>
76+
Default (light mode)
77+
</a>
78+
<a
79+
class="hs-dark-mode-active:bg-gray-700 flex items-center gap-x-3.5 rounded-md px-3 py-2 text-sm text-gray-800 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
80+
href="#/"
81+
data-hs-theme-click-value="dark"
82+
>
83+
Dark
84+
</a>
85+
</div>
86+
</div>
6887
</div>
6988
</div>

‎client/src/lib/components/SearchCard.svelte‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script>
2+
/** @type {string} */
3+
export let url = ''
4+
/** @type {string} */
5+
export let cover = ''
6+
/** @type {string} */
7+
export let title = ''
8+
</script>
9+
10+
<!-- Card -->
11+
<a data-sveltekit-preload-data="hover" class="group relative block" href={url}>
12+
<div
13+
class="relative h-[410px] w-[280px] flex-shrink-0 overflow-hidden rounded-xl shadow-lg before:absolute before:inset-x-0 before:z-[1] before:h-full before:w-full before:bg-gradient-to-t before:from-gray-900/[.7]"
14+
>
15+
<img
16+
class="absolute left-0 top-0 h-full w-full object-fill transition-all duration-300 ease-in-out group-hover:scale-110"
17+
src={cover}
18+
alt={title}
19+
/>
20+
</div>
21+
22+
<div class="absolute inset-x-0 bottom-0 z-10">
23+
<div class="flex h-full flex-col p-4 sm:p-6">
24+
<p class="font-ibx mt-2 text-sm text-white/[.8]">{title}</p>
25+
</div>
26+
</div>
27+
</a>
28+
<!-- End Card -->

‎client/src/routes/+layout.svelte‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
<script>
22
import '../app.postcss'
3-
import { page } from '$app/stores'
4-
import Transition from '$lib/components/Transition.svelte'
53
</script>
64

7-
<Transition url={$page.url}>
8-
<slot />
9-
</Transition>
5+
<slot />

‎client/src/routes/+page.svelte‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script>
22
import { API_URL } from '$lib/constants.js'
33
import Nav from '$lib/components/Nav.svelte'
4+
import SearchCard from '$lib/components/SearchCard.svelte'
5+
import { fly } from 'svelte/transition'
46
57
/** @type {array<string>} */
68
let searchResults = []
@@ -34,15 +36,13 @@
3436
<div class="relative overflow-hidden">
3537
<div class="mx-auto max-w-[85rem] px-4 py-16 sm:px-6 sm:py-16 lg:px-8">
3638
<div class="text-center">
37-
<h1
38-
class="font-pacifico text-5xl font-semibold text-red-700 dark:text-red-500 sm:text-5xl md:text-6xl"
39-
>
39+
<h1 class="font-pacifico text-5xl font-semibold text-red-700 dark:text-red-500 sm:text-5xl md:text-6xl">
4040
Esheeq
4141
</h1>
4242

4343
<p class="mt-6 text-gray-600 dark:text-gray-400">
44-
<span class="font-pacifico font-semibold">Scrap</span> dailymotion episodes links for a
45-
given series directly from <span class="font-pacifico font-semibold">esheeq</span>
44+
<span class="font-pacifico font-semibold">Scrap</span> dailymotion episodes links for a given series directly
45+
from <span class="font-pacifico font-semibold">esheeq</span>
4646
</p>
4747

4848
<div class="relative mx-auto mt-8 max-w-xl sm:mt-8">
@@ -119,17 +119,20 @@
119119
</div>
120120
<div class="mt-10 sm:mt-20">
121121
{#if searchResults.length > 0}
122-
{#each searchResults as item}
123-
<a
124-
data-sveltekit-preload-data="hover"
125-
aria-label="Go to series page"
126-
id={item.id}
127-
class="m-1 inline-flex items-center justify-center gap-2 rounded-md border bg-white px-4 py-3 align-middle text-sm font-semibold text-gray-700 shadow-sm transition-all hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white dark:border-gray-700 dark:bg-slate-900 dark:text-gray-400 dark:hover:bg-slate-800 dark:hover:text-white dark:focus:ring-offset-gray-800"
128-
href="/series/{item.id}"
129-
>
130-
{item.title}
131-
</a>
132-
{/each}
122+
<ul
123+
class="xs:grid-cols-1 xs:place-items-center grid grid-cols-1 gap-2 sm:grid-cols-1 sm:place-items-center md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-4"
124+
>
125+
{#each searchResults as item}
126+
<li
127+
in:fly={{ y: 50, duration: 500, delay: 500 }}
128+
out:fly={{ duration: 500 }}
129+
data-sveltekit-noscroll
130+
id={item.id}
131+
>
132+
<SearchCard title={item.title} url={`/series/${item.id}`} cover={item.cover} />
133+
</li>
134+
{/each}
135+
</ul>
133136
{:else}
134137
<p class:hidden={query === ''} class="text-1xl font-ibx text-gray-600 dark:text-gray-400">
135138
{errMsg}

‎client/static/switcher.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const HSThemeAppearance = {
22
init() {
3-
const defaultTheme = 'light'
3+
const defaultTheme = 'default'
44
let theme = localStorage.getItem('hs_theme') || defaultTheme
55

66
if (document.querySelector('html').classList.contains('dark')) return

0 commit comments

Comments
 (0)