# HG changeset patch
# User souliane <souliane@mailoo.org>
# Date 1430816598 -7200
# Node ID d54f2f09a73a3f904f26bdccc3c52eff77449cd2
# Parent  84c2e20d3de188f83cf9b959dbbd2a7fc3250f32
fixes displaying two carousels on the same page

diff -r 84c2e20d3de1 -r d54f2f09a73a static/css/sat_website.css
--- a/static/css/sat_website.css	Tue May 05 09:47:55 2015 +0200
+++ b/static/css/sat_website.css	Tue May 05 11:03:18 2015 +0200
@@ -48,11 +48,13 @@
 
 .carousel-caption {
     padding: 10px;
-    bottom: -55px;
+    bottom: -75px;
     color: black;
     font-style: italic;
     font-size: 14px;
     text-shadow: none;
+    left: 0px;
+    width: 100%;
 }
 
 .carousel-indicators {
@@ -141,23 +143,23 @@
 	border-bottom-style: none;
 }
 
-#carousel-screenshots img, #carousel-screenshots video {
+.my-carousel img, .my-carousel video {
     cursor: pointer;
     height: 200px;
     width: auto;
     display: table-cell;
 }
 
-#modal-screenshots .modal-dialog {
+#my-modal .modal-dialog {
     max-width: 90%;
     width: auto;
 }
 
-#carousel-screenshots-modal .carousel-inner {
-    padding-bottom: 80px;
+.my-carousel-modal .carousel-inner {
+    padding-bottom: 100px;
 }
 
-#carousel-screenshots-modal img, #carousel-screenshots-modal video {
+.my-carousel-modal img, .my-carousel-modal video {
     margin: auto;
 }
 
diff -r 84c2e20d3de1 -r d54f2f09a73a static/js/sat_website.js
--- a/static/js/sat_website.js	Tue May 05 09:47:55 2015 +0200
+++ b/static/js/sat_website.js	Tue May 05 11:03:18 2015 +0200
@@ -14,20 +14,4 @@
         }
     });
 
-    // open the big gallery when a thumbnail is clicked
-    $('#carousel-screenshots .thumbnail').click(function() {
-        $('#modal-screenshots').modal('show');
-        index = parseInt($(this).attr('index'));
-        $('#carousel-screenshots-modal').carousel(index);
-        // start playing the big video
-        if ($(this)[0].tagName == 'VIDEO') {
-           $('#carousel-screenshots-modal img, #carousel-screenshots-modal video')[index].play();
-        }
-    });
-    
-    // thumbail's video starts playing when clicked, pause it
-    $('#carousel-screenshots video.thumbnail').each(function(index) {
-        $(this).on('play', function(e) { $(this)[0].pause(); });
-    });
-
 });
diff -r 84c2e20d3de1 -r d54f2f09a73a templates/sat_website/base.html
--- a/templates/sat_website/base.html	Tue May 05 09:47:55 2015 +0200
+++ b/templates/sat_website/base.html	Tue May 05 11:03:18 2015 +0200
@@ -56,8 +56,8 @@
         </div>
     </nav>
 
+    <script src="{% static "js/jquery.min.js" %}"></script>
     {% block content %}{% endblock %}
-    <script src="{% static "js/jquery.min.js" %}"></script>
     <script src="{% static "bootstrap/js/bootstrap.min.js" %}"></script>
     <script src="{% static "js/sat_website.js" %}"></script>
 </body>
diff -r 84c2e20d3de1 -r d54f2f09a73a templates/sat_website/gallery.html
--- a/templates/sat_website/gallery.html	Tue May 05 09:47:55 2015 +0200
+++ b/templates/sat_website/gallery.html	Tue May 05 11:03:18 2015 +0200
@@ -22,11 +22,11 @@
 {% load staticfiles %}
 {% load utils %}
 
-<div id="carousel-screenshots" class="carousel slide" data-ride="carousel" data-interval="0">
+<div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
     {% if screenshots|length > 9 %}
         <ol class="carousel-indicators">
             {% for row in screenshots|buffer:9 %}
-                <li data-target="#carousel-screenshots" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+                <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
             {% endfor %}
         </ol>
     {% endif %}
@@ -47,11 +47,11 @@
             </div>
         {% endfor %}
         {% if screenshots|length > 9 %}
-	        <a class="left carousel-control" href="#carousel-screenshots" role="button" data-slide="prev">
+	        <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
 	          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 	          <span class="sr-only">Previous</span>
 	        </a>
-	        <a class="right carousel-control" href="#carousel-screenshots" role="button" data-slide="next">
+	        <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
 	          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 	          <span class="sr-only">Next</span>
 	        </a>
@@ -59,18 +59,18 @@
     </div>
 </div>
 
-<div class="modal" id="modal-screenshots" role="dialog">
+<div class="modal my-modal" id="modal-{{ name }}" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button class="close" type="button" data-dismiss="modal">×</button>
             </div>
             <div class="modal-body">
-                <div id="carousel-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0">
+                <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
                     {% if screenshots|length > 1 %}
                         <ol class="carousel-indicators">
                             {% for screenshot in screenshots %}
-                                <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+                                <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
                             {% endfor %}
                         </ol>
                     {% endif %}
@@ -92,11 +92,11 @@
                         {% endfor %}
                     </div>
                     {% if screenshots|length > 1 %}
-	                    <a class="left carousel-control" href="#carousel-screenshots-modal" data-slide="prev">
+	                    <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
 	                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 	                        <span class="sr-only">Previous</span>
 	                    </a>
-	                    <a class="right carousel-control" href="#carousel-screenshots-modal" data-slide="next">
+	                    <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
 	                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 	                        <span class="sr-only">Next</span>
 	                    </a>
@@ -106,3 +106,24 @@
         </div>
     </div>
 </div>
+
+<script>
+$(document).ready(function() {
+    // open the big gallery when a thumbnail is clicked
+    $('#carousel-{{ name }} .thumbnail').click(function() {
+        $('#modal-{{ name }}').modal('show');
+        index = parseInt($(this).attr('index'));
+        $('#carousel-{{ name }}-modal').carousel(index);
+        // start playing the big video
+        if ($(this)[0].tagName == 'VIDEO') {
+           $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
+        }
+    });
+    
+    // thumbail's video starts playing when clicked, pause it
+    $('#carousel-{{ name }} video.thumbnail').each(function(index) {
+        $(this).on('play', function(e) { $(this)[0].pause(); });
+    });
+
+});
+</script>
\ No newline at end of file
diff -r 84c2e20d3de1 -r d54f2f09a73a templates/sat_website/screenshots.html
--- a/templates/sat_website/screenshots.html	Tue May 05 09:47:55 2015 +0200
+++ b/templates/sat_website/screenshots.html	Tue May 05 11:03:18 2015 +0200
@@ -30,7 +30,7 @@
     </h5>
     <div class="info">
         {% trans "These media concern the basic utilisation SàT through graphical frontends like Libervia." %}
-        {% include "sat_website/gallery.html" with screenshots=screenshots %}
+        {% include "sat_website/gallery.html" with screenshots=screenshots name="media" %}
     </div>
 </div>
 
@@ -40,7 +40,7 @@
     </h5>
     <div class="info">
         {% trans "These media concern the advanced utilisation and frontends of SàT, including administration tasks and experimental features." %}
-        {% include "sat_website/gallery.html" with screenshots=screenshots_tech %}
+        {% include "sat_website/gallery.html" with screenshots=screenshots_tech name="media_tech" %}
     </div>
 </div>