Binary file creation/sprites.psd has changed
--- a/player/css/styles.css Thu Jun 27 16:34:04 2013 +0200
+++ b/player/css/styles.css Mon Jul 08 18:53:14 2013 +0200
@@ -605,19 +605,51 @@
}
.about-box h3 {
- text-align: center; font-weight: 700; font-size: 16px;
+ font-weight: 700; font-size: 16px;
+}
+
+.about-partners {
+ margin: 10px 25px 5px;
+}
+
+.about-text {
+ margin: 25px;
+}
+
+.about-text p {
+ font-size: 15px; margin: 5px 0;
+}
+
+.about-contents {
+ overflow: auto; padding-bottom: 20px;
}
.about-collaboration {
- margin: 5px 0 40px;
+ margin: 5px 20px;
+}
+
+.about-partner {
+ width: 50%; float: left;
+}
+
+.about-partner img {
+ display: block; margin: 5px auto; height: 120px;
}
-.about-collaboration li {
- width: 50%; float: left; text-align: center; font-size: 14px;
+.about-partner h4 {
+ font-size: 15px; margin: 8px 0 0; text-align: center;
}
-.about-collaboration img {
- display: block; margin: 5px auto; height: 120px;
+.about-partner h3 {
+ margin: 10px 5px 5px;
+}
+
+.about-partner li {
+ font-size: 14px; margin: 5px;
+}
+
+.about-partner em {
+ font-style: italic; margin-right: 3px;
}
/* Bottom bar */
--- a/player/index.html Thu Jun 27 16:34:04 2013 +0200
+++ b/player/index.html Mon Jul 08 18:53:14 2013 +0200
@@ -72,17 +72,48 @@
<div class="annotation about-box white-annotation">
<a href="#" class="close-annotation"></a>
<h2 class="annotation-title">À propos des Webdocs</h2>
- <h3>Une collaboration</h3>
- <ul class="about-collaboration">
- <li>
- <img src="img/logo-aix.png" alt="Logo du Festival d’Art Lyrique d’Aix-en-Provence" />
- <p>Festival d’Art Lyrique d’Aix-en-Provence</p>
- </li>
- <li>
- <img src="img/logo-iri.png" alt="Logo de l’Institut de Recherche et d’Innovation" />
- <p>Institut de Recherche et d’Innovation</p>
- </li>
- </ul>
+ <div class="about-contents">
+ <div class="about-text">
+ <p>En 2013, le site internet du Festival d’Aix-en-Provence introduit un nouvel outil de vulgarisation et d’introduction au monde de l’opéra sous la forme de documentaires cliquables.</p>
+ <p>Ce nouveau dispositif, réalisé en partenariat avec l’Institut de Recherche et d’Innovation du Centre Pompidou (IRI), permet d’enrichir une vidéo avec des contenus multimédia (texte, image, audio, vidéo) et de la publier dans un environnement éditorial.</p>
+ <p>Les éditeurs du Festival alimenteront les documentaires de contenus supplémentaires au fur et à mesure de la vie du Festival (interviews d’artistes, répétitions du chef d’orchestre, extraits d’une représentation).</p>
+ </div>
+ <h3 class="about-partners">Partenaires :</h3>
+ <ul class="about-collaboration">
+ <li class="about-partner">
+ <img src="img/logo-aix.png" alt="Logo du Festival d’Art Lyrique d’Aix-en-Provence" />
+ <h4>Festival d’Art Lyrique d’Aix-en-Provence</h4>
+ </li>
+ <li class="about-partner">
+ <img src="img/logo-iri.png" alt="Logo de l’Institut de Recherche et d’Innovation" />
+ <h4>Institut de Recherche et d’Innovation</h4>
+ </li>
+ </ul>
+ <ul class="about-collaboration">
+ <li class="about-partner">
+ <h3>Crédits Festival d’Aix :</h3>
+ <ul>
+ <li><em>Directrice de la communication :</em> Catherine Roques</li>
+ <li><em>Conseiller artistique et dramaturge :</em> Alain Perroux</li>
+ <li><em>Réalisation :</em> Maxime Giacometti, Nicolas Capus (Mars Production)</li>
+ <li>Contact : <a href="mailto:catherine.roques@festival-aix.com">catherine.roques@festival-aix.com</a></li>
+ </ul>
+ </li>
+ <li class="about-partner">
+ <h3>Crédits IRI :</h3>
+ <ul>
+ <li><em>Directeur exécutif :</em> Vincent Puig</li>
+ <li><em>Directeur technique :</em> Yves-Marie Haussonne</li>
+ <li><em>Responsable projets média :</em> Nicolas Sauret</li>
+ <li><em>Designer :</em> Camille Baudelaire</li>
+ <li><em>Développeur interface utilisateur :</em> Raphaël Velt</li>
+ <li><em>Développeur interface éditeur :</em> Thibaut Cavalié et Anthony Ly</li>
+ <li><em>Éditeur :</em> Simon Lincelles</li>
+ <li>Contact : <a href="mailto:nicolas.sauret@iri.centrepompidou.fr">nicolas.sauret@iri.centrepompidou.fr</a></li>
+ </ul>
+ </li>
+ </ul>
+ </div>
</div>
<div class="annotation text-annotation white-annotation">
--- a/player/js/player.js Thu Jun 27 16:34:04 2013 +0200
+++ b/player/js/player.js Mon Jul 08 18:53:14 2013 +0200
@@ -639,10 +639,13 @@
}
$(".about").click(function() {
+ myMedia.pause();
closeAnnotation();
var aboutBox = $(".annotation-templates .about-box").clone().appendTo($(".main-video"));
aboutBox.find(".close-annotation").click(closeAnnotation);
- aboutBox.css({ top: Math.floor(($(".main-video").height() - aboutBox.height())/2)+"px" });
+ var mainH = $(".main-video").height();
+ aboutBox.find(".about-contents").css("max-height", mainH - 100);
+ aboutBox.css("top", Math.floor((mainH - aboutBox.height())/2)+"px");
});
function closeAnnotation(e) {