vielle.dev
this repo has no description
make it BIGGER BIGGER BIGGER /ref
- nicer scale on mobile
- nicer popover
+1
-1
src/Base.astro
+1
-1
src/Base.astro
···
7
7
<html lang="en">
8
8
<head>
9
9
<meta charset="utf-8" />
10
-
<meta name="viewport" content="width=device-width" />
10
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
11
11
<meta name="generator" content={Astro.generator} />
12
12
<title>{Astro.props.title}</title>
13
13
<style is:inline>
+75
-53
src/components/astral/Powers.astro
+75
-53
src/components/astral/Powers.astro
···
166
166
disabled={immutable}
167
167
>
168
168
<template shadowrootmode="open">
169
-
<button commandfor="info" command="toggle-popover">
170
-
<slot is:inline name="img" />
171
-
</button>
172
-
173
-
<section id="info" popover>
174
-
<h2><slot is:inline name="title" /></h2>
175
-
<button
176
-
id="mode"
177
-
title={[
178
-
"Unselect: Remove the power from the power list",
179
-
"Select: Add the power to the power list",
180
-
"Locked: This power cannot be added to the power list",
181
-
"No parent: The parent power for this power has not been selected",
182
-
"No points: You do not have enough points to unlock this power",
183
-
"Dependency: Another power relies on this power being selected, or it must be selected",
184
-
].join("\n")}
185
-
>
186
-
<span data-val="unselect">Unselect</span>
187
-
<span data-val="locked">Locked</span>
188
-
<span data-val="select">Select</span>
189
-
<span data-val="no-parent">No Parent</span>
190
-
<span data-val="no-points">No Points</span>
191
-
<span data-val="dependency">Dependency</span>
192
-
</button>
193
-
<slot is:inline name="body" />
194
-
</section>
195
-
196
-
<section>
197
-
<slot is:inline />
198
-
</section>
199
-
200
169
<style is:inline>
201
170
/* colour mode */
202
171
:host {
···
233
202
234
203
/* dialog popup styles */
235
204
#info {
236
-
width: min(60ch, calc(100vw - 10ch));
205
+
width: 40ch;
237
206
/* position-anchor: --tree-node; */
238
207
position-area: bottom span-right;
239
208
position-try:
···
252
221
&:popover-open {
253
222
display: grid;
254
223
}
255
-
grid-template: auto auto auto / 1fr auto;
224
+
grid-template: auto auto auto / auto 1fr auto;
225
+
gap: 5px;
226
+
align-items: center;
256
227
257
228
& h2 {
258
229
margin: 0;
230
+
height: min-content;
259
231
}
260
232
261
-
& p {
262
-
grid-column: span 2;
233
+
& p,
234
+
div:has(slot[name="meta"]) {
235
+
grid-column: span 3;
236
+
}
237
+
238
+
p {
239
+
margin: 0;
263
240
}
264
241
265
242
button {
243
+
height: 100%;
266
244
display: grid;
267
245
grid-template: "cell" 1fr / 1fr;
268
246
justify-content: center;
···
401
379
}
402
380
}
403
381
</style>
382
+
383
+
<button commandfor="info" command="toggle-popover">
384
+
<slot is:inline name="img" />
385
+
</button>
386
+
387
+
<section id="info" popover>
388
+
<slot is:inline name="icon" /><h2><slot is:inline name="title" /></h2>
389
+
<button
390
+
id="mode"
391
+
title={[
392
+
"Unselect: Remove the power from the power list",
393
+
"Select: Add the power to the power list",
394
+
"Locked: This power cannot be added to the power list",
395
+
"No parent: The parent power for this power has not been selected",
396
+
"No points: You do not have enough points to unlock this power",
397
+
"Dependency: Another power relies on this power being selected, or it must be selected",
398
+
].join("\n")}
399
+
>
400
+
<span data-val="unselect">Unselect</span>
401
+
<span data-val="locked">Locked</span>
402
+
<span data-val="select">Select</span>
403
+
<span data-val="no-parent">No Parent</span>
404
+
<span data-val="no-points">No Points</span>
405
+
<span data-val="dependency">Dependency</span>
406
+
</button>
407
+
<p>
408
+
<slot is:inline name="body" />
409
+
</p>
410
+
{
411
+
powerData[power].meta.length > 0 ? (
412
+
<div>
413
+
<slot is:inline name="meta" />
414
+
</div>
415
+
) : null
416
+
}
417
+
</section>
418
+
419
+
<section>
420
+
<slot is:inline />
421
+
</section>
404
422
</template>
405
423
406
424
<img slot="img" {...powerData[power].image} />
407
-
<span slot="title">
408
-
<img {...powerData[power].image} /> {powerData[power].name}</span
409
-
>
410
-
<div slot="body">
411
-
<p>{powerData[power].description}</p>
425
+
<img slot="icon" {...powerData[power].image} />
426
+
<span slot="title"> {powerData[power].name}</span>
427
+
428
+
<div slot="body">{powerData[power].description}</div>
429
+
<dl slot="meta">
412
430
{
413
431
powerData[power].meta.length > 0 ? (
414
-
<dl>
415
-
{powerData[power].meta.map(({ name, value }) => (
416
-
<>
417
-
<dt>{name}</dt>
418
-
<dd>{value}</dd>
419
-
</>
420
-
))}
421
-
</dl>
422
-
) : null
432
+
powerData[power].meta.map(({ name, value }) => (
433
+
<>
434
+
<dt>{name}</dt>
435
+
<dd>{value}</dd>
436
+
</>
437
+
))
438
+
) : (
439
+
<div class="null" />
440
+
)
423
441
}
424
-
</div>
442
+
</dl>
425
443
426
444
{
427
445
children.map((child, i) => (
···
440
458
display: grid;
441
459
grid-template-columns: auto 1fr;
442
460
gap: 0.2ch 1ch;
443
-
margin-block-end: 0;
461
+
margin-block: 0;
462
+
463
+
&:has(.null) {
464
+
display: none;
465
+
}
444
466
445
467
dt::after {
446
468
content: ": ";
···
459
481
display: block;
460
482
}
461
483
462
-
[slot="title"] img {
463
-
height: 2ch;
484
+
img[slot="icon"] {
485
+
height: 50px;
464
486
border-radius: 100%;
465
487
display: inline-block;
466
488
}