use tabbed views for pages with large amounts of content

This commit is contained in:
Konrad Mohrfeldt 2012-02-06 01:06:30 +01:00
parent a7510dc0ec
commit 4c1241b096
2 changed files with 37 additions and 19 deletions

View File

@ -10,10 +10,14 @@
{% endcomment %} {% endcomment %}
{% block "content" %} {% block "content" %}
<div class="row-fluid"> <ul id="tab" class="nav nav-tabs">
<div class="span6"> <li class="active"><a href="#account" data-toggle="tab">Konto</a></li>
<h2>Pluginberechtigungen</h2> <li><a href="#plugins" data-toggle="tab">Pluginberechtigungen</a></li>
</ul>
<div class="tab-content">
<div id="plugins" class="tab-pane">
<h2>Pluginberechtigungen</h2>
{% if pluginerror %} {% if pluginerror %}
<div class="alert alert-error"> <div class="alert alert-error">
<h4 class="alert-heading">{{ pluginerror|safe }}</h4> <h4 class="alert-heading">{{ pluginerror|safe }}</h4>
@ -72,7 +76,7 @@
</table> </table>
</div> </div>
<div class="span6"> <div class="tab-pane active" id="account">
<h2>Passwort</h2> <h2>Passwort</h2>
{% if form %} {% if form %}
{% if password_success %} {% if password_success %}

View File

@ -10,9 +10,21 @@
{% endcomment %} {% endcomment %}
{% block "content" %} {% block "content" %}
<div class="row-fluid"> <ul id="tab" class="nav nav-tabs">
<div class="span6"> <li class="active"><a href="#payments" data-toggle="tab">Konten Ein- und Auszahlungen</a></li>
<h2>Konto aufladen</h2> <li><a href="#transactions" data-toggle="tab">Überweisungen</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Historien <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#payment-history" data-toggle="tab">Ein- und Auszahlungen</a></li>
<li><a href="#transaction-history" data-toggle="tab">Überweisungen</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="payments">
<h2>Konten Ein- und Auszahlungen</h2>
{% if transacted %} {% if transacted %}
<div class="alert {% if error %}alert-error{% else %}alert-success{% endif %}"> <div class="alert {% if error %}alert-error{% else %}alert-success{% endif %}">
{% if error %} {% if error %}
@ -22,7 +34,7 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<form method="post" action="/transaction/" class="form-horizontal"> <form method="post" action="/transaction/#payments" class="form-horizontal">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="_formtype" value="normal" /> <input type="hidden" name="_formtype" value="normal" />
{% include "form.html" with form=form %} {% include "form.html" with form=form %}
@ -31,13 +43,17 @@
<input type="submit" class="btn btn-primary" value="Einzahlen" /> <input type="submit" class="btn btn-primary" value="Einzahlen" />
</div> </div>
</div> </div>
</form>
<h3>Kontodaten:</h3> <h3>Kontodaten:</h3>
<div class="row-fluid">
<div class="span6">
{% include "treasurer.html" %} {% include "treasurer.html" %}
</form> </div>
</div>
</div> </div>
<div class="span6"> <div class="tab-pane" id="transactions">
<h2>Geld überweisen</h2> <h2>Geld überweisen</h2>
{% if transacted %} {% if transacted %}
<div class="alert {% if error %}alert-error{% else %}alert-success{% endif %}"> <div class="alert {% if error %}alert-error{% else %}alert-success{% endif %}">
@ -48,7 +64,7 @@
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<form method="post" action="/transaction/" class="form-horizontal"> <form method="post" action="/transaction/#transactions" class="form-horizontal">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="_formtype" value="virtual" /> <input type="hidden" name="_formtype" value="virtual" />
{% include "form.html" with form=vform %} {% include "form.html" with form=vform %}
@ -59,11 +75,9 @@
</div> </div>
</form> </form>
</div> </div>
</div>
<div class="row-fluid"> <div class="tab-pane" id="payment-history">
<div class="span6"> <h2>Vergangene Ein- und Auszahlungen</h2>
<h2>Vergangene Transaktionen</h2>
<table class="table table-striped table-condensed"> <table class="table table-striped table-condensed">
<thead> <thead>
<tr> <tr>
@ -105,8 +119,8 @@
</table> </table>
</div> </div>
<div class="span6"> <div class="tab-pane" id="transaction-history">
<h2>Vergangene virtuelle Transaktionen</h2> <h2>Vergangene Überweisungen</h2>
<table class="table table-striped table-condensed"> <table class="table table-striped table-condensed">
<thead> <thead>
<tr> <tr>