From f98a5c58c830a283d07d8efad4502281a5e0369e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 28 Jun 2024 14:22:27 +0200 Subject: Update --- tpl/objects/button.pug | 2 +- tpl/objects/card.pug | 11 ++++++++--- tpl/views/card.pug | 45 ++++++++++++++++++++++++++++++++++++++------- tpl/views/icon-nav.pug | 2 +- tpl/views/message-group.pug | 4 ++-- tpl/views/message.pug | 6 +++--- tpl/views/text-field.pug | 2 +- 7 files changed, 54 insertions(+), 18 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index b5fb8da..1fa3347 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -5,7 +5,7 @@ mixin a-button 'o-button--block': attributes.block, 'o-button--primary': attributes.primary, 'o-button--outline': attributes.outline, - 'o-button--round': !!attributes.icon + 'o-button--round': !!attributes.icon && !block } if (attributes.variant) { classes['o-button--' + attributes.variant] = true diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index d61393d..d7595d1 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug @@ -1,7 +1,12 @@ mixin card - let classes = { - 'o-card': true, + 'o-card': true, + 'o-card--quiet': !!attributes.quiet, + } + + if (attributes.class) { + classes[attributes.class] = true; } if attributes.href @@ -13,10 +18,10 @@ mixin card mixin card-image .o-card__image - img.o-card__image-img(src=attributes.src) + img.o-card__image-img(src=attributes.src style=attributes.style) mixin card-body - .o-card__body + .o-card__body(style=attributes.style) block mixin card-title diff --git a/tpl/views/card.pug b/tpl/views/card.pug index 6858867..e466cdc 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -1,23 +1,54 @@ mixin view-card +view('card', 'Card') - .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' }) + .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) +card(href='#') - +card-image(src='Drawing_Half.png') + +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) +card-avatar(src='avatar.png') +card-body +card-title= 'XS Heading' - +card-content= loremIpsum + +card-content + p= loremIpsum + p= loremIpsum +card-footer = 'Footer' - +card(href='#') + +card +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-content + p= loremIpsum + p= loremIpsum + +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' }) +card-body - = 'Footer' + .l-media + .l-media__block + +badge('positive')(quiet=true icon='repeat' href='#') + +icon('repeat') + strong.u-mis-50= '12' + .l-media__block + +badge('warning')(quiet=true icon='star' href='#') + +icon('star') + strong.u-mis-50= '34' + .l-media__block.u-mis-auto + +a-button(primary=true)= 'Reply' + + +card(quiet=true href='#') + +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) + +card-body + +card-title= 'XS Heading' + +card-content + p= loremIpsum + p= loremIpsum + + +divider('faint') + + .l-card-list.l-card-list--masonry + each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] + +card(href='#' class='l-card-list__card') + +card-image(src=img) + +card-body + +card-title= 'XS Heading' diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug index e71229d..8ba9880 100644 --- a/tpl/views/icon-nav.pug +++ b/tpl/views/icon-nav.pug @@ -5,7 +5,7 @@ mixin view-icon-nav +icon-nav-item('hash') +icon-nav-item('bookmark')(selected=true) +icon-nav-item('tags') - +icon-nav-item('cog')(class='u-ml-auto') + +icon-nav-item('cog')(class='u-mis-auto') +icon-nav-item('logout') .c-box diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug index dc744d9..48cb008 100644 --- a/tpl/views/message-group.pug +++ b/tpl/views/message-group.pug @@ -71,10 +71,10 @@ mixin view-message-group .l-media .l-media__block.l-media__block--main strong= 'Volpeon' - small.u-ml-100= '@volpeon@mk.vulpes.one' + small.u-mis-100= '@volpeon@mk.vulpes.one' small.l-media__block = '5 minutes ago' - +icon('lock')(class='u-ml-100') + +icon('lock')(class='u-mis-100') +slot('body')= 'Full width bubble messages test' +message()(theme='t-up' group=true) +slot('body')= loremIpsum diff --git a/tpl/views/message.pug b/tpl/views/message.pug index 9130537..dc8b289 100644 --- a/tpl/views/message.pug +++ b/tpl/views/message.pug @@ -5,7 +5,7 @@ mixin view-message +slot('body')= loremIpsum +slot('time') = '12:34' - +icon('lock')(class='u-ml-100') + +icon('lock')(class='u-mis-100') .c-box +message('Volpeon')(compact=true highlight=true theme='t-up') @@ -21,10 +21,10 @@ mixin view-message .l-media .l-media__block.l-media__block--main strong= 'Volpeon' - small.u-ml-100= '@volpeon@mk.vulpes.one' + small.u-mis-100= '@volpeon@mk.vulpes.one' small.l-media__block = '5 minutes ago' - +icon('lock')(class='u-ml-100') + +icon('lock')(class='u-mis-100') +slot('body') = loremIpsum = loremIpsum diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 9a60741..165e2ce 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -17,7 +17,7 @@ mixin view-text-field +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') +action-button(quiet=true class='l-media__block')= 'Volpeon' - +divider('vertical')(class='u-ml-50') + +divider('vertical')(class='u-mis-50') +slot('post') +action-button(quiet=true icon='smile' class='l-media__block') +action-button(quiet=true icon='send' class='l-media__block') -- cgit v1.2.3-70-g09d2