--- a/integration/css/common.css Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/css/common.css Thu Oct 25 13:31:02 2012 +0200
@@ -41,7 +41,7 @@
}
@font-face {
font-family: 'OpenSans';
- font-weight: 600px;
+ font-weight: 600;
font-style: italic;
src:url("fonts/OpenSans-SemiboldItalic.eot?") format("eot"),
url("fonts/OpenSans-SemiboldItalic.woff") format("woff"),
@@ -144,18 +144,18 @@
top: 0;
z-index: 10;
}
-.popin img.pointer{
+.pointer{
position: absolute;
top: 0;
}
-.popin .popin-content{
+.popin-content{
padding: 8px;
border: 1px solid #867a97;
background: url(../img/bg-jaune.png);
}
-.popin input[type=text],
-.popin input[type=password],
-.popin textarea{
+.popin-content input[type=text],
+.popin-content input[type=password],
+.popin-content textarea{
padding: 0 6px;
height: 20px;
line-height: 20px;
@@ -184,58 +184,47 @@
.user.popin img.pointer{
right: 36px;
}
-.user.popin.signup input[type=submit],
-.user.popin.login input[type=submit],
-.user.popin.login a.signup-button ,
-.popin.segmentation input[type=submit],
-.popin.segment-section a.reprendre-segment{
+.button {
margin-top: 2px;
display: block;
font-size: 12px;
- border: 0;
+ border: none;
+ padding: 0;
width: 150px;
- padding: 1px 0;
background-color: #30036D;
color: #FFF;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
- float: right;
cursor: pointer;
+ height: 22px;
+ line-height: 22px;
}
-.user.popin.signup form input[type=submit]:hover,
-.user.popin.login form input[type=submit]:hover,
-.user.popin.login a.signup-button:hover,
-.popin.segmentation input[type=submit]:hover,
-.popin.segment-section a.reprendre-segment:hover{
+
+.button:hover{
background-color: #FF00FC
}
-.user.popin.signup .popin-content h2,
-.user.popin.login .popin-content h2{
+.user h2 {
color: #de2500;
font-size: 14px;
margin-bottom: 12px;
}
-.user.popin.signup .popin-content label,
-.user.popin.login .popin-content label{
+.user label{
width: 84px;
font-size: 12px;
display: inline-block;
float: left;
line-height: 12px;
}
-.user.popin.signup .popin-content form p,
-.user.popin.login .popin-content form p{
+.user p {
display: block;
line-height: 18px;
margin-bottom: 8px;
overflow: hidden;
}
-.user.popin.signup input[type=text],
-.user.popin.signup input[type=password],
-.user.popin.login input[type=text],
-.user.popin.login input[type=password]{
+.user input[type=text],
+.user input[type=password] {
float: left;
position: relative;
width: 110px;
@@ -243,53 +232,43 @@
height: 18px;
display: inline-block;
}
+.user .button {
+ float: right;
+}
/* popin - user - info */
-.user.popin.info .popin-content{
+.user .popin-content{
min-width: 150px;
text-align: right;
}
-.user.popin.info .popin-content h2{
+.user h2{
color: #7628df;
font-size: 18px;
font-weight: 600;
margin-bottom: 2px;
}
-.user.popin.info .popin-content h3{
+.user h3{
color: #30036d;
font-size: 14px;
margin-bottom: 10px;
}
-.user.popin.info .popin-content a.nb-hashcut{
+.user .nb-hashcut{
color: #de2500;
font-size: 14px;
text-decoration: underline;
display: block;
margin-bottom: 12px;
}
-.user.popin.info .popin-content a.nb-hashcut:hover{
+.user .nb-hashcut:hover{
text-decoration: none;
}
-.user.popin.info .popin-content a.change-account{
- text-align: center;
- height: 20px;
- width: 150px;
- line-height: 20px;
- color: #FFF;
- font-size: 12px;
- background-color: #30036d;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
- display: block;
-}
.user.popin.info .popin-content a.change-account:hover{
background-color: #FF00FC;
}
/* popin - user - signup */
-.user.popin.login .popin-content a.signup-button{
+.signup-button{
background-color: #de2500;
}
-.user.popin.signup .popin-content{
+.user .popin-content{
min-width: 205px;
}
/* footer */
--- a/integration/css/edition.css Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/css/edition.css Thu Oct 25 13:31:02 2012 +0200
@@ -1,13 +1,12 @@
-/* bloc */
-.bloc-pvw{
+/* Block modes */
+
+.empty-mode .bloc-pvw,
+.empty-mode .bloc-segmentation,
+.segment-mode .bloc-pvw,
+.pvw-mode .bloc-segmentation {
display: none;
}
-.bloc-segmentation{
- display: none;
-}
-.bloc-vide{
- display: block;
-}
+
/* header - title-video-wrap */
.header .title-video-wrap{
width: 460px;
@@ -77,74 +76,59 @@
}
/* col-middle */
.col-middle{
- width: 460px; min-height: 1px;
+ width: 460px;
+ min-height: 1px;
}
.col-middle-header{
height: 35px;
- background: url(../img/bg-previsualiser.png) repeat-x 0 0;
+ font-size: 16px;
+ clear: both;
+}
+/* Tabs */
+.tab {
+ height: 35px;
line-height: 35px;
- font-size: 16px;
- font-weight: 600px;
- font-style: italic;
+ color: #30036d;
+ padding: 0 10px;
+ width: 210px;
+ float: left;
+ background-position: 0 -35px;
}
-.col-middle-header a{
- color: #30036d;
-}
-.col-middle-header a:hover{
+.tab:hover{
color: #FF00FC;
}
-.col-middle-header a.disable,
-.col-middle-header a.disable:hover{
+.tab.disable,
+.tab.disable:hover{
color: #796891;
}
-.col-middle-header a.segmenter{
- padding: 0 10px;
- display: inline-block;
- min-width: 210px;
- height: 35px;
- background: url(../img/bg-segmenter.png) repeat-x 0 0;
+.tab-segment {
+ background-image: url(../img/bg-segmenter.png);
}
-.col-middle-header a.segmenter.disable,
-.col-middle-header a.previsualiser.disable,
-.col-middle-header.disable {
- background-position: 0 -35px;
+.tab-pvw {
+ background-image: url(../img/bg-previsualiser.png); text-align: right;
}
-.col-middle-header a.previsualiser{
- background: url(../img/bg-previsualiser.png) repeat-x 0 0;
- float: right;
- padding-right: 10px;
+
+.pvw-mode .tab-pvw, .segment-mode .tab-segment {
+ width: 250px; background-position: 0 0; font-weight: 600;
}
-.col-middle .video{
- width: 460px;
- position: relative;
- margin-bottom: 8px;
+
+.segment-mode .tab-pvw, .pvw-mode .tab-segment {
+ width: 170px; color: #796891;
}
-.col-middle .video a.publier-button{
- position: absolute;
- width: 69px;
- height: 67px;
- background: url(../img/publier-button-sprite.png) 0 0 no-repeat;
- left: 382px;
- top: 10px;
+
+.tab-media-title {
+ font-style: italic; font-weight: normal;
}
-.col-middle .video a.publier-button:hover{
- background-position: 0 -67px;
-}
-.col-middle .video a.publier-button.disable{
- background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
-}
-.col-middle .video a.publier-button.disable:hover{
- background-color: none;
-}
-.col-middle .frise{
+
+.frise{
width: 458px;
position: relative;
height: 22px;
}
-.col-middle .frise .segment{
+.frise .segment{
height: 22px;
}
-.col-middle .frise span.indication{
+.frise span.indication{
height: 22px;
line-height: 22px;
}
@@ -185,16 +169,12 @@
.bloc-segmentation{
position: relative;
}
-.bloc-segmentation .existant{
- margin-top: 190px;
-}
.bloc-segmentation .existant h2{
color: #30036d;
font-size: 14px;
font-weight: 600;
- padding-left: 8px;
- margin-bottom: 8px;
+ margin: 10px 8px 8px;
}
.bloc-segmentation .segment{
width: 100%;
@@ -203,104 +183,106 @@
margin-bottom: 5px;
position: relative;
}
-.bloc-segmentation .segment .section{
+.bloc-segmentation .section{
background-color: #ff7f0e;
height: 6px;
border:1px solid #999999;
position: absolute;
}
/* col-middle - bloc-segmentation - popin.segmentation */
-.popin.segmentation{
+.segmentation{
top: 376px;
width: 100%;
}
-.popin.segmentation img.pointer{
+.segmentation img.pointer{
left: 222px ;
}
-.popin.segmentation h2{
+.segmentation h2{
font-size: 14px;
font-weight: 600;
color:#de2500;
margin-bottom: 10px;
}
-.popin.segmentation h2 span{
+.segmentation h2 span{
color: #7628df;
}
-.popin.segmentation form{
+.segmentation form{
overflow: hidden;
}
-.popin.segmentation form .form-segment-left,
-.popin.segmentation form .form-segment-right{
+.form-segment-left,
+.form-segment-right{
float: left;
}
-.popin.segmentation form .form-segment-left{
+.segmentation .form-segment-left{
width: 228px;
}
-.popin.segmentation form p{
+.segmentation form p{
margin-bottom: 8px;
}
-.popin.segmentation label{
+.segmentation label{
display: block;
font-size: 12px;
font-weight: 600;
margin-bottom: 4px;
}
-.popin.segmentation textarea{
+.segmentation textarea{
width: 200px;
height: 66px;
max-width: 200px;
font-size: 12px;
}
-.popin.segmentation input[type=text]{
+.segmentation input[type=text]{
font-size: 12px;
width: 200px;
height: 20px;
}
-.bloc-segmentation .segment .popin.segment-section{
- top: 8px;
+
+.add-segment {
+ float: right; margin: 4px 0;
}
-.bloc-segmentation .segment .popin.segment-section h2{
+
+.segment-section{
+ top: 8px; left: 15px;
+}
+.segment-section h3{
padding: 0;
color: #de2500;
margin-bottom: 4px;
+ font-weight: 600;
}
-.bloc-segmentation .segment .popin.segment-section p{
+.segment-section p{
font-size: 12px;
}
-.bloc-segmentation .segment .popin.segment-section p span{
+.segment-section p span{
color: #7628df;
}
-.bloc-segmentation .segment .popin.segment-section a.reprendre-segment{
+.segment-section a.reprendre-segment{
float: right;
display: block;
- height: 20px;
- line-height: 20px;
}
-.bloc-segmentation .segment .popin.segment-section .instant-description{
+.segment-section .instant-description{
float: left;
margin-right: 16px;
}
/* col-middle - bloc-vide */
-.bloc-vide .tutorial{
+.tutorial{
padding: 0 10px;
color: #FFF;
font-weight: 600;
- height: 316px;
- background: url(../img/visuel-player-bar.jpg) 0 276px no-repeat #333333;
}
-.bloc-vide .tutorial h2{
+.tutorial h2{
padding-top: 16px;
font-size: 18px;
margin-bottom: 20px;
}
-.bloc-vide .tutorial ol{
+.tutorial ol{
padding-left: 22px;
}
-.bloc-vide .tutorial ol li:first-child{
+.tutorial ol li:first-child{
width: 324px;
}
-.bloc-vide .tutorial ol li{
+.tutorial ol li{
list-style: decimal;
font-size: 14px;
margin-bottom: 16px;
@@ -358,8 +340,8 @@
z-index: 2;
background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
}
-.col-left .list-video li a:hover,
-.col-left .list-video li a.active{
+.col-left .item-video:hover,
+.col-left .item-video.active{
background: url(../img/arrow-item-video-sprite.png) right top no-repeat;
}
/* col-right */
@@ -380,125 +362,122 @@
margin-bottom: 12px;
padding-top: 8px;
}
-.col-right .liste-segment .frise{
+.col-right .frise{
width: 228px;
position: relative;
height: 20px;
}
-.col-right .liste-segment .frise .segment{
+.col-right .frise .segment{
height: 20px;
}
-.col-right .liste-segment .frise span.indication{
+.col-right .frise .indication{
height: 20px;
line-height: 20px;
}
-.col-right .list-video > li{
- position: relative;
-}
-.col-right .list-video > li > a:hover,
-.col-right .list-video > li > a.active{
+
+.col-right .item-video:hover,
+.col-right .item-video.active{
background: url(../img/arrow-item-video-sprite.png) left top no-repeat;
}
-.col-right .list-video > li .tools{
- position: absolute;
- left: 94px;
- top: 48px;
-}
+
/* popin - frise-description */
-.frise-description.popin{
+.frise-description {
top: 26px;
left: 0;
width: 458px;
}
-.frise-description.popin img.pointer{
+.frise-description img.pointer{
right: 36px;
}
-.frise-description.popin h2{
+.frise-description h2{
color: #de2500;
font-size: 14px;
font-weight: bold;
}
-.frise-description.popin table{
+.frise-description table{
font-size: 12px;
}
-.frise-description.popin th{
+.frise-description th{
text-align: left;
font-weight: 600;
display: block;
min-width: 75px;
}
-.frise-description.popin td{
+.frise-description td{
line-height: 15px;
padding-left: 2px;
}
-.frise-description.popin th,
-.frise-description.popin td,
-.frise-description.popin h2{
+.frise-description th,
+.frise-description td,
+.frise-description h2{
padding-bottom: 8px;
}
-.frise-description.popin .tools{
+.frise-description .tools{
float: right;
}
/* tools */
+.tools {
+ height: 17px;
+}
.tools li{
float: left;
}
-.tools li a{
+.tools a{
display: block;
width: 17px;
height: 17px;
background: url(../img/tools-sprite.png) no-repeat 0 0;
}
-.tools li a.edit{
+.tools a.edit{
background-position: 2px 0;
}
-.tools li a.edit:hover{
+.tools a.edit:hover{
background-position: 2px -32px;
}
-.tools li a.edit.disable:hover,
-.tools li a.edit.disable{
+.tools a.edit.disable:hover,
+.tools a.edit.disable{
background-position: 2px -16px;
}
-.tools li a.bottom{
+.tools a.bottom{
background-position: -19px 0;
}
-.tools li a.bottom:hover{
+.tools a.bottom:hover{
background-position: -19px -32px;
}
-.tools li a.bottom.disable:hover,
-.tools li a.bottom.disable{
+.tools a.bottom.disable:hover,
+.tools a.bottom.disable{
background-position: -19px -16px;
}
-.tools li a.top{
+.tools a.top{
background-position: -40px 0;
}
-.tools li a.top:hover{
+.tools a.top:hover{
background-position: -40px -32px;
}
-.tools li a.top.disable:hover,
-.tools li a.top.disable{
+.tools a.top.disable:hover,
+.tools a.top.disable{
background-position: -40px -16px;
}
-.tools li a.delete{
+.tools a.delete{
background-position: -61px 0;
}
-.tools li a.delete:hover{
+.tools a.delete:hover{
background-position: -61px -32px;
}
-.tools li a.delete.disable:hover,
-.tools li a.delete.disable{
+.tools a.delete.disable:hover,
+.tools a.delete.disable{
background-position: -61px -16px;
}
/* list-video */
-.list-video{
+.list-video {
overflow: hidden;
overflow-y: auto;
- max-height: 680px;
+ height: 680px;
}
-.list-video > li{
+.item-video {
margin-bottom: 1px;
}
-.list-video > li > a{
+.item-video{
padding: 5px 10px 5px 10px;
position: relative;
clear: both;
@@ -506,37 +485,37 @@
min-height: 62px;
display: block;
}
-.list-video li a img{
+.item-video img{
float: left;
}
-.list-video li a img{
+.item-video img{
margin-right: 4px;
}
-.list-video li a span.video-info{
+.item-video .video-info{
display: block;
margin-left: 88px;
}
-.list-video li a .video-info .title-video{
+.item-video .title-video{
font-size: 13px;
font-weight: 600;
color: #30036d;
display: block;
margin-bottom: 1px;
}
-.list-video li a span.video-info .author{
+.item-video .author{
font-size: 11px;
display: block;
margin-bottom: 1px;
}
-ul.list-video li a span.video-info span.time-length{
+.item-video .time-length{
font-size: 12px;
font-weight: 600;
display: block;
}
-ul.list-video li a span.video-info span.time-length span{
+.item-video .time-length span{
color: #de2500;
}
-.list-video li a .number{
+.item-video .number{
color: #FFF;
font-size: 10px;
text-align: center;
@@ -552,17 +531,42 @@
top: 54px;
left: 78px;
}
-.list-video li a .subtitle{
+.item-video .subtitle{
margin-bottom: 2px;
display: block;
color: #de2500;
font-size: 11px;
}
-.list-video li .duration{
+.item-video .duration{
color: #7628df;
font-size: 12px;
font-weight: 600;
display: block;
}
+/* Video */
+.video{
+ width: 460px;
+ height: 345px;
+ position: relative;
+ margin-bottom: 8px;
+ background: #333333;
+}
+a.publier-button{
+ position: absolute;
+ width: 69px;
+ height: 67px;
+ background: url(../img/publier-button-sprite.png) 0 0 no-repeat;
+ left: 382px;
+ top: 10px;
+}
+a.publier-button:hover{
+ background-position: 0 -67px;
+}
+a.publier-button.disable{
+ background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
+}
+a.publier-button.disable:hover{
+ background-color: none;
+}
--- a/integration/css/reset.css Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/css/reset.css Thu Oct 25 13:31:02 2012 +0200
@@ -69,4 +69,9 @@
}
.clear{
clear: both;
+}
+
+input::-moz-focus-inner {
+ border: 0 none;
+ padding: 0;
}
\ No newline at end of file
--- a/integration/data/bpidata.json Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/data/bpidata.json Thu Oct 25 13:31:02 2012 +0200
@@ -2,7 +2,7 @@
{
"id": "4938a52e-1863-11e2-a537-00145ea4a2be",
"video": "http://media.iri.centrepompidou.fr/video/mashup/bpimashup_danslesdecombres.mp4",
- "title": "Dans les décombres (Qian Men)",
+ "title": "Dans les décombres",
"author": "Olivier Meys, Zhang Yaxuan",
"thumbnail": "thumbnails/decombres-80.jpg",
"duration": 5070000
--- a/integration/edition.html Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/edition.html Thu Oct 25 13:31:02 2012 +0200
@@ -44,7 +44,10 @@
<h2>Mashup75</h2>
<h3>mash@cinecast.fr</h3>
<a href="#" class="nb-hashcut">12 Hashcuts</a>
- <a href="#" class="change-account">Changer de compte</a>
+ <p>
+ <a href="#" class="change-account button">Changer de compte</a>
+ </p>
+
</div>
</div><!-- popin user info-->
@@ -91,10 +94,10 @@
<input type="password" id="signup-email" name="" />
</p>
<p>
- <input type="submit" value="Se connecter">
+ <input class="button" type="submit" value="Se connecter">
</p>
<p>
- <a class="signup-button" href="#">Créer un compte</a>
+ <a class="button signup-button" href="#">Créer un compte</a>
</p>
</form>
@@ -128,21 +131,31 @@
</ul>
</div><!-- col-left -->
- <div class="col-middle">
+ <div class="col-middle empty-mode">
+
+ <div class="col-middle-header">
+ <a href="#" class="tab tab-segment">Segmenter <span class="tab-media-title">La cuisine du Popcorn</span></a>
+ <a href="#" class="tab tab-pvw">Prévisualiser</a>
+ </div>
+
+ <div class="video">
+ <div class="tutorial">
+ <h2>Créer un Hashcut, c’est facile !</h2>
+ <ol>
+ <li>Commencez par choisir une vidéo dans le volet de gauche</li>
+ <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
+ <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
+ <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
+ </ol>
+ </div>
+ <a class="publier-button" title="Publier" href="#"></a>
+ </div>
<div class="bloc-segmentation">
- <div class="col-middle-header disable">
- <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a>
- <a href="#" class="previsualiser disable">Prévisualiser</a>
- </div>
- <div class="video">
- <a class="publier-button" title="Publier" href="#"></a>
- <img src="img/visuel-player.jpg" alt="" />
- </div>
<div class="segment">
<img src="img/visuel-segment.png" alt="">
</div>
- <div class="popin segmentation" id="">
+ <div class="segmentation" id="">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Créer un nouveau segment de <span>02:27</span> à <span>02:27</span> (durée: <span>02:27</span>)</h2>
@@ -162,10 +175,8 @@
<label for="description">Description :</label>
<textarea id="description"></textarea>
</p>
- <p>
- <input type="submit" value="Ajouter au Hashcut" />
- </p>
</div>
+ <input class="button add-segment" type="submit" value="Ajouter au Hashcut" />
</form>
</div>
@@ -180,10 +191,10 @@
<img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content clearfix">
<div class="instant-description">
- <h2>Le moment crucial où le maïs explose</h2>
+ <h3>Le moment crucial où le maïs explose</h3>
<p>De: <span>00:43</span> à <span>01:20</span> (durée: <span>00:37</span>)</p>
</div>
- <a href="#" class="reprendre-segment">Reprendre le segment</a>
+ <a href="#" class="button reprendre-segment">Reprendre le segment</a>
</div>
</div><!-- popin segment-section -->
</div>
@@ -201,14 +212,6 @@
</div><!-- bloc-segmentation -->
<div class="bloc-pvw">
- <div class="col-middle-header">
- <a href="#" class="segmenter">Segmenter <em>La cuisine du Popcorn</em></a>
- <a href="#" class="previsualiser">Prévisualiser</a>
- </div>
- <div class="video">
- <a class="publier-button" title="Publier" href="#"></a>
- <img src="img/visuel-player.jpg" alt="" />
- </div>
<div class="frise clearfix">
@@ -259,26 +262,6 @@
</div><!-- frise -->
</div><!-- bloc-pvw -->
-
- <div class="bloc-vide">
- <div class="col-middle-header disable">
- <a href="#" class="segmenter disable">Segmenter</a>
- <a href="#" class="previsualiser disable">Prévisualiser</a>
- </div>
- <div class="video">
- <div class="tutorial">
- <h2>Créer un Hashcut, c’est facile !</h2>
- <ol>
- <li>Commencez par choisir une vidéo dans le volet de gauche</li>
- <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
- <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
- <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
- </ol>
- </div>
- <a class="publier-button" title="Publier" href="#"></a>
- </div>
- </div><!-- bloc-vide -->
-
</div><!-- col-middle -->
<div class="col-right">
@@ -300,53 +283,48 @@
<ul class="list-video" id="sortable">
<li class="item-video">
- <a class="clearfix" href="#">
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune 1</span>
- <span class="subtitle">Chargement de la Capsule</span>
- <span class="duration">01:17 - 02:01 (00:44)</span>
- </span>
- </a>
- <ul class="tools">
- <li><a class="edit" href="#"></a></li>
- <li><a class="bottom" href="#"></a></li>
- <li><a class="top" href="#"></a></li>
- <li><a class="delete" href="#"></a></li>
- </ul>
+ <img src="img/apercu-video.jpg" alt="aperçu" />
+ <span class="video-info">
+ <span class="title-video">Voyage à la Lune 1</span>
+ <span class="subtitle">Chargement de la Capsule</span>
+ <span class="duration">01:17 - 02:01 (00:44)</span>
+ <ul class="tools">
+ <li><a class="edit" href="#"></a></li>
+ <li><a class="bottom" href="#"></a></li>
+ <li><a class="top" href="#"></a></li>
+ <li><a class="delete" href="#"></a></li>
+ </ul>
+ </span>
</li><!-- item-video -->
<li class="item-video">
- <a class="clearfix" href="#">
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune 2</span>
- <span class="subtitle">Chargement de la Capsule</span>
- <span class="duration">01:17 - 02:01 (00:44)</span>
- </span>
- </a>
- <ul class="tools">
- <li><a class="edit" href="#"></a></li>
- <li><a class="bottom" href="#"></a></li>
- <li><a class="top" href="#"></a></li>
- <li><a class="delete" href="#"></a></li>
- </ul>
+ <img src="img/apercu-video.jpg" alt="aperçu" />
+ <span class="video-info">
+ <span class="title-video">Voyage à la Lune 2</span>
+ <span class="subtitle">Chargement de la Capsule</span>
+ <span class="duration">01:17 - 02:01 (00:44)</span>
+ <ul class="tools">
+ <li><a class="edit" href="#"></a></li>
+ <li><a class="bottom" href="#"></a></li>
+ <li><a class="top" href="#"></a></li>
+ <li><a class="delete" href="#"></a></li>
+ </ul>
+ </span>
</li><!-- item-video -->
<li class="item-video">
- <a class="clearfix" href="#">
- <img src="img/apercu-video.jpg" alt="aperçu" />
- <span class="video-info">
- <span class="title-video">Le a Lune 3</span>
- <span class="subtitle">Chargement de la Capsule</span>
- <span class="duration">01:17 - 02:01 (00:44)</span>
- </span>
- </a>
- <ul class="tools">
- <li><a class="edit" href="#"></a></li>
- <li><a class="bottom" href="#"></a></li>
- <li><a class="top" href="#"></a></li>
- <li><a class="delete" href="#"></a></li>
- </ul>
+ <img src="img/apercu-video.jpg" alt="aperçu" />
+ <span class="video-info">
+ <span class="title-video">Voyage à la Lune 3</span>
+ <span class="subtitle">Chargement de la Capsule</span>
+ <span class="duration">01:17 - 02:01 (00:44)</span>
+ <ul class="tools">
+ <li><a class="edit" href="#"></a></li>
+ <li><a class="bottom" href="#"></a></li>
+ <li><a class="top" href="#"></a></li>
+ <li><a class="delete" href="#"></a></li>
+ </ul>
+ </span>
</li><!-- item-video -->
+
</ul>
</div><!-- col-right -->
@@ -375,5 +353,6 @@
<script type="text/javascript" src="js/medialist-serializer.js"></script>
<script type="text/javascript" src="js/model.js"></script>
<script type="text/javascript" src="js/editor.js"></script>
+ <script type="text/javascript" src="js/common.js"></script>
</body>
</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/common.js Thu Oct 25 13:31:02 2012 +0200
@@ -0,0 +1,21 @@
+$(function(){
+
+ $(".open-popin").click(function(){
+ var target = $(this).attr("href");
+ if($(target).is(':visible')){
+ $(target).hide();
+ }else{
+ $(target).show();
+ }
+ return false;
+ });
+
+ $(".change-account").click(function() {
+ $(".user").hide();
+ $(".user.login").show();
+ });
+ $(".signup-button").click(function() {
+ $(".user").hide();
+ $(".user.signup").show();
+ });
+});
\ No newline at end of file
--- a/integration/js/editor.js Wed Oct 24 17:50:32 2012 +0200
+++ b/integration/js/editor.js Thu Oct 25 13:31:02 2012 +0200
@@ -5,9 +5,9 @@
url: "data/bpidata.json",
serializer: IriSP.serializers.medialist
}),
- mediatemplate = '<li class="item-video"><a class="clearfix" href="#"><img src="{{thumbnail}}" alt="aperçu" />'
+ mediatemplate = '<li class="item-video"><img src="{{thumbnail}}" alt="aperçu" />'
+ '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>'
- + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></a></li>';
+ + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>';
project.onLoad(function() {
var html = '';
project.getMedias().forEach(function(_m) {
@@ -16,7 +16,7 @@
$(".col-left .list-video").html(html);
});
- $(".col-left input").bind("keyup change input paste", function() {
+ $(".col-left input").on("keyup change input paste", function() {
var val = $(this).val();
if (val) {
var find = IriSP.Model.regexpFromTextOrArray(val, true),
@@ -39,6 +39,16 @@
}
})
});
+
+ $(".tab-segment").click(function() {
+ $(".col-middle").removeClass("empty-mode pvw-mode").addClass("segment-mode");
+ return false;
+ });
+ $(".tab-pvw").click(function() {
+ $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
+ return false;
+ });
+
}
IriSP.Hashcut = Hashcut;