From b34545ce5a694a0042f2d1dfbbfad7bfee713c2d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 20 Jan 2023 16:48:54 +0100 Subject: Fixed flaws --- src/objects/_action-menu.scss | 2 +- src/objects/_avatar.scss | 37 ++++++++++++++++--------------------- src/objects/_icon.scss | 14 +++++++++++--- tpl/objects/backdrop.pug | 7 ++++++- tpl/objects/bubble-group.pug | 2 +- tpl/objects/bubble.pug | 2 +- tpl/objects/dialog.pug | 4 ++-- tpl/objects/icon.pug | 2 +- tpl/views/avatar.pug | 16 ++++++++++++++++ tpl/views/dialog.pug | 12 ++++++------ 10 files changed, 61 insertions(+), 37 deletions(-) diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index a3e1ca1..3943252 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss @@ -117,7 +117,7 @@ @include iro.bem-elem('icon-slot') { display: flex; justify-content: center; - width: 1em; + width: 1.2em; } } } diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 5a65fbf..526912f 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -21,6 +21,11 @@ @include iro.props-namespace('avatar') { @include iro.props-store(( --dims: ( + --150: ( + --size: fn.global-dim(--size --600), + --font-size: fn.global-dim(--font-size --150), + --indicator-size: fn.global-dim(--size --175), + ), --100: ( --size: fn.global-dim(--size --450), --font-size: fn.global-dim(--font-size --100), @@ -89,27 +94,17 @@ } } - @include iro.bem-modifier('75') { - font-size: fn.dim(--75 --font-size); - - @include status(75); - - @include iro.bem-elem('content') { - width: fn.dim(--75 --size); - height: fn.dim(--75 --size); - line-height: fn.dim(--75 --size); - } - } - - @include iro.bem-modifier('50') { - font-size: fn.dim(--50 --font-size); - - @include status(50); - - @include iro.bem-elem('content') { - width: fn.dim(--50 --size); - height: fn.dim(--50 --size); - line-height: fn.dim(--50 --size); + @each $size in 50 75 150 { + @include iro.bem-modifier($size) { + font-size: fn.dim(--#{$size} --font-size); + + @include status($size); + + @include iro.bem-elem('content') { + width: fn.dim(--#{$size} --size); + height: fn.dim(--#{$size} --size); + line-height: fn.dim(--#{$size} --size); + } } } } diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss index e613ec2..12baeba 100644 --- a/src/objects/_icon.scss +++ b/src/objects/_icon.scss @@ -1,11 +1,19 @@ @use 'iro-sass/src/index' as iro; +@use '../functions' as fn; @include iro.props-namespace('icon') { + @include iro.props-store(( + --dims: ( + --stroke: 1.5px, + --size: calc(1 / 14 * 16em), + ) + ), 'dims'); + @include iro.bem-object(iro.props-namespace()) { display: inline-block; - width: 1em; - height: 1em; - stroke-width: var(--icon-stroke-width, 1.5px); + width: fn.dim(--size); + height: fn.dim(--size); + stroke-width: fn.dim(--stroke); stroke-linecap: round; stroke-linejoin: round; vertical-align: -.12em; diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug index cbe8866..227700c 100644 --- a/tpl/objects/backdrop.pug +++ b/tpl/objects/backdrop.pug @@ -8,5 +8,10 @@ mixin backdrop classes[attributes.class] = true; } - div(class=classes, style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) + let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' } + if (attributes.pad) { + styles['padding'] = '2em'; + } + + div(class=classes, style=styles) block diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug index a1a8c00..e6a6d19 100644 --- a/tpl/objects/bubble-group.pug +++ b/tpl/objects/bubble-group.pug @@ -10,6 +10,6 @@ mixin bubble-group(user) } section(class=classes) - .l-bubble-group__avatar.u-sticky-top + .l-bubble-group__avatar.u-p-sticky-top +avatar= user.slice(0, 2) block diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug index bec6e9e..d04f06b 100644 --- a/tpl/objects/bubble.pug +++ b/tpl/objects/bubble.pug @@ -43,7 +43,7 @@ mixin bubble(user) article(class=classes) if user && attributes.avatar .l-media.l-media--flush.l-flex--align-start - .l-media__block.u-mt-50.u-sticky-top + .l-media__block.u-mt-50.u-p-sticky-top +avatar= user.slice(0, 2) .l-media__block.l-media__block--main +content diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 95aa41c..ece0d67 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -40,7 +40,7 @@ mixin dialog(title) if slots['sidebar-header'] - slots['sidebar-header']() else - +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle + +div-heading('xl')(class='o-dialog__title u-mt-0 l-media__block l-media__block--main')= attributes.sidebarTitle if slots.sidebar .o-dialog__sidebar.l-overflow @@ -51,7 +51,7 @@ mixin dialog(title) - slots.header() else if title - +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title + +div-heading('xl')(class='o-dialog__title u-mt-0 l-media__block l-media__block--main')= title +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') section(class=bodyClass) diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug index 67bcf37..98d51ad 100644 --- a/tpl/objects/icon.pug +++ b/tpl/objects/icon.pug @@ -9,5 +9,5 @@ mixin icon(id) classes[attributes.class] = true; } - svg(class=classes width='1em' height='1em') + svg(class=classes) use(href=href) diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug index 01aaf93..7941649 100644 --- a/tpl/views/avatar.pug +++ b/tpl/views/avatar.pug @@ -1,6 +1,14 @@ mixin view-avatar +view('avatar', 'Avatar') .c-box + div(style={ display: 'flex', gap: '.3em' }) + +avatar(size='150' hue=180) + = 'Vo' + +avatar(size='150' hue=225) + = 'lp' + +avatar(size='150' src='avatar.png') + br + br div(style={ display: 'flex', gap: '.3em' }) +avatar = 'Vo' @@ -27,6 +35,14 @@ mixin view-avatar +avatar(size='50' src='avatar.png') .c-box + div(style={ display: 'flex', gap: '.3em' }) + +avatar(circle=true size='150' hue=180) + = 'Vo' + +avatar(circle=true size='150' hue=225) + = 'lp' + +avatar(circle=true size='150' src='avatar.png') + br + br div(style={ display: 'flex', gap: '.3em' }) +avatar(circle=true) = 'Vo' diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 9d6061d..6ef06df 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -1,13 +1,13 @@ mixin view-dialog +view('dialog', 'Dialog') .c-box - +backdrop + +backdrop(pad=true) +dialog('Lorem ipsum')(flat=true) +slot('body') = loremIpsum .c-box - +backdrop + +backdrop(pad=true) +dialog('Lorem ipsum')(bodyClass='l-overflow') +slot('body') p.u-mt-0= loremIpsum @@ -17,7 +17,7 @@ mixin view-dialog p= loremIpsum .c-box - +backdrop + +backdrop(pad=true) +dialog('Tags')(sidebarTitle='#channel') +slot('sidebar') +menu(style={ 'min-width': '10em' }) @@ -28,7 +28,7 @@ mixin view-dialog p.u-mt-0= loremIpsum .c-box - +backdrop + +backdrop(pad=true) +dialog('#channel') +slot('sidebar') +menu(style={ 'min-width': '10em' }) @@ -39,14 +39,14 @@ mixin view-dialog p.u-mt-0= loremIpsum .c-box - +backdrop + +backdrop(pad=true) +dialog +slot('header') .l-media__block.l-flex +action-button(quiet=true icon='chevron-left') +action-button(quiet=true icon='chevron-right') .l-media__block.l-media__block--main - +div-heading('sm')= 'Tags' + +div-heading('xl')(class="u-mt-0")= 'Tags' +slot('sidebar') +menu(style={ 'min-width': '10em' }) +menu-item(icon='bookmark')= 'Bookmark' -- cgit v1.2.3-70-g09d2