summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-28 20:25:21 +0200
committerVolpeon <git@volpeon.ink>2022-03-28 20:25:21 +0200
commit511a47c8964c43927563ee88b62b3f215bf9b7d1 (patch)
tree108bbc0139ede490a2038a2f6c96467f62666346 /tpl
parentImproved bubble (diff)
downloadiro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.gz
iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.tar.bz2
iro-design-511a47c8964c43927563ee88b62b3f215bf9b7d1.zip
Update
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug6
-rw-r--r--tpl/layouts/container.pug8
-rw-r--r--tpl/objects/bubble.pug8
-rw-r--r--tpl/objects/dialog.pug35
-rw-r--r--tpl/objects/header.pug12
-rw-r--r--tpl/objects/icon.pug4
-rw-r--r--tpl/objects/sidebar.pug12
-rw-r--r--tpl/views/dialog.pug17
8 files changed, 42 insertions, 60 deletions
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
27include objects/list-group.pug 27include objects/list-group.pug
28include objects/table.pug 28include objects/table.pug
29include objects/alert.pug 29include objects/alert.pug
30include objects/header.pug
31include objects/sidebar.pug
32include objects/bubble.pug 30include objects/bubble.pug
33include objects/bubble-group.pug 31include objects/bubble-group.pug
34 32
@@ -36,7 +34,7 @@ mixin view(id, title)
36 - 34 -
37 views.push({ id, title }); 35 views.push({ id, title });
38 36
39 +container(padX=true padY=true narrow=true class='c-view' id=id) 37 +container(narrow=true class='u-p-700 c-view' id=id)
40 +h1-heading('xl')= title 38 +h1-heading('xl')= title
41 +divider('medium') 39 +divider('medium')
42 block 40 block
@@ -112,7 +110,7 @@ html
112 +view-bubble 110 +view-bubble
113 +view-bubble-group 111 +view-bubble-group
114 112
115 +sidebar(class='c-sidebar') 113 .c-sidebar.l-overflow.u-themed.t-raised.u-p-75.u-br-1
116 +menu 114 +menu
117 each view in views 115 each view in views
118 +menu-item(tag='a' href='#' + view.id)= view.title 116 +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
2 - 2 -
3 let classes = { 3 let classes = {
4 'l-container': true, 4 'l-container': true,
5 'l-container--pad-x': attributes.padX,
6 'l-container--pad-y': attributes.padY,
7 'l-container--narrow': attributes.narrow, 5 'l-container--narrow': attributes.narrow,
8 'l-container--sm-narrow': attributes.smNarrow, 6 'l-container--narrow-50': attributes.narrow50,
9 'l-container--in-page': attributes.inPage,
10 'u-themed': !!attributes.theme 7 'u-themed': !!attributes.theme
11 } 8 }
12 if (!!attributes.theme) { 9 if (!!attributes.theme) {
@@ -17,5 +14,4 @@ mixin container
17 } 14 }
18 15
19 div(class=classes)&attributes(attributes) 16 div(class=classes)&attributes(attributes)
20 .l-container__inner 17 block
21 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)
31 else if user 31 else if user
32 header(class=headerClasses) 32 header(class=headerClasses)
33 strong= user 33 strong= user
34 div.o-bubble__body.s-colored-links 34 span.s-colored-links
35 - slots.body() 35 - slots.body()
36 if slots.time 36 if slots.time
37 small.o-bubble__time 37 small.o-bubble__time
38 - slots.time() 38 - slots.time()
39 if slots.footer 39 if slots.footer
40 footer.o-bubble__footer 40 footer.o-bubble__footer
41 - slots.footer() 41 - 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 @@
1include heading.pug 1include heading.pug
2include header.pug
3include sidebar.pug
4 2
5mixin dialog(title) 3mixin dialog(title)
6 - const slots = {} 4 - const slots = {}
@@ -12,9 +10,23 @@ mixin dialog(title)
12 block ? block() : undefined 10 block ? block() : undefined
13 11
14 let classes = { 12 let classes = {
15 'o-dialog': true, 13 'o-dialog': true,
14 'o-dialog--flat': attributes.flat,
16 } 15 }
17 16
17 let headerClass = {
18 'o-dialog__header': true,
19 'u-themed': !attributes.flat,
20 't-lowered': !attributes.flat,
21 'l-card': true,
22 }
23
24 let sidebarHeaderClass = {
25 'o-dialog__header--sidebar': true,
26 }
27
28 Object.assign(sidebarHeaderClass, headerClass);
29
18 let bodyClass = { 30 let bodyClass = {
19 'o-dialog__body': true 31 'o-dialog__body': true
20 } 32 }
@@ -23,21 +35,24 @@ mixin dialog(title)
23 } 35 }
24 36
25 div(class=classes) 37 div(class=classes)
26 if slots['sidebar-header'] 38 if slots['sidebar-header'] || attributes.sidebarTitle
27 +header(class='o-dialog__sidebar-header') 39 div(class=sidebarHeaderClass)
28 - slots['sidebar-header']() 40 if slots['sidebar-header']
41 - slots['sidebar-header']()
42 else
43 +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= attributes.sidebarTitle
29 44
30 if slots.sidebar 45 if slots.sidebar
31 +sidebar(class='o-dialog__sidebar') 46 .o-dialog__sidebar.l-overflow
32 - slots.sidebar() 47 - slots.sidebar()
33 48
34 +header(class='o-dialog__header') 49 div(class=headerClass)
35 if slots.header 50 if slots.header
36 - slots.header() 51 - slots.header()
37 else 52 else
38 if title 53 if title
39 +div-heading('sm')(class='o-dialog__label')= title 54 +div-heading('sm')(class='o-dialog__title l-card__block l-card__block--main')= title
40 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') 55 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-card__block')
41 56
42 section(class=bodyClass) 57 section(class=bodyClass)
43 if slots.body 58 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 @@
1mixin header
2 -
3 let classes = {
4 'o-header': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 header(class=classes)
11 .o-header__content.t-lo
12 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)
2 - 2 -
3 let href = 'icons.svg#' + id 3 let href = 'icons.svg#' + id
4 let classes = { 4 let classes = {
5 'o-icon': true, 5 'o-icon': true,
6 'o-icon--block': attributes.block, 6 'u-d-block': attributes.block,
7 } 7 }
8 if (attributes.class) { 8 if (attributes.class) {
9 classes[attributes.class] = true; 9 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 @@
1mixin sidebar
2 -
3 let classes = {
4 'o-sidebar': true
5 }
6 if (attributes.class) {
7 classes[attributes.class] = true;
8 }
9
10 aside(class=classes)
11 .o-sidebar__content.l-overflow
12 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
2 +view('dialog', 'Dialog') 2 +view('dialog', 'Dialog')
3 .c-box 3 .c-box
4 +backdrop 4 +backdrop
5 +dialog('Lorem ipsum') 5 +dialog('Lorem ipsum')(flat=true)
6 +slot('body') 6 +slot('body')
7 = loremIpsum 7 = loremIpsum
8 8
@@ -18,9 +18,7 @@ mixin view-dialog
18 18
19 .c-box 19 .c-box
20 +backdrop 20 +backdrop
21 +dialog('Tags') 21 +dialog('Tags')(sidebarTitle='#channel')
22 +slot('sidebar-header')
23 +div-heading('sm')(class='o-dialog__label')= '#channel'
24 +slot('sidebar') 22 +slot('sidebar')
25 +menu(style={ 'min-width': '10em' }) 23 +menu(style={ 'min-width': '10em' })
26 +menu-item(icon='bookmark')= 'Bookmark' 24 +menu-item(icon='bookmark')= 'Bookmark'
@@ -44,12 +42,11 @@ mixin view-dialog
44 +backdrop 42 +backdrop
45 +dialog 43 +dialog
46 +slot('header') 44 +slot('header')
47 .l-card.l-card--flush 45 .l-card__block.l-flex
48 .l-card__block.l-flex 46 +action-button(quiet=true icon='chevron-left')
49 +action-button(quiet=true icon='chevron-left') 47 +action-button(quiet=true icon='chevron-right')
50 +action-button(quiet=true icon='chevron-right') 48 .l-card__block.l-card__block--main
51 .l-card__block.l-card__block--main 49 +div-heading('sm')= 'Tags'
52 +div-heading('sm')= 'Tags'
53 +slot('sidebar') 50 +slot('sidebar')
54 +menu(style={ 'min-width': '10em' }) 51 +menu(style={ 'min-width': '10em' })
55 +menu-item(icon='bookmark')= 'Bookmark' 52 +menu-item(icon='bookmark')= 'Bookmark'