@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>
|
|
@@ -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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@turnipxenon/pineapple",
|
|
3
3
|
"description": "personal package for base styling for other personal projects",
|
|
4
|
-
"version": "2.4.
|
|
4
|
+
"version": "2.4.57",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
7
7
|
"build": "vite build && yarn package",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"custom-check": "npx vite-node src/lib/scripts/util/ManualCheckRun.ts",
|
|
17
17
|
"preview": "vite preview",
|
|
18
18
|
"prepublishOnly": "yarn package",
|
|
19
|
-
"to-dev": "git checkout main && git pull origin main && git checkout -b turnip/dev"
|
|
19
|
+
"to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@sveltejs/adapter-auto": "^3.1.1",
|
package/src/lib/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>
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
export let overrideStyle = "";
|
|
5
5
|
export let includeDataNoSnippet = true;
|
|
6
6
|
export let additionalClass: string[] = [];
|
|
7
|
+
export let turnOnLightModeBorder = true;
|
|
7
8
|
|
|
8
9
|
// warning: don't forget the semi-colon when adding new style!
|
|
9
10
|
const style = `
|
|
@@ -16,7 +17,15 @@
|
|
|
16
17
|
console.error("Missing content slot in card. No content will be displayed.");
|
|
17
18
|
}
|
|
18
19
|
|
|
19
|
-
const
|
|
20
|
+
const originalClasses = ["card", "turnip-card"].concat(additionalClass).join(" ");
|
|
21
|
+
let classes = originalClasses.slice();
|
|
22
|
+
const toggleLightModeBorder = (turnOnLightModeBorder: boolean) => {
|
|
23
|
+
classes = originalClasses;
|
|
24
|
+
if (turnOnLightModeBorder) {
|
|
25
|
+
classes += " light-mode-border";
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
$: toggleLightModeBorder(turnOnLightModeBorder);
|
|
20
29
|
</script>
|
|
21
30
|
|
|
22
31
|
{#if (includeDataNoSnippet)}
|
|
@@ -24,12 +33,18 @@
|
|
|
24
33
|
<slot name="content" class="card" />
|
|
25
34
|
</div>
|
|
26
35
|
{:else }
|
|
27
|
-
<div class=
|
|
36
|
+
<div class={classes} style={style}>
|
|
28
37
|
<slot name="content" class="card" />
|
|
29
38
|
</div>
|
|
30
39
|
{/if}
|
|
31
40
|
|
|
32
41
|
<style lang="postcss">
|
|
42
|
+
/*noinspection CssUnusedSymbol*/
|
|
43
|
+
.light-mode-border {
|
|
44
|
+
@apply border-surface-600 border-2 dark:border-0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/*noinspection CssUnusedSymbol*/
|
|
33
48
|
.turnip-card {
|
|
34
49
|
@apply bg-surface-100 dark:bg-surface-900;
|
|
35
50
|
margin: var(--turnip-card-margin);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
export let checked = false;
|
|
3
|
+
export let name: string;
|
|
4
|
+
|
|
5
|
+
import { SlideToggle } from "@skeletonlabs/skeleton";
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<SlideToggle name={name}
|
|
9
|
+
background="bg-surface-700 dark:bg-surface-700"
|
|
10
|
+
bind:checked={checked}>
|
|
11
|
+
<slot />
|
|
12
|
+
</SlideToggle>
|
|
@@ -80,7 +80,9 @@
|
|
|
80
80
|
{#if (localComponent !== undefined)}
|
|
81
81
|
<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
|
|
82
82
|
<!-- todo: adjust shadow to be more dynamic or transparent -->
|
|
83
|
-
<Card marginBottom="1lh"
|
|
83
|
+
<Card marginBottom="1lh"
|
|
84
|
+
turnOnLightModeBorder={false}
|
|
85
|
+
overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
|
|
84
86
|
<div slot="content">
|
|
85
87
|
{#if (localProps !== undefined)}
|
|
86
88
|
<svelte:component this={localComponent}
|
|
@@ -101,7 +103,7 @@
|
|
|
101
103
|
position: fixed;
|
|
102
104
|
/* 12em = this component's margin (4em) + fab margin + width (8em) */
|
|
103
105
|
max-width: calc(100vw - 12em);
|
|
104
|
-
|
|
106
|
+
z-index: 100;
|
|
105
107
|
}
|
|
106
108
|
|
|
107
109
|
.toast-positioner:dir(ltr) {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
};
|
|
42
42
|
</script>
|
|
43
43
|
|
|
44
|
-
<div>
|
|
44
|
+
<div class="local-list">
|
|
45
45
|
<label for="short-url">Short URL for url shortener</label>
|
|
46
46
|
<input bind:value={request.shortUrl}
|
|
47
47
|
name="short-url"
|
|
@@ -53,6 +53,18 @@
|
|
|
53
53
|
name="password"
|
|
54
54
|
class="input"
|
|
55
55
|
type="password"
|
|
56
|
-
placeholder="
|
|
57
|
-
<button class="btn variant-filled" on:click={post}>Send link</button>
|
|
56
|
+
placeholder="ILoveTurnips" />
|
|
57
|
+
<button class="send-link btn variant-filled" on:click={post}>Send link</button>
|
|
58
58
|
</div>
|
|
59
|
+
|
|
60
|
+
<style>
|
|
61
|
+
.local-list {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
gap: 0.25lh;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.send-link {
|
|
68
|
+
margin-top: 0.75lh;
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
@@ -20,6 +20,7 @@
|
|
|
20
20
|
import type { EntryProps } from "$pkg/template/seaweed/entries/EntryProps";
|
|
21
21
|
import { parseQueryTerms } from "$pkg/template/seaweed/ParseQueryTerms";
|
|
22
22
|
import UrlShortenerForm from "$pkg/template/seaweed/CreateUrlForm.svelte";
|
|
23
|
+
import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
|
|
23
24
|
|
|
24
25
|
export let letChaos = true;
|
|
25
26
|
export let name = "Turnip";
|
|
@@ -385,18 +386,21 @@
|
|
|
385
386
|
<h1>Advanced settings</h1>
|
|
386
387
|
<p>This one is for those curious how I customize this page.</p>
|
|
387
388
|
|
|
388
|
-
<
|
|
389
|
+
<PineappleSlideToggle name="advanced-setting-slider"
|
|
390
|
+
bind:checked={isAdvanceSettingOn}>
|
|
389
391
|
Advanced settings: {isAdvanceSettingOn ? "On" : "Off"}
|
|
390
|
-
</
|
|
392
|
+
</PineappleSlideToggle>
|
|
391
393
|
|
|
392
394
|
{#if (isAdvanceSettingOn)}
|
|
393
|
-
<
|
|
395
|
+
<PineappleSlideToggle name="game-section-slider"
|
|
396
|
+
bind:checked={seaweedTemplateData.gameSectionFirst}>
|
|
394
397
|
Should game section appear first over projects: {seaweedTemplateData.gameSectionFirst ? "On" : "Off"}
|
|
395
|
-
</
|
|
398
|
+
</PineappleSlideToggle>
|
|
396
399
|
<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>
|
|
397
|
-
<
|
|
400
|
+
<PineappleSlideToggle name="fun-note-slider"
|
|
401
|
+
bind:checked={seaweedTemplateData.shouldAddFunNote}>
|
|
398
402
|
Should add fun note in description: {seaweedTemplateData.shouldAddFunNote ? "On" : "Off"}
|
|
399
|
-
</
|
|
403
|
+
</PineappleSlideToggle>
|
|
400
404
|
|
|
401
405
|
<h3>Query terms to bold</h3>
|
|
402
406
|
<div class="query-term-grid">
|