add form markup

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

View file

@ -9,21 +9,11 @@
<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>
@ -31,11 +21,24 @@
<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>
</div>
<div class="field">
<label class="label" for="gender">Gender</label>
<div class="control">
<input class="input" type="text" name="gender" id="gender" placeholder="racetrack">
</div>
</div>
<div class="field">
<div class="control">
<input class="button is-link" type="submit" value="Submit">
</div>
</div>
</form> </form>
</div> </div>
<table class="table"> <table class="table">
@ -61,17 +64,22 @@
<h3 class="subtitle is-3">Add relation</h3> <h3 class="subtitle is-3">Add relation</h3>
<form action="/relations" method="post"> <form action="/relations" method="post">
{% csrf-field %} {% csrf-field %}
<div class="input-container"> <div class="field">
<div class="input-item"> <label for="from">Person from</label>
<label for="from">Person from</label><br> <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,7 +87,12 @@
</select> </select>
</div> </div>
</div> </div>
<input class="button" type="submit" value="Submit"> </div>
<div class="field">
<div class="control">
<input class="button is-link" type="submit" value="Submit">
</div>
</div>
</form> </form>
</div> </div>
<table class="table"> <table class="table">
@ -100,19 +113,21 @@
</table> </table>
</div> </div>
</div> </div>
</div> </section>
</div> <section class="section">
<div id="app"> <div id="app">
<div class="container-fluid"> <div class="container-fluid">
<div class="card-deck"> <div class="card-deck">
<div class="card-block"> <div class="card-block">
<h4>Welcome to cat</h4> <h4>Welcome to cat</h4>
<p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p> <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> <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> <h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
<ul> <ul>
<li>Open DevTools <li>Open DevTools
<li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > <li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1
>
General > Console) General > Console)
<li>Check-in "Enable custom formatters" <li>Check-in "Enable custom formatters"
<li>Close DevTools <li>Close DevTools
@ -123,7 +138,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
<!-- 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>