testing out vue stuff
This commit is contained in:
parent
e59b1f09c4
commit
0782be6f92
@ -1,4 +1,5 @@
|
||||
import classes from '../styles/atat.scss'
|
||||
import Vue from 'vue/dist/vue'
|
||||
|
||||
import './example'
|
||||
|
||||
|
@ -15,25 +15,28 @@
|
||||
</head>
|
||||
<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'>
|
||||
{% include 'navigation/global_navigation.html' %}
|
||||
<div class='global-layout'>
|
||||
{% include 'navigation/global_navigation.html' %}
|
||||
|
||||
<div class='global-panel-container'>
|
||||
{% block sidenav %}{% endblock %}
|
||||
<div class='global-panel-container'>
|
||||
{% block sidenav %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
these are not the droids you are looking for
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
these are not the droids you are looking for
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
|
||||
{% block modal %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% include 'footer.html' %}
|
||||
|
||||
{% block modal %}{% endblock %}
|
||||
{% assets "js_all" %}
|
||||
<script src="{{ ASSET_URL }}"></script>
|
||||
{% endassets %}
|
||||
|
@ -1,9 +1,23 @@
|
||||
{% macro Modal() -%}
|
||||
<div class='modal'>
|
||||
<div class='modal__dialog' role='dialog' aria-modal='true'>
|
||||
<div class='modal__body'>
|
||||
{{ caller() }}
|
||||
{% from "components/icon.html" import Icon %}
|
||||
|
||||
{% macro Modal(name, dismissable=False) -%}
|
||||
<Modal inline-template ref={{ name }}>
|
||||
<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>
|
||||
</Modal>
|
||||
{%- endmacro %}
|
||||
|
@ -5,7 +5,13 @@
|
||||
<main class="usa-section usa-content">
|
||||
|
||||
<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>
|
||||
|
||||
|
@ -6,7 +6,7 @@
|
||||
|
||||
{% block modal %}
|
||||
{% if g.modalOpen %}
|
||||
{% call Modal() %}
|
||||
{% 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>
|
||||
@ -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>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'
|
||||
) }}
|
||||
|
||||
@ -68,7 +68,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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user