Fix column design of map page

sigi/apps/metas/templates/metas/mapa.html

@@ -1,4 +1,4 @@
-{% extends "admin/index.html" %}
+{% extends "admin/base_site.html" %}
 {% load static from staticfiles %}
 
 {% block title %}SIGI{% endblock %}
@@ -12,7 +12,12 @@
 	<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
 	<script type="text/javascript" src="{% static 'js/metas/mapa.js' %}" ></script>
 	<style>
-	  .totalizador { float:right; }
+	  .totalizador {
+	  	float:right;
+	  }
+	  #filter_form {
+	  	padding: 10px;
+	  }
 	</style>
 {% endblock %}
 
@@ -37,18 +42,23 @@
 	</div>
 </div>
 {% endblock %}
+
 {% block content %}
+<div class="row row-flex row-flex-wrap">
+
+  <div class="col-md-10">
 	<div id="map" style="width:100%; height: 800px; float: left;">
 		<!-- google map -->
 	</div>
-{% endblock %}
+  </div>
+
+  <div class="col-md-2">
+    <div class="panel panel-primary flex-col">
+
+      	<div class="panel-heading">Filtros</div>
 
-{% block sidebar %}
 		<form id="filter_form" method="get" action="">
-	<div id="content-related">
-	<div class="module" id="filters"> {% comment %} Adicione style="overflow: auto; height: 800px;" para rolar apenas na caixa de filtros {% endcomment %}
-	  <h2>Filtros</h2>
-	  <h3>Por Serviços SEIT</h3>
+	      <h4>Por Serviços SEIT</h4>
 	        <ul>
 	        {% for s in servico_choices %}
 	          <li><input type="checkbox" name="seit" value="{{ s.sigla }}"
@@ -58,35 +68,35 @@
 	          </li>
 	        {% endfor %}
 	        </ul>
-	  <h3>Por Casas conveniadas</h3>
+	      <h4>Por Casas conveniadas</h4>
 	        <ul>
 	        {% for p in projeto_choices %}
 	          <li><input type="checkbox" name="convenios" value="{{ p.sigla }}" {% if p.sigla in convenios %}checked="checked" {% endif %}/>
 	            ao {{ p.sigla }} <span id="convenio_{{ p.sigla }}" class="totalizador">&nbsp;</span> </li>
 	        {% endfor %}
 	        </ul>
-	  <h3>Por Casas equipadas</h3>
+	      <h4>Por Casas equipadas</h4>
 	        <ul>
 	          {% for p in projeto_choices %}
 	          <li><input type="checkbox" name="equipadas" value="{{ p.sigla }}" {% if p.sigla in equipadas %}checked="checked"{% endif %} />
 	            pelo {{ p.sigla }}<span id="equip_{{ p.sigla }}" class="totalizador">&nbsp;</span> </li></li>
 	          {% endfor %}
 	        </ul>
-	  <h3>Por Diagnósticos</h3>
+	      <h4>Por Diagnósticos</h4>
 	        <ul>
 	          <li><input type="checkbox" name="diagnosticos" value="A" {% if "A" in diagnosticos %}checked="checked" {% endif %}/>
 	            Em andamento<span id="diagnostico_A" class="totalizador">&nbsp;(1)</span></li>
 	          <li><input type="checkbox" name="diagnosticos" value="P" {% if "P" in diagnosticos %}checked="checked" {% endif %}/>
 	            Publicados<span id="diagnostico_P" class="totalizador">&nbsp;(1)</span></li>
 	        </ul>
-	  <h3>Por região</h3>
+	      <h4>Por região</h4>
 	      <ul>
 	      {% for r in regiao_choices %}
 	        <li><input type="checkbox" name="regioes" value="{{ r.0 }}" {% if r.0  in regioes %}checked="checked"{% endif %}/> {{ r.1 }}
 	            <span id="{{ r.0 }}" class="totalizador">&nbsp;(1)</span></li>
 	      {% endfor %}
 	      </ul>
-	  <h3>Por Estado</h3>
+	      <h4>Por Estado</h4>
 	        <ul>
 	        {% for e in estado_choices %}
 	          <li><input type="checkbox" name="estados" value="{{ e.sigla }}"
@@ -96,7 +106,14 @@
 	          </li>
 	        {% endfor %}
 	        </ul>
+		</form>
+
+
+
     </div>
   </div>
-</form>
+
+
+
 {% endblock %}
+