this repo has no description

make it BIGGER BIGGER BIGGER /ref

- nicer scale on mobile
- nicer popover

vielle.dev fbbf1145 e420c9d0

verified
+76 -54
+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
··· 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 }