Preliminary work on the form #11

nnmon/templates/index.html

 {% extends "base.html" %}
 {% load bt %}
 {% load i18n %}
+{% load bootstrap3 %}
 {% block active_tab_home %}class="active"{% endblock %}
 {% block styles %}
 <link rel="stylesheet" type="text/css" media="all" href="/static/css/jquery-ui.css" />
@@ -49,35 +50,15 @@ $(document).ready(function(){
 {% endblock %}
 
 {%block content%}
-<div id='global'>
-	{% if messages %}
-	<ul class="messages">
-		{% for message in messages %}
-		<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|safe }}</li>
-		{% endfor %}
-	</ul>
-	{% endif %}
-	<div id='addForm' class='index'>
-		<h2>{% trans "Add New Case" %}</h2>
-		<p>{% trans "Please report cases of operators restricting or throttling access to content, services or applications. For a more precise description of what to report, check our <a href='/about/#guidelines'>guidelines</a>." %}
-		<form name="addForm" enctype="multipart/form-data" action="{% root_url %}/add/" method="post">
-			{% for field in form %}
-			{% if field.html_name = 'comment' %}<div class="hidden errorlist">{% trans "There are already some reports for this Operator/Contract, please check if yours is already among them:" %}<ul id="similar_cases"></ul></div>{%endif%}
-			{% if field.html_name = 'resource' %}<div id="show_optionals">{% trans "Provide optional details" %}</div><div id="optional">{%endif%}
-				<div class="fieldWrapper">
-					{% if field.help_text %}<span class="help_text">{{ field.help_text }}</span>{% endif %}
-					<span class="innerfield">
-						{{ field.errors }}
-						{{ field.label_tag }} {{ field }}
-					</span>
-				</div>
-				{% endfor %}
-			</div>
-			{% csrf_token %}
-			<input id="save_button" type="submit" value="{% trans "save" %}" />
-		</form>
-	</div>
-	<div id='content'>
+{% if messages %}
+<ul class="messages">
+	{% for message in messages %}
+	<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|safe }}</li>
+	{% endfor %}
+</ul>
+{% endif %}
+<div class="row">
+	<div class="col-xs-12 col-md-10" id="content">
 		<h2>{% trans "On the Internet, <strong>you</strong> decide what you do, right? <i>Not anymore!</i>" %}</h2>
 		<p>{% trans "Large telecommunication providers want to control what you do online. They want to block and throttle some of your communications, and charge you to use certain online services, content and applications." %}</p>
 		<p>{% trans "Now is the time to fight back!" %}</p>
@@ -88,10 +69,14 @@ $(document).ready(function(){
 		<div id="stats_graph" ></div>
 		<ul id="stats">
 			{% for t, n in stats %}
-			<li class="stat"><dl><dt class="inline">{{t}}</dt><dd class="inline"><strong>{{n}}</strong></dd></dl></li>
+			<li class="stat">
+				<dl>
+					<dt class="inline">{{t}}</dt>
+					<dd class="inline"><strong>{{n}}</strong></dd>
+				</dl>
+			</li>
 			{% endfor %}
 		</ul>
-
 		<h2 id="featured-title">{% trans "Featured Cases" %}</h2>
 		<table id="featured_cases">
 			<thead>
@@ -128,12 +113,46 @@ $(document).ready(function(){
 							<span class="submitter">{%if c.submitter_name%}{{c.submitter_name}}{%else%}{{c.submitter_email}}{%endif%}</span> - <span class="comment_date">{{c.timestamp|date:"SHORT_DATE_FORMAT" }}</span>
 						</div>
 						{%endfor%}
-	</div>
 					</td>
 				</tr>
 				{% endfor %}
 			</tbody>
 		</table>
-</div>
+	</div>
+	<div class="col-xs-12 col-md-4">
+		<div class="panel panel-info">
+			<div class="panel-heading">
+				<h2>{% trans "Add New Case" %}</h2>
+			</div>
+			<div class="panel-body">
+				<p>{% trans "Please report cases of operators restricting or throttling access to content, services or applications. For a more precise description of what to report, check our <a href='/about/#guidelines'>guidelines</a>." %}
+				<form name="addForm" enctype="multipart/form-data" action="{% root_url %}/add/" method="post" class="form">
+					{% csrf_token %}
+					{% bootstrap_field form.resource_name %}
+					{% bootstrap_field form.country %}
+					{% bootstrap_field form.operator %}
+					{% bootstrap_field form.contract %}
+					{% bootstrap_field form.media %}
+					{% bootstrap_field form.contractual %}
+					<div class="collapse" id="collapseForm">
+						{% bootstrap_field form.temporary %}
+						{% bootstrap_field form.loophole %}
+						{% bootstrap_field form.type %}
+						{% bootstrap_field form.resource %}
+						{% bootstrap_field form.contract_excerpt %}
+						{% bootstrap_field form.attachments %}
+						{% bootstrap_field form.comment %}
+						{% bootstrap_field form.consent %}
+						{% bootstrap_field form.email %}
+						{% bootstrap_field form.nick %}
+						{% bootstrap_field form.email %}
+						{% buttons %}
+							<button type="submit" class="btn btn-primary">{% trans "save" %}</button>
+						{% endbuttons %}
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
 </div>
 {%endblock%}