bachir/jeunes-et-engages-d7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

preview opening works wery well now :)

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-08 21:36:07 +01:00
parent 10b99958e2
commit 76c7154f4e
4 changed files with 386 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.css
+178 -138
View File
@@ -3931,30 +3931,66 @@ div.messages {
position: absolute;
top: 20px;
right: 20px;
width: 250px;
max-height: 30%;
width: 500px;
max-height: 60%;
overflow-y: auto;
z-index: 1000;
}
/* line 147, jee.scss */
/* line 148, jee.scss */
#main {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
/*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
}
/* line 152, jee.scss */
/* line 153, jee.scss */
#main > .region, #main > .region > .block-system, #main > .region > .block-system > .content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* line 158, jee.scss */
/* line 159, jee.scss */
#main .node-chapitre.node-teaser {
position: absolute;
/*
_____ __________________ ___ _________________ __________________
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
*/
/*
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
| \| __| __| _ | | | ||_ _| | | | \| __|
| | | __| __| | | | |__| | | | | | | | | | __|
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
*/
/*
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
| _ | __ | __| | | | __| | | | | | | \| __|
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
*/
/*
_____________ ____________ ___ __ _____ __ _ __ __ _ _
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|_| /_/
*/
}
/* line 166, jee.scss */
/* line 177, jee.scss */
#main .node-chapitre.node-teaser h2.node-title {
-webkit-transform: none;
-ms-transform: none;
@@ -3966,9 +4002,14 @@ div.messages {
transition: 1s ease-out;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
z-index: 5;
}
/* line 172, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre {
/* line 184, jee.scss */
#main .node-chapitre.node-teaser > .content {
position: relative;
}
/* line 185, jee.scss */
#main .node-chapitre.node-teaser .texts {
opacity: 0;
height: 1px;
overflow: hidden;
@@ -3976,103 +4017,86 @@ div.messages {
transition: 1s ease-out;
-webkit-transition-property: opacity height;
transition-property: opacity height;
position: absolute;
}
/* line 177, jee.scss */
/* line 191, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie {
opacity: 0;
position: absolute;
-webkit-transition: 1s ease-out 0.5s;
transition: 1s ease-out 0.5s;
-webkit-transition: 1s ease-in-out 0.1s;
transition: 1s ease-in-out 0.1s;
-webkit-transition-property: opacity -webkit-transform;
transition-property: opacity transform;
}
/* line 183, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) {
/* line 197, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) {
z-index: 2;
opacity: 1;
-webkit-transition-delay: 0;
transition-delay: 0;
}
/* line 187, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-type-text {
/* line 201, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-type-text {
opacity: 0;
-webkit-transition: 1s ease-out 0.5s;
transition: 1s ease-out 0.5s;
-webkit-transition: 1s ease-out 0.9s;
transition: 1s ease-out 0.9s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
/* line 192, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(3) > .field-name-field-vignette {
/* line 206, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie:nth-child(2) > .field-name-field-vignette {
cursor: pointer;
z-index: 2;
}
/* line 198, jee.scss */
#main .node-chapitre.node-teaser .links {
opacity: 0;
-webkit-transition: 1s ease-out 1s;
transition: 1s ease-out 1s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
/* line 199, jee.scss */
#main .node-chapitre.node-teaser .links > * {
display: none;
}
/* line 203, jee.scss */
/* line 209, jee.scss */
#main .node-chapitre.node-teaser:after {
opacity: 0;
-webkit-transition: 3s ease-out;
transition: 3s ease-out;
-webkit-transition: 2s ease-in;
transition: 2s ease-in;
-webkit-transition-property: opacity;
transition-property: opacity;
top: 1px;
left: 1px;
bottom: 2px;
right: 2px;
}
/* line 216, jee.scss */
/* line 228, jee.scss */
#main .node-chapitre.node-teaser.previewed:after {
opacity: 1;
top: 2em;
left: -12em;
right: -12em;
bottom: -30em;
}
/* line 217, jee.scss */
/* line 235, jee.scss */
#main .node-chapitre.node-teaser.previewed h2.node-title {
-webkit-transform: scale(2, 2);
-ms-transform: scale(2, 2);
transform: scale(2, 2);
}
/* line 218, jee.scss */
#main .node-chapitre.node-teaser.previewed .field-name-field-comprendre {
/* line 236, jee.scss */
#main .node-chapitre.node-teaser.previewed .texts {
opacity: 1;
height: 6em;
height: 8em;
}
/* line 219, jee.scss */
#main .node-chapitre.node-teaser.previewed .links {
opacity: 1;
}
/* line 219, jee.scss */
#main .node-chapitre.node-teaser.previewed .links > * {
display: block;
}
/* line 220, jee.scss */
/* line 237, jee.scss */
#main .node-chapitre.node-teaser.previewed .field-name-field-partie {
opacity: 1;
z-index: 0;
}
/* line 223, jee.scss */
/* line 240, jee.scss */
#main .node-chapitre.node-teaser.previewed .field-name-field-partie > .field {
opacity: 1;
z-index: -1;
cursor: default;
}
/* line 228, jee.scss */
/* line 254, jee.scss */
#main .node-chapitre.node-teaser:after {
content: " ";
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 2em;
left: -12em;
right: -12em;
bottom: -30em;
z-index: -1;
}
/* line 242, jee.scss */
/* line 262, jee.scss */
#main .node-chapitre.node-teaser h2.node-title {
font-family: "epflulb";
font-weight: normal;
@@ -4083,35 +4107,59 @@ div.messages {
z-index: 5;
}
@media only screen and (min-width: 64.063em) {
/* line 242, jee.scss */
/* line 262, jee.scss */
#main .node-chapitre.node-teaser h2.node-title {
font-size: 1.3em;
}
}
@media only screen and (min-width: 90.063em) {
/* line 242, jee.scss */
/* line 262, jee.scss */
#main .node-chapitre.node-teaser h2.node-title {
font-size: 1.8em;
}
}
/* line 258, jee.scss */
/* line 282, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre {
max-width: 15em;
min-width: 16em;
}
/* line 259, jee.scss */
/* line 283, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre h1, #main .node-chapitre.node-teaser .field-name-field-comprendre h2, #main .node-chapitre.node-teaser .field-name-field-comprendre h3, #main .node-chapitre.node-teaser .field-name-field-comprendre h4, #main .node-chapitre.node-teaser .field-name-field-comprendre h5, #main .node-chapitre.node-teaser .field-name-field-comprendre h6 {
display: none !important;
}
/* line 261, jee.scss */
/* line 285, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-comprendre p {
margin: 0;
}
/* line 264, jee.scss */
/* line 289, jee.scss */
#main .node-chapitre.node-teaser ul.links {
display: block;
margin: 0;
text-align: right;
z-index: 5;
position: relative;
width: 100%;
}
/* line 291, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore {
padding: 0;
}
/* line 293, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore a {
display: inline-block;
height: 25px;
font-family: "open_sans";
font-weight: 900;
color: #000 !important;
width: 8em;
text-align: left;
background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
}
/* line 305, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-partie {
clear: both;
padding-top: 1em;
}
/* line 268, jee.scss */
/* line 309, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-vignette {
position: relative;
float: left;
@@ -4124,50 +4172,28 @@ div.messages {
background-repeat: no-repeat;
background-origin: center center;
}
/* line 281, jee.scss */
/* line 322, jee.scss */
#main .node-chapitre.node-teaser .field-type-text {
min-width: 16em;
}
/* line 282, jee.scss */
/* line 323, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-titre {
font-family: "epflul";
font-size: 1.6em;
line-height: 1.1;
}
/* line 287, jee.scss */
/* line 328, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-sous-titre {
font-family: "epflul";
font-size: 1.4em;
line-height: 1.2;
}
/* line 292, jee.scss */
/* line 333, jee.scss */
#main .node-chapitre.node-teaser .field-name-field-description {
font-size: 0.88em;
line-height: 1.2;
}
/* line 298, jee.scss */
#main .node-chapitre.node-teaser ul.links {
margin: 0;
text-align: right;
z-index: 5;
position: relative;
}
/* line 300, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore {
padding: 0;
}
/* line 302, jee.scss */
#main .node-chapitre.node-teaser ul.links li.node-readmore a {
display: inline-block;
height: 25px;
font-family: "open_sans";
font-weight: 900;
color: #000 !important;
width: 8em;
text-align: left;
background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
}
/* line 314, jee.scss */
/* line 339, jee.scss */
#main .node-chapitre.node-teaser .line {
z-index: -1;
position: absolute;
@@ -4180,147 +4206,147 @@ div.messages {
background-color: red;
opacity: 0.4;
}
/* line 328, jee.scss */
/* line 358, jee.scss */
#main #node-2::after {
background-image: url(../assets/img/bgd-sol.svg);
}
/* line 329, jee.scss */
/* line 359, jee.scss */
#main #node-2, #main #node-2 a {
color: #b24c14;
}
/* line 330, jee.scss */
/* line 360, jee.scss */
#main #node-2 h2.node-title, #main #node-2 h2.node-title a {
color: #d85509;
}
/* line 331, jee.scss */
/* line 361, jee.scss */
#main #node-2 .field-name-field-vignette {
background-image: url(../assets/img/shadow-sol.svg);
}
/* line 332, jee.scss */
/* line 362, jee.scss */
#main #node-2 .line {
background-color: #ea5b0c;
}
/* line 336, jee.scss */
/* line 366, jee.scss */
#main #node-3::after {
background-image: url(../assets/img/bgd-dph.svg);
}
/* line 337, jee.scss */
/* line 367, jee.scss */
#main #node-3, #main #node-3 a {
color: #686b00;
}
/* line 338, jee.scss */
/* line 368, jee.scss */
#main #node-3 h2.node-title, #main #node-3 h2.node-title a {
color: #afaf00;
}
/* line 339, jee.scss */
/* line 369, jee.scss */
#main #node-3 .field-name-field-vignette {
background-image: url(../assets/img/shadow-dph.svg);
}
/* line 340, jee.scss */
/* line 370, jee.scss */
#main #node-3 .line {
background-color: #cecd00;
}
/* line 344, jee.scss */
/* line 374, jee.scss */
#main #node-4::after {
background-image: url(../assets/img/bgd-sub.svg);
}
/* line 345, jee.scss */
/* line 375, jee.scss */
#main #node-4, #main #node-4 a {
color: #b71330;
}
/* line 346, jee.scss */
/* line 376, jee.scss */
#main #node-4 h2.node-title, #main #node-4 h2.node-title a {
color: #cd0734;
}
/* line 347, jee.scss */
/* line 377, jee.scss */
#main #node-4 .field-name-field-vignette {
background-image: url(../assets/img/shadow-sub.svg);
}
/* line 348, jee.scss */
/* line 378, jee.scss */
#main #node-4 .line {
background-color: #de003a;
}
/* line 352, jee.scss */
/* line 382, jee.scss */
#main #node-5::after {
background-image: url(../assets/img/bgd-bc.svg);
}
/* line 353, jee.scss */
/* line 383, jee.scss */
#main #node-5, #main #node-5 a {
color: #033d6f;
}
/* line 354, jee.scss */
/* line 384, jee.scss */
#main #node-5 h2.node-title, #main #node-5 h2.node-title a {
color: #024b87;
}
/* line 355, jee.scss */
/* line 385, jee.scss */
#main #node-5 .field-name-field-vignette {
background-image: url(../assets/img/shadow-bc.svg);
}
/* line 356, jee.scss */
/* line 386, jee.scss */
#main #node-5 .line {
background-color: #0066b1;
}
/* line 360, jee.scss */
/* line 390, jee.scss */
#main #node-6::after {
background-image: url(../assets/img/bgd-opp.svg);
}
/* line 361, jee.scss */
/* line 391, jee.scss */
#main #node-6, #main #node-6 a {
color: #7f1965;
}
/* line 362, jee.scss */
/* line 392, jee.scss */
#main #node-6 h2.node-title, #main #node-6 h2.node-title a {
color: #941b80;
}
/* line 363, jee.scss */
/* line 393, jee.scss */
#main #node-6 .field-name-field-vignette {
background-image: url(../assets/img/shadow-opp.svg);
}
/* line 364, jee.scss */
/* line 394, jee.scss */
#main #node-6 .line {
background-color: #af1380;
}
/* line 368, jee.scss */
/* line 398, jee.scss */
#main #node-7::after {
background-image: url(../assets/img/bgd-dub.svg);
}
/* line 369, jee.scss */
/* line 399, jee.scss */
#main #node-7, #main #node-7 a {
color: #22742c;
}
/* line 370, jee.scss */
/* line 400, jee.scss */
#main #node-7 h2.node-title, #main #node-7 h2.node-title a {
color: #288d80;
}
/* line 371, jee.scss */
/* line 401, jee.scss */
#main #node-7 .field-name-field-vignette {
background-image: url(../assets/img/shadow-dub.svg);
}
/* line 372, jee.scss */
/* line 402, jee.scss */
#main #node-7 .line {
background-color: #62a530;
}
/* line 376, jee.scss */
/* line 406, jee.scss */
#main #node-8::after {
background-image: url(../assets/img/bgd-juso.svg);
}
/* line 377, jee.scss */
/* line 407, jee.scss */
#main #node-8, #main #node-8 a {
color: #0b7f8a;
}
/* line 378, jee.scss */
/* line 408, jee.scss */
#main #node-8 h2.node-title, #main #node-8 h2.node-title a {
color: #009aa8;
}
/* line 379, jee.scss */
/* line 409, jee.scss */
#main #node-8 .field-name-field-vignette {
background-image: url(../assets/img/shadow-juso.svg);
}
/* line 380, jee.scss */
/* line 410, jee.scss */
#main #node-8 .line {
background-color: #33b4b5;
}
/* line 383, jee.scss */
/* line 413, jee.scss */
#main .chapter-wrapper {
position: absolute;
top: 0;
@@ -4329,24 +4355,32 @@ div.messages {
right: 0;
}
/* line 389, jee.scss */
/* __________ ____ ________________
/ ____/ __ \/ __ \/_ __/ ____/ __ \
/ /_ / / / / / / / / / / __/ / /_/ /
/ __/ / /_/ / /_/ / / / / /___/ _, _/
/_/ \____/\____/ /_/ /_____/_/ |_|
*/
/* line 426, jee.scss */
#footer {
position: fixed;
bottom: 0;
right: 0;
}
/* line 392, jee.scss */
/* line 429, jee.scss */
#footer .block {
display: inline-block;
vertical-align: top;
}
/* line 398, jee.scss */
.backdom {
display: none;
}
/* line 402, jee.scss */
/*
__ ____________ ______
/ |/ / _/ ___// ____/
/ /|_/ // / \__ \/ /
/ / / // / ___/ / /___
/_/ /_/___//____/\____/
*/
/* line 441, jee.scss */
#fullscreen-btn {
position: fixed;
top: 20px;
@@ -4354,7 +4388,13 @@ div.messages {
z-index: 1000;
}
/* line 409, jee.scss */
/* ____ __________ __ ________
/ __ \/ ____/ __ )/ / / / ____/
/ / / / __/ / __ / / / / / __
/ /_/ / /___/ /_/ / /_/ / /_/ /
/_____/_____/_____/\____/\____/
*/
/* line 454, jee.scss */
#fps {
position: fixed;
top: 20px;
@@ -4362,7 +4402,7 @@ div.messages {
z-index: 1000;
}
/* line 415, jee.scss */
/* line 460, jee.scss */
#nav-cursor {
position: absolute;
width: 6px;
sites/all/themes/gui/jee/css/jee.scss
+102 -57
View File
@@ -140,8 +140,9 @@ $animeLogoDuration:8s;
div.messages{
position:absolute;
top:20px; right:20px;
width:250px; max-height:30%;
width:500px; max-height:60%;
overflow-y:auto;
z-index: 1000;
}
#main{
@@ -157,66 +158,82 @@ div.messages{
.node-chapitre.node-teaser{
position:absolute;
// transition:0.1s ease-out;
// transition-property:transform;
// animation-fill-mode: forwards;
// INTERACTIVITÉ - - - - - - - - - - - --
// ----- DEFAULT MODE ----
/*
_____ __________________ ___ _________________ __________________
/ _/ | / /_ __/ ____/ __ \/ | / ____/_ __/ _/ | / / _/_ __/ ____/
/ // |/ / / / / __/ / /_/ / /| |/ / / / / / | | / // / / / / __/
_/ // /| / / / / /___/ _, _/ ___ / /___ / / _/ / | |/ // / / / / /___
/___/_/ |_/ /_/ /_____/_/ |_/_/ |_\____/ /_/ /___/ |___/___/ /_/ /_____/
*/
/*
____ _____ _____ _____ _____ __ _____ _____ _____ ____ _____
| \| __| __| _ | | | ||_ _| | | | \| __|
| | | __| __| | | | |__| | | | | | | | | | __|
|____/|_____|__| |__|__|_____|_____|_| |_|_|_|_____|____/|_____|
*/
h2.node-title{
transform:none;
transform-origin:bottom center;
transition:1s ease-out;
transition-property:transform;
z-index:5;
}
.field-name-field-comprendre{
>.content{position:relative;}
.texts{
opacity:0; height:1px; overflow:hidden;
transition:1s ease-out;
transition-property:opacity height;
position:absolute;
}
.field-name-field-partie{
opacity:0;
position:absolute;
transition:1s ease-out 0.5s;
transition:1s ease-in-out 0.1s;
transition-property: opacity transform;
// just let see the field vignette of first partie
&:nth-child(3){
&:nth-child(2){
z-index:2;
opacity:1;
transition-delay:0;
// transition-delay:0;
>.field-type-text{
opacity:0;
transition:1s ease-out 0.5s;
transition:1s ease-out 0.9s;
transition-property: opacity;
}
>.field-name-field-vignette{cursor:pointer;z-index:2;}
}
}
// &.closed .field-name-field-partie{
// transform:none!important;
// }
.links{
opacity:0;>*{display:none;}
transition:1s ease-out 1s;
transition-property:opacity;
}
&:after{
opacity:0;
// display:none;
transition: 3s ease-out;
transition: 2s ease-in;
transition-property:opacity;
top:1px; left:1px; bottom:2px; right:2px;
}
.line{
// transition: 0.5s ease-out;
// transition: 0.1s ease-out;
// transition-property:height transform;
}
// ----- PREVIEW MODE ------
/*
_____ _____ _____ _____ _____ _____ _ _ _ _____ _____ ____ _____
| _ | __ | __| | | | __| | | | | | | \| __|
| __| -| __| | |- -| __| | | | | | | | | | | | __|
|__| |__|__|_____|\___/|_____|_____|_____| |_|_|_|_____|____/|_____|
*/
&.previewed{
&:after{opacity:1;}
&:after{
opacity:1;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
}
h2.node-title{transform:scale(2,2);}
.field-name-field-comprendre{opacity:1; height:6em;}
.links{opacity:1;>*{display:block;}}
.texts{opacity:1; height:8em;}
.field-name-field-partie{
opacity:1; z-index:0;
// display all fields inside each parties
@@ -224,18 +241,21 @@ div.messages{
}
}
// ------- GENERALS (non interactive) - - - - - - - - - - - - - - - - - -
/*
_____________ ____________ ___ __ _____ __ _ __ __ _ _
/ ____/ ____/ | / / ____/ __ \/ | / / / ___/ _/_/___ ____ ____ (_)___ / /____ _________ ______/ /_(_) _____ | |
/ / __/ __/ / |/ / __/ / /_/ / /| | / / \__ \ / // __ \/ __ \/ __ \ / / __ \/ __/ _ \/ ___/ __ `/ ___/ __/ / | / / _ \ / /
/ /_/ / /___/ /| / /___/ _, _/ ___ |/ /______/ / / // / / / /_/ / / / / / / / / / /_/ __/ / / /_/ / /__/ /_/ /| |/ / __// /
\____/_____/_/ |_/_____/_/ |_/_/ |_/_____/____/ / //_/ /_/\____/_/ /_/ /_/_/ /_/\__/\___/_/ \__,_/\___/\__/_/ |___/\___//_/
|_| /_/
*/
&:after{ // background
content:" ";
background-size:contain;
// background-clip: content-box;
background-repeat: no-repeat;
position:absolute;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
// border: 1px solid blue;
z-index:-1;
}
@@ -255,10 +275,31 @@ div.messages{
z-index: 5;
}
.texts{
// position:relative;
}
.field-name-field-comprendre{
h1,h2,h3,h4,h5,h6{display:none!important;}
max-width:15em;
// max-width:15em;
p{margin:0;}
min-width:16em;
}
ul.links{
display:block; margin:0; text-align:right; z-index:5; position:relative; width:100%;
li.node-readmore{
padding:0;
a{
display:inline-block;
height:25px;
font-family: "open_sans";
font-weight: 900;
color:#000!important;
width:8em; text-align: left;
background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
}
}
}
.field-name-field-partie{clear:both; padding-top:1em;}
@@ -295,22 +336,6 @@ div.messages{
line-height:1.2;
}
ul.links{
margin:0; text-align: right; z-index:5; position:relative;
li.node-readmore{
padding:0;
a{
display:inline-block;
height:25px;
font-family: "open_sans";
font-weight: 900;
color:#000!important;
width:8em; text-align: left;
background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
}
}
}
.line{
z-index:-1;
position:absolute;
@@ -322,7 +347,12 @@ div.messages{
} // node-chapitre
// COLORS BY NODE - - - - - - - - - - - - - - - - - - - - -
/*
_____ _____ __ _____ _____ _____ _____ __ __ _____ _____ ____ _____
| | | | | | __ | __| | __ | | | | | | | \| __|
| --| | | |__| | | -|__ | | __ -|_ _| | | | | | | | | __|
|_____|_____|_____|_____|__|__|_____| |_____| |_| |_|___|_____|____/|_____|
*/
//SOL
#node-2{
&::after{ background-image : url(../assets/img/bgd-sol.svg); }
@@ -386,6 +416,13 @@ div.messages{
}
} // main
/* __________ ____ ________________
/ ____/ __ \/ __ \/_ __/ ____/ __ \
/ /_ / / / / / / / / / / __/ / /_/ /
/ __/ / /_/ / /_/ / / / / /___/ _, _/
/_/ \____/\____/ /_/ /_____/_/ |_|
*/
#footer{
position:fixed;
bottom:0; right:0;
@@ -394,18 +431,26 @@ div.messages{
vertical-align: top;
}
}
.backdom{
display:none;
}
/*
__ ____________ ______
/ |/ / _/ ___// ____/
/ /|_/ // / \__ \/ /
/ / / // / ___/ / /___
/_/ /_/___//____/\____/
*/
#fullscreen-btn{
position:fixed;
top:20px; left:20px;
z-index: 1000;
}
// DEBUG
/* ____ __________ __ ________
/ __ \/ ____/ __ )/ / / / ____/
/ / / / __/ / __ / / / / / __
/ /_/ / /___/ /_/ / /_/ / /_/ /
/_____/_____/_____/\____/\____/
*/
#fps{
position:fixed;
top:20px; right:20px;
sites/all/themes/gui/jee/js/jee.js
+89 -74
View File
@@ -47,18 +47,16 @@ jQuery(document).ready(function($) {
// launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("root")); // any individual element
});
};
function initDebug(){
$('<p>').attr('id', 'fps').appendTo(_$body);
$('<p>').attr('id', 'fps').appendTo(_$container);
_fps = document.getElementById('fps');
requestAnimationFrame(displayFps);
_$nav_cursor = $('<div id="nav-cursor"></div>').appendTo('body');
_$nav_cursor = $('<div id="nav-cursor"></div>').appendTo(_$container);
moveDebugCursor();
};
};
function displayFps(){
requestAnimationFrame(displayFps);
@@ -75,7 +73,6 @@ jQuery(document).ready(function($) {
left:_nav_pos.x+_center.x+"px",
top:_nav_pos.y+_center.y+"px"
});
};
function initChapters(){
@@ -213,12 +210,15 @@ jQuery(document).ready(function($) {
this.trans = {x:0, y:0};
this.ease = randB(0.05, 0.3);
//preview
this.is_previewed = false;
//parties
this.$parties = $('.field-name-field-partie', e);
this.parts_pos = {xs:new Array(), ys:new Array()};
this.lines = new Array();
this.linesAnimeInterval = null;
this.linesAnimeCounter = 0;
this.linesAnimeTime = 2; // sec
this.linesAnimeStartTime = 0,
this.linesAnimeDuration = 2000; // milli sec
// prototypes
if (typeof Chapter.initialized == "undefined") {
@@ -290,8 +290,13 @@ jQuery(document).ready(function($) {
};
Chapter.prototype.preview = function(e){
// don't relaunch preview more that one time
if(this.is_previewed) return;
console.log('preview', this.i);
this.is_previewed = true;
// close other chapters
for (var i = _chapitres_len - 1; i >= 0; i--) {
if(i !== this.i)
@@ -299,51 +304,50 @@ jQuery(document).ready(function($) {
};
// define randomly position of parties
var px, py, tXt = new Array(), tYt = new Array();
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
px=randB(-30, 30); py=randB(40, 60);
break;
case 1:
px=randB(180, 280); py=randB(200,300);
break;
case 2:
px=randB(-280, -180); py=randB(380,480);
break;
}
this.resetPartsPos();
tXt.push(px);
tYt.push(py);
};
console.log("tXt", tXt);
console.log("tYt", tYt);
tXt = shuffleArray(tXt);
tYt = shuffleArray(tYt);
// apply new position to parties
var that = this;
this.$parties.each(function(i, e) {
setTimeout(
(function(i, e, tXt, tYt){
(function(i, e, xs, ys){
return function(){
$(e)
.css({
translate:[tXt[i], tYt[i]],
transform:"translate3d("+xs[i]+"px,"+ys[i]+"px,0)",
});
}
}(i, e, tXt, tYt)),
}(i, e, that.parts_pos.xs, that.parts_pos.ys)),
10);
}); // each $parties
this.$e.addClass('previewed');
this.animeLines();
requestAnimationFrame(this.animeLines.bind(this));
};
Chapter.prototype.resetPartsPos = function(){
this.parts_pos = {xs:new Array(), ys:new Array()};
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
this.parts_pos.xs.push(randB(-30,30)); this.parts_pos.ys.push(randB(90,110)); break;
case 1:
this.parts_pos.xs.push(randB(180,280)); this.parts_pos.ys.push(randB(250,350)); break;
case 2:
this.parts_pos.xs.push(randB(-280,-180)); this.parts_pos.ys.push(randB(430,530)); break;
}
};
this.parts_pos.xs = shuffleArray(this.parts_pos.xs);
this.parts_pos.ys = shuffleArray(this.parts_pos.ys);
};
Chapter.prototype.closePreview = function(){
this.$e.removeClass('previewed')
.find('.field-name-field-partie')
.css({transform:"none"});
this.animeLines();
requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false;
};
Chapter.prototype.drawLines = function(){
@@ -354,52 +358,49 @@ jQuery(document).ready(function($) {
};
};
Chapter.prototype.animeLines = function(){
this.linesAnimeCounter = 0;
this.linesAnimeInterval = setInterval(
(function(_this){
return function(){
// console.log("partie pos : ", _this.$parties.eq(2).position());
Chapter.prototype.animeLines = function(timestamp){
// console.log("anime line "+this.nid);
// get the time on first anime launch
if(this.linesAnimeStartTime === 0)
this.linesAnimeStartTime = timestamp;
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < _this.lines.length; i++) {
pos1 = _this.$parties.eq(i).position();
pos2 = _this.$parties.eq(i+1).position();
// limit the animation time
if(timestamp - this.linesAnimeStartTime < this.linesAnimeDuration){
requestAnimationFrame(this.animeLines.bind(this));
}else{
this.linesAnimeStartTime = 0;
}
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < this.lines.length; i++) {
pos1 = this.$parties.eq(i).position();
pos2 = this.$parties.eq(i+1).position();
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// console.log("a = "+a);
_this.lines[i].$line.css({
'height':l,
rotate:a+"deg"
});
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
};
// console.log("a = "+a);
this.lines[i].$line.css({
'height':l,
transform:"rotate3d(0,0,1,"+a+"deg)"
});
console.log("anime line interval");
// limit the naimation time
_this.linesAnimeCounter ++;
if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
clearInterval(_this.linesAnimeInterval);
};
}(this)),
_fps);
};
};
Chapter.prototype.loadNode = function(e){
@@ -441,6 +442,20 @@ jQuery(document).ready(function($) {
return o;
};
if (!Date.now) {
Date.now = function now() {
return new Date().getTime();
};
}
/*
_ _ __
(_)___ (_) /_
/ / __ \/ / __/
/ / / / / / /_
/_/_/ /_/_/\__/
*/
init();
});
sites/all/themes/gui/jee/templates/node--chapitre.tpl.php
+17 -98
View File
@@ -1,102 +1,21 @@
<?php
/**
* @file
* Default theme implementation to display a node.
*
* Available variables:
* - $title: the (sanitized) title of the node.
* - $content: An array of node items. Use render($content) to print them all,
* or print a subset such as render($content['field_example']). Use
* hide($content['field_example']) to temporarily suppress the printing of a
* given element.
* - $user_picture: The node author's picture from user-picture.tpl.php.
* - $date: Formatted creation date. Preprocess functions can reformat it by
* calling format_date() with the desired parameters on the $created variable.
* - $name: Themed username of node author output from theme_username().
* - $node_url: Direct URL of the current node.
* - $display_submitted: Whether submission information should be displayed.
* - $submitted: Submission information created from $name and $date during
* template_preprocess_node().
* - $classes: String of classes that can be used to style contextually through
* CSS. It can be manipulated through the variable $classes_array from
* preprocess functions. The default values can be one or more of the
* following:
* - node: The current template type; for example, "theming hook".
* - node-[type]: The current node type. For example, if the node is a
* "Blog entry" it would result in "node-blog". Note that the machine
* name will often be in a short form of the human readable label.
* - node-teaser: Nodes in teaser form.
* - node-preview: Nodes in preview mode.
* The following are controlled through the node publishing options.
* - node-promoted: Nodes promoted to the front page.
* - node-sticky: Nodes ordered above other non-sticky nodes in teaser
* listings.
* - node-unpublished: Unpublished nodes visible only to administrators.
* - $title_prefix (array): An array containing additional output populated by
* modules, intended to be displayed in front of the main title tag that
* appears in the template.
* - $title_suffix (array): An array containing additional output populated by
* modules, intended to be displayed after the main title tag that appears in
* the template.
*
* Other variables:
* - $node: Full node object. Contains data that may not be safe.
* - $type: Node type; for example, story, page, blog, etc.
* - $comment_count: Number of comments attached to the node.
* - $uid: User ID of the node author.
* - $created: Time the node was published formatted in Unix timestamp.
* - $classes_array: Array of html class attribute values. It is flattened
* into a string within the variable $classes.
* - $zebra: Outputs either "even" or "odd". Useful for zebra striping in
* teaser listings.
* - $id: Position of the node. Increments each time it's output.
*
* Node status variables:
* - $view_mode: View mode; for example, "full", "teaser".
* - $teaser: Flag for the teaser state (shortcut for $view_mode == 'teaser').
* - $page: Flag for the full page state.
* - $promote: Flag for front page promotion state.
* - $sticky: Flags for sticky post setting.
* - $status: Flag for published status.
* - $comment: State of comment settings for the node.
* - $readmore: Flags true if the teaser content of the node cannot hold the
* main body content.
* - $is_front: Flags true when presented in the front page.
* - $logged_in: Flags true when the current user is a logged-in member.
* - $is_admin: Flags true when the current user is an administrator.
*
* Field variables: for each field instance attached to the node a corresponding
* variable is defined; for example, $node->body becomes $body. When needing to
* access a field's raw values, developers/themers are strongly encouraged to
* use these variables. Otherwise they will have to explicitly specify the
* desired field language; for example, $node->body['en'], thus overriding any
* language negotiation rule that was previously applied.
*
* @see template_preprocess()
* @see template_preprocess_node()
* @see template_process()
*
* @ingroup themeable
*/
?>
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php print $user_picture; ?>
<?php print render($title_prefix); ?>
<section id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>><a href="<?php print $node_url; ?>"><?php print $title; ?></a></h2>
<?php endif; ?>
<?php
print render($title_suffix);
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content);
<div class="content">
<?php
// We hide the comments and links now so that we can render them later.
// dsm($content, "content");
hide($content['comments']);
hide($content['links']);
hide($content['field_comprendre']);
?>
<div class="texts">
<?php
print render($content['field_comprendre']);
print render($content['links']);
?>
</div>
?>
</div>
<?php print render($content); ?>
</div>
</section>