Box & icons for contact in emissions view

panikweb_templates/static/css/specifics.css

@@ -54,17 +54,6 @@
 .wrapper.text {max-width: 780px; margin:auto;}
 .wrapper.half {max-width: 510px; margin:auto;}
 
- 
-.symbol{
-	vertical-align:middle;
-	display:inline-block;
-	font-size: 3em;
-	font-family: "RegloSymbol" !important;
-	line-height: 70% !important;
-}  
-.symbol.small{	font-size: 80%;}
-.symbol.big{	font-size: 400%;}   
-.symbol.huge{	font-size: 800%;}
 
 .sectionLabel, .label {
     text-transform: uppercase;
@@ -120,6 +109,14 @@ button.check:before, a.check:before {
 	display:inline-block;
 	width:1.5em;
 }
+.box{
+	padding:0.2em 0.5em 0.2em 0.5em;
+	border-radius: 0.2em;
+	-moz-border-radius: 0.2em;
+	-webkit-border-radius: 0.2em;
+	background:#222;
+	color:#fff;
+}
 
 /**** TABS ****/
 

panikweb_templates/static/css/type.css

@@ -72,10 +72,10 @@
 	font-size:2em;
 }
 .resymbol.big, .icons.big{
-	font-size:5em;
+	font-size:3.5em;
 }
 .resymbol.huge, .icons.huge{
-	font-size:8em;
+	font-size:5em;
 }
 .info:before,.warning:before,.error:before{
 	font-family: FontAwesome;

panikweb_templates/templates/emissions/detail.html

@@ -2,17 +2,6 @@
 {% load paniktags %}
 <div class="emission emission-detail cf">
 	<div class="metas">
-		{% if emission.email and emission.website %}
-		<div class="contacts">
-			{% if emission.email %}
-				<div class="email ellipsis">{{ emission.email|strreplace:"@, (AT) "|strreplace:"., (DOT) "}}</div>
-			{% endif %}
-			{% if emission.website %}
-				<div class="contact ellipsis"><a href="{{ emission.website}}">{{ emission.website}}</a></div>
-			{% endif %}
-		</div>
-		<hr />
-		{% endif %}
 		{% if emission.image %}
 			<img class="logo" src="{{ emission.image.url }}"/>
 		{% endif %}
@@ -42,5 +31,21 @@
 		{{ emission.text|safe}}
 	</article>
 	{% endif %}
+	{% if emission.email and emission.website %}
+	<div class="contacts box">
+		{% if emission.email %}
+			<div class="email ellipsis">
+				<span class="icon-envelope"></span>
+				<span>{{ emission.email|strreplace:"@, (AT) "|strreplace:"., (DOT) "}}</span>
+			</div>
+		{% endif %}
+		{% if emission.website %}
+			<div class="contact ellipsis">
+				<span class="icon-globe"></span>
+				<a href="{{ emission.website}}">{{ emission.website}}</a>
+			</div>
+		{% endif %}
+	</div>
+	{% endif %}
 </div>
 

panikweb_templates/templates/emissions/emission_detail.html

@@ -8,7 +8,7 @@
 	{% emission_nav %}
 {% endblock %}
 {% block main %}
-<div class="wrapper {% if episodes %}sided{% endif %}">
+<div class="wrapper {% if episodes %}sided{% endif %} cf">
 	<div id="Emission-container" class="emission padded">
 		<div data-tabbed="true" id="Emission-tabs-default">
 			<div id="Emission-tabs-detail">

panikweb_templates/templates/includes/audio.html

 {% load soundfiles %}
 {% load paniktags %}
 {% if sound|is_format_available:'mp3' or sound|is_format_available:'ogg' %}
-	<div class="controls huge">
-		<button class="resymbol icon-plus-sign"
+	<div class="">
+		<button class="resymbol icon-plus-sign big"
 			title="Add to playlist" 
 			data-player-audio="Audio-{{ sound.file.url|slugify }}" 
 			data-player-action="registerAudio" 
 			id="addToPlaylist-{{ sound.file.url|slugify }}"
 			></button>
-		<button class="resymbol icon-play"
+		<button class="resymbol icon-play big"
 			title="Play" 
 			data-player-audio="Audio-{{ sound.file.url|slugify }}" 
 			data-player-action="playAudio" 
 			></button>
-		{% if sound|is_format_available:'ogg' %}
-			<a target="_blanck" class="resymbol icon-download button" href="{{ sound|format_url:'ogg' }}"
-				></a>
+		{% if sound|is_format_available:'ogg' or sound|is_format_available:'mp3'%}
+			
+		<button class="resymbol icon-download big"
+			title="Download file" 
+			onclick="$('#Download-{{ sound.file.url|slugify }}').toggle();return false;"
+			></button>
+			<span class="box hidden" id="Download-{{ sound.file.url|slugify }}" >
+				{% if sound|is_format_available:'ogg' %}
+				<a target="_blanck" class="icon-file button" href="{{ sound|format_url:'ogg' }}">
+					<span>ogg</span>
+				</a>
+				{% endif %}
+				{% if sound|is_format_available:'mp3' %}			
+				<a target="_blanck" class="icon-file button" href="{{ sound|format_url:'mp3' }}">
+					<span>mp3</span>
+				</a>
+				{% endif %}
+			</span>
 		{% endif %}
 	</div>
 	<audio