use tabbed views for pages with large amounts of content

k4ever/main/templates/settings/settings.html

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

k4ever/transaction/templates/transaction/overview.html

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