New design for book-detail template (downloading books etc), part2

diff --git a/wolnelektury/static/css/master.css b/wolnelektury/static/css/master.css
index 73a2cda..8513065 100644 (file)
--- a/wolnelektury/static/css/master.css
+++ b/wolnelektury/static/css/master.css
@@ -292,18 +292,109 @@ p .ac_input {
 #book-detail #formats .change-sets {
     margin-right: 0.5em;
 }
+/*
+#formats .wrap ul {
+    margin: 0;
+    padding: 0;
+}
+
+#formats .wrap li {
+    display: block;
+    width: 100%;
+    height: 1.9em;
+    background-color: #F2F2F2;
+    border: 1px solid #EEE;
+    text-align: center;    
+}
+*/
+#formats .wrap .header {
+    display: block;
+    width: 100%;
+    height: 1.9em;
+    background-color: #FFF;
+    border: 1px solid #EEE;
+    margin: 0;
+    padding: 0;
+    -moz-border-radius: 4px 4px 0 0;
+    -webkit-border-radius: 4px 4px 0 0;
+    border-radius: 4px 4px 0 0;
+    color:#2F4110;
+    margin-top: 40px;
+}
+
+#formats .wrap .header span.active {
+    display: block;
+    height: 1.5em;
+    background-color:#FFF;
+    width: 80px;
+    text-align: center;
+    padding: 2px 0;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    color: #2F4110;
+    font-weight: bold;    
+    float:left;
+    border: 1px solid #EEE;    
+}
+
+#formats .wrap .header span {
+    display: block;
+    height: 1.6em;
+    background-color:#EEE;
+    width: 80px;
+    text-align: center;
+    padding: 2px 0;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    color: #2F4110;
+    font-weight: bold;    
+    float:left;
+    cursor: pointer;
+    border: 1px solid #EEE;    
+}
 
-#formats .wrap p {
+#formats .wrap .header span.desc {
+    display: block;
+    height: 1.6em;
+    background-color: #EEE;
+    width: 100px;
+    text-align: center;
+    padding: 2px 0;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    color: #2F4110;
+    font-weight: bold;    
+    float:left;
+    cursor: normal;
+    margin-right: 20px;
+    border:0px;
+}
+
+
+#formats .wrap p.online {
     display: block;
     width: 100%;
     height: 1.5em;
     background-color: #EEE;
     margin-top: 0.5em;
-    padding: 0.5em 0;
+    padding: 1em 0;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
-    text-align: center;    
+    text-align: center;
+    font-size: 1.6em;
+        
+}
+
+#formats .wrap div.download {
+    text-align: center;   
+    margin-bottom: 10px; 
+}
+#formats .wrap div.download img {
+    padding: 0 10px 0 10px;    
 }
 
 #czytamysluchajac {
@@ -320,9 +411,26 @@ p .ac_input {
     padding-top: 1em;
     padding-bottom: 0em;
 }
-li.mp3Player {
+div.audiobooks li {
     list-style-type: none;
 }
+
+div.audiobooks {
+    padding: 15px;
+    float: left;
+}
+
+.audiobook-list {
+    float: left; width: 270px;
+    position: relative;
+    left: 10px;
+}
+
+#speaker {
+    float: left; 
+    padding:5px 10px;
+}
+
 #formats #czytamysluchajac-logo {
     background: white;
     text-align: left;

diff --git a/wolnelektury/static/js/catalogue.js b/wolnelektury/static/js/catalogue.js
index 1c23be8..71225e1 100644 (file)
--- a/wolnelektury/static/js/catalogue.js
+++ b/wolnelektury/static/js/catalogue.js
@@ -1,3 +1,4 @@
+var STATIC = '/static/';
 var LOCALE_TEXTS = {
     "pl": {
         "DELETE_SHELF": "Czy na pewno usunąć półkę",
@@ -74,7 +75,6 @@ var BANNER_TEXTS = [
     'Pomóż uwolnić 286 utworów z listy lektur szkolnych. Przekaż swój 1% na Wolne Lektury.'
 ]
 
-
 function changeBannerText() {
     var index = Math.floor(Math.random() * BANNER_TEXTS.length);
     if (BANNER_TEXTS[index] == $('#onepercent-text').html()) {
@@ -492,5 +492,44 @@ function serverTime() {
             return false;
         });
 
+        // player for audiobooks
+ 
+        // event handlers for playing different formats
+        $('p.header span').click(function(){
+            if(this.className != "desc"){
+                $('.audiobook-list').hide();
+                $('p.header span.active').attr('class', '');
+                // we don't want to interact with "audiobook" label, just 'format' tabs
+                this.className = "active";
+                $("#"+$("p.header span.active").html().toLowerCase()+"-files").show();
+            }
+        });
+        
+        
+        
+        $('.audiobook-list').hide();
+        $("#"+$("p.header span.active").html().toLowerCase()+"-files").show();
+        
+        /* this will be useful for javascript html player
+        var medias = $('.audiobook-list a');
+        var mp3List = [];
+        var oggList = [];
+        var daisyList = [];
+        var tmpExt;
+        if (medias.length > 0) {
+            // creating sources list for player
+            medias.each(function(index, item) {
+                tmpExt = item.href.split(".").pop();    
+                if(tmpExt == "mp3") {
+                    mp3List.push(item.href);
+                } else if (tmpExt == "ogg") {
+                    oggList.push(item.href);
+                } else if(tmpExt == "daisy") {
+                    daisyList.push(item.href);
+                }
+            }); 
+        }*/       
+
     });
 })(jQuery)
+

diff --git a/wolnelektury/templates/catalogue/book_detail.html b/wolnelektury/templates/catalogue/book_detail.html
index 125b9bb..2e423a0 100644 (file)
--- a/wolnelektury/templates/catalogue/book_detail.html
+++ b/wolnelektury/templates/catalogue/book_detail.html
@@ -40,58 +40,63 @@
             <p class="change-sets">{% trans "Put a book" %} <span><a href="{% url catalogue.views.book_sets book.slug %}" class="jqm-trigger">{% trans "on the shelf!" %}</a></span></p>
             <div class="clearboth"></div>
             <div class="wrap">
-            {% if book.has_html_file %}
-                <a href="{% url book_text book.slug %}">{% trans "Read online" %}</a>
-            {% endif %}
-            {% if book.has_pdf_file %}
-                <a href="{{ book.pdf_file.url }}">{% trans "Download PDF" %}</a>
-            {% endif %}
-            {% if book.root_ancestor.epub_file %}
-                <a href="{{ book.root_ancestor.epub_file.url }}">{% trans "Download EPUB" %}</a>
-            {% endif %}
-            {% if book.has_odt_file %}
-                <p>ODT</p>
-                <ul>
-                {% for media in book.get_odt %}
-                    <li><a href="{{ media.file.url }}">{{ media.name }}</a></li>
-                {% endfor %}
-                </ul>
-            {% endif %}
-            {% if book.has_txt_file %}
-                <a href="{{ book.txt_file.url }}">{% trans "Download TXT" %}</a>
-            {% endif %}
-            {% if book.has_ogg_file %}
-                <p>OGG</p>
-                <ul>
-                {% for media in book.get_ogg %}
-                    <li><a href="{{ media.file.url }}">{{ media.name }}</a></li>
-                {% endfor %}
-                </ul>
-            {% endif %}       
-            {% if book.has_daisy_file %}
-                <p>DAISY</p>
-                <ul>
-                {% for media in book.get_daisy %}
-                    <li><a href="{{ media.file.url }}">{{ media.name }}</a></li>
-                {% endfor %}
-                </ul>
-            {% endif %}                 
-            {% if book.has_mp3_file %}
-                <p>MP3</p>
-                <a href="http://czytamysluchajac.pl/" id="czytamysluchajac-logo"><img src="{{ STATIC_URL }}img/czytamysluchajac-logo-small.png" /></a>
-                <ul>
-                {% for media in book.get_mp3 %}
-                    <li><a href="{{ media.file.url }}">{{ media.name }}</a></li>
-                    <li class="mp3Player">            
-                      <object type="application/x-shockwave-flash" style="margin-top: 0.5em" data="{{ STATIC_URL }}player.swf" width="226" height="20">
-                            <param name="movie" value="{{ STATIC_URL }}player.swf" />
-                            <param name="bgcolor" value="#ffffff" />
-                            <param name="FlashVars" value="mp3={{ media.file.url }}     &amp;width=226&amp;showvolume=1&amp;bgcolor1=eeeeee&amp;bgcolor2=eeeeee&amp;buttoncolor=666666" />
-                        </object>
-                    </li>
-                {% endfor %}
-                </ul>     
-            {% endif %}       
+                {% if book.has_html_file %}
+                    <p class="online"><a href="{% url book_text book.slug %}">{% trans "Read online" %}</a></p>
+                {% endif %}
+                <div class="download">           
+                    {% if book.has_pdf_file %}
+                        <a href="{{ book.pdf_file.url }}"><img src="{{ STATIC_URL }}img/pdf.png" title="{% trans "Download PDF - for reading and printing using Adobe Reader" %}" alt="{% trans "Download PDF" %}" /></a>
+                    {% endif %}
+                    {% if book.root_ancestor.epub_file %}
+                        <a href="{{ book.root_ancestor.epub_file.url }}"><img src="{{ STATIC_URL }}img/epub.png" title="{% trans "Download EPUB - for reading on mobile devices" %}" alt="{% trans "Download EPUB" %}" /></a>
+                    {% endif %}
+                    {% if book.has_txt_file %}
+                        <a href="{{ book.txt_file.url }}"><img src="{{ STATIC_URL }}img/txt.png" title="{% trans "Download TXT - for reading on small displays, for example mobile phones" %}" alt="{% trans "Download TXT" %}" /></a>
+                    {% endif %}
+                    {% if book.has_odt_file %}
+                        <a href="{{ book.odt_file.url }}"><img src="{{ STATIC_URL }}img/odt.png" title="{% trans "Download ODT - for reading and editing using OpenOffice.org" %}" alt="{% trans "Download ODT" %}" /></a>
+                    {% endif %}                
+                </div>            
+                <p class="header">
+                    <span class="desc">{% trans "Audiobooks" %}:</span>
+                    {% if book.has_mp3_file %}<span class="active">MP3</span>{% endif %}
+                    {% if book.has_ogg_file %}<span>OGG</span>{% endif %}
+                    {% if book.has_daisy_file %}<span>DAISY</span>{% endif %}
+                </p>        
+                <div class="audiobooks">
+                    <img src="{{ STATIC_URL }}img/speaker.png" id="speaker" alt="Speaker icon"/>
+                    {% if book.has_ogg_file %}
+                        <ul class="audiobook-list" id="ogg-files">
+                        {% for media in book.get_ogg %}
+                            <li><a href="{{ media.file.url }}">{{ media.name }}</a></li>
+                        {% endfor %}
+                        </ul>
+                    {% endif %}       
+                    {% if book.has_daisy_file %}
+                        <ul class="audiobook-list" id="daisy-files">
+                        {% for media in book.get_daisy %}
+                            <li><a href="{{ media.file.url }}">{{ media.name }}</a></li>
+                        {% endfor %}
+                        </ul>
+                    {% endif %}              
+
+                    {% if book.has_mp3_file %}
+                        <ul class="audiobook-list" id="mp3-files">
+                        {% for media in book.get_mp3 %}
+                            <li class="mp3Player">
+                              <a href="{{ media.file.url }}">{{ media.name }}</a>            
+                              <object type="application/x-shockwave-flash" style="margin-top: 0.5em" data="{{ STATIC_URL }}player.swf" width="226" height="20">
+                                    <param name="movie" value="{{ STATIC_URL }}player.swf" />
+                                    <param name="bgcolor" value="#ffffff" />
+                                    <param name="FlashVars" value="mp3={{ media.file.url }}&amp;width=226&amp;showvolume=1&amp;bgcolor1=eeeeee&amp;bgcolor2=eeeeee&amp;buttoncolor=666666" />
+                                </object>
+                                
+                            </li>
+                        {% endfor %}
+                        </ul>     
+                    {% endif %}
+                </div> <!-- /audiobooks -->
+                <p>{% trans "Audiobooks were prepared as a part of project" %}: <a href="http://czytamysluchajac.pl">CzytamySłuchając</a>.</p>
             </div>
         </div>
 
@@ -114,7 +119,6 @@
             <h2>{% trans "Details" %}</h2>
             <ul>
                 <li>
-                       
                     {% trans "Author" %}:
                     {% for tag in categories.author %}
                     <a href="{{ tag.get_absolute_url }}">{{ tag }}</a>{% if not forloop.last %}, {% endif %}