add form markup

This commit is contained in:
flynn 2019-01-12 00:46:19 +01:00
parent c32ae39b31
commit c607f0928c

View file

@ -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>