From 57e28f7fe929f275a0c516d0a702ec8a8739a810 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 27 Jun 2024 11:26:15 +0200 Subject: Add card --- tpl/index.pug | 8 ++++---- 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 - tpl/views/card.pug | 24 +++++++++++++++++++----- tpl/views/menu.pug | 2 +- tpl/views/message-group.pug | 2 +- tpl/views/message.pug | 2 +- 11 files changed, 71 insertions(+), 43 deletions(-) (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index b6af02b..a6e99dd 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -49,7 +49,7 @@ mixin user-card(name, hue) - const avaName = name.slice(0, 1) - .l-media.l-media--flush.l-media--75 + .l-media.l-media--sm +avatar(block=true size='xs' class='l-media__block' hue=hue) = avaName = name @@ -134,7 +134,7 @@ html +view-message +view-message-group - .c-sidebar.l-overflow.t-base.u-p-75 - +menu + .c-sidebar.l-overflow.u-bie-1.u-p-100 + +side-nav each view in views - +menu-item(tag='a' href='#' + view.id)= view.title + +side-nav-item(tag='a' href='#' + view.id)= view.title 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) { diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 0b88b0e..6858867 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -1,9 +1,23 @@ mixin view-card +view('card', 'Card') - .c-box + .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' }) +card(href='#') - +slot('body') - h1= 'XS Heading' - p= loremIpsum - +slot('footer') + +card-image(src='Drawing_Half.png') + +card-avatar(src='avatar.png') + +card-body + +card-title= 'XS Heading' + +card-content= loremIpsum + +card-footer + = 'Footer' + + +card(href='#') + +card-body + .l-media + +avatar(class='l-media__block' src='avatar.png') + .l-media__block.l-media__block--main + strong.u-d-block= 'Volpeon' + small.u-d-block= '@volpeon@is-a.wyvern.rip' + +card-content= loremIpsum + +card-image(src='Drawing_Half.png') + +card-body = 'Footer' diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index 34a15ce..7c5df03 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug @@ -5,7 +5,7 @@ mixin view-menu +action-button(quiet=true selected=true)= 'Menu' +popover +menu - +menu-slot(class='l-media l-media--flush') + +menu-slot(class='l-media') +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') .l-media__block.l-media__block--main strong.u-d-block= 'Volpeon' diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug index 3d1166f..dc744d9 100644 --- a/tpl/views/message-group.pug +++ b/tpl/views/message-group.pug @@ -68,7 +68,7 @@ mixin view-message-group +message-group('Volpeon') +message()(theme='t-up' group=true) +slot('header') - .l-media.l-media--flush + .l-media .l-media__block.l-media__block--main strong= 'Volpeon' small.u-ml-100= '@volpeon@mk.vulpes.one' diff --git a/tpl/views/message.pug b/tpl/views/message.pug index f256e41..9130537 100644 --- a/tpl/views/message.pug +++ b/tpl/views/message.pug @@ -18,7 +18,7 @@ mixin view-message .c-box.l-overflow(style='resize: vertical') +message('Volpeon')(avatar=true theme='t-up') +slot('header') - .l-media.l-media--flush + .l-media .l-media__block.l-media__block--main strong= 'Volpeon' small.u-ml-100= '@volpeon@mk.vulpes.one' -- cgit v1.2.3-70-g09d2