--- a/integration/css/edition.css Thu Oct 25 14:53:29 2012 +0200
+++ b/integration/css/edition.css Thu Oct 25 16:40:20 2012 +0200
@@ -8,11 +8,10 @@
}
/* header - title-video-wrap */
-.header .title-video-wrap{
+.title-video-wrap{
width: 460px;
- min-height: 1px;
}
-.header .title-video-wrap a{
+.title-video-wrap a{
position: absolute;
top: 10px;
left: 0;
@@ -25,16 +24,16 @@
background-position: right 2px;
padding-right: 20px;
}
-.header .title-video-wrap a:hover{
+.title-video-wrap a:hover{
text-decoration: none;
}
-.header .title-video-wrap p.time-length{
+.title-video-wrap p.time-length{
position: absolute;
top: 34px;
color: #333333;
font-size: 14px;
}
-.header .title-video-wrap p.time-length span{
+.title-video-wrap p.time-length span{
color: #de2500;
}
/* popin - update-title */
@@ -188,13 +187,21 @@
border:1px solid #999999;
position: absolute;
}
+
+.segment-info {
+ padding-top: 12px;
+ position: relative;
+ width: 100%;
+ overflow: hidden;
+}
+
/* col-middle - bloc-segmentation - popin.segmentation */
-.segmentation{
- top: 376px;
- width: 100%;
+.segment-info .pointer{
+ top: 0; margin-left: -10px;
}
-.segmentation img.pointer{
- left: 222px ;
+
+.segmentation .pointer{
+ left: 230px;
}
.segmentation h2{
font-size: 14px;
@@ -380,38 +387,34 @@
}
/* popin - frise-description */
-.frise-description {
- top: 26px;
- left: 0;
- width: 458px;
-}
-.frise-description img.pointer{
+
+.mashup-description img.pointer{
right: 36px;
}
-.frise-description h2{
+.mashup-description h2{
color: #de2500;
font-size: 14px;
font-weight: bold;
}
-.frise-description table{
+.mashup-description table{
font-size: 12px;
}
-.frise-description th{
+.mashup-description th{
text-align: left;
font-weight: 600;
display: block;
min-width: 75px;
}
-.frise-description td{
+.mashup-description td{
line-height: 15px;
padding-left: 2px;
}
-.frise-description th,
-.frise-description td,
-.frise-description h2{
+.mashup-description th,
+.mashup-description td,
+.mashup-description h2{
padding-bottom: 8px;
}
-.frise-description .tools{
+.mashup-description .tools{
float: right;
}
/* tools */
--- a/integration/edition.html Thu Oct 25 14:53:29 2012 +0200
+++ b/integration/edition.html Thu Oct 25 16:40:20 2012 +0200
@@ -3,7 +3,10 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Edition</title>
+ <meta name="description" content="Interface d'édition de Hashcuts (Mashups vidéo cliquables)" />
+ <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+ <meta name="author" content="Anthony Ly, Raphaël Velt" />
+ <title>Hashcut > Edition</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/edition.css" />
@@ -47,7 +50,6 @@
<p>
<a href="#" class="change-account button">Changer de compte</a>
</p>
-
</div>
</div><!-- popin user info-->
@@ -155,7 +157,7 @@
<div class="segment">
<img src="img/visuel-segment.png" alt="">
</div>
- <div class="segmentation" id="">
+ <div class="segment-info segmentation">
<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>
@@ -187,7 +189,7 @@
<div class="segments">
<div class="segment">
<div class="section" style="left:0%;width:20%;"></div>
- <div class="popin segment-section" id="">
+ <div class="popin segment-section">
<img style="left:20px;" class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content clearfix">
<div class="instant-description">
@@ -228,8 +230,9 @@
<div class="segment" style="background-color:red;width:20%;"></div>
</div>
+ </div>
- <div class="popin frise-description" id="frise-description">
+ <div class="segment-info mashup-description">
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<ul class="tools">
@@ -257,9 +260,7 @@
</tbody>
</table>
</div>
- </div><!-- popin frise-description -->
-
- </div><!-- frise -->
+ </div>
</div><!-- bloc-pvw -->
</div><!-- col-middle -->
@@ -281,7 +282,7 @@
</div>
</div>
- <ul class="list-video" id="sortable">
+ <ul class="list-video organize-segments">
<li class="item-video">
<img src="img/apercu-video.jpg" alt="aperçu" />
<span class="video-info">
--- a/integration/home.html Thu Oct 25 14:53:29 2012 +0200
+++ b/integration/home.html Thu Oct 25 16:40:20 2012 +0200
@@ -1,22 +1,20 @@
<!DOCTYPE html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Home</title>
+ <meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
+ <meta name="author" content="Anthony Ly, Raphaël Velt" />
+ <title>Hashcut > Home</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/home.css" />
- <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
- <script src="js/vendor/modernizr-2.6.1.min.js"></script>
+ <link rel="stylesheet" href="lib/jquery-ui.css">
</head>
<body>
<div class="wrap">
<div class="wrap-header">
- <a title="Bibliothèque centre Pompidou" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
+ <a title="Bibliothèque Publique d'Information" href="#"><img src="img/pompidou-logo.png" alt="Bibliothèque centre Pompidou" /></a>
</div>
<div class="header">
<!-- popin header -->
@@ -26,7 +24,9 @@
<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-->
@@ -34,7 +34,7 @@
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Créer un compte :</h2>
- <form action="#">
+ <form action="#" class="signup-form">
<p>
<label for="signup-pseudo">Pseudonyme : </label>
<input type="text" id="signup-pseudo" name="" />
@@ -52,7 +52,7 @@
<input type="password" id="signup-password" name="" />
</p>
<p>
- <input type="submit" value="Créer le compte">
+ <input class="button" type="submit" value="Créer le compte">
</p>
</form>
@@ -63,7 +63,7 @@
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<h2>Connexion :</h2>
- <form action="#">
+ <form action="#" class="login-form">
<p>
<label for="signup-pseudo">E-mail : </label>
<input type="text" id="signup-pseudo" name="" />
@@ -73,10 +73,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>
@@ -198,9 +198,8 @@
</div><!-- footer -->
</div><!-- wrap -->
<!-- JavaScript -->
- <script src="js/vendor/jquery-1.8.0.min.js"></script>
- <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
- <script src="js/plugins.js"></script>
- <script src="js/main.js"></script>
+ <script type="text/javascript" src="lib/jquery.min.js"></script>
+ <script type="text/javascript" src="lib/jquery-ui.min.js"></script>
+ <script type="text/javascript" src="js/common.js"></script>
</body>
</html>
--- a/integration/js/editor.js Thu Oct 25 14:53:29 2012 +0200
+++ b/integration/js/editor.js Thu Oct 25 16:40:20 2012 +0200
@@ -5,7 +5,7 @@
url: "data/bpidata.json",
serializer: IriSP.serializers.medialist
}),
- mediatemplate = '<li class="item-video"><img src="{{thumbnail}}" alt="aperçu" />'
+ mediatemplate = '<li class="item-video"><img src="{{thumbnail}}" alt="{{title}}" />'
+ '<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></li>';
project.onLoad(function() {
@@ -49,6 +49,30 @@
return false;
});
+ function disableMoveItemVideo() {
+ $(".organize-segments .top, .organize-segments .bottom").removeClass("disable");
+ $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable");
+ }
+
+ $(".organize-segments").sortable({
+ stop : function(){
+ disableMoveItemVideo();
+ }
+ });
+
+ $(".organize-segments .top").click(function(e){
+ var currentItem = $(this).parents(".item-video");
+ currentItem.insertBefore(currentItem.prev());
+ disableMoveItemVideo();
+ });
+
+ $(".organize-segments .bottom").click(function(e){
+ var currentItem = $(this).parents(".item-video");
+ currentItem.insertAfter(currentItem.next());
+ disableMoveItemVideo();
+ });
+
+
}
IriSP.Hashcut = Hashcut;