From 511a47c8964c43927563ee88b62b3f215bf9b7d1 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 28 Mar 2022 20:25:21 +0200 Subject: Update --- tpl/index.pug | 6 ++---- tpl/layouts/container.pug | 8 ++------ tpl/objects/bubble.pug | 8 ++++---- tpl/objects/dialog.pug | 35 +++++++++++++++++++++++++---------- tpl/objects/header.pug | 12 ------------ tpl/objects/icon.pug | 4 ++-- tpl/objects/sidebar.pug | 12 ------------ tpl/views/dialog.pug | 17 +++++++---------- 8 files changed, 42 insertions(+), 60 deletions(-) delete mode 100644 tpl/objects/header.pug delete mode 100644 tpl/objects/sidebar.pug (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index 6ff502c..4ed1ae3 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -27,8 +27,6 @@ include objects/lightbox.pug include objects/list-group.pug include objects/table.pug include objects/alert.pug -include objects/header.pug -include objects/sidebar.pug include objects/bubble.pug include objects/bubble-group.pug @@ -36,7 +34,7 @@ mixin view(id, title) - views.push({ id, title }); - +container(padX=true padY=true narrow=true class='c-view' id=id) + +container(narrow=true class='u-p-700 c-view' id=id) +h1-heading('xl')= title +divider('medium') block @@ -112,7 +110,7 @@ html +view-bubble +view-bubble-group - +sidebar(class='c-sidebar') + .c-sidebar.l-overflow.u-themed.t-raised.u-p-75.u-br-1 +menu each view in views +menu-item(tag='a' href='#' + view.id)= view.title diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug index c1affc4..0973b74 100644 --- a/tpl/layouts/container.pug +++ b/tpl/layouts/container.pug @@ -2,11 +2,8 @@ mixin container - let classes = { 'l-container': true, - 'l-container--pad-x': attributes.padX, - 'l-container--pad-y': attributes.padY, 'l-container--narrow': attributes.narrow, - 'l-container--sm-narrow': attributes.smNarrow, - 'l-container--in-page': attributes.inPage, + 'l-container--narrow-50': attributes.narrow50, 'u-themed': !!attributes.theme } if (!!attributes.theme) { @@ -17,5 +14,4 @@ mixin container } div(class=classes)&attributes(attributes) - .l-container__inner - block + block diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug index 1e0df38..fad7242 100644 --- a/tpl/objects/bubble.pug +++ b/tpl/objects/bubble.pug @@ -31,11 +31,11 @@ mixin bubble(user) else if user header(class=headerClasses) strong= user - div.o-bubble__body.s-colored-links + span.s-colored-links - slots.body() - if slots.time - small.o-bubble__time - - slots.time() + if slots.time + small.o-bubble__time + - slots.time() if slots.footer footer.o-bubble__footer - slots.footer() diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 2474cc3..91b99d9 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -1,6 +1,4 @@ include heading.pug -include header.pug -include sidebar.pug mixin dialog(title) - const slots = {} @@ -12,9 +10,23 @@ mixin dialog(title) block ? block() : undefined let classes = { - 'o-dialog': true, + 'o-dialog': true, + 'o-dialog--flat': attributes.flat, } + let headerClass = { + 'o-dialog__header': true, + 'u-themed': !attributes.flat, + 't-lowered': !attributes.flat, + 'l-card': true, + } + + let sidebarHeaderClass = { + 'o-dialog__header--sidebar': true, + } + + Object.assign(sidebarHeaderClass, headerClass); + let bodyClass = { 'o-dialog__body': true } @@ -23,21 +35,24 @@ mixin dialog(title) } div(class=classes) - if slots['sidebar-header'] - +header(class='o-dialog__sidebar-header') - - slots['sidebar-header']() + if slots['sidebar-header'] || attributes.sidebarTitle + div(class=sidebarHeaderClass) + if slots['sidebar-header'] + - slots['sidebar-header']() + else + +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle if slots.sidebar - +sidebar(class='o-dialog__sidebar') + .o-dialog__sidebar.l-overflow - slots.sidebar() - +header(class='o-dialog__header') + div(class=headerClass) if slots.header - slots.header() else if title - +div-heading('sm')(class='o-dialog__label')= title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') + +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title + +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block') section(class=bodyClass) if slots.body diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug deleted file mode 100644 index 0d9d7ee..0000000 --- a/tpl/objects/header.pug +++ /dev/null @@ -1,12 +0,0 @@ -mixin header - - - let classes = { - 'o-header': true - } - if (attributes.class) { - classes[attributes.class] = true; - } - - header(class=classes) - .o-header__content.t-lo - block diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug index 1ed6052..67bcf37 100644 --- a/tpl/objects/icon.pug +++ b/tpl/objects/icon.pug @@ -2,8 +2,8 @@ mixin icon(id) - let href = 'icons.svg#' + id let classes = { - 'o-icon': true, - 'o-icon--block': attributes.block, + 'o-icon': true, + 'u-d-block': attributes.block, } if (attributes.class) { classes[attributes.class] = true; diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug deleted file mode 100644 index caa0f1f..0000000 --- a/tpl/objects/sidebar.pug +++ /dev/null @@ -1,12 +0,0 @@ -mixin sidebar - - - let classes = { - 'o-sidebar': true - } - if (attributes.class) { - classes[attributes.class] = true; - } - - aside(class=classes) - .o-sidebar__content.l-overflow - block diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 0b6f8e7..f90ef21 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -2,7 +2,7 @@ mixin view-dialog +view('dialog', 'Dialog') .c-box +backdrop - +dialog('Lorem ipsum') + +dialog('Lorem ipsum')(flat=true) +slot('body') = loremIpsum @@ -18,9 +18,7 @@ mixin view-dialog .c-box +backdrop - +dialog('Tags') - +slot('sidebar-header') - +div-heading('sm')(class='o-dialog__label')= '#channel' + +dialog('Tags')(sidebarTitle='#channel') +slot('sidebar') +menu(style={ 'min-width': '10em' }) +menu-item(icon='bookmark')= 'Bookmark' @@ -44,12 +42,11 @@ mixin view-dialog +backdrop +dialog +slot('header') - .l-card.l-card--flush - .l-card__block.l-flex - +action-button(quiet=true icon='chevron-left') - +action-button(quiet=true icon='chevron-right') - .l-card__block.l-card__block--main - +div-heading('sm')= 'Tags' + .l-card__block.l-flex + +action-button(quiet=true icon='chevron-left') + +action-button(quiet=true icon='chevron-right') + .l-card__block.l-card__block--main + +div-heading('sm')= 'Tags' +slot('sidebar') +menu(style={ 'min-width': '10em' }) +menu-item(icon='bookmark')= 'Bookmark' -- cgit v1.2.3-54-g00ecf