From 6376f1a5225b2fa45f6c861d4a265bf13b56d038 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 10:01:02 +0200 Subject: Update --- tpl/index.pug | 14 +++++++------- tpl/objects/card.pug | 12 +++++++++++- tpl/objects/lightbox.pug | 27 ++++++++++++++++++++------- tpl/views/card.pug | 31 +++++++++++++++++++++++-------- tpl/views/lightbox.pug | 20 ++++++++++++++++---- 5 files changed, 77 insertions(+), 27 deletions(-) (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index a6e99dd..c4baa64 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -40,7 +40,7 @@ mixin view(id, title) - views.push({ id, title }); - +container(narrow=true class='u-p-700 c-view' id=id) + +container(narrow=!attributes.wide class='u-p-700 c-view' id=id) +h1-heading('xl')(class='u-mt-0')= title +divider('medium') block @@ -117,22 +117,22 @@ html +view-switch +view-form +view-action-button - +view-overflow-button + //+view-overflow-button +view-status-indicator +view-avatar +view-card +view-side-nav +view-popover +view-menu - +view-icon-nav + //+view-icon-nav +view-backdrop - +view-dialog + //+view-dialog +view-lightbox - +view-list-group + //+view-list-group +view-table +view-alert - +view-message - +view-message-group + //+view-message + //+view-message-group .c-sidebar.l-overflow.u-bie-1.u-p-100 +side-nav diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug index d7595d1..d622d3b 100644 --- a/tpl/objects/card.pug +++ b/tpl/objects/card.pug @@ -17,7 +17,16 @@ mixin card block mixin card-image - .o-card__image + - + let classes = { + 'o-card__image': true, + } + + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes) img.o-card__image-img(src=attributes.src style=attributes.style) mixin card-body @@ -34,6 +43,7 @@ mixin card-avatar mixin card-content .o-card__content block + mixin card-footer footer.o-card__footer block diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 58abdae..02a3200 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -1,20 +1,33 @@ include icon.pug mixin lightbox(images) - .o-lightbox + - + let classes = { + 'o-lightbox': true, + } + let linksClasses = { + 's-links': true, + } + + if (attributes.theme) { + classes[`o-lightbox--${attributes.theme}`] = true; + linksClasses[`s-links--${attributes.theme}`] = true; + } + + div(class=classes) header.o-lightbox__header - .s-links.s-links--colored + div(class=linksClasses) block - +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') + +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') each img, i in images img.o-lightbox__img(src=images[i] id='image-' + i) - +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') img.o-lightbox__img.o-lightbox__img--default(src=images[0]) if images.length > 1 - +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') .o-lightbox__thumbnails each img, i in images - classes = i === 0 ? 'is-selected' : '' diff --git a/tpl/views/card.pug b/tpl/views/card.pug index e466cdc..4871d30 100644 --- a/tpl/views/card.pug +++ b/tpl/views/card.pug @@ -1,5 +1,5 @@ mixin view-card - +view('card', 'Card') + +view('card', 'Card')(wide=true) .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) +card(href='#') +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) @@ -44,11 +44,26 @@ mixin view-card p= loremIpsum p= loremIpsum - +divider('faint') + each layout in ['grid', 'masonry', 'masonry-h'] + - + let quiet = true - .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' + let classes = { + 'l-card-list': true, + 'l-card-list--aspect-5/4': layout === 'grid', + 'l-card-list--quiet': quiet, + } + classes[`l-card-list--${layout}`] = true; + + + +divider('faint')(class='u-mb-700') + + div(class=classes) + each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] + +card(quiet=quiet href='#' class='l-card-list__card') + +card-image(src=img class='l-card-list__card-image') + +card-body + .l-media + .l-media__block.l-media__block--main + h1.u-mbs-0= 'XS Heading' + small.u-c-mute-more= `Episode ${i + 1}` diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 8169a35..4eb234a 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -1,8 +1,20 @@ mixin view-lightbox +view('lightbox', 'Lightbox') .c-box - +backdrop(class='t-media') - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + = "Let's try multiple links! " + a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") + = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" + = ' ' + a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") + = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" + = ' ' + a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") + = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" + + .c-box + +backdrop + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -14,8 +26,8 @@ mixin view-lightbox = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" .c-box - +backdrop(class='t-media') - +lightbox(['avatar.png']) + +backdrop + +lightbox(['avatar.png'])(theme='static-white') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" -- cgit v1.2.3-70-g09d2