pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working modal component

Browse Source
This commit is contained in:
Patrick Smith
2018-08-06 16:54:12 -04:00
committed by Andrew Croce
parent 0782be6f92
commit b16fe24ddc
4 changed files with 48 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/styleguide.html
View File

@@ -4,31 +4,28 @@
{% from "components/modal.html" import Modal %}
{% from "components/alert.html" import Alert %}
{% block modal %}
{% if g.modalOpen %}
{% call Modal(name='styleguide-modal', dismissable=True) %}
<h1>A modal dialog</h1>
<p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
<p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button'>Close</a>
<a href='/styleguide' class='action-group__action'>This also closes the modal</a>
</div>
{% endcall %}
{% endif %}
{% endblock %}
{% block content %}
{% call Modal(name='styleguideModal', dismissable=True) %}
<h1>A modal dialog</h1>
<p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
<p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
<div class='action-group'>
<a v-on:click="closeModal('styleguideModal')" class='action-group__action usa-button'>Close</a>
<a class='action-group__action' v-on:click="closeModal('styleguideModal')">This also closes the modal</a>
</div>
{% endcall %}
{{ Alert('A Warning Alert',
message="\
<p>This is a message. It is a very important message. Please note, <strong>proper semantic markup is required</strong> here, such as paragraph tags. Don't omit paragraph tags!</p>\
<p>Also note the same for actions below. You'll need to include the full link markup.</p>\
",
actions='<a v-on:click="openModal" href="#">Open a Modal Dialog</a>',
actions='<a v-on:click="openModal(\'styleguideModal\')">Open a Modal Dialog</a>',
level='warning'
) }}