Addressbook

- location field.. has to be refactored

musicians/templates/musicians/addressbook.html

@@ -0,0 +1,144 @@
+{% extends "website/base.html" %}
+
+
+{% load sekizai_tags staticfiles %}
+
+
+{% block feature_slider %}
+{% endblock %}
+
+
+{% block navbar_options %} navbar navbar-inverse navbar-static-top {% endblock %}
+
+
+{% block content %}
+
+
+{% addtoblock "css" strip %}<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}/css/portfolio.css" media="screen, projection">{% endaddtoblock %}                                                       
+
+{% addtoblock "css" %}
+<style>
+.addressbook_entry {
+	box-shadow: 0px 0px 7px -1px rgb(214, 214, 214);
+	border: 2px solid rgb(217, 217, 217);
+	width: 350px !important;
+	float: left;
+	padding-top: 20px;
+	padding-bottom: 20px;
+	border-radius: 10px;
+}
+
+.addressbook_entry .name {
+	color: rgb(83, 83, 83);
+	font-weight: normal;
+	font-style: italic;
+	font-size: 18px;
+	margin: 0px 0px 5px;
+}
+
+.addressbook_entry td {
+	padding-right: 15px;
+}
+
+.addressbook_entry .picture {
+	max-width: 55px;
+	float: right;
+	margin-right: 10px;
+}
+
+</style>
+{% endaddtoblock %}
+
+
+{% addtoblock "js" strip %} <script src="{{STATIC_URL}}/js/jquery.isotope.min.js"></script> {% endaddtoblock %}    
+
+
+{% addtoblock "js" %}
+<script>
+       $(function(){
+
+            var $container = $('#gallery_container'),
+                  $filters = $("#filters a");
+        
+            $container.imagesLoaded( function(){
+                $container.isotope({
+                    itemSelector : '.photo',
+                    masonry: {
+                        columnWidth: 102
+                    }
+                });
+            });
+
+            // filter items when filter link is clicked
+            $filters.click(function() {
+                $filters.removeClass("active");
+                $(this).addClass("active");
+                var selector = $(this).data('filter');
+                $container.isotope({ filter: selector });
+                return false;
+            });
+        
+        
+        });
+</script>    
+
+{% endaddtoblock %}
+
+
+<div id="portfolio">
+	<div class="container">
+		<div class="section_header">
+             <h3>Adressbuch</h3>
+        </div>
+
+		<div class="row">
+			<div class="span12">
+				<div id="filters_container">
+					<ul id="filters">
+						<li><a href="#" data-filter="*" class="active">Alle</a></li>
+						<li class="separator">/</li>
+						<li><a href="#" data-filter=".unterstimme">Unterstimmen</a></li>
+						<li class="separator">/</li>
+						<li><a href="#" data-filter=".oberstimmen">Oberstimmen</a></li>
+						<li class="separator">/</li>
+						<li><a href="#" data-filter=".rest">Rest</a></li>
+					</ul>
+				</div>
+			</div>
+		</div>
+		
+		<div class="row">
+			<div class="span12">
+				<div id="gallery_container" >
+					
+					{% for m in musicians %}
+						<div class="photo isotope-item addressbook_entry {% if m.isDeepBrass %} unterstimme {% elif m.isHighBrass %} oberstimme {% else %} rest {% endif %} ">
+	
+							<div class="span1">
+								<img src="{{MEDIA_URL}}/user_images/{{m.user}}_circle.png" class="img-circle picture">
+							</div>
+						
+							<div class="name">
+								{{ m.user.first_name }} {{m.user.last_name }}
+							</div>
+							
+							<table>
+								{% if m.street    %}   <tr><td> Adresse           </td><td>{{m.street}}             </td>
+													   <tr><td>                   </td><td>{{m.zip_code}} {{m.city}}</td>{% endif %}
+								{% if m.birthday  %}   <tr><td> Geburtstag:       </td><td>{{m.birthday }}          </td>{% endif %}
+								{% if m.phone_home %}  <tr><td> Telefon (Home):   </td><td>{{m.phone_home   }}      </td>{% endif %}
+								{% if m.phone_mobile %}<tr><td> Telefon (Mobil):  </td><td>{{m.phone_mobile }}      </td>{% endif %}
+								{% if m.phone_work %}  <tr><td> Telefon (Arbeit): </td><td>{{m.phone_work   }}      </td>{% endif %}
+							</table>
+						</div>
+					{% endfor %}
+				</div>
+				
+			</div>
+		</div>
+	</div>
+</div>
+
+
+{% endblock %}
+