Commit 294a3099 authored by BAIRE Anthony's avatar BAIRE Anthony
Browse files

put the 'Advanced' options in a collipsable card

and force displaying the card if it contain any invalid field

(thus user does not get confused if submit fails because of an invalid
 value in the non-displayed tab)
parent 758002ae
......@@ -23,20 +23,9 @@
{% block content %}
<div class="container">
<div class="allgo-page">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#basic">Basic</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#advanced"><i class="fas fa-cogs"></i> Advanced</a></li>
</ul>
<p class="mt-3">You can create a new application here by giving a name.</p>
<form method="post" class="clearfix">
{% csrf_token %}
<div class="tab-content">
<div class="tab-pane active" id="basic">
<div class="form-row">
<div class="col">
<div class="form-group">
......@@ -84,10 +73,16 @@
<small class="form-text text-muted">{{ form.private.help_text }}</small>
</div>
</div>
<div class="tab-pane" id="advanced">
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced">
Advanced options
</button>
</h5>
</div>
<div class="collapse" id="collapseAdvanced">
<div class="card-body">
<div class="form-row">
<div class="form-group col">
......@@ -149,12 +144,14 @@
</div>
</div>
</div>
</div>
{% url 'main:webapp_creation' as webapp_url %}
{% if request.get_full_path == webapp_url %}
<input class="btn btn-primary float-right" type="submit" value="Create webapp">
<input class="btn btn-primary float-right mt-4" type="submit" value="Create webapp">
{% else %}
<input class="btn btn-primary float-right" type="submit" value="Update webapp">
<input class="btn btn-primary float-right mt-4" type="submit" value="Update webapp">
{% endif %}
</form>
......@@ -168,3 +165,14 @@
{{ block.super }}
{% include 'partials/_form_messages.html' %}
{% endblock %}
{% block javascript %}
{{ block.super }}
<script>
$("#collapseAdvanced input").on("invalid", function(ev) {
{# unfold the 'Advanced options' panel if any of its field triggers an 'invalid' value event #}
$(ev.target).closest(".collapse").collapse("show")
});
</script>
{% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment