--- a/integration/css/common.css Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/common.css Mon Oct 29 17:22:55 2012 +0100
@@ -81,6 +81,11 @@
margin-bottom: 1px;
}
/* header */
+.title-header{
+ width: 460px;
+ float: left;
+ height: 60px;
+}
.header{
position: relative;
background-color: #e2dbfd;
@@ -204,7 +209,8 @@
.button:hover{
background-color: #FF00FC
}
-.user.login h2, .user.signup h2 {
+.user.login h2,
+.user.signup h2 {
color: #de2500;
font-size: 14px;
font-weight: 600;
@@ -297,4 +303,52 @@
}
.footer .links-right li img {
vertical-align: middle;
+}
+/* video-item */
+.hashcut-video-wrap{
+ padding-left: 10px;
+ overflow: hidden;
+ margin-bottom: 16px;
+}
+.video-item{
+ width: 300px;
+ float: left;
+ margin-right: 20px;
+}
+
+.video-item h3{
+ font-size: 12px;
+}
+.video-item h3 strong{
+ font-weight: 600;
+}
+.video-item h3 span{
+ color: #de2500;
+}
+.video-item .screenshot{
+ display: inline-block;
+ margin-bottom: 8px;
+}
+.video-item h3 a{
+ border-bottom: 1px solid #bababa;
+ display: inline-block;
+ line-height: 12px;
+}
+.video-item h3 a:hover{
+ border-bottom: none;
+}
+.pagination{
+ text-align: center;
+}
+.pagination a{
+ font-size: 14px;
+ color: #7628df;
+ text-decoration: underline;
+}
+.pagination a:hover{
+ text-decoration: none;
+}
+.pagination a.active{
+ color: #de2500;
+ text-decoration: none;
}
\ No newline at end of file
--- a/integration/css/edition.css Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/edition.css Mon Oct 29 17:22:55 2012 +0100
@@ -126,6 +126,7 @@
width: 458px;
position: relative;
height: 22px;
+ overflow: hidden;
}
.frise .segment{
height: 22px;
@@ -139,10 +140,29 @@
position: relative;
border: 1px solid #333333;
}
+.segments,.indications{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.indications{
+ z-index: 2;
+}
+.aucun-segment{
+ font-weight: 600;
+ font-style: italic;
+ text-align: center;
+ line-height: 20px;
+ width: 100%;
+ z-index:0;
+}
.frise .segment{
- float: left;
- margin-left: -1px;
- border-right: 1px solid #333;
+ position: absolute;
+ background-image: url(../img/border-right-segment.png);
+ background-repeat: repeat-y;
+ background-position: right top;
-moz-box-shadow: inset 0px 2px 2px 0px #333;
-webkit-box-shadow: inset 0px 2px 2px 0px #333;
box-shadow: inset 0px 2px 2px 0px #333;
@@ -151,15 +171,15 @@
-moz-box-shadow: inset 2px 2px 2px 0px #333;
-webkit-box-shadow: inset 2px 2px 2px 0px #333;
box-shadow: inset 2px 2px 2px 0px #333;
- margin-left: 0;
}
.frise .segment:last-child{
- border-right: 0;
+ background-image: none;
}
.frise span.indication{
display: inline-block;
position: absolute;
color: #FFF;
+ top:0;
left: 0px;
font-size: 10px;
width: 30px;
@@ -217,10 +237,12 @@
.time-tangle {
color: #7628df; cursor: w-resize; position: relative;
}
-.time-tangle:hover, .time-tangle.active {
+.time-tangle:hover,
+.time-tangle.active {
color: #FF00FC; border-bottom: 1px dashed #7628df;
}
-.time-tangle:hover:after, .time-tangle.active:after {
+.time-tangle:hover:after,
+.time-tangle.active:after {
color: #7628DF; position: absolute; top: 18px; left: 50%; width: 160px;
margin-left: -80px; font-size: 12px; text-align: center;
content: "glisser pour modifier"
@@ -362,7 +384,7 @@
}
.col-left .item-video:hover,
.col-left .item-video.active{
- background: url(../img/arrow-item-video-sprite.png) right top no-repeat;
+ background: url(../img/arrow-item-video-sprite.png) right center no-repeat;
}
/* col-right */
.col-right{
@@ -397,7 +419,7 @@
.col-right .item-video:hover,
.col-right .item-video.active{
- background: url(../img/arrow-item-video-sprite.png) left top no-repeat;
+ background: url(../img/arrow-item-video-sprite.png) left center no-repeat;
}
/* popin - frise-description */
--- a/integration/css/home.css Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/css/home.css Mon Oct 29 17:22:55 2012 +0100
@@ -1,9 +1,4 @@
/* header */
-.title-header{
- width: 460px;
- float: left;
- height: 60px;
-}
.title-header h2{
width: 100%;
text-align: center;
@@ -38,68 +33,21 @@
width: 630px;
margin-right: 20px;
}
-.hashcut-video-wrap{
- padding-left: 10px;
- overflow: hidden;
- margin-bottom: 16px;
-}
-.news{
- width: 300px;
- float: left;
- margin-right: 20px;
-}
-.news:nth-child(2n+2){
+.news .video-item:nth-child(2n+2){
margin-right: 0;
}
-.hashcut-video-wrap h3{
- font-size: 12px;
-}
-.hashcut-video-wrap h3 strong{
- font-weight: 600;
-}
-.last h3 strong{
- margin-bottom: 2px;
- font-weight: 600;
- display: block;
-}
-.hashcut-video-wrap h3 a{
- border-bottom: 1px solid #bababa;
- display: inline-block;
- line-height: 12px;
-}
-.hashcut-video-wrap h3 a:hover{
- border-bottom: none;
-}
-.hashcut-video-wrap h3 span{
- color: #de2500;
-}
-.hashcut-video-wrap a.screenshot{
- display: inline-block;
- margin-bottom: 8px;
-}
-.last:nth-child(4n+4){
+
+
+
+.last .video-item:nth-child(4n+4){
margin-right: 0;
}
-.last{
+.last .video-item{
width: 140px;
float: left;
margin: 0 20px 12px 0;
}
-.pagination{
- text-align: center;
-}
-.pagination a{
- font-size: 14px;
- color: #7628df;
- text-decoration: underline;
-}
-.pagination a:hover{
- text-decoration: none;
-}
-.pagination a.active{
- color: #de2500;
- text-decoration: none;
-}
+
/* right-content */
.right-content{
width: 310px;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/css/profil.css Mon Oct 29 17:22:55 2012 +0100
@@ -0,0 +1,17 @@
+.title-content{
+ padding: 20px 0 6px;
+ border-bottom: 1px solid #333333;
+ color: #30036d;
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 14px;
+}
+.title-content a{
+ color: #ff00fc;
+}
+.profil .video-item{
+ margin-bottom: 16px;
+}
+.profil .video-item:nth-child(3n+3){
+ margin-right: 0;
+}
--- a/integration/edition.html Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/edition.html Mon Oct 29 17:22:55 2012 +0100
@@ -111,7 +111,7 @@
<span>Le Mashup<br />Cliquable</span>
</a></h1>
<div class="title-video-wrap">
- <a class="open-popin" href="#update-title">Hashcut sans titre</a>
+ <a title="modifier" class="open-popin" href="#update-title">Hashcut sans titre</a>
<p class="time-length">Durée: <span>02:24</span></p>
</div>
<div class="profil-wrap">
@@ -242,7 +242,7 @@
<div class="segment">
<div class="section" style="left:80%;width:10%;"></div>
</div>
- </div>
+ </div><!-- segments -->
</div>
</div><!-- bloc-segmentation -->
@@ -250,17 +250,19 @@
<div class="frise clearfix">
- <span class="indication" style="left:24%;">00:30</span>
- <span class="indication" style="left:44%;">00:30</span>
- <span class="indication" style="left:64%;">00:30</span>
- <span class="indication" style="left:84%;">00:30</span>
+ <div class="indications">
+ <span class="indication" style="left:24%;">00:30</span>
+ <span class="indication" style="left:44%;">00:30</span>
+ <span class="indication" style="left:64%;">00:30</span>
+ <span class="indication" style="left:84%;">00:30</span>
+ </div>
<div class="segments">
- <div class="segment" style="background-color:red;width:20%;"></div>
- <div class="segment" style="background-color:green;width:20%;"></div>
- <div class="segment" style="background-color:red;width:20%;"></div>
- <div class="segment" style="background-color:green;width:20%;"></div>
- <div class="segment" style="background-color:red;width:20%;"></div>
+ <div class="segment" style="background-color:red;left:0;width:20%;"></div>
+ <div class="segment" style="background-color:green;left:20%;width:20%;"></div>
+ <div class="segment" style="background-color:red;left:40%;width:20%;"></div>
+ <div class="segment" style="background-color:green;left:60%;width:20%;"></div>
+ <div class="segment" style="background-color:red;left:80%;width:20%;"></div>
</div>
</div>
@@ -269,10 +271,10 @@
<img class="pointer" src="img/popin-triangle.png" alt="" />
<div class="popin-content">
<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>
+ <li><a title="éditer" class="edit" href="#"></a></li>
+ <li><a title="descendre" class="bottom" href="#"></a></li>
+ <li><a title="remonter" class="top" href="#"></a></li>
+ <li><a title="supprimer" class="delete" href="#"></a></li>
</ul>
<h2>Chargement de la capsule lunaire</h2>
@@ -302,15 +304,17 @@
<div class="liste-segment">
<h2>Liste des segments</h2>
<div class="frise clearfix">
-
- <span class="indication" style="left:64%;">00:30</span>
- <span class="indication" style="left:84%;">00:30</span>
+ <p class="aucun-segment">Aucun segment</p>
+ <div class="indications">
+ <span class="indication" style="left:64%;">00:30</span>
+ <span class="indication" style="left:84%;">00:30</span>
+ </div>
<div class="segments">
- <div class="segment" style="background-color:red;width:20%;"></div>
- <div class="segment" style="background-color:yellow;width:20%;"></div>
- <div class="segment" style="background-color:blue;width:20%;"></div>
- <div class="segment" style="background-color:green;width:20%;"></div>
- <div class="segment" style="background-color:brown;width:20%;"></div>
+ <div class="segment" style="background-color:red;left:0;width:20%;"></div>
+ <div class="segment" style="background-color:yellow;left:20%;width:20%;"></div>
+ <div class="segment" style="background-color:blue;left:40%;width:20%;"></div>
+ <div class="segment" style="background-color:green;left:60%;width:20%;"></div>
+ <div class="segment" style="background-color:brown;left:80%;width:20%;"></div>
</div>
</div>
</div>
@@ -337,10 +341,10 @@
<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>
+ <li><a title="éditer" class="edit" href="#"></a></li>
+ <li><a title="descendre" class="bottom" href="#"></a></li>
+ <li><a title="remonter" class="top" href="#"></a></li>
+ <li><a title="supprimer" class="delete" href="#"></a></li>
</ul>
</span>
</li><!-- item-video -->
@@ -351,10 +355,10 @@
<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>
+ <li><a title="éditer" class="edit" href="#"></a></li>
+ <li><a title="descendre" class="bottom" href="#"></a></li>
+ <li><a title="remonter" class="top" href="#"></a></li>
+ <li><a title="supprimer" class="delete" href="#"></a></li>
</ul>
</span>
</li><!-- item-video -->
--- a/integration/home.html Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/home.html Mon Oct 29 17:22:55 2012 +0100
@@ -99,52 +99,53 @@
<div class="content">
<div class="left-content">
<h2>Hashcuts à la Une</h2>
- <div class="hashcut-video-wrap">
- <div class="news">
+ <div class="hashcut-video-wrap news">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="news">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
</div>
<h2>Derniers Hashcuts</h2>
- <div class="hashcut-video-wrap">
- <div class="last">
+ <div class="hashcut-video-wrap last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
- <div class="last">
+ <div class="video-item">
<a href="#" class="screenshot"><img src="img/visuel-home-last.jpg" alt="" /></a>
<h3><strong>Mon Hashcut</strong> par <a href="#">Hashcutter</a> | <span>02:24</span> </h3>
</div>
</div>
+
<div class="pagination">
<a href="#" class="active">1</a>
<a href="#">2</a>
Binary file integration/img/arrow-item-video-sprite.png has changed
Binary file integration/img/border-right-segment.png has changed
--- a/integration/js/common.js Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/common.js Mon Oct 29 17:22:55 2012 +0100
@@ -22,4 +22,5 @@
$(".login-form, .signup-form").submit(function() {
$(".user").hide();
});
+
});
\ No newline at end of file
--- a/integration/js/editor.js Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/js/editor.js Mon Oct 29 17:22:55 2012 +0100
@@ -418,6 +418,7 @@
$(".organize-segments .top, .organize-segments .bottom").removeClass("disable");
$(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable");
}
+ disableMoveItemVideo();
$(".organize-segments").sortable({
stop : function(){
--- a/integration/profil.html Fri Oct 26 18:54:20 2012 +0200
+++ b/integration/profil.html Mon Oct 29 17:22:55 2012 +0100
@@ -9,6 +9,7 @@
<link rel="stylesheet" href="lib/jquery-ui.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
+ <link rel="stylesheet" href="css/profil.css" />
</head>
<body>
<div class="wrap">
@@ -86,17 +87,51 @@
<img src="img/hashcut-logo.png" alt="Hashcut" />
<span>Le Mashup<br />Cliquable</span>
</a></h1>
- <div class="title-video-wrap">
-
- </div>
+ <div class="title-header"></div>
<div class="profil-wrap">
-
+ <a href="#" class="all-hashcut">Tous les Hashcuts</a>
<a href="#user" class="my-profil open-popin">Mon profil</a>
</div>
</div><!-- header -->
<div class="content">
-
+ <h2 class="title-content">Hashcuts de <a href="#">Hashcutter75</a></h2>
+
+ <div class="hashcut-video-wrap profil">
+ <div class="video-item">
+ <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+ <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+ </div>
+ <div class="video-item">
+ <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+ <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+ </div>
+ <div class="video-item">
+ <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+ <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+ </div>
+ <div class="video-item">
+ <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+ <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+ </div>
+ <div class="video-item">
+ <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+ <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+ </div>
+ <div class="video-item">
+ <a href="#" class="screenshot"><img src="img/visuel-home-news.jpg" alt=""/></a>
+ <h3><strong>Mon Hashcut</strong> | <span>02:24</span> </h3>
+ </div>
+ </div>
+ <div class="pagination">
+ <a href="#" class="active">1</a>
+ <a href="#">2</a>
+ <a href="#">3</a>
+ <a href="#">4</a>
+ <a href="#">5</a>
+ <a href="#">6</a>
+ <a href="#">Suivant</a>
+ </div>
</div><!-- content -->
<div class="footer clearfix">
