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

Merge pull request #126 from dod-ccpo/add-vue-for-realz

Browse Source 
testing out vue stuff
This commit is contained in:
andrewdds 2018-08-07 13:14:25 -04:00 committed by GitHub
commit 6c1945a3bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 70 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/example.js
View File

@ -1,4 +0,0 @@
window.onload = function() {
console.log('hello from example')
}

22
js/index.js
View File

@ -1,5 +1,21 @@
import classes from '../styles/atat.scss'
import Vue from 'vue/dist/vue'
import './example'
console.log('hello from index')
const app = new Vue({
el: '#app-root',
methods: {
closeModal: function(name) {
this.modals[name] = false
},
openModal: function (name) {
this.modals[name] = true
}
},
data: function() {
return {
modals: {
styleguideModal: false,
}
}
}
})

2
styles/components/_global_layout.scss
View File

@ -1,4 +1,4 @@
body {
#app-root {
background-color: $color-gray-lightest;
display: flex;
flex-direction: column;

4
styles/core/_util.scss
View File

@ -31,3 +31,7 @@
@mixin line-max {
max-width: 45em;
}
[v-cloak] {
display: none
}

3
templates/base.html
View File

@ -15,6 +15,7 @@
</head>
<body class="{% if g.modalOpen %} modalOpen{% endif %}">
<div id='app-root'>
{% block template_vars %}{% endblock %}
{% include 'navigation/topbar.html' %}
@ -34,6 +35,8 @@
{% include 'footer.html' %}
{% block modal %}{% endblock %}
</div>
{% assets "js_all" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}

14
templates/components/modal.html
View File

@ -1,9 +1,21 @@
{% macro Modal() -%}
{% from "components/icon.html" import Icon %}
{% macro Modal(name, dismissable=False) -%}
<div v-if='modals.{{name}} === true' v-cloak>
<div class='modal'>
<div class='modal__dialog' role='dialog' aria-modal='true'>
{% if dismissable %}
<button class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
{{ Icon('x') }}
<span>Close</span>
</button>
{% endif %}
<div class='modal__body'>
{{ caller() }}
</div>
</div>
</div>
</div>
{%- endmacro %}

1
templates/home.html
View File

@ -5,7 +5,6 @@
<main class="usa-section usa-content">
<h1>Home</h1>
<div id='hello'></div>
</main>

18
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() %}
{% 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 href='/styleguide' class='action-group__action usa-button'>Close</a>
<a href='/styleguide' class='action-group__action'>This also closes the modal</a>
<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 %}
{% endif %}
{% endblock %}
{% block content %}
{{ 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 href='/styleguide?modal=True'>Open a Modal Dialog</a>",
actions='<a v-on:click="openModal(\'styleguideModal\')">Open a Modal Dialog</a>',
level='warning'
) }}
@ -68,7 +65,6 @@
</nav>
<div class='col col--grow'>
<div class="progress-menu progress-menu--three">
<ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>