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

Fix styleguide route and template

Browse Source
This commit is contained in:
richard-dds 2018-08-02 13:34:05 -04:00
parent 44d1f56f67
commit 9b3bedeb8f
2 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
atst/routes/__init__.py
View File

@ -9,3 +9,8 @@ bp = Blueprint("atst", __name__)
@bp.route("/") @bp.route("/")
def home(): def home():
return render_template("home.html") return render_template("home.html")
@bp.route("/styleguide")
def styleguide():
return render_template("styleguide.html")

90
templates/styleguide.html.to → templates/styleguide.html
View File

@ -1,8 +1,10 @@
{% extends "base.html.to" %} {% extends "base.html" %}
{% from "components.html" import Alert, Modal, Icon %}
{% block modal %} {% block modal %}
{% if modalOpen() %} {% if g.modalOpen %}
{% apply modal %} {% call Modal() %}
<h1>A modal dialog</h1> <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>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>
@ -12,35 +14,35 @@
<a href='/styleguide' class='action-group__action usa-button'>Close</a> <a href='/styleguide' class='action-group__action usa-button'>Close</a>
<a href='/styleguide' class='action-group__action'>This also closes the modal</a> <a href='/styleguide' class='action-group__action'>This also closes the modal</a>
</div> </div>
{% end %} {% endcall %}
{% end %} {% endif %}
{% end %} {% endblock %}
{% block content %} {% block content %}
{% module Alert('A Warning Alert', {{ Alert('A Warning Alert',
message="\ 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>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>\ <p>Also note the same for actions below. You'll need to include the full link markup.</p>\
", ",
actions="<a href='/styleguide?modal=True'>Open a Modal Dialog</a>", actions="<a href='/styleguide?modal=True'>Open a Modal Dialog</a>",
level='warning' level='warning'
) %} ) }}
{% module Alert('A Success Alert', {{ Alert('A Success Alert',
message="<p>Congratulations! You did a thing.</p>", message="<p>Congratulations! You did a thing.</p>",
level='success' level='success'
) %} ) }}
{% module Alert('An Error Alert', {{ Alert('An Error Alert',
message="<p>Booooo. You're the worst.</p>", message="<p>Booooo. You're the worst.</p>",
level='error' level='error'
) %} ) }}
{% module Alert('An Info Alert', {{ Alert('An Info Alert',
message="<p>The more you know.</p>" message="<p>The more you know.</p>"
) %} ) }}
<nav class='sidenav'> <nav class='sidenav'>
<ul> <ul>
@ -146,7 +148,7 @@
<span class='usa-input__help'> <span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out. This is some help text to explain what this form field is and why you should fill it out.
</span> </span>
{% module Icon('alert') %} {{ Icon('alert') }}
</label> </label>
<input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-invalid='true' aria-describedby='basic-text-2__errors'/> <input id='basic-text-2' type='text' placeholder='this is a sample of what you should enter' aria-invalid='true' aria-describedby='basic-text-2__errors'/>
<span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span> <span id='basic-text-2__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
@ -158,7 +160,7 @@
<span class='usa-input__help'> <span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out. This is some help text to explain what this form field is and why you should fill it out.
</span> </span>
{% module Icon('alert') %} {{ Icon('alert') }}
</label> </label>
<input id='basic-text-3' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-3__errors'/> <input id='basic-text-3' type='text' placeholder='this is a sample of what you should enter' aria-describedby='basic-text-3__errors'/>
<span id='basic-text-3__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span> <span id='basic-text-3__errors' class='usa-input__message'>Oh boy you really screwed up big time, didn't you!</span>
@ -170,7 +172,7 @@
<span class='usa-input__help'> <span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out. This is some help text to explain what this form field is and why you should fill it out.
</span> </span>
{% module Icon('ok') %} {{ Icon('ok') }}
</label> </label>
<input id='basic-text-4' type='text' placeholder='this is a sample of what you should enter'/> <input id='basic-text-4' type='text' placeholder='this is a sample of what you should enter'/>
</div> </div>
@ -214,7 +216,7 @@
<div class='form-col'> <div class='form-col'>
<div class='usa-input usa-input--error'> <div class='usa-input usa-input--error'>
<fieldset class='usa-input__choices usa-input__choices--inline'> <fieldset class='usa-input__choices usa-input__choices--inline'>
<legend>Inline Checkboxes {% module Icon('alert') %}</legend> <legend>Inline Checkboxes {{ Icon('alert') }}</legend>
<input type='checkbox' id='checkbox-4'/> <input type='checkbox' id='checkbox-4'/>
<label for='checkbox-4'>Checkbox Four</label> <label for='checkbox-4'>Checkbox Four</label>
@ -234,7 +236,7 @@
<div class='form-col'> <div class='form-col'>
<div class='usa-input usa-input--error'> <div class='usa-input usa-input--error'>
<fieldset class='usa-input__choices' > <fieldset class='usa-input__choices' >
<legend>Problem Radio Buttons {% module Icon('alert') %}</legend> <legend>Problem Radio Buttons {{ Icon('alert') }}</legend>
<input type='radio' name='radio' id='radio-1' /> <input type='radio' name='radio' id='radio-1' />
<label for='radio-1'>Radio One</label> <label for='radio-1'>Radio One</label>
@ -279,30 +281,30 @@
<div class='panel'> <div class='panel'>
<div class='panel__content'> <div class='panel__content'>
<h5>Icons</h5> <h5>Icons</h5>
<span class='nowrap'>{% module Icon('trash') %} 'trash'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('trash') }} 'trash'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('document') %} 'document'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('document') }} 'document'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('cloud') %} 'cloud'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('cloud') }} 'cloud'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('chart') %} 'chart'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('chart') }} 'chart'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_up') %} 'caret_up'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('caret_up') }} 'caret_up'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_down') %} 'caret_down'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('caret_down') }} 'caret_down'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_right') %} 'caret_right'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('caret_right') }} 'caret_right'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('caret_left') %} 'caret_left'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('caret_left') }} 'caret_left'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('x') %} 'x'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('x') }} 'x'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('search') %} 'search'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('search') }} 'search'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('avatar') %} 'avatar'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('avatar') }} 'avatar'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('download') %} 'download'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('download') }} 'download'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('briefcase') %} 'briefcase'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('briefcase') }} 'briefcase'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('bell') %} 'bell'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('bell') }} 'bell'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('folder') %} 'folder'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('folder') }} 'folder'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('help') %} 'help'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('help') }} 'help'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('shield') %} 'shield'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('shield') }} 'shield'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('info') %} 'info'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('info') }} 'info'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('alert') %} 'alert'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('alert') }} 'alert'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('link') %} 'link'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('link') }} 'link'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('ok') %} 'ok'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('ok') }} 'ok'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('checkmark') %} 'checkmark'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('checkmark') }} 'checkmark'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('arrow-right') %} 'arrow-right'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('arrow-right') }} 'arrow-right'&nbsp;&nbsp;&nbsp;</span>
<span class='nowrap'>{% module Icon('arrow-down') %} 'arrow-down'&nbsp;&nbsp;&nbsp;</span> <span class='nowrap'>{{ Icon('arrow-down') }} 'arrow-down'&nbsp;&nbsp;&nbsp;</span>
</div> </div>
</div> </div>
@ -360,4 +362,4 @@
<a href='/styleguide' class='action-group__action'>Action group link</a> <a href='/styleguide' class='action-group__action'>Action group link</a>
</div> </div>
</div> </div>
{% end %} {% endblock %}