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

testing out vue stuff

Browse Source
This commit is contained in:
Andrew Croce 2018-08-03 16:04:52 -04:00
parent e59b1f09c4
commit 0782be6f92
5 changed files with 45 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/index.js
View File

@ -1,4 +1,5 @@
import classes from '../styles/atat.scss' import classes from '../styles/atat.scss'
import Vue from 'vue/dist/vue'
import './example' import './example'

27
templates/base.html
View File

@ -15,25 +15,28 @@
</head> </head>
<body class="{% if g.modalOpen %} modalOpen{% endif %}"> <body class="{% if g.modalOpen %} modalOpen{% endif %}">
{% block template_vars %}{% endblock %} <div id='vue-root'>
{% block template_vars %}{% endblock %}
{% include 'navigation/topbar.html' %} {% include 'navigation/topbar.html' %}
<div class='global-layout'> <div class='global-layout'>
{% include 'navigation/global_navigation.html' %} {% include 'navigation/global_navigation.html' %}
<div class='global-panel-container'> <div class='global-panel-container'>
{% block sidenav %}{% endblock %} {% block sidenav %}{% endblock %}
{% block content %} {% block content %}
these are not the droids you are looking for these are not the droids you are looking for
{% endblock %} {% endblock %}
</div>
</div> </div>
{% include 'footer.html' %}
{% block modal %}{% endblock %}
</div> </div>
{% include 'footer.html' %}
{% block modal %}{% endblock %}
{% assets "js_all" %} {% assets "js_all" %}
<script src="{{ ASSET_URL }}"></script> <script src="{{ ASSET_URL }}"></script>
{% endassets %} {% endassets %}

26
templates/components/modal.html
View File

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

8
templates/home.html
View File

@ -5,7 +5,13 @@
<main class="usa-section usa-content"> <main class="usa-section usa-content">
<h1>Home</h1> <h1>Home</h1>
<div id='hello'></div>
<TextInput inline-template>
<div class='usa-input'>
<label for='some-input'></label>
<input type='text' id='some-input' v-on:change='handleChange'/>
</div>
</TextInput>
</main> </main>

5
templates/styleguide.html
View File

@ -6,7 +6,7 @@
{% block modal %} {% block modal %}
{% if g.modalOpen %} {% if g.modalOpen %}
{% call Modal() %} {% call Modal(name='styleguide-modal', dismissable=True) %}
<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>
@ -28,7 +28,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>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 v-on:click="openModal" href="#">Open a Modal Dialog</a>',
level='warning' level='warning'
) }} ) }}
@ -68,7 +68,6 @@
</nav> </nav>
<div class='col col--grow'> <div class='col col--grow'>
<div class="progress-menu progress-menu--three"> <div class="progress-menu progress-menu--three">
<ul> <ul>
<li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li> <li class="progress-menu__item progress-menu__item--complete"><a href="#">Step One</a></li>