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

Merge pull request #89 from dod-ccpo/ui/modal-dialogs

Browse Source 
Ui/modal dialogs
This commit is contained in:
andrewdds
2018-07-24 09:40:54 -04:00
committed by GitHub
parent 220c4a649d 788753f2db
commit 0a3c1a00df
11 changed files with 117 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/base.html.to
View File

@@ -13,7 +13,7 @@
{% end %}
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
</head>
<body>
<body class="{% if modalOpen() %} modalOpen{% end %}">
{% include 'navigation/topbar.html.to' %}
<div class='global-layout'>
@@ -29,6 +29,8 @@
</div>
{% include 'footer.html.to' %}
{% block modal %}{% end %}
</body>
</html>

7
templates/components/modal.html.to Normal file
View File

@@ -0,0 +1,7 @@
<div class='modal'>
<div class='modal__dialog' role='dialog' aria-modal='true'>
<div class='modal__body'>
{% raw body %}
</div>
</div>
</div>

24
templates/styleguide.html.to
View File

@@ -1,5 +1,22 @@
{% extends "base.html.to" %}
{% block modal %}
{% if modalOpen() %}
{% apply modal %}
<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>
{% end %}
{% end %}
{% end %}
{% block content %}
{% module Alert('A Warning Alert',
@@ -7,7 +24,7 @@
<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 href='/styleguide'>Do something</a>",
actions="<a href='/styleguide?modal=True'>Open a Modal Dialog</a>",
level='warning'
) %}
@@ -191,5 +208,10 @@
</tr>
</tbody>
</table>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button usa-button-big'>Action Group Button</a>
<a href='/styleguide' class='action-group__action'>Action group link</a>
</div>
</div>
{% end %}