Work on the BFCT form

This commit is contained in:
2014-06-22 18:48:42 +02:00
parent 5749ee6c32
commit 97b9aaa3a4
3 changed files with 117 additions and 109 deletions

View File

@@ -7,52 +7,4 @@
top: 0;
left: 0;
position: absolute;
}
.label.label-2x {
font-size: 100%;
}
.input-group {
position: relative;
}
.form-control {
top: 0;
position: absolute;
background-color: transparent;
border: none;
margin-top: 24px;
border-bottom: 1px solid #ccc;
box-shadow: none;
transition: all 0.1s ease-in-out ;
}
.input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn {
padding: 0px 4px 0px 10px;
height: 40px;
font-size: 120%;
}
.control-label {
font-size: 80%;
}
.input-group .control-label {
position: absolute;
left: 0;
top: 6px;
opacity: 0;
transition: all ease-out 0.2s;
transition-delay: .4s;
}
.form-control:hover, .form-control:focus {
background-color: white;
}
.form-control:focus + .control-label,
.form-control:hover + .control-label{
opacity: 0.8;
top: 1px;
}

View File

@@ -2,77 +2,133 @@
{% block body %}
<div class="row">
<div class="col-md-8">
<form class="form-horizontal" method="POST" action="{{url_for('apply')}}">
<fieldset>
{{ form.hidden_tag() }}
<div class="input-group input-group-lg width-full">
{{ form.network_profile(class='form-control', placeholder='Network Profile URL') }}
<label class="control-label">Blender Network Profile</label>
</div>
<div class="container-fluid box">
<h2>BFCT Application</h2>
<p>
Please fill all the fields.
</p>
<hr/>
<form class="form-horizontal" method="POST" action="{{url_for('apply')}}">
<fieldset>
{{ form.hidden_tag() }}
<div class="input-group input-group-lg width-full">
{{ form.network_profile(class='form-control', placeholder='e.g. http://blendernetwork.org/<name-surname>') }}
<label class="control-label">Blender Network Profile URL</label>
</div>
<div class="input-group input-group-lg width-full">
{{ form.website(class='form-control', placeholder='Your website') }}
<label class="control-label">Website</label>
</div>
<div class="input-group input-group-lg width-full">
{{ form.website(class='form-control', placeholder='e.g. http://www.yourname.me') }}
<label class="control-label">Website</label>
</div>
<div class="input-group input-group-lg width-full">
{{ form.city_country(class='form-control', placeholder='Your city and country') }}
<label class="control-label">City and Country</label>
</div>
<div class="input-group input-group-lg width-full">
{{ form.city_country(class='form-control', placeholder='Where you currently live/teach') }}
<label class="control-label">City and Country</label>
</div>
<div class="input-group input-group-lg width-full">
{{ form.teaching(class='form-control') }}
<label class="control-label">Are you teaching at a university?</label>
</div>
<hr/>
<div class="input-group input-group-lg width-full">
{{ form.institution_name(class='form-control', placeholder='School or institution name') }}
<label class="control-label">School or Institution Name</label>
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group input-group-lg input-checkbox width-full" id="is_teaching">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-squishy">
{{ form.teaching() }}
</label>
</div>
<label class="control-label ">Are you currently teaching at a university?</label>
</div>
</div>
<div class="col-md-6">
<div class="input-group input-group-lg width-full disabled" id="is_teaching_where">
{{ form.institution_name(class="form-control", placeholder="School or Institution's name") }}
<label class="control-label">School or Institution Name</label>
</div>
</div>
</div>
<div class="input-group input-group-lg width-full">
{{ form.skills(class='form-control') }}
<label class="control-label">Areas of Expertise</label>
</div>
<div class="row">
<div class="col-md-6">
A set of essential skills is required to be
</div>
<div class="col-md-6">
<div class="input-group input-group-lg width-full">
{{ form.skills(class='form-control') }}
<label class="control-label">Areas of Expertise</label>
</div>
</div>
</div>
<div class="input-group input-group-lg width-full">
{{ form.video_example(class='form-control', placeholder='Video Example') }}
<label class="control-label">Video Example</label>
</div>
<hr/>
<div class="input-group input-group-lg width-full">
{{ form.written_example(class='form-control', placeholder='Written Example') }}
<label class="control-label">Written Example</label>
</div>
<div class="row">
<div class="col-md-6">
A video example of your teaching
</div>
<div class="col-md-6">
<div class="input-group input-group-lg width-full">
{{ form.video_example(class='form-control', placeholder='URL to a Video Example') }}
<label class="control-label">Video Example</label>
</div>
</div>
</div>
<div class="input-group input-group-lg width-full">
{{ form.portfolio_cv(class='form-control', placeholder='Porftolio and CV') }}
<label class="control-label">Porftolio / Curriculum Vitae</label>
</div>
<div class="row">
<div class="col-md-6">
A video example of your teaching
</div>
<div class="col-md-6">
<div class="input-group input-group-lg width-full">
{{ form.written_example(class='form-control', placeholder='Written Example') }}
<label class="control-label">Written Example</label>
</div>
</div>
</div>
<div class="input-group input-group-lg width-full">
{{ form.bio_message(class='form-control', placeholder='Bio and message') }}
<label class="control-label">Biography or Personal Message</label>
</div>
<button class="btn btn-default btn-success btn-squishy width-half pull-right offset-top-2" type="submit" value="Go">
Send Application <i class="fa fa-send"></i>
</button>
</fieldset>
</form>
<div class="input-group input-group-lg width-full">
{{ form.portfolio_cv(class='form-control', placeholder='URL of your Portfolio or CV') }}
<label class="control-label">Porftolio / Curriculum Vitae</label>
</div>
<hr/>
<div class="input-group input-group-lg width-full">
{{ form.bio_message(class='form-control', placeholder='Tell us a bit about yourself and why you want to be a BFCT') }}
<label class="control-label">Biography or Personal Message</label>
</div>
<hr/>
<button class="btn btn-default btn-success btn-squishy width-half pull-right offset-top-2" type="submit" value="Go">
Send Application <i class="fa fa-send"></i>
</button>
</fieldset>
</form>
<div class="clearfix offset-top-2"></div>
</div>
</div>
<div class="col-md-4 box">
<i class="backicon fa fa-question-circle"></i>
<h2>What happens when I apply?</h2>
<p>
Once we receive your application, the Blender Foundation Certification Board
will proceed to review it. This may take some days.
<br/><br/>You can come back to this page and check
the status of your application anytime.
<br/><br/>Once your application has been reviewed, you'll receive
an e-mail with the results, and instructions on how to proceed.
</p>
<div class="col-md-4">
<div class="box">
<i class="backicon fa fa-question-circle"></i>
<h2>What happens when I apply?</h2>
<p>
Once we receive your application, the Blender Foundation Certification Board
will proceed to review it. This may take some days.
<br/><br/>You can come back to this page and check
the status of your application anytime.
<br/><br/>Once your application has been reviewed, you'll receive
an e-mail with the results, and instructions on how to proceed.
</p>
</div>
</div>
</div>
{% endblock %}
{% block footer_scripts %}
<script>
$('#is_teaching').click(function() {
$("#is_teaching_where").toggleClass('disabled');
});
</script>
{% endblock %}