|
6 | 6 |
|
7 | 7 | const { data, error } = await supabase
|
8 | 8 | .from("patterns_v")
|
9 |
| - .select("pattern_id,pattern_name,category_id,category_name,image_id,item_id,creation_date,cost,from_cost,short_name,image_suffix") |
| 9 | + .select( |
| 10 | + "pattern_id,pattern_name,category_id,category_name,image_id,item_id,creation_date,cost,from_cost,short_name,image_suffix" |
| 11 | + ) |
10 | 12 | .match({ category_name: page })
|
11 | 13 | .order("creation_date", { ascending: false });
|
12 | 14 |
|
|
26 | 28 | import { createClient } from "@supabase/supabase-js";
|
27 | 29 | export let data;
|
28 | 30 |
|
29 |
| - let { title, url, keywords, desc, image, versions } = Constants.pageDetails(page); |
| 31 | + let { title, url, keywords, desc, image, versions } = |
| 32 | + Constants.pageDetails(page); |
30 | 33 | data.sort((a, b) => strings[a.item_id].localeCompare(strings[b.item_id]));
|
31 | 34 |
|
32 | 35 | let selection = data[0].category_id;
|
33 | 36 |
|
34 |
| - $: selectedCategory = data.filter((category) => category.category_id === selection); |
| 37 | + $: selectedCategory = data.filter( |
| 38 | + (category) => category.category_id === selection |
| 39 | + ); |
35 | 40 |
|
36 | 41 | let categories = data.map((cat) => {
|
37 | 42 | return {
|
|
41 | 46 | from_cost: cat.from_cost,
|
42 | 47 | };
|
43 | 48 | });
|
44 |
| - const uniqCategories = [...new Map(categories.map((item) => [item["category_id"], item])).values()]; |
| 49 | + const uniqCategories = [ |
| 50 | + ...new Map(categories.map((item) => [item["category_id"], item])).values(), |
| 51 | + ]; |
45 | 52 |
|
46 |
| - $: selectedUnique = uniqCategories.filter((category) => category.category_id === selection); |
| 53 | + $: selectedUnique = uniqCategories.filter( |
| 54 | + (category) => category.category_id === selection |
| 55 | + ); |
47 | 56 | </script>
|
48 | 57 |
|
49 | 58 | <svelte:head>
|
|
73 | 82 | </svelte:head>
|
74 | 83 |
|
75 | 84 | <section class="p-2 py-6 secondary-text-color pattern-bg pb-20">
|
76 |
| - <h1 class="text-center mt-12 p-2 mb-2 pb-6 font-semibold text-4xl uppercase">{strings[page]}</h1> |
| 85 | + <h1 class="text-center mt-12 p-2 mb-2 pb-6 font-semibold text-4xl uppercase"> |
| 86 | + {strings[page]} |
| 87 | + </h1> |
77 | 88 |
|
78 | 89 | <div class="container mx-auto">
|
79 | 90 | <!-- <div class="range2Controls mt-8"> -->
|
80 | 91 | <div class="radio-toolbar">
|
81 | 92 | {#each uniqCategories as cat}
|
82 |
| - <input type="radio" id={cat.category_id} name="bg" value={cat.category_id} bind:group={selection} /> |
83 |
| - <label class="disable-select" for={cat.category_id}>{strings[cat.item_id]}</label> |
| 93 | + <input |
| 94 | + type="radio" |
| 95 | + id={cat.category_id} |
| 96 | + name="bg" |
| 97 | + value={cat.category_id} |
| 98 | + bind:group={selection} |
| 99 | + /> |
| 100 | + <label class="disable-select" for={cat.category_id} |
| 101 | + >{strings[cat.item_id]}</label |
| 102 | + > |
84 | 103 | {/each}
|
85 | 104 | </div>
|
86 | 105 | <!-- </div> -->
|
87 | 106 | </div>
|
88 | 107 | <div class="container mx-auto gray-text p-4 pt-12 pb-4 title">
|
89 |
| - <h2 class="inline-block font-semibold secondary-text-color">{strings[selectedUnique[0].item_id]}</h2> |
| 108 | + <h2 class="inline-block font-semibold secondary-text-color"> |
| 109 | + {strings[selectedUnique[0].item_id]} |
| 110 | + </h2> |
90 | 111 | <h3 class="inline-block font-normal">
|
91 | 112 | ({selectedUnique[0].from_cost ? "From " : ""}
|
92 | 113 | {selectedUnique[0].cost})
|
|
100 | 121 | {#if i % 10 == 4}
|
101 | 122 | <a
|
102 | 123 | target="_blank"
|
| 124 | + rel="noopener noreferrer" |
103 | 125 | href="https://www.redbubble.com/i/{link.short_name}/{link.pattern_name.replace(
|
104 | 126 | ' ',
|
105 | 127 | '-'
|
106 | 128 | )}-Pattern-Monster-by-catchspider2002/{link.pattern_id}.{link.category_id}?asc=u"
|
107 |
| - class="col-span-2 row-span-2 md:col-start-3 md:row-start-{(i % 10) * Math.round(i / 10) + 1}" |
| 129 | + class="col-span-2 row-span-2 md:col-start-3 md:row-start-{(i % 10) * |
| 130 | + Math.round(i / 10) + |
| 131 | + 1}" |
108 | 132 | >
|
109 |
| - <img src="https://ih1.redbubble.net/image.{link.image_id}/{link.image_suffix}.jpg" alt="" class="right min-h-96 transition" /> |
| 133 | + <img |
| 134 | + src="https://ih1.redbubble.net/image.{link.image_id}/{link.image_suffix}.jpg" |
| 135 | + alt="" |
| 136 | + class="right min-h-96 transition" |
| 137 | + /> |
110 | 138 | </a>
|
111 | 139 | {:else if i % 10 == 5}
|
112 | 140 | <a
|
113 | 141 | target="_blank"
|
| 142 | + rel="noopener noreferrer" |
114 | 143 | href="https://www.redbubble.com/i/{link.short_name}/{link.pattern_name.replace(
|
115 | 144 | ' ',
|
116 | 145 | '-'
|
117 | 146 | )}-Pattern-Monster-by-catchspider2002/{link.pattern_id}.{link.category_id}?asc=u"
|
118 | 147 | class="col-span-2 row-span-2 md:col-start-1 md:row-start-3"
|
119 | 148 | >
|
120 |
| - <img src="https://ih1.redbubble.net/image.{link.image_id}/{link.image_suffix}.jpg" alt="" class="left rounded min-h-96 transition" /> |
| 149 | + <img |
| 150 | + src="https://ih1.redbubble.net/image.{link.image_id}/{link.image_suffix}.jpg" |
| 151 | + alt="" |
| 152 | + class="left rounded min-h-96 transition" |
| 153 | + /> |
121 | 154 | </a>
|
122 | 155 | {:else}
|
123 | 156 | <a
|
124 | 157 | target="_blank"
|
| 158 | + rel="noopener noreferrer" |
125 | 159 | href="https://www.redbubble.com/i/{link.short_name}/{link.pattern_name.replace(
|
126 | 160 | ' ',
|
127 | 161 | '-'
|
128 | 162 | )}-Pattern-Monster-by-catchspider2002/{link.pattern_id}.{link.category_id}?asc=u"
|
129 | 163 | >
|
130 |
| - <img src="https://ih1.redbubble.net/image.{link.image_id}/{link.image_suffix}.jpg" alt="" class="min-h-48 transition" /> |
| 164 | + <img |
| 165 | + src="https://ih1.redbubble.net/image.{link.image_id}/{link.image_suffix}.jpg" |
| 166 | + alt="" |
| 167 | + class="min-h-48 transition" |
| 168 | + /> |
131 | 169 | </a>
|
132 | 170 | {/if}
|
133 | 171 | {/each}
|
|
167 | 205 | border-radius: 0.25rem;
|
168 | 206 | --tw-bg-opacity: 1;
|
169 | 207 | background-color: rgba(var(--gray-500), var(--tw-bg-opacity));
|
170 |
| - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
| 208 | + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), |
| 209 | + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); |
171 | 210 | }
|
172 | 211 |
|
173 | 212 | .col-span-2 {
|
|
254 | 293 |
|
255 | 294 | .transition {
|
256 | 295 | transform: scaleX(1) scaleY(1);
|
257 |
| - transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, |
| 296 | + transition-property: background-color, border-color, color, fill, stroke, |
| 297 | + opacity, box-shadow, transform, filter, backdrop-filter, |
258 | 298 | -webkit-backdrop-filter;
|
259 | 299 | transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
260 | 300 | transition-duration: 500ms;
|
|
270 | 310 | width: 100%;
|
271 | 311 | overflow: hidden;
|
272 | 312 | border-radius: var(--border-radius);
|
273 |
| - box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| 313 | + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), |
| 314 | + 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
274 | 315 | }
|
275 | 316 |
|
276 | 317 | .title {
|
|
0 commit comments