@turnipxenon/pineapple 2.4.56 → 2.4.57
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/modules.xml +0 -1
- package/.idea/workspace.xml +70 -61
- package/.svelte-kit/__package__/app.postcss +4 -1
- package/.svelte-kit/__package__/assets/icons/arrow-upward.svg +1 -0
- package/.svelte-kit/__package__/components/Card.svelte +24 -3
- package/.svelte-kit/__package__/components/Card.svelte.d.ts +1 -0
- package/.svelte-kit/__package__/components/PineappleSlideToggle.svelte +10 -0
- package/.svelte-kit/__package__/components/PineappleSlideToggle.svelte.d.ts +19 -0
- package/.svelte-kit/__package__/components/combo_box/ComboBoxWithButton.svelte +7 -0
- package/.svelte-kit/__package__/components/pineapple/toast/Toast.svelte +4 -2
- package/.svelte-kit/__package__/template/seaweed/CreateUrlForm.svelte +15 -3
- package/.svelte-kit/__package__/template/seaweed/SeaweedTemplate.svelte +10 -6
- package/.svelte-kit/__package__/template/seaweed/entry_order_config/EntryOrderConfig.svelte +224 -47
- package/.svelte-kit/__package__/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts +1 -0
- package/.svelte-kit/__package__/template/seaweed/entry_order_config/entry-order-config.postcss +35 -0
- package/.svelte-kit/generated/server/internal.js +1 -1
- package/dist/app.postcss +4 -1
- package/dist/assets/icons/arrow-upward.svg +1 -0
- package/dist/components/Card.svelte +24 -3
- package/dist/components/Card.svelte.d.ts +1 -0
- package/dist/components/PineappleSlideToggle.svelte +10 -0
- package/dist/components/PineappleSlideToggle.svelte.d.ts +19 -0
- package/dist/components/combo_box/ComboBoxWithButton.svelte +7 -0
- package/dist/components/pineapple/toast/Toast.svelte +4 -2
- package/dist/template/seaweed/CreateUrlForm.svelte +15 -3
- package/dist/template/seaweed/SeaweedTemplate.svelte +10 -6
- package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte +224 -47
- package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts +1 -0
- package/dist/template/seaweed/entry_order_config/entry-order-config.postcss +35 -0
- package/package.json +2 -2
- package/src/lib/app.postcss +4 -1
- package/src/lib/assets/icons/arrow-upward.svg +1 -0
- package/src/lib/components/Card.svelte +17 -2
- package/src/lib/components/PineappleSlideToggle.svelte +12 -0
- package/src/lib/components/combo_box/ComboBoxWithButton.svelte +7 -0
- package/src/lib/components/pineapple/toast/Toast.svelte +4 -2
- package/src/lib/template/seaweed/CreateUrlForm.svelte +15 -3
- package/src/lib/template/seaweed/SeaweedTemplate.svelte +10 -6
- package/src/lib/template/seaweed/entry_order_config/EntryOrderConfig.svelte +115 -28
- package/src/lib/template/seaweed/entry_order_config/entry-order-config.postcss +35 -0
- package/src/routes/(pineapple)/pineapple/(pineapple)/+page.svelte +4 -3
|
@@ -5,6 +5,9 @@
|
|
|
5
5
|
} from "../SeaweedTemplateData";
|
|
6
6
|
import { removeProxyWrapperOnString } from "./EntryOrderConfig";
|
|
7
7
|
import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
|
|
8
|
+
import CloseIcon from "../../../assets/icons/close.svg";
|
|
9
|
+
import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
|
|
10
|
+
import "./entry-order-config.postcss";
|
|
8
11
|
export let seaweedEntries;
|
|
9
12
|
export let orderUrl;
|
|
10
13
|
export let updateUrl;
|
|
@@ -20,7 +23,6 @@ const updateOrderQuery = () => {
|
|
|
20
23
|
const addEntry = (group) => {
|
|
21
24
|
return (selected) => {
|
|
22
25
|
const c = GetEntryFromGlobal(selected);
|
|
23
|
-
console.log(selected, c);
|
|
24
26
|
if (c) {
|
|
25
27
|
group.items.push(c);
|
|
26
28
|
seaweedEntries = seaweedEntries;
|
|
@@ -38,7 +40,6 @@ const swapEntry = (index, group, shouldDecrement) => {
|
|
|
38
40
|
} else {
|
|
39
41
|
return;
|
|
40
42
|
}
|
|
41
|
-
console.log(index, newIndex);
|
|
42
43
|
const tempVar = group.items[newIndex];
|
|
43
44
|
group.items[newIndex] = group.items[index];
|
|
44
45
|
group.items[index] = tempVar;
|
|
@@ -76,10 +77,8 @@ const removeGroup = (group) => {
|
|
|
76
77
|
};
|
|
77
78
|
const removeEntry = (entry, group) => {
|
|
78
79
|
return () => {
|
|
79
|
-
console.log("Clicked!");
|
|
80
80
|
for (let i = group.items.length - 1; i >= 0; i--) {
|
|
81
81
|
if (group.items[i].name === entry.name) {
|
|
82
|
-
console.log("Reduce");
|
|
83
82
|
group.items.splice(i, 1);
|
|
84
83
|
seaweedEntries = seaweedEntries;
|
|
85
84
|
updateOrderQuery();
|
|
@@ -89,10 +88,10 @@ const removeEntry = (entry, group) => {
|
|
|
89
88
|
};
|
|
90
89
|
};
|
|
91
90
|
const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
|
|
92
|
-
console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
|
|
93
91
|
</script>
|
|
94
92
|
|
|
95
|
-
<
|
|
93
|
+
<br>
|
|
94
|
+
<h2>Site ordering</h2>
|
|
96
95
|
<blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
|
|
97
96
|
|
|
98
97
|
<!-- formatting: group1:entry1|entry2,group2:entry3
|
|
@@ -101,30 +100,75 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
|
|
|
101
100
|
, <= separates each group
|
|
102
101
|
-->
|
|
103
102
|
<div class="advanced-setting-list">
|
|
104
|
-
<!-- todo: we might have to extract this into it's own component -->
|
|
105
|
-
<!-- todo: NOW!!! -->
|
|
106
103
|
{#each seaweedEntries as group, groupIndex}
|
|
107
|
-
<div>
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
104
|
+
<div class="entry-group card">
|
|
105
|
+
|
|
106
|
+
<div class="btn-group-header">
|
|
107
|
+
<button title={`Remove ${group.name}`}
|
|
108
|
+
on:click={removeGroup(group)}>
|
|
109
|
+
<img class="img-icon" src={CloseIcon} alt={`Remove ${group.name}`}>
|
|
110
|
+
</button>
|
|
111
|
+
|
|
112
|
+
<button title={`Move group ${group.name} upwards`}
|
|
113
|
+
on:click={swapGroups(groupIndex, true)}
|
|
114
|
+
disabled="{groupIndex === 0}">
|
|
115
|
+
<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.name} upwards`}>
|
|
116
|
+
</button>
|
|
117
|
+
|
|
118
|
+
<button title={`Move group ${group.name} downwards`}
|
|
119
|
+
disabled={groupIndex === seaweedEntries.length - 1}
|
|
120
|
+
on:click={swapGroups(groupIndex, false)}>
|
|
121
|
+
<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move group ${group.name} downwards`}>
|
|
122
|
+
</button>
|
|
123
|
+
|
|
124
|
+
<h2>{group.name}</h2>
|
|
114
125
|
</div>
|
|
115
|
-
|
|
126
|
+
|
|
127
|
+
<table class="advanced-setting-list table">
|
|
128
|
+
<thead>
|
|
129
|
+
<tr>
|
|
130
|
+
<th>Entries</th>
|
|
131
|
+
</tr>
|
|
132
|
+
</thead>
|
|
133
|
+
<tbody>
|
|
116
134
|
{#each group.items as entry, entryIndex}
|
|
117
|
-
<
|
|
118
|
-
<
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
135
|
+
<tr class="entry-row">
|
|
136
|
+
<td class="btn-group-entry">
|
|
137
|
+
|
|
138
|
+
<button title={`Remove ${entry.name}`}
|
|
139
|
+
on:click={removeEntry(entry, group)}>
|
|
140
|
+
<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.name}`}>
|
|
141
|
+
</button>
|
|
142
|
+
|
|
143
|
+
<button title={`Move ${entry.name} upwards`}
|
|
144
|
+
on:click={swapEntry(entryIndex, group, true)}
|
|
145
|
+
disabled="{entryIndex === 0}">
|
|
146
|
+
<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.name} upwards`}>
|
|
147
|
+
</button>
|
|
148
|
+
|
|
149
|
+
<button title={`Move ${entry.name} downwards`}
|
|
150
|
+
disabled={entryIndex === group.items.length - 1}
|
|
151
|
+
on:click={swapEntry(entryIndex, group, false)}>
|
|
152
|
+
<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.name} downwards`}>
|
|
153
|
+
</button>
|
|
154
|
+
<div class="entry-name">
|
|
155
|
+
{entry.name}
|
|
156
|
+
</div>
|
|
157
|
+
</td>
|
|
158
|
+
</tr>
|
|
123
159
|
{/each}
|
|
124
|
-
|
|
160
|
+
</tbody>
|
|
161
|
+
|
|
162
|
+
<tfoot>
|
|
163
|
+
<tr>
|
|
164
|
+
<td>
|
|
165
|
+
<ComboBoxWithButton stringItems={allDefaultEntries}
|
|
166
|
+
onClick={addEntry(group)}></ComboBoxWithButton>
|
|
167
|
+
</td>
|
|
168
|
+
</tr>
|
|
169
|
+
</tfoot>
|
|
170
|
+
</table>
|
|
125
171
|
|
|
126
|
-
<ComboBoxWithButton stringItems={allDefaultEntries}
|
|
127
|
-
onClick={addEntry(group)}></ComboBoxWithButton>
|
|
128
172
|
|
|
129
173
|
</div>
|
|
130
174
|
{/each}
|
|
@@ -136,29 +180,43 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
|
|
|
136
180
|
flex-direction: column;
|
|
137
181
|
}
|
|
138
182
|
|
|
139
|
-
:is(.dark .
|
|
183
|
+
:is(.dark .btn-group-header) {
|
|
140
184
|
--tw-bg-opacity: 1;
|
|
141
|
-
background-color: rgb(var(--color-
|
|
142
|
-
color: rgb(var(--on-
|
|
185
|
+
background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
|
|
186
|
+
color: rgb(var(--on-tertiary));
|
|
143
187
|
}
|
|
144
188
|
|
|
145
|
-
.
|
|
189
|
+
.btn-group-header > *:disabled {
|
|
146
190
|
cursor: not-allowed;
|
|
147
191
|
opacity: 0.5;
|
|
148
192
|
}
|
|
149
193
|
|
|
150
|
-
.
|
|
194
|
+
.btn-group-header > *:disabled:hover {
|
|
151
195
|
--tw-brightness: brightness(1);
|
|
152
196
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
153
197
|
}
|
|
154
198
|
|
|
155
|
-
.
|
|
199
|
+
.btn-group-header > *:disabled:active {
|
|
156
200
|
--tw-scale-x: 1;
|
|
157
201
|
--tw-scale-y: 1;
|
|
158
202
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
159
203
|
}
|
|
160
204
|
|
|
161
|
-
.
|
|
205
|
+
.btn-group-header {
|
|
206
|
+
display: inline-flex;
|
|
207
|
+
flex-direction: row;
|
|
208
|
+
overflow: hidden;
|
|
209
|
+
border-radius: var(--theme-rounded-base);
|
|
210
|
+
isolation: isolate;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.btn-group-header > :not([hidden]) ~ :not([hidden]) {
|
|
214
|
+
--tw-space-x-reverse: 0;
|
|
215
|
+
margin-right: calc(0px * var(--tw-space-x-reverse));
|
|
216
|
+
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.btn-group-header button,.btn-group-header a {
|
|
162
220
|
font-size: 1rem;
|
|
163
221
|
line-height: 1.5rem;
|
|
164
222
|
padding-left: 1.25rem;
|
|
@@ -173,37 +231,156 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
|
|
|
173
231
|
transition-property: all;
|
|
174
232
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
175
233
|
transition-duration: 150ms;
|
|
176
|
-
|
|
234
|
+
color: inherit;
|
|
235
|
+
text-decoration-line: none;
|
|
177
236
|
}
|
|
178
237
|
|
|
179
|
-
.
|
|
238
|
+
.btn-group-header button > :not([hidden]) ~ :not([hidden]),.btn-group-header a > :not([hidden]) ~ :not([hidden]) {
|
|
180
239
|
--tw-space-x-reverse: 0;
|
|
181
240
|
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
182
241
|
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
183
242
|
}
|
|
184
243
|
|
|
185
|
-
.
|
|
244
|
+
.btn-group-header button:hover,.btn-group-header a:hover {
|
|
186
245
|
--tw-brightness: brightness(1.15);
|
|
187
246
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
247
|
+
background-color: rgb(var(--color-surface-50) / 3%);
|
|
188
248
|
}
|
|
189
249
|
|
|
190
|
-
.
|
|
191
|
-
--
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
250
|
+
.btn-group-header button:active,.btn-group-header a:active {
|
|
251
|
+
background-color: rgb(var(--color-surface-900) / 3%);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.btn-group-header > * + * {
|
|
255
|
+
border-top-width: 0px;
|
|
256
|
+
border-left-width: 1px;
|
|
257
|
+
border-color: rgb(var(--color-surface-500) / 0.2);
|
|
196
258
|
}
|
|
197
259
|
|
|
198
|
-
.
|
|
260
|
+
.btn-group-header {
|
|
199
261
|
--tw-bg-opacity: 1;
|
|
200
|
-
background-color: rgb(var(--color-
|
|
201
|
-
color: rgb(var(--on-
|
|
262
|
+
background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
|
|
263
|
+
color: rgb(var(--on-tertiary));
|
|
202
264
|
}
|
|
203
265
|
|
|
204
|
-
:is(.dark .
|
|
266
|
+
:is(.dark .btn-group-header) {
|
|
205
267
|
--tw-bg-opacity: 1;
|
|
206
|
-
background-color: rgb(var(--color-
|
|
207
|
-
color: rgb(var(--on-
|
|
268
|
+
background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
|
|
269
|
+
color: rgb(var(--on-tertiary));
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.btn-group-header {
|
|
273
|
+
display: flex;
|
|
274
|
+
align-items: center;
|
|
275
|
+
margin-bottom: 0.5lh;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.btn-group-entry > *:disabled {
|
|
279
|
+
cursor: not-allowed;
|
|
280
|
+
opacity: 0.5;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.btn-group-entry > *:disabled:hover {
|
|
284
|
+
--tw-brightness: brightness(1);
|
|
285
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.btn-group-entry > *:disabled:active {
|
|
289
|
+
--tw-scale-x: 1;
|
|
290
|
+
--tw-scale-y: 1;
|
|
291
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.btn-group-entry {
|
|
295
|
+
display: inline-flex;
|
|
296
|
+
flex-direction: row;
|
|
297
|
+
overflow: hidden;
|
|
298
|
+
border-radius: var(--theme-rounded-base);
|
|
299
|
+
isolation: isolate;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.btn-group-entry > :not([hidden]) ~ :not([hidden]) {
|
|
303
|
+
--tw-space-x-reverse: 0;
|
|
304
|
+
margin-right: calc(0px * var(--tw-space-x-reverse));
|
|
305
|
+
margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.btn-group-entry button,.btn-group-entry a {
|
|
309
|
+
font-size: 1rem;
|
|
310
|
+
line-height: 1.5rem;
|
|
311
|
+
padding-left: 1.25rem;
|
|
312
|
+
padding-right: 1.25rem;
|
|
313
|
+
padding-top: 9px;
|
|
314
|
+
padding-bottom: 9px;
|
|
315
|
+
white-space: nowrap;
|
|
316
|
+
text-align: center;
|
|
317
|
+
display: inline-flex;
|
|
318
|
+
align-items: center;
|
|
319
|
+
justify-content: center;
|
|
320
|
+
transition-property: all;
|
|
321
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
322
|
+
transition-duration: 150ms;
|
|
323
|
+
color: inherit;
|
|
324
|
+
text-decoration-line: none;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.btn-group-entry button > :not([hidden]) ~ :not([hidden]),.btn-group-entry a > :not([hidden]) ~ :not([hidden]) {
|
|
328
|
+
--tw-space-x-reverse: 0;
|
|
329
|
+
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
|
330
|
+
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.btn-group-entry button:hover,.btn-group-entry a:hover {
|
|
334
|
+
--tw-brightness: brightness(1.15);
|
|
335
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
336
|
+
background-color: rgb(var(--color-surface-50) / 3%);
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.btn-group-entry button:active,.btn-group-entry a:active {
|
|
340
|
+
background-color: rgb(var(--color-surface-900) / 3%);
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.btn-group-entry > * + * {
|
|
344
|
+
border-top-width: 0px;
|
|
345
|
+
border-left-width: 1px;
|
|
346
|
+
border-color: rgb(var(--color-surface-500) / 0.2);
|
|
208
347
|
}
|
|
348
|
+
|
|
349
|
+
.btn-group-entry {
|
|
350
|
+
display: flex;
|
|
351
|
+
padding: 0;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.btn-group-entry > div {
|
|
355
|
+
padding: 1em;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.flipped-vertically {
|
|
359
|
+
transform: rotate(180deg);
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.entry-group {
|
|
363
|
+
background-color: rgb(var(--color-surface-600));
|
|
364
|
+
margin-top: 1.5lh;
|
|
365
|
+
margin-bottom: 0.5lh;
|
|
366
|
+
padding: 0.5lh 0.5em;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.entry-row {
|
|
370
|
+
display: flex;
|
|
371
|
+
align-items: center;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.entry-name {
|
|
375
|
+
flex-grow: 1;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
tr, td, th {
|
|
379
|
+
width: 100%;
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
tfoot > tr {
|
|
383
|
+
display: flex;
|
|
384
|
+
}
|
|
385
|
+
|
|
209
386
|
</style>
|
package/.svelte-kit/__package__/template/seaweed/entry_order_config/entry-order-config.postcss
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
.btn-group > button {
|
|
2
|
+
padding: 0.3em 0.75em;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.btn-group-header > h2 {
|
|
6
|
+
font-weight: bolder;
|
|
7
|
+
padding-top: 1lh;
|
|
8
|
+
padding-bottom: 1lh;
|
|
9
|
+
margin-bottom: 0;
|
|
10
|
+
padding-inline-start: 1em;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.dark .btn-group-header > h2 {
|
|
14
|
+
color: rgb(var(--theme-font-color-dark));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.dark .entry-group {
|
|
18
|
+
background-color: rgb(var(--color-surface-800));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
tbody tr:nth-child(odd) {
|
|
22
|
+
background-color: rgb(var(--color-surface-500));
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.dark tbody tr:nth-child(odd) {
|
|
26
|
+
background-color: rgb(var(--color-surface-900));
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
tbody tr:nth-child(even) {
|
|
30
|
+
background-color: rgb(var(--color-surface-200));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.dark tbody tr:nth-child(even) {
|
|
34
|
+
background-color: rgb(var(--color-surface-800));
|
|
35
|
+
}
|
|
@@ -21,7 +21,7 @@ export const options = {
|
|
|
21
21
|
app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
|
|
22
22
|
error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
|
|
23
23
|
},
|
|
24
|
-
version_hash: "
|
|
24
|
+
version_hash: "beqhwb"
|
|
25
25
|
};
|
|
26
26
|
|
|
27
27
|
export async function get_hooks() {
|
package/dist/app.postcss
CHANGED
|
@@ -185,7 +185,6 @@ a:active {
|
|
|
185
185
|
}
|
|
186
186
|
|
|
187
187
|
#toast-progress::-moz-progress-bar {
|
|
188
|
-
/*background-color: red;*/
|
|
189
188
|
background: rgba(var(--color-secondary-500));
|
|
190
189
|
}
|
|
191
190
|
|
|
@@ -207,3 +206,7 @@ a:active {
|
|
|
207
206
|
.dark .ares-logo {
|
|
208
207
|
filter: invert(100%);
|
|
209
208
|
}
|
|
209
|
+
|
|
210
|
+
.input {
|
|
211
|
+
@apply border-surface-800;
|
|
212
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>
|
|
@@ -3,6 +3,7 @@ export let marginBottom = "2lh";
|
|
|
3
3
|
export let overrideStyle = "";
|
|
4
4
|
export let includeDataNoSnippet = true;
|
|
5
5
|
export let additionalClass = [];
|
|
6
|
+
export let turnOnLightModeBorder = true;
|
|
6
7
|
const style = `
|
|
7
8
|
--turnip-card-margin: ${margin};
|
|
8
9
|
--turnip-card-margin-bottom: ${marginBottom};
|
|
@@ -11,7 +12,16 @@ const style = `
|
|
|
11
12
|
if (!$$slots.content) {
|
|
12
13
|
console.error("Missing content slot in card. No content will be displayed.");
|
|
13
14
|
}
|
|
14
|
-
const
|
|
15
|
+
const originalClasses = ["card", "turnip-card"].concat(additionalClass).join(" ");
|
|
16
|
+
let classes = originalClasses.slice();
|
|
17
|
+
const toggleLightModeBorder = (turnOnLightModeBorder2) => {
|
|
18
|
+
classes = originalClasses;
|
|
19
|
+
if (turnOnLightModeBorder2) {
|
|
20
|
+
classes += " light-mode-border";
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
$:
|
|
24
|
+
toggleLightModeBorder(turnOnLightModeBorder);
|
|
15
25
|
</script>
|
|
16
26
|
|
|
17
27
|
{#if (includeDataNoSnippet)}
|
|
@@ -19,17 +29,28 @@ const classes = ["card", "turnip-card"].concat(additionalClass).join(" ");
|
|
|
19
29
|
<slot name="content" class="card" />
|
|
20
30
|
</div>
|
|
21
31
|
{:else }
|
|
22
|
-
<div class=
|
|
32
|
+
<div class={classes} style={style}>
|
|
23
33
|
<slot name="content" class="card" />
|
|
24
34
|
</div>
|
|
25
35
|
{/if}
|
|
26
36
|
|
|
27
37
|
<style>
|
|
38
|
+
/*noinspection CssUnusedSymbol*/
|
|
39
|
+
.light-mode-border {
|
|
40
|
+
border-width: 2px;
|
|
41
|
+
--tw-border-opacity: 1;
|
|
42
|
+
border-color: rgb(var(--color-surface-600) / var(--tw-border-opacity));
|
|
43
|
+
}
|
|
44
|
+
:is(.dark .light-mode-border) {
|
|
45
|
+
border-width: 0px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/*noinspection CssUnusedSymbol*/
|
|
28
49
|
.turnip-card {
|
|
29
50
|
--tw-bg-opacity: 1;
|
|
30
51
|
background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
|
|
31
52
|
}
|
|
32
|
-
:is(.dark .turnip-card) {
|
|
53
|
+
:is(.dark .turnip-card) {
|
|
33
54
|
--tw-bg-opacity: 1;
|
|
34
55
|
background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
|
|
35
56
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
checked?: boolean | undefined;
|
|
5
|
+
name: string;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {
|
|
11
|
+
default: {};
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export type PineappleSlideToggleProps = typeof __propDef.props;
|
|
15
|
+
export type PineappleSlideToggleEvents = typeof __propDef.events;
|
|
16
|
+
export type PineappleSlideToggleSlots = typeof __propDef.slots;
|
|
17
|
+
export default class PineappleSlideToggle extends SvelteComponent<PineappleSlideToggleProps, PineappleSlideToggleEvents, PineappleSlideToggleSlots> {
|
|
18
|
+
}
|
|
19
|
+
export {};
|
|
@@ -56,7 +56,9 @@ const dismissToast = () => {
|
|
|
56
56
|
{#if (localComponent !== undefined)}
|
|
57
57
|
<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
|
|
58
58
|
<!-- todo: adjust shadow to be more dynamic or transparent -->
|
|
59
|
-
<Card marginBottom="1lh"
|
|
59
|
+
<Card marginBottom="1lh"
|
|
60
|
+
turnOnLightModeBorder={false}
|
|
61
|
+
overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
|
|
60
62
|
<div slot="content">
|
|
61
63
|
{#if (localProps !== undefined)}
|
|
62
64
|
<svelte:component this={localComponent}
|
|
@@ -77,7 +79,7 @@ const dismissToast = () => {
|
|
|
77
79
|
position: fixed;
|
|
78
80
|
/* 12em = this component's margin (4em) + fab margin + width (8em) */
|
|
79
81
|
max-width: calc(100vw - 12em);
|
|
80
|
-
|
|
82
|
+
z-index: 100;
|
|
81
83
|
}
|
|
82
84
|
|
|
83
85
|
.toast-positioner:dir(ltr) {
|
|
@@ -37,7 +37,7 @@ const post = () => {
|
|
|
37
37
|
};
|
|
38
38
|
</script>
|
|
39
39
|
|
|
40
|
-
<div>
|
|
40
|
+
<div class="local-list">
|
|
41
41
|
<label for="short-url">Short URL for url shortener</label>
|
|
42
42
|
<input bind:value={request.shortUrl}
|
|
43
43
|
name="short-url"
|
|
@@ -49,6 +49,18 @@ const post = () => {
|
|
|
49
49
|
name="password"
|
|
50
50
|
class="input"
|
|
51
51
|
type="password"
|
|
52
|
-
placeholder="
|
|
53
|
-
<button class="btn variant-filled" on:click={post}>Send link</button>
|
|
52
|
+
placeholder="ILoveTurnips" />
|
|
53
|
+
<button class="send-link btn variant-filled" on:click={post}>Send link</button>
|
|
54
54
|
</div>
|
|
55
|
+
|
|
56
|
+
<style>
|
|
57
|
+
.local-list {
|
|
58
|
+
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
60
|
+
gap: 0.25lh;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.send-link {
|
|
64
|
+
margin-top: 0.75lh;
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
} from "./SeaweedTemplateData";
|
|
17
17
|
import { parseQueryTerms } from "./ParseQueryTerms";
|
|
18
18
|
import UrlShortenerForm from "./CreateUrlForm.svelte";
|
|
19
|
+
import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
|
|
19
20
|
export let letChaos = true;
|
|
20
21
|
export let name = "Turnip";
|
|
21
22
|
export let email = "turnipxenon@gmail.com";
|
|
@@ -324,18 +325,21 @@ $:
|
|
|
324
325
|
<h1>Advanced settings</h1>
|
|
325
326
|
<p>This one is for those curious how I customize this page.</p>
|
|
326
327
|
|
|
327
|
-
<
|
|
328
|
+
<PineappleSlideToggle name="advanced-setting-slider"
|
|
329
|
+
bind:checked={isAdvanceSettingOn}>
|
|
328
330
|
Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
|
|
329
|
-
</
|
|
331
|
+
</PineappleSlideToggle>
|
|
330
332
|
|
|
331
333
|
{#if (isAdvanceSettingOn)}
|
|
332
|
-
<
|
|
334
|
+
<PineappleSlideToggle name="game-section-slider"
|
|
335
|
+
bind:checked={seaweedTemplateData.gameSectionFirst}>
|
|
333
336
|
Should game section appear first over projects: {seaweedTemplateData.gameSectionFirst ? "On" : "Off"}
|
|
334
|
-
</
|
|
337
|
+
</PineappleSlideToggle>
|
|
335
338
|
<p>Note: the above configuration was made before the dynamic entry list and to support links sent with that params, we will act like it only swaps the two groups, and nothing more dynamic if order query param does not exist. The configuration only happens during page load with query param, and it does not apply when changed here.</p>
|
|
336
|
-
<
|
|
339
|
+
<PineappleSlideToggle name="fun-note-slider"
|
|
340
|
+
bind:checked={seaweedTemplateData.shouldAddFunNote}>
|
|
337
341
|
Should add fun note in description: {seaweedTemplateData.shouldAddFunNote ? "On" : "Off"}
|
|
338
|
-
</
|
|
342
|
+
</PineappleSlideToggle>
|
|
339
343
|
|
|
340
344
|
<h3>Query terms to bold</h3>
|
|
341
345
|
<div class="query-term-grid">
|