| author | Anthony Ly <anthonyly.com@gmail.com> |
| Wed, 03 Apr 2013 16:19:25 +0200 | |
| changeset 1 | 4aec3f00ea87 |
| parent 0 | ca1b8c0fbe35 |
| child 2 | 05fdc9616ba0 |
| child 4 | 1fa074d64662 |
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integ/css/iri.css Wed Apr 03 16:19:25 2013 +0200 @@ -0,0 +1,65 @@ +.sidebar{display: table-cell; padding-top:60px; vertical-align: top; } +.sidebar .content{width: 280px; padding: 18px 0 0 12px; height: 100%;} +.inner-content{padding-right: 16px;} +.sidebar h2{font-size: 20px; margin-bottom: 24px;} +.user{ height: 30px; line-height: 30px;} +.user img{width: 30px; height: 30px; margin: 0 24px 24px 0; float: left;} +.user p{float: left;} +h3.instruction{color: #c7c7c7; clear: both; padding-bottom: 14px; margin: 0; border-bottom: 1px solid #3b3b3b;} +.stickers li{margin: 0 10px 10px 0;float:left;width: 81px; height: 80px;background-color: #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-repeat: no-repeat; background-position: center 13px;} +.stickers li span{width: 100%;color: #212121; font-size: 12px;font-weight: bold; line-height: 12px; display: inline-block; text-align: center;padding-top: 48px;} +li.culte{background-image: url(../img/culte-scene-icon.png);} +li.star{background-image: url(../img/star-icon.png);} +li.like{background-image: url(../img/like-icon.png);} +.stickers li:nth-child(3n+3) { margin-right: 0;} +.sidebar h3{font-size: 13px; font-weight: bold; margin-bottom: 12px;} + +.more{margin-bottom: 16px;width: 100%; height: 12px; background-color: #191919; display: inline-block;} +.more:hover{background-color: #3b3b3b;} +.more span{ margin: 4px auto 0 auto;width: 13px; height: 4px; background: url(../img/arrow-more.png) 0 0 no-repeat; display: block;} +.more.less span{background-position: bottom left;} +.more-hide{display: none;} + +.stars li:nth-child(4n+4) { margin-right: 0;} +.stars li{margin: 0 8px 10px 0;width: 58px; height: 78px;border: 1px solid #767676; float: left;} +.stars img{width: 58px; height: 78px;} + +.images li:nth-child(3n+3) { margin-right: 0;} +.images li{margin: 0 8px 10px 0;width: 80px; height: 80px;border: 1px solid #767676; float: left;} +.images img{width: 80px; height: 80px;} + +.videos li:nth-child(3n+3) { margin-right: 0;} +.videos li{margin: 0 8px 10px 0;width: 80px; height: 64px;border: 1px solid #767676; float: left;} +.videos img{width: 80px; height: 64px;} + +.renkan{display: table-cell; padding-top:60px; vertical-align: top; background-color: #eee; width:100%; background: url(../img/bg-renkan.png) 0 0; min-width: 400px;} +.renkan .wrap-top{width: 100%; height: 56px; background-color:rgba(0,0,0,.4);} +.renkan .wrap-top h2{ font-size: 30px; padding-left: 18px; line-height: 56px; display: inline-block;} + +.zoom{width: 30px; margin: 18px 0 0 16px;-webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.1);} +.zoom li{padding: 0;width: 30px; height: 30px;} +.zoom a{margin: 0;width: 30px; height: 30px; display: inline-block; background: url(../img/zoom.png) center top no-repeat;} +.zoom a:hover{background-color: #191919;} +.zoom .in{background-color: #929292; background-position: center 8px;} +.zoom .out{background-color: #fff; background-position: center -22px;} + +.renkan .actions{width: 194px; float: right; margin: 12px 12px 0 0;} +.renkan .actions li{float: left;} +.renkan .actions a{width: 92px; height: 32px; display: inline-block; text-align: center; line-height: 32px; font-size: 11px; font-weight: bold;text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75); +-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75); +box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);-webkit-border-radius: 4px; +-moz-border-radius: 4px; +border-radius: 4px;} +a.cancel{margin-right: 8px; + background: #555555; background: -moz-linear-gradient(top, #555555 0%, #7a7a7a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#7a7a7a)); background: -webkit-linear-gradient(top, #555555 0%,#7a7a7a 100%); background: -o-linear-gradient(top, #555555 0%,#7a7a7a 100%); background: -ms-linear-gradient(top, #555555 0%,#7a7a7a 100%); background: linear-gradient(to bottom, #555555 0%,#7a7a7a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#7a7a7a',GradientType=0 ); /* IE6-9 */ +} +a.cancel:hover{ + background: #7a7a7a;background: -moz-linear-gradient(top, #7a7a7a 0%, #555555 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(100%,#555555));background: -webkit-linear-gradient(top, #7a7a7a 0%,#555555 100%);background: -o-linear-gradient(top, #7a7a7a 0%,#555555 100%);background: -ms-linear-gradient(top, #7a7a7a 0%,#555555 100%);background: linear-gradient(to bottom, #7a7a7a 0%,#555555 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#555555',GradientType=0 ); + +} +a.send{ + background: #126ae3;background: -moz-linear-gradient(top, #126ae3 0%, #1899e1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#126ae3), color-stop(100%,#1899e1)); background: -webkit-linear-gradient(top, #126ae3 0%,#1899e1 100%);background: -o-linear-gradient(top, #126ae3 0%,#1899e1 100%); background: -ms-linear-gradient(top, #126ae3 0%,#1899e1 100%); background: linear-gradient(to bottom, #126ae3 0%,#1899e1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#126ae3', endColorstr='#1899e1',GradientType=0 ); /* IE6-9 */ +} +a.send:hover{ + background: #1899e1;background: -moz-linear-gradient(top, #1899e1 0%, #126ae3 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1899e1), color-stop(100%,#126ae3));background: -webkit-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: -o-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: -ms-linear-gradient(top, #1899e1 0%,#126ae3 100%);background: linear-gradient(to bottom, #1899e1 0%,#126ae3 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1899e1', endColorstr='#126ae3',GradientType=0 ); +} \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integ/iri-creation-cinecard.html Wed Apr 03 16:19:25 2013 +0200 @@ -0,0 +1,191 @@ +<!DOCTYPE html> +<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--> +<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> +<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--> +<!--[if IE 9]><html class="no-js ie9" lang="en"><![endif]--> +<!--[if gt IE 9]><!--> <html class="no-js" lang="en"><!--<![endif]--> +<head> +<meta charset="utf-8" /> +<meta http-equiv="X-UA-Compatible" content="IE=edge" /> +<title>Cinegift</title> +<meta name="description" content="" /> +<meta name="viewport" content="width=980" /> +<link rel="stylesheet" href="css/default.css" /> +<link rel="stylesheet" href="css/reset.css" /> +<link rel="stylesheet" href="css/styles.css" /> +<link rel="stylesheet" href="css/iri.css" /> +<!-- Custom scrollbars CSS --> +<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /> +<script src="js/libs/modernizr-2.5.3.min.js"></script> +</head> + +<body class="profile"> +<!--[if lt IE 9]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]--> + <header> + <h1><img src="img/logo.png" alt="AlloCiné LAB" class="logo" /></h1> + <nav> + <ul> + <li><a href="social.html">Social</a></li> + <li><a href="index.html">Discover</a></li> + <li><a href="#">Profile</a></li> + <li class="current"><a href="#">Cadeaux</a></li> + </ul> + </nav> + + <section class="connect"> + + <div class="connected_profiles"> + <span>Angelo Chiacchio</span> + <img src="img/profil.jpg" alt="photo de profil" /> + </div><!-- /connected_profiles --> + + <span class="logout">loggout</span> + + </section> + <!-- /connect --> + </header> + + <div role="main"> + <section class="central"> + + <div class="sidebar"> + <div class="content"> + <div class="inner-content"> + + <h2>Création CineCard</h2> + <h3>Destinataire</h3> + <div class="user clearfix"> + <img src="img/profil.jpg" alt=""> + <p>Jean-Louis Frechin</p> + </div> + <h3 class="instruction">Glisser un contenu dans la carte</h3> + <h3>Stickers</h3> + <ul class="stickers"> + <li class="culte"> + <span>SCENES CULTE</span> + </li> + <li class="star"> + <span>MON<br />AVIS</span> + </li> + <li class="like"> + <span>TU VAS<br />AIMER</span> + </li> + <span id="stickers-more" class="more-hide"> + <li class="culte"> + <span>SCENES CULTE</span> + </li> + <li class="star"> + <span>MON<br />AVIS</span> + </li> + <li class="like"> + <span>TU VAS<br />AIMER</span> + </li> + </span> + </ul> + <a class="more" href="#stickers-more"><span></span></a> + + <h3>Stars</h3> + <ul class="stars clearfix"> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <span id="stars-more" class="more-hide"> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + </span> + </ul> + <a class="more" href="#stars-more"><span></span></a> + + <h3>Stars</h3> + <ul class="images clearfix"> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <span id="images-more" class="more-hide"> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + </span> + </ul> + <a class="more" href="#images-more"><span></span></a> + + <h3>Vidéos</h3> + <ul class="videos clearfix"> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <span id="videos-more" class="more-hide"> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + <li><img src="img/angelo.jpg" alt=""></li> + </span> + </ul> + <a class="more" href="#videos-more"><span></span></a> + + </div> + </div><!-- /content --> + + </div><!-- /sidebar --> + + <div class="renkan"> + <div class="wrap-top"> + <h2>Drive 2011</h2> + <ul class="actions"> + <li><a class="cancel" href="#">ANNULER</a></li> + <li><a class="send" href="#">ENVOYER</a></li> + </ul> + </div> + + <ul class="zoom"> + <li><a class="in" href="#"></a></li> + <li><a class="out" href="#"></a></li> + </ul> + </div> + + + + + + + + + + + + + </section> + <!-- /central --> + </div> + <!-- /main --> + + <footer> + <nav> + <ul> + <li><a href="#">Mes goûts</a></li> + <li class="current"><a href="#">Ma vitrine</a></li> + <li><a href="wishlist.html">Mes envies</a></li> + <li><a href="ratings.html">Mes notes</a></li> + <li><a href="not_interested.html">Pas intéressé</a></li> + </ul> + </nav> + <a href="#" class="logofoot" ><img src="img/logo-footer.png" alt="Cinégift" /></a> + </footer> + +<script src="js/libs/jquery-1.7.1.min.js"></script> +<script src="js/libs/jquery-ui-1.8.21.custom.min.js"></script> + +<script type='text/javascript' src='js/jquery.simplemodal.js'></script> +<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script> +<!-- mousewheel plugin --> +<script src="js/jquery.mousewheel.min.js"></script> +<!-- custom scrollbars plugin --> +<script src="js/jquery.mCustomScrollbar.js"></script> + +<script src="js/script.js"></script> +<script src="js/iri.js"></script> + +</body> +</html> \ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integ/js/iri.js Wed Apr 03 16:19:25 2013 +0200 @@ -0,0 +1,32 @@ +$(function(){ + + + +$(window).bind('resize', function(){ + setSidebarContentHeight(); +}); +setSidebarContentHeight(); +function setSidebarContentHeight(){ + var newHeight = $(window).height() - $('header').height() - $('footer').height(); + $(".sidebar .content").css('height', newHeight); +} + +$(".sidebar .content").mCustomScrollbar({ + advanced:{ + updateOnContentResize: true + } +}); + +$('a.more').bind('click', function(e){ + e.preventDefault(); + var target = $(this).attr('href'); + if($(this).hasClass('less')){ + $(target).hide(); + $(this).removeClass('less') + }else{ + $(target).show(); + $(this).addClass('less') + } +});// a.more + +}); \ No newline at end of file
