From 5e2696d9ae35b37a9f7d0fe1c52b93fb84570464 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 25 Mar 2022 18:29:21 +0100 Subject: Split demo in :target views --- tpl/index.pug | 736 +++++----------------------------------------------------- 1 file changed, 62 insertions(+), 674 deletions(-) (limited to 'tpl/index.pug') diff --git a/tpl/index.pug b/tpl/index.pug index 7c0c3ff..400ec64 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -1,5 +1,8 @@ - - let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; + const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'; + + const views = []; + include layouts/container.pug @@ -25,8 +28,13 @@ include objects/list-group.pug include objects/table.pug include objects/alert.pug -mixin box - +container(padX=true padY=true inPage=true) +mixin view(id, title) + - + views.push({ id, title }); + + +container(padX=true padY=true narrow=true)(class='c-view' id=id) + +h1-heading('xl')= title + +rule('medium') block mixin user-card(name, hue) @@ -38,6 +46,29 @@ mixin user-card(name, hue) = avaName = name +include views/heading.pug +include views/rule.pug +include views/colored-links.pug +include views/badge.pug +include views/button.pug +include views/text-field.pug +include views/field-label.pug +include views/radio.pug +include views/checkbox.pug +include views/switch.pug +include views/form.pug +include views/action-button.pug +include views/status-indicator.pug +include views/avatar.pug +include views/action-menu.pug +include views/menu.pug +include views/backdrop.pug +include views/dialog.pug +include views/lightbox.pug +include views/list-group.pug +include views/table.pug +include views/alert.pug + doctype html html @@ -49,674 +80,31 @@ html script(src="script.js") body - +container(padX=true padY=true narrow=true) - - +h1-heading('xl')= 'Heading' - +rule('medium') - - +box - +div-heading('xxl')= 'XXL Heading' - +div-heading('xl')= 'XL Heading' - +div-heading('lg')= 'LG Heading' - +div-heading('md')= 'MD Heading' - +div-heading('sm')= 'SM Heading' - +div-heading('xs')= 'XS Heading' - - //----------------------------------------- - - +h1-heading('xl')= 'Rule' - +rule('medium') - - +box - +div-heading('lg')= 'Heading' - +rule('strong') - p= loremIpsum - - +box - +div-heading('sm')= 'Heading' - +rule('medium') - p= loremIpsum - - +box - +div-heading('xs')= 'Heading' - +rule('faint') - p= loremIpsum - - +box - +rule('strong')= 'Strong' - +rule('medium')= 'Medium' - +rule('faint')= 'Faint' - - //----------------------------------------- - - +h1-heading('xl')= 'Colored links' - +rule('medium') - - +box - .s-colored-links - = 'Lorem ipsum dolor ' - a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/' - = ' sit amet, consetetur ' - a(href='https://v.reddit.com/')= 'https://v.reddit.com/' - = ' sadipscing elitr, sed diam nonumy eirmod tempor' - - //----------------------------------------- - - +h1-heading('xl')= 'Badge' - +rule('medium') - - +box - +badge= '100' - = ' ' - +badge('accent')= 'new' - - //----------------------------------------- - - +h1-heading('xl')= 'Button' - +rule('medium') - - +box - .l-button-group - +a-button(variant='accent')= 'Button' - +a-button(variant='accent' disabled=true)= 'Button' - +a-button(variant='accent' outline=true)= 'Button' - +a-button(variant='accent' outline=true disabled=true)= 'Button' - br - .l-button-group - +a-button(variant='primary')= 'Button' - +a-button(variant='primary' disabled=true)= 'Button' - +a-button(variant='primary' outline=true)= 'Button' - +a-button(variant='primary' outline=true disabled=true)= 'Button' - br - .l-button-group - +a-button(variant='secondary')= 'Button' - +a-button(variant='secondary' disabled=true)= 'Button' - +a-button(variant='secondary' outline=true)= 'Button' - +a-button(variant='secondary' outline=true disabled=true)= 'Button' - - //----------------------------------------- - - +h1-heading('xl')= 'Text field' - +rule('medium') - - +box - div(style={ display: 'flex', gap: '1rem' }) - +text-field(placeholder='Placeholder') - +text-field(value='Just landed in L.A.') - +text-field(value='Readonly' readonly=true) - +text-field(value='Incorrect input' pattern='a+' required=true) - br - div(style={ display: 'flex', gap: '1rem' }) - +text-field(placeholder='Placeholder' disabled=true) - +text-field(value='Just landed in L.A.' disabled=true) - +text-field(value='Readonly' readonly=true disabled=true) - +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) - br - div - +text-field(placeholder='Just landed in L.A.') - +slot('pre') - +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' - +slot('post') - +action-button(quiet=true icon='smile' class='l-card__block') - +action-button(quiet=true icon='send' class='l-card__block') - - //----------------------------------------- - - +h1-heading('xl')= 'Field label' - +rule('medium') - - +box - +field-label('First name') - +text-field(placeholder='Placeholder') - br - +field-label('Password', 'At least 6 characters required') - +text-field(placeholder='Placeholder' type='password') - br - +field-label('Password', 'At least 6 characters required')(invalid=true) - +text-field(placeholder='Placeholder' type='password' invalid=true) - br - +field-label('First name')(disabled=true) - +text-field(placeholder='Placeholder' disabled=true) - br - +field-label('Password', 'At least 6 characters required')(disabled=true) - +text-field(placeholder='Placeholder' type='password' disabled=true) - br - +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true) - +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) - - +box - +field-label('First name')(align='left' labelWidth='100px') - +text-field(placeholder='Placeholder') - br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') - +text-field(placeholder='Placeholder' type='password') - br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) - +text-field(placeholder='Placeholder' type='password' invalid=true) - br - +field-label('First name')(align='left' labelWidth='100px' disabled=true) - +text-field(placeholder='Placeholder' disabled=true) - br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) - +text-field(placeholder='Placeholder' type='password' disabled=true) - br - +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) - +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) - - +box - +field-label('First name')(align='right' labelWidth='100px') - +text-field(placeholder='Placeholder') - br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') - +text-field(placeholder='Placeholder' type='password') - br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) - +text-field(placeholder='Placeholder' type='password' invalid=true) - br - +field-label('First name')(align='right' labelWidth='100px' disabled=true) - +text-field(placeholder='Placeholder' disabled=true) - br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) - +text-field(placeholder='Placeholder' type='password' disabled=true) - br - +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) - +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) - - //----------------------------------------- - - +h1-heading('xl')= 'Radio' - +rule('medium') - - +box - +radio(name="radio-demo-1")= 'Cats' - +radio(name="radio-demo-1")= 'Dogs' - +radio(name="radio-demo-1" checked=true)= 'Foxes' - br - +radio(name="radio-demo-2" disabled=true)= 'Cats' - +radio(name="radio-demo-2" disabled=true)= 'Dogs' - +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes' - br - +radio(accent=true name="radio-demo-3")= 'Cats' - +radio(accent=true name="radio-demo-3")= 'Dogs' - +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes' - br - +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats' - +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs' - +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes' - - //----------------------------------------- - - +h1-heading('xl')= 'Checkbox' - +rule('medium') - - +box - +checkbox(indeterminate=true)= 'Cats' - +checkbox= 'Dogs' - +checkbox(checked=true)= 'Foxes' - br - +checkbox(indeterminate=true disabled=true)= 'Cats' - +checkbox(disabled=true)= 'Dogs' - +checkbox(checked=true disabled=true)= 'Foxes' - br - +checkbox(accent=true indeterminate=true)= 'Cats' - +checkbox(accent=true)= 'Dogs' - +checkbox(accent=true checked=true)= 'Foxes' - br - +checkbox(accent=true indeterminate=true disabled=true)= 'Cats' - +checkbox(accent=true disabled=true)= 'Dogs' - +checkbox(accent=true checked=true disabled=true)= 'Foxes' - - //----------------------------------------- - - +h1-heading('xl')= 'Switch' - +rule('medium') - - +box - +switch= 'Cats' - +switch= 'Dogs' - +switch(checked=true)= 'Foxes' - br - +switch(disabled=true)= 'Cats' - +switch(disabled=true)= 'Dogs' - +switch(checked=true disabled=true)= 'Foxes' - br - +switch(accent=true)= 'Cats' - +switch(accent=true)= 'Dogs' - +switch(accent=true checked=true)= 'Foxes' - br - +switch(accent=true disabled=true)= 'Cats' - +switch(accent=true disabled=true)= 'Dogs' - +switch(accent=true checked=true disabled=true)= 'Foxes' - - //----------------------------------------- - - +h1-heading('xl')= 'Form' - +rule('medium') - - +box - +form(labelsAlign="left") - +form-item('Username') - +text-field(placeholder='Example: Volpeon') - - +form-item('Password', 'At least 6 characters, all characters allowed') - +text-field(placeholder='Example: hunter2' type='password') - - +form-item('Bio') - +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') - - +form-item('Favorite animal') - +radio(name="form-demo-1" checked=true)= 'Foxes' - +radio(name="form-demo-1")= 'Other' - - +form-item('Notification settings') - +switch= 'In-app notifications' - br - +switch= 'Desktop notifications' - br - +switch= 'Email notifications' - - +form-item('') - +checkbox= 'I\'ve read and accept the terms and conditions' - - +form-item('') - +a-button(variant='primary')= 'Register' - - //----------------------------------------- - - +h1-heading('xl')= 'Action button' - +rule('medium') - - +box - +action-button= 'Idle' - = ' ' - +action-button(selected=true)= 'Selected' - = ' ' - +action-button(disabled=true)= 'Disabled' - = ' ' - +action-button(selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(icon='trash')= 'Idle' - = ' ' - +action-button(icon='trash' selected=true)= 'Selected' - = ' ' - +action-button(icon='trash' disabled=true)= 'Disabled' - = ' ' - +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(icon='trash') - = ' ' - +action-button(icon='trash' selected=true) - = ' ' - +action-button(icon='trash' disabled=true) - = ' ' - +action-button(icon='trash' selected=true disabled=true) - - +box - +action-button(quiet=true )= 'Idle' - = ' ' - +action-button(quiet=true selected=true)= 'Selected' - = ' ' - +action-button(quiet=true disabled=true)= 'Disabled' - = ' ' - +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(quiet=true icon='trash')= 'Idle' - = ' ' - +action-button(quiet=true icon='trash' selected=true)= 'Selected' - = ' ' - +action-button(quiet=true icon='trash' disabled=true)= 'Disabled' - = ' ' - +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled' - br - br - +action-button(quiet=true icon='trash') - = ' ' - +action-button(quiet=true icon='trash' selected=true) - = ' ' - +action-button(quiet=true icon='trash' disabled=true) - = ' ' - +action-button(quiet=true icon='trash' selected=true disabled=true) - - //----------------------------------------- - - +h1-heading('xl')= 'Status indicator' - +rule('medium') - - +box - +status-indicator - = ' ' - +status-indicator('green') - = ' ' - +status-indicator('yellow') - = ' ' - +status-indicator('red') - - //----------------------------------------- - - +h1-heading('xl')= 'Avatar' - +rule('medium') - - +box - div(style={ display: 'flex', gap: '.3em' }) - +avatar - = 'Vo' - +avatar(status='green' hue=45) - = 'lp' - +avatar(src='avatar.png') - +avatar(src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='75' hue=90) - = 'eo' - +avatar(size='75' status='green' hue=135) - = 'n' - +avatar(size='75' src='avatar.png') - +avatar(size='75' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(size='50' hue=180) - = 'V' - +avatar(size='50' hue=225) - = 'o' - +avatar(size='50' src='avatar.png') - - +box - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true) - = 'Vo' - +avatar(circle=true status='green' hue=45) - = 'lp' - +avatar(circle=true src='avatar.png') - +avatar(circle=true src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='75' hue=90) - = 'eo' - +avatar(circle=true size='75' status='green' hue=135) - = 'n' - +avatar(circle=true size='75' src='avatar.png') - +avatar(circle=true size='75' src='avatar.png' status='red') - br - br - div(style={ display: 'flex', gap: '.3em' }) - +avatar(circle=true size='50' hue=180) - = 'V' - +avatar(circle=true size='50' hue=225) - = 'o' - +avatar(circle=true size='50' src='avatar.png') - - //----------------------------------------- - - +h1-heading('xl')= 'Action menu' - +rule('medium') - - +box - div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) - +action-button(quiet=true selected=true)= 'Menu' - +action-menu - +action-menu-slot(class='l-card l-card--flush') - +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block') - .l-card__block.l-card__block--main - strong.u-d-block= 'Volpeon' - small.u-d-block= '@volpeon@mk.vulpes.one' - +action-menu-separator - +action-menu-item(icon='user')= 'View profile' - +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' - +action-menu-separator - +action-menu-item(icon='trash' disabled=true)= 'Delete' - +action-menu-item(icon='bookmark')= 'Bookmark' - +action-menu-item(icon='tags')= 'Tags' - +action-menu-item(postIcon='chevron-right')= 'More' - - //----------------------------------------- - - +h1-heading('xl')= 'Menu' - +rule('medium') - - +box - div(style={ display: 'flex', gap: '3rem' }) - +menu - +menu-header= 'Category 1' - +menu-item= 'Mark as away' - +menu-item= 'Delete' - +menu-separator - +menu-header= 'Category 2' - +menu-item(icon='bookmark')= 'Bookmark' - +menu-item(icon='tags')= 'Tags' - - +menu - +menu-item - strong= 'Bouncer' - +menu-separator - +menu-item - strong= 'Libera' - +menu-item(icon='hash')= 'achannel' - +menu-item(icon='hash')= 'kitsuneirc' - +menu-item(icon='green' iconIsStatus=true)= 'volpeon' - +menu-item(icon='red' iconIsStatus=true)= 'someone' - +menu-separator - +menu-item - strong= 'Ergo Testnet' - +menu-separator - +menu-item - strong= 'NixNet' - - +menu - +menu-header= 'Operators' - +menu-item - +user-card('volpeon', 0) - +menu-item - +user-card('curiousfox', 90) - +menu-separator - +menu-header= 'Moderators' - +menu-item - +user-card('user3567', 135) - +menu-item - +user-card('johndoe', 270) - - //----------------------------------------- - - +h1-heading('xl')= 'Backdrop' - +rule('medium') - - +box - +backdrop - - //----------------------------------------- - - +h1-heading('xl')= 'Dialog' - +rule('medium') - - +box - +backdrop - +dialog('Lorem ipsum') - +slot('body') - = loremIpsum - - +box - +backdrop - +dialog('Lorem ipsum')(bodyClass='l-overflow') - +slot('body') - p.u-mt-0= loremIpsum - p= loremIpsum - p= loremIpsum - p= loremIpsum - p= loremIpsum - - +box - +backdrop - +dialog('Lorem ipsum')(noRule=true) - +slot('sidebar') - +menu(style={ 'min-width': '10em' }) - +menu-header= '#channel' - +menu-item(icon='bookmark')= 'Bookmark' - +menu-item(icon='tags', selected=true)= 'Tags' - +menu-item(icon='hash')= 'achannel' - +slot('body') - p.u-mt-0= loremIpsum - - //----------------------------------------- - - +h1-heading('xl')= 'Lightbox' - +rule('medium') - - +box - +backdrop(class='t-dark') - +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" - - //----------------------------------------- - - +h1-heading('xl')= 'List group' - +rule('medium') - - +box - +list-group - +list-group-item= 'First item' - +list-group-item= 'Second item' - +list-group-item= 'Third item' - +list-group-item= 'Fourth item' - - +box - +list-group - +list-group-item(action=true)= 'First item' - +list-group-item(action=true)= 'Second item' - +list-group-item(action=true)= 'Third item' - +list-group-item(action=true)= 'Fourth item' - - //----------------------------------------- - - +h1-heading('xl')= 'Table' - +rule('medium') - - +box - +table(interactive=true) - +table-head - +table-row - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-body - +table-row - +table-cell= 'Row 1,1' - +table-cell= 'Row 1,2' - +table-cell= 'Row 1,3' - +table-row - +table-cell= 'Row 2,1' - +table-cell= 'Row 2,2' - +table-cell= 'Row 2,3' - +table-row - +table-cell= 'Row 3,1' - +table-cell= 'Row 3,2' - +table-cell= 'Row 3,3' - +table-row - +table-cell= 'Row 4,1' - +table-cell= 'Row 4,2' - +table-cell= 'Row 4,3' - - +box - +table(flush=true) - +table-head - +table-row - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-body - +table-row - +table-cell= 'Row 1,1' - +table-cell= 'Row 1,2' - +table-cell= 'Row 1,3' - +table-row - +table-cell= 'Row 2,1' - +table-cell= 'Row 2,2' - +table-cell= 'Row 2,3' - +table-row - +table-cell= 'Row 3,1' - +table-cell= 'Row 3,2' - +table-cell= 'Row 3,3' - +table-row - +table-cell= 'Row 4,1' - +table-cell= 'Row 4,2' - +table-cell= 'Row 4,3' - - +box - +table(box=true) - +table-head - +table-row - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-body - +table-row - +table-cell(divider=true)= 'Row 1,1' - +table-cell= 'Row 1,2' - +table-cell= 'Row 1,3' - +table-row - +table-cell(divider=true)= 'Row 2,1' - +table-cell= 'Row 2,2' - +table-cell= 'Row 2,3' - +table-row - +table-cell(divider=true)= 'Row 3,1' - +table-cell= 'Row 3,2' - +table-cell= 'Row 3,3' - +table-row - +table-cell(divider=true)= 'Row 4,1' - +table-cell= 'Row 4,2' - +table-cell= 'Row 4,3' - - +box - +table(box=true, size50=true) - +table-head - +table-row - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-head-cell= 'Title' - +table-body - +table-row - +table-cell= 'Row 1,1' - +table-cell= 'Row 1,2' - +table-cell= 'Row 1,3' - +table-row - +table-cell= 'Row 2,1' - +table-cell= 'Row 2,2' - +table-cell= 'Row 2,3' - +table-row - +table-cell= 'Row 3,1' - +table-cell= 'Row 3,2' - +table-cell= 'Row 3,3' - +table-row - +table-cell= 'Row 4,1' - +table-cell= 'Row 4,2' - +table-cell= 'Row 4,3' - - //----------------------------------------- - - +h1-heading('xl')= 'Alert' - +rule('medium') - - +box - +alert= loremIpsum - br - +alert('primary')= loremIpsum - br - +alert('error')= loremIpsum - br - +alert('success')= loremIpsum - br - +alert('warning')= loremIpsum - - + .c-content + +view-heading + +view-rule + +view-colored-links + +view-badge + +view-button + +view-text-field + +view-field-label + +view-radio + +view-checkbox + +view-switch + +view-form + +view-action-button + +view-status-indicator + +view-avatar + +view-action-menu + +view-menu + +view-backdrop + +view-dialog + +view-lightbox + +view-list-group + +view-table + +view-alert + + .c-sidebar + +menu + each view in views + +menu-item(tag='a' href='#' + view.id)= view.title -- cgit v1.2.3-70-g09d2