# HG changeset patch # User veltr # Date 1351164662 -7200 # Node ID 56937307d7f472f702289aeaf980445bc7e0f648 # Parent 2754a76e278720073831fdb782c5265c2602d054 cleaning css diff -r 2754a76e2787 -r 56937307d7f4 integration/css/common.css --- 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 */ diff -r 2754a76e2787 -r 56937307d7f4 integration/css/edition.css --- 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; +} diff -r 2754a76e2787 -r 56937307d7f4 integration/css/reset.css --- 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 diff -r 2754a76e2787 -r 56937307d7f4 integration/data/bpidata.json --- 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 diff -r 2754a76e2787 -r 56937307d7f4 integration/edition.html --- 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 @@

Mashup75

mash@cinecast.fr

12 Hashcuts - Changer de compte +

+ Changer de compte +

+ @@ -91,10 +94,10 @@

- +

- Créer un compte + Créer un compte

@@ -128,21 +131,31 @@ -
+
+ +
+ Segmenter La cuisine du Popcorn + Prévisualiser +
+ +
+
+

Créer un Hashcut, c’est facile !

+
    +
  1. Commencez par choisir une vidéo dans le volet de gauche
    2. +
  2. Créez un segment dans la vidéo et profitez-en pour annoter votre segment
    3. +
  3. Ajoutez votre segment à la liste, réorganisez les segments entre eux
    4. +
  4. Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !
    5. +
+
+ +
-
- Segmenter La cuisine du Popcorn - Prévisualiser -
-
- - -
-
+

Créer un nouveau segment de 02:27 à 02:27 (durée: 02:27)

@@ -162,10 +175,8 @@

-

- -

+
@@ -180,10 +191,10 @@
-

Le moment crucial où le maïs explose

+

Le moment crucial où le maïs explose

De: 00:43 à 01:20 (durée: 00:37)

- Reprendre le segment + Reprendre le segment
@@ -201,14 +212,6 @@
-
- Segmenter La cuisine du Popcorn - Prévisualiser -
-
- - -
@@ -259,26 +262,6 @@
- -
-
- Segmenter - Prévisualiser -
-
-
-

Créer un Hashcut, c’est facile !

-
    -
  1. Commencez par choisir une vidéo dans le volet de gauche
    2. -
  2. Créez un segment dans la vidéo et profitez-en pour annoter votre segment
    3. -
  3. Ajoutez votre segment à la liste, réorganisez les segments entre eux
    4. -
  4. Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !
    5. -
-
- -
-
-
@@ -300,53 +283,48 @@
@@ -375,5 +353,6 @@ + diff -r 2754a76e2787 -r 56937307d7f4 integration/js/common.js --- /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 diff -r 2754a76e2787 -r 56937307d7f4 integration/js/editor.js --- 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 = '
  • aperçu' + mediatemplate = '
  • aperçu' + '{{title}}{{description}}' - + 'Durée : {{duration}}
    • '; + + 'Durée : {{duration}}'; 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;