Skip to content

Commit 9a6b1c8

Browse files
richardhjtanrichardhjtan
committed
Merge branch 'main' into eco-172-to-seed-realm
2 parents 7759c8e + 4de24d8 commit 9a6b1c8

File tree

1 file changed

+253
-0
lines changed

1 file changed

+253
-0
lines changed

‎packages/base/spec.gts

+253
Original file line numberDiff line numberDiff line change
@@ -362,6 +362,259 @@ export class Spec extends CardDef {
362362
};
363363

364364
static edit = Spec.isolated;
365+
366+
static fitted = class Fitted extends Component<typeof this> {
367+
icon: CardOrFieldTypeIcon | undefined;
368+
369+
get defaultIcon() {
370+
return this.args.model.constructor?.icon;
371+
}
372+
constructor(owner: any, args: any) {
373+
super(owner, args);
374+
this.loadCardIcon.perform();
375+
}
376+
377+
private loadCardIcon = restartableTask(async () => {
378+
if (this.args.model.ref && this.args.model.id) {
379+
let card = await loadCard(this.args.model.ref, {
380+
loader: myLoader(),
381+
relativeTo: new URL(this.args.model.id),
382+
});
383+
this.icon = card.icon;
384+
}
385+
});
386+
387+
<template>
388+
<div class='fitted-template'>
389+
<div class='thumbnail-section'>
390+
{{#if this.loadCardIcon.isRunning}}
391+
<LoadingIndicator />
392+
{{else if this.icon}}
393+
<this.icon width='35' height='35' role='presentation' />
394+
{{else}}
395+
<this.defaultIcon width='35' height='35' role='presentation' />
396+
{{/if}}
397+
</div>
398+
<div class='info-section'>
399+
<h3 class='card-title' data-test-card-title><@fields.title /></h3>
400+
<h4 class='card-description' data-test-card-description>
401+
<@fields.description />
402+
</h4>
403+
</div>
404+
{{#if @model.specType}}
405+
<SpecTag @specType={{@model.specType}} />
406+
{{/if}}
407+
</div>
408+
<style scoped>
409+
@layer {
410+
.fitted-template {
411+
width: 100%;
412+
height: 100%;
413+
display: flex;
414+
gap: var(--boxel-sp-xs);
415+
padding: var(--boxel-sp-xs);
416+
overflow: hidden;
417+
align-items: center;
418+
}
419+
.thumbnail-section {
420+
flex-shrink: 0;
421+
display: flex;
422+
justify-content: center;
423+
align-items: center;
424+
overflow: hidden;
425+
}
426+
.info-section {
427+
width: 100%;
428+
overflow: hidden;
429+
}
430+
.card-title {
431+
margin-block: 0;
432+
font: 600 var(--boxel-font-sm);
433+
letter-spacing: var(--boxel-lsp-sm);
434+
line-height: 1.25;
435+
text-overflow: ellipsis;
436+
white-space: nowrap;
437+
overflow: hidden;
438+
}
439+
.card-description {
440+
margin-top: var(--boxel-sp-4xs);
441+
margin-bottom: 0;
442+
color: var(--boxel-450);
443+
font: 500 var(--boxel-font-xs);
444+
letter-spacing: var(--boxel-lsp-xs);
445+
text-overflow: ellipsis;
446+
white-space: nowrap;
447+
overflow: hidden;
448+
}
449+
:deep(.spec-tag-pill) {
450+
height: max-content;
451+
}
452+
:deep(.spec-tag-pill .icon) {
453+
width: 18px;
454+
}
455+
}
456+
457+
/* Aspect Ratio <= 1.0 (Vertical) */
458+
@container fitted-card (aspect-ratio <= 1.0) {
459+
.fitted-template {
460+
flex-direction: column;
461+
}
462+
.thumbnail-section {
463+
width: 100%;
464+
height: 50cqmin;
465+
}
466+
.info-section {
467+
text-align: center;
468+
}
469+
}
470+
471+
@container fitted-card (aspect-ratio <= 1.0) and (height <= 118px) {
472+
.thumbnail-section {
473+
display: none;
474+
}
475+
}
476+
/* Vertical Tiles*/
477+
/* Small Tile (150 x 170) */
478+
@container fitted-card (aspect-ratio <= 1.0) and (150px <= width ) and (170px <= height) {
479+
.thumbnail-section {
480+
min-height: 70px;
481+
}
482+
.card-title {
483+
-webkit-line-clamp: 3;
484+
}
485+
}
486+
/* CardsGrid Tile (170 x 250) */
487+
@container fitted-card (aspect-ratio <= 1.0) and (150px < width < 250px ) and (170px < height < 275px) {
488+
.thumbnail-section {
489+
height: auto;
490+
aspect-ratio: 1 / 1;
491+
}
492+
.card-title {
493+
-webkit-line-clamp: 2;
494+
}
495+
}
496+
/* Tall Tile (150 x 275) */
497+
@container fitted-card (aspect-ratio <= 1.0) and (150px <= width ) and (275px <= height) {
498+
.thumbnail-section {
499+
min-height: 85px;
500+
}
501+
.card-title {
502+
font-size: var(--boxel-font-size);
503+
-webkit-line-clamp: 4;
504+
}
505+
}
506+
/* Large Tile (250 x 275) */
507+
@container fitted-card (aspect-ratio <= 1.0) and (250px <= width ) and (275px <= height) {
508+
.thumbnail-section {
509+
min-height: 150px;
510+
}
511+
.card-title {
512+
font-size: var(--boxel-font-size-sm);
513+
-webkit-line-clamp: 3;
514+
}
515+
}
516+
/* Vertical Cards */
517+
@container fitted-card (aspect-ratio <= 1.0) and (400px <= width) {
518+
.fitted-template {
519+
padding: var(--boxel-sp);
520+
gap: var(--boxel-sp);
521+
}
522+
.thumbnail-section {
523+
min-height: 236px;
524+
}
525+
.card-title {
526+
font-size: var(--boxel-font-size-med);
527+
-webkit-line-clamp: 4;
528+
}
529+
}
530+
/* Expanded Card (400 x 445) */
531+
532+
/* 1.0 < Aspect Ratio (Horizontal) */
533+
@container fitted-card (1.0 < aspect-ratio) {
534+
.thumbnail-section {
535+
aspect-ratio: 1;
536+
}
537+
}
538+
@container fitted-card (1.0 < aspect-ratio) and (height <= 65px) {
539+
.info-section {
540+
align-self: center;
541+
}
542+
}
543+
/* Badges */
544+
@container fitted-card (1.0 < aspect-ratio) and (width < 250px) {
545+
.fitted-template {
546+
padding: var(--boxel-sp-xxxs);
547+
}
548+
.thumbnail-section {
549+
display: none;
550+
}
551+
}
552+
/* Small Badge (150 x 40) */
553+
@container fitted-card (1.0 < aspect-ratio) and (width < 250px) and (height < 65px) {
554+
.card-title {
555+
-webkit-line-clamp: 1;
556+
font: 600 var(--boxel-font-xs);
557+
}
558+
.card-display-name {
559+
margin-top: 0;
560+
}
561+
}
562+
/* Medium Badge (150 x 65) */
563+
564+
/* Large Badge (150 x 105) */
565+
@container fitted-card (1.0 < aspect-ratio) and (width < 250px) and (105px <= height) {
566+
.card-title {
567+
-webkit-line-clamp: 3;
568+
}
569+
}
570+
571+
/* Strips */
572+
/* Single Strip (250 x 40) */
573+
@container fitted-card (1.0 < aspect-ratio) and (250px <= width) and (height < 65px) {
574+
.fitted-template {
575+
padding: var(--boxel-sp-xxxs);
576+
}
577+
}
578+
/* Double Strip (250 x 65) */
579+
/* Triple Strip (250 x 105) */
580+
/* Double Wide Strip (400 x 65) */
581+
/* Triple Wide Strip (400 x 105) */
582+
583+
/* Horizontal Tiles */
584+
/* Regular Tile (250 x 170) */
585+
@container fitted-card (1.0 < aspect-ratio) and (250px <= width < 400px) and (170px <= height) {
586+
.thumbnail-section {
587+
height: 40%;
588+
}
589+
.card-title {
590+
-webkit-line-clamp: 4;
591+
font-size: var(--boxel-font-size);
592+
}
593+
}
594+
595+
/* Horizontal Cards */
596+
/* Compact Card (400 x 170) */
597+
@container fitted-card (1.0 < aspect-ratio) and (400px <= width) and (170px <= height) {
598+
.thumbnail-section {
599+
height: 100%;
600+
}
601+
}
602+
/* Full Card (400 x 275) */
603+
@container fitted-card (1.0 < aspect-ratio) and (400px <= width) and (275px <= height) {
604+
.fitted-template {
605+
padding: var(--boxel-sp);
606+
gap: var(--boxel-sp);
607+
}
608+
.thumbnail-section {
609+
max-width: 44%;
610+
}
611+
.card-title {
612+
font-size: var(--boxel-font-size-med);
613+
}
614+
}
615+
</style>
616+
</template>
617+
};
365618
}
366619

367620
interface SpecTagSignature {

0 commit comments

Comments
 (0)