From 57e28f7fe929f275a0c516d0a702ec8a8739a810 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 27 Jun 2024 11:26:15 +0200 Subject: Add card --- tpl/objects/avatar.pug | 26 ++++++++++++++++++-------- tpl/objects/card.pug | 43 ++++++++++++++++++++++++------------------- tpl/objects/menu.pug | 2 +- tpl/objects/message.pug | 2 +- tpl/objects/side-nav.pug | 2 +- tpl/objects/text-field.pug | 1 - 6 files changed, 45 insertions(+), 31 deletions(-) (limited to 'tpl/objects') diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug index 19439bb..ca3de07 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug @@ -20,11 +20,21 @@ mixin avatar styles['--avatar--colors--h'] = attributes.hue; } - a(class=classes style=styles href=attributes.href) - if attributes.status - +status-indicator(attributes.status)(class='o-avatar__status') - if attributes.src - img.o-avatar__content(src=attributes.src) - else - .o-avatar__content - block + if attributes.href + a(class=classes style=styles href=attributes.href) + if attributes.status + +status-indicator(attributes.status)(class='o-avatar__status') + if attributes.src + img.o-avatar__content(src=attributes.src) + else + .o-avatar__content + block + else + div(class=classes style=styles) + if attributes.status + +status-indicator(attributes.status)(class='o-avatar__status') + if attributes.src + img.o-avatar__content(src=attributes.src) + else + .o-avatar__content + block diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index d6516be..d61393d 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug @@ -1,29 +1,34 @@ mixin card - - const slots = {} - - mixin slot(key) - - slots[key] = block - - - block ? block() : undefined - let classes = { 'o-card': true, } if attributes.href a(href=attributes.href class=classes) - if slots.body - .o-card__body - - slots.body() - if slots.footer - .o-card__footer - - slots.footer() + block else div(class=classes) - if slots.body - .o-card__body - - slots.body() - if slots.footer - .o-card__footer - - slots.footer() + block + +mixin card-image + .o-card__image + img.o-card__image-img(src=attributes.src) + +mixin card-body + .o-card__body + block + +mixin card-title + h1.o-card__title + block + +mixin card-avatar + +avatar(class='o-card__avatar' src=attributes.src size='xl') + +mixin card-content + .o-card__content + block +mixin card-footer + footer.o-card__footer + block diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index a8b20d7..578f9bc 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -19,7 +19,7 @@ mixin menu-item let classes = { 'o-menu__item': true, 'l-media': true, - 'l-media--75': true, + 'l-media--sm': true, 'o-menu__header': attributes.header, 'is-selected': attributes.selected, } diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug index d644347..6b64a40 100644 --- a/tpl/objects/message.pug +++ b/tpl/objects/message.pug @@ -45,7 +45,7 @@ mixin message(user) article(class=classes) if user && attributes.avatar - .l-media.l-media--flush.l-flex--align-start + .l-media.l-flex--align-start .l-media__block.u-mt-50.u-p-sticky-top +avatar= user.slice(0, 2) .l-media__block.l-media__block--main diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug index 511f298..ccd24e4 100644 --- a/tpl/objects/side-nav.pug +++ b/tpl/objects/side-nav.pug @@ -19,7 +19,7 @@ mixin side-nav-item let classes = { 'o-side-nav__item': true, 'l-media': true, - 'l-media--75': true, + 'l-media--sm': true, 'o-side-nav__header': attributes.header, 'is-selected': attributes.selected, } diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index f8e5263..0342f01 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -15,7 +15,6 @@ mixin text-field 'is-invalid': attributes.invalid, 'is-disabled': attributes.disabled, 'l-media': !!block, - 'l-media--flush': !!block, 'l-media--gapless': !!block, } if (attributes.class) { -- cgit v1.2.3-70-g09d2