From 57e28f7fe929f275a0c516d0a702ec8a8739a810 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 27 Jun 2024 11:26:15 +0200 Subject: Add card --- src/_utils.scss | 8 ++++--- src/layouts/_media.scss | 51 +++++++++++--------------------------------- src/objects/_card.scss | 24 ++++++++++++++++++--- static/Drawing_Half.png | Bin 0 -> 535700 bytes static/avatar.png | Bin 61956 -> 164866 bytes 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 +- 16 files changed, 109 insertions(+), 88 deletions(-) create mode 100644 static/Drawing_Half.png diff --git a/src/_utils.scss b/src/_utils.scss index 8ba2581..a99d7ec 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -11,7 +11,9 @@ $dirs: ( 'is': '-inline-start', 'ie': '-inline-end', 'i': '-inline', -); +) !default; + +$sizes: 0 10 50 75 100 125 200 400 700 800 !default; @include iro.bem-utility('d-block') { display: block; @@ -177,7 +179,7 @@ $dirs: ( padding#{$suffix}: auto; } - @each $size in (0 10 50 75 100 125 200 400 700 800) { + @each $size in $sizes { @include iro.bem-utility('m#{$dir}-#{$size}') { margin#{$suffix}: fn.global-dim(--size --#{$size}); } @@ -192,6 +194,6 @@ $dirs: ( } @include iro.bem-utility('b#{$dir}-1') { - border#{$suffix}: 1px solid fn.global-color(--border); + border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border); } } diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss index 953c8c0..1227486 100644 --- a/src/layouts/_media.scss +++ b/src/layouts/_media.scss @@ -1,57 +1,30 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; +$sizes: 'gapless' 'sm' 'lg' 'xl' !default; + @include iro.props-namespace('media') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), - - --75: ( - --pad-x: fn.global-dim(--size --100), - --pad-y: fn.global-dim(--size --50), - ), + --gap: fn.global-dim(--size --150), - --200: ( - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --150), - ), - - --300: ( - --pad-x: fn.global-dim(--size --450), - --pad-y: fn.global-dim(--size --225), - ) + --gapless: 0, + --sm: fn.global-dim(--size --100), + --lg: fn.global-dim(--size --300), + --xl: fn.global-dim(--size --450), ) )); @include iro.bem-layout(iro.props-namespace()) { display: flex; align-items: center; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - gap: fn.dim(--pad-x); + gap: fn.dim(--gap); line-height: 1.4; - @include iro.bem-modifier('75') { - padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); - gap: fn.dim(--75 --pad-x); - } - - @include iro.bem-modifier('200') { - padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); - gap: fn.dim(--200 --pad-x); - } - - @include iro.bem-modifier('300') { - padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); - gap: fn.dim(--300 --pad-x); - } - - @include iro.bem-modifier('flush') { - padding: 0; - } - - @include iro.bem-modifier('gapless') { - gap: 0; + @each $size in $sizes { + @include iro.bem-modifier($size) { + gap: fn.dim(--#{$size}); + } } @include iro.bem-modifier('wrap') { diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 07256cb..5783ac1 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -53,13 +53,21 @@ } } - @include iro.bem-elem('thumbnail') { + @include iro.bem-elem('avatar') { + margin-block-start: fn.dim(--pad-b); + margin-inline-start: fn.dim(--pad-i); + } + + @include iro.bem-elem('image') { position: relative; width: 100%; - height: 100%; + + @include iro.bem-next-elem('avatar') { + margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); + } } - @include iro.bem-elem('thumbnail-img') { + @include iro.bem-elem('image-img') { display: block; object-fit: cover; width: 100%; @@ -69,6 +77,16 @@ @include iro.bem-elem('body') { padding-block: fn.dim(--pad-b); padding-inline: fn.dim(--pad-i); + + &::before { + content: ''; + display: block; + margin-block: -100em 100em; + } + } + + @include iro.bem-elem('content') { + margin-block-start: fn.dim(--spacing); } @include iro.bem-elem('footer') { diff --git a/static/Drawing_Half.png b/static/Drawing_Half.png new file mode 100644 index 0000000..09f3814 Binary files /dev/null and b/static/Drawing_Half.png differ diff --git a/static/avatar.png b/static/avatar.png index aa4345f..596ccb4 100755 Binary files a/static/avatar.png and b/static/avatar.png differ 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-54-g00ecf