add form markup
This commit is contained in:
flynn
parent
c32ae39b31
commit
c607f0928c
1 changed files with 113 additions and 97 deletions
|
|
@ -9,69 +9,77 @@
|
||||||
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">
|
|
||||||
Hello World
|
|
||||||
</h1>
|
|
||||||
<p class="subtitle">
|
|
||||||
My first website with <strong>Bulma</strong>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div id="navbar"></div>
|
<div id="navbar"></div>
|
||||||
<div id="raw">
|
<section class="section">
|
||||||
<div id="view"></div>
|
<div id="view"></div>
|
||||||
<div id="chart"></div>
|
</section>
|
||||||
<div class="section">
|
<section class="section">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<h3 class="title is-3">Little humans</h3>
|
<h3 class="title is-3">Little humans</h3>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="subtitle is-3">Add human</h3>
|
<h3 class="subtitle is-3">Add human</h3>
|
||||||
<form action="/users" method="post">
|
<form action="/users" method="post">
|
||||||
{% csrf-field %}
|
{% csrf-field %}
|
||||||
<label for="name">Name</label><br>
|
<div class="field">
|
||||||
<input type="text" name="name" id="name"><br>
|
<label class="label" for="name">Name</label>
|
||||||
<label for="gender">Gender</label><br>
|
<div class="control">
|
||||||
<input type="text" name="gender" id="gender">
|
<input class="input" type="text" name="name" id="name" placeholder="Foo bar">
|
||||||
<input class="button" type="submit" value="Submit">
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</div>
|
<div class="field">
|
||||||
<table class="table">
|
<label class="label" for="gender">Gender</label>
|
||||||
<thead>
|
<div class="control">
|
||||||
<tr>
|
<input class="input" type="text" name="gender" id="gender" placeholder="racetrack">
|
||||||
<th>Name</th>
|
|
||||||
<th>Gender</th>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
</thead>
|
<div class="field">
|
||||||
<tbody>
|
<div class="control">
|
||||||
{% for user in users %}
|
<input class="button is-link" type="submit" value="Submit">
|
||||||
<tr>
|
</div>
|
||||||
<td>{{user.name}}</td>
|
</div>
|
||||||
<td>{{user.gender}}</td>
|
</form>
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<table class="table">
|
||||||
<h3 class="title is-3">Cozy cuddles</h3>
|
<thead>
|
||||||
<div>
|
<tr>
|
||||||
<h3 class="subtitle is-3">Add relation</h3>
|
<th>Name</th>
|
||||||
<form action="/relations" method="post">
|
<th>Gender</th>
|
||||||
{% csrf-field %}
|
</tr>
|
||||||
<div class="input-container">
|
</thead>
|
||||||
<div class="input-item">
|
<tbody>
|
||||||
<label for="from">Person from</label><br>
|
{% for user in users %}
|
||||||
|
<tr>
|
||||||
|
<td>{{user.name}}</td>
|
||||||
|
<td>{{user.gender}}</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<h3 class="title is-3">Cozy cuddles</h3>
|
||||||
|
<div>
|
||||||
|
<h3 class="subtitle is-3">Add relation</h3>
|
||||||
|
<form action="/relations" method="post">
|
||||||
|
{% csrf-field %}
|
||||||
|
<div class="field">
|
||||||
|
<label for="from">Person from</label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select">
|
||||||
<select name="from_id" id="from">
|
<select name="from_id" id="from">
|
||||||
{% for user in users %}
|
{% for user in users %}
|
||||||
<option value="{{user.id}}">{{user.name}}</option>
|
<option value="{{user.id}}">{{user.name}}</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="input-item">
|
</div>
|
||||||
<label for="to">Person to</label><br>
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="to">Person to</label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select">
|
||||||
<select name="to_id" id="to">
|
<select name="to_id" id="to">
|
||||||
{% for user in users %}
|
{% for user in users %}
|
||||||
<option value="{{user.id}}">{{user.name}}</option>
|
<option value="{{user.id}}">{{user.name}}</option>
|
||||||
|
|
@ -79,51 +87,59 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input class="button" type="submit" value="Submit">
|
</div>
|
||||||
</form>
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<input class="button is-link" type="submit" value="Submit">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<table class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Person 1</th>
|
||||||
|
<th>Person 2</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for relation in relations %}
|
||||||
|
<tr>
|
||||||
|
<td>{{relation.name}}</td>
|
||||||
|
<td>{{relation.name_2}}</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="section">
|
||||||
|
<div id="app">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="card-deck">
|
||||||
|
<div class="card-block">
|
||||||
|
<h4>Welcome to cat</h4>
|
||||||
|
<p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>
|
||||||
|
<p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.
|
||||||
|
</p>
|
||||||
|
<h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Open DevTools
|
||||||
|
<li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1
|
||||||
|
>
|
||||||
|
General > Console)
|
||||||
|
<li>Check-in "Enable custom formatters"
|
||||||
|
<li>Close DevTools
|
||||||
|
<li>Open DevTools
|
||||||
|
</ul>
|
||||||
|
<p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for
|
||||||
|
further details.</p>
|
||||||
</div>
|
</div>
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Person 1</th>
|
|
||||||
<th>Person 2</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for relation in relations %}
|
|
||||||
<tr>
|
|
||||||
<td>{{relation.name}}</td>
|
|
||||||
<td>{{relation.name_2}}</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div id="app">
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="card-deck">
|
|
||||||
<div class="card-block">
|
|
||||||
<h4>Welcome to cat</h4>
|
|
||||||
<p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>
|
|
||||||
<p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.</p>
|
|
||||||
<h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Open DevTools
|
|
||||||
<li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 >
|
|
||||||
General > Console)
|
|
||||||
<li>Check-in "Enable custom formatters"
|
|
||||||
<li>Close DevTools
|
|
||||||
<li>Open DevTools
|
|
||||||
</ul>
|
|
||||||
<p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for
|
|
||||||
further details.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- scripts and styles -->
|
<!-- scripts and styles -->
|
||||||
{% style "/assets/bootstrap/css/bootstrap.min.css" %}
|
{% style "/assets/bootstrap/css/bootstrap.min.css" %}
|
||||||
|
|
@ -138,8 +154,8 @@
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var csrfToken = "{{csrf-token}}";
|
var csrfToken = "{{csrf-token}}";
|
||||||
</script>
|
</script>
|
||||||
{% script "/js/app.js" %}
|
<!--{% script "/js/app.js" %}-->
|
||||||
|
|
||||||
<!--{% script "/js/graphing.js" %}-->
|
{% script "/js/graphing.js" %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue