From a1870a62f262dad9affcfebec1e07168c022ae5d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 26 Jan 2023 15:23:52 +0100 Subject: Avatar --- tpl/objects/avatar.pug | 9 +++++---- tpl/views/avatar.pug | 16 ++++++++-------- 2 files changed, 13 insertions(+), 12 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug index a2ff941..19439bb 100644 --- a/tpl/objects/avatar.pug +++ b/tpl/objects/avatar.pug @@ -3,9 +3,10 @@ include ../objects/status-indicator.pug mixin avatar - let classes = { - 'o-avatar': true, - 'o-avatar--circle': attributes.circle, - 'u-d-block': attributes.block + 'o-avatar': true, + 'o-avatar--colored': true, + 'o-avatar--circle': attributes.circle, + 'u-d-block': attributes.block } if (attributes.class) { classes[attributes.class] = true; @@ -19,7 +20,7 @@ mixin avatar styles['--avatar--colors--h'] = attributes.hue; } - div(class=classes style=styles) + a(class=classes style=styles href=attributes.href) if attributes.status +status-indicator(attributes.status)(class='o-avatar__status') if attributes.src diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug index 7941649..fcde68d 100644 --- a/tpl/views/avatar.pug +++ b/tpl/views/avatar.pug @@ -2,7 +2,7 @@ mixin view-avatar +view('avatar', 'Avatar') .c-box div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='150' hue=180) + +avatar(size='150' hue=180 href='#') = 'Vo' +avatar(size='150' hue=225) = 'lp' @@ -10,7 +10,7 @@ mixin view-avatar br br div(style={ display: 'flex', gap: '.3em' }) - +avatar + +avatar(href='#') = 'Vo' +avatar(status='green' hue=45) = 'lp' @@ -19,7 +19,7 @@ mixin view-avatar br br div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='75' hue=90) + +avatar(size='75' hue=90 href='#') = 'eo' +avatar(size='75' status='green' hue=135) = 'n' @@ -28,7 +28,7 @@ mixin view-avatar br br div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='50' hue=180) + +avatar(size='50' hue=180 href='#') = 'V' +avatar(size='50' hue=225) = 'o' @@ -36,7 +36,7 @@ mixin view-avatar .c-box div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='150' hue=180) + +avatar(circle=true size='150' hue=180 href='#') = 'Vo' +avatar(circle=true size='150' hue=225) = 'lp' @@ -44,7 +44,7 @@ mixin view-avatar br br div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true) + +avatar(circle=true href='#') = 'Vo' +avatar(circle=true status='green' hue=45) = 'lp' @@ -53,7 +53,7 @@ mixin view-avatar br br div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='75' hue=90) + +avatar(circle=true size='75' hue=90 href='#') = 'eo' +avatar(circle=true size='75' status='green' hue=135) = 'n' @@ -62,7 +62,7 @@ mixin view-avatar br br div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='50' hue=180) + +avatar(circle=true size='50' hue=180 href='#') = 'V' +avatar(circle=true size='50' hue=225) = 'o' -- cgit v1.2.3-70-g09d2