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

fixed mobile vids behaviour

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-04-15 19:18:57 +02:00
parent b1228c60f0
commit 4a460b25d1
3 changed files with 98 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.css
+71 -69
View File
@@ -5070,35 +5070,37 @@ div.messages {
left: -1em; left: -1em;
font-family: "epflul"; font-family: "epflul";
} }
/* line 916, jee.scss */ @media only screen and (min-width: 40.063em) {
#main #chapter-wrapper .field-name-field-partie { /* line 917, jee.scss */
height: 60%; #main #chapter-wrapper .field-name-field-partie {
width: 100%; height: 60%;
top: 20%; width: 100%;
left: 0; top: 20%;
} left: 0;
/* line 920, jee.scss */ }
#main #chapter-wrapper .field-name-field-partie .field-items { /* line 921, jee.scss */
position: relative; #main #chapter-wrapper .field-name-field-partie .field-items {
top: 0; position: relative;
left: 0; top: 0;
height: 100%; left: 0;
width: auto; height: 100%;
} width: auto;
/* line 925, jee.scss */ }
#main #chapter-wrapper .field-name-field-partie .field-items .field { /* line 926, jee.scss */
position: relative; #main #chapter-wrapper .field-name-field-partie .field-items .field {
display: inline-block; position: relative;
} display: inline-block;
/* line 928, jee.scss */ }
#main #chapter-wrapper .field-name-field-partie .field-items .field .mask { /* line 929, jee.scss */
position: absolute; #main #chapter-wrapper .field-name-field-partie .field-items .field .mask {
width: 100%; position: absolute;
height: 85%; width: 100%;
top: 0; height: 85%;
left: 0; top: 0;
z-index: 10; left: 0;
cursor: move; z-index: 10;
cursor: move;
}
} }
/* ______________ ________________ _ ______ ___ ____ ____ __________ /* ______________ ________________ _ ______ ___ ____ ____ __________
@@ -5107,7 +5109,7 @@ div.messages {
___/ // / / ___ |/ / _/ // /___ | |/ |/ / _, _/ ___ |/ ____/ ____/ /___/ _, _/ ___/ // / / ___ |/ / _/ // /___ | |/ |/ / _, _/ ___ |/ ____/ ____/ /___/ _, _/
/____//_/ /_/ |_/_/ /___/\____/ |__/|__/_/ |_/_/ |_/_/ /_/ /_____/_/ |_| /____//_/ /_/ |_/_/ /___/\____/ |__/|__/_/ |_/_/ |_/_/ /_/ /_____/_/ |_|
*/ */
/* line 949, jee.scss */ /* line 951, jee.scss */
#static-wrapper { #static-wrapper {
position: absolute; position: absolute;
background-color: #fff; background-color: #fff;
@@ -5118,7 +5120,7 @@ div.messages {
transition-property: opacity; transition-property: opacity;
} }
@media only screen and (max-width: 40em) { @media only screen and (max-width: 40em) {
/* line 949, jee.scss */ /* line 951, jee.scss */
#static-wrapper { #static-wrapper {
top: 10%; top: 10%;
bottom: 0; bottom: 0;
@@ -5128,7 +5130,7 @@ div.messages {
} }
} }
@media only screen and (min-width: 40.063em) { @media only screen and (min-width: 40.063em) {
/* line 949, jee.scss */ /* line 951, jee.scss */
#static-wrapper { #static-wrapper {
top: 15%; top: 15%;
bottom: 0; bottom: 0;
@@ -5138,14 +5140,14 @@ div.messages {
z-index: -1; z-index: -1;
} }
} }
/* line 970, jee.scss */ /* line 972, jee.scss */
#static-wrapper.visible { #static-wrapper.visible {
opacity: 0.9; opacity: 0.9;
-webkit-transition: 1.5s ease-out; -webkit-transition: 1.5s ease-out;
transition: 1.5s ease-out; transition: 1.5s ease-out;
z-index: 500; z-index: 500;
} }
/* line 976, jee.scss */ /* line 978, jee.scss */
#static-wrapper > .close { #static-wrapper > .close {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
@@ -5153,7 +5155,7 @@ div.messages {
background: none, url("../assets/img/close.svg") no-repeat center center; background: none, url("../assets/img/close.svg") no-repeat center center;
} }
@media only screen and (max-width: 40em) { @media only screen and (max-width: 40em) {
/* line 976, jee.scss */ /* line 978, jee.scss */
#static-wrapper > .close { #static-wrapper > .close {
top: 10px; top: 10px;
right: 10px; right: 10px;
@@ -5163,7 +5165,7 @@ div.messages {
} }
} }
@media only screen and (min-width: 40.063em) { @media only screen and (min-width: 40.063em) {
/* line 976, jee.scss */ /* line 978, jee.scss */
#static-wrapper > .close { #static-wrapper > .close {
top: 20px; top: 20px;
right: 20px; right: 20px;
@@ -5173,7 +5175,7 @@ div.messages {
} }
} }
@media only screen and (max-width: 40em) { @media only screen and (max-width: 40em) {
/* line 992, jee.scss */ /* line 994, jee.scss */
#static-wrapper > .inner { #static-wrapper > .inner {
padding: 1em 1em 1.5em; padding: 1em 1em 1.5em;
width: 100%; width: 100%;
@@ -5182,7 +5184,7 @@ div.messages {
} }
} }
@media only screen and (min-width: 40.063em) { @media only screen and (min-width: 40.063em) {
/* line 992, jee.scss */ /* line 994, jee.scss */
#static-wrapper > .inner { #static-wrapper > .inner {
padding: 5em 7em; padding: 5em 7em;
width: 100%; width: 100%;
@@ -5190,7 +5192,7 @@ div.messages {
overflow: hidden; overflow: hidden;
} }
} }
/* line 1002, jee.scss */ /* line 1004, jee.scss */
#static-wrapper > .inner > .node { #static-wrapper > .inner > .node {
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -5198,42 +5200,42 @@ div.messages {
overflow-x: hidden; overflow-x: hidden;
padding-right: 1.5em; padding-right: 1.5em;
} }
/* line 1009, jee.scss */ /* line 1011, jee.scss */
#static-wrapper h2.node-title { #static-wrapper h2.node-title {
font-family: "epflulb"; font-family: "epflulb";
text-transform: uppercase !important; text-transform: uppercase !important;
font-size: 3em; font-size: 3em;
color: #000; color: #000;
} }
/* line 1017, jee.scss */ /* line 1019, jee.scss */
#static-wrapper .content h3 { #static-wrapper .content h3 {
font-family: "epflulb"; font-family: "epflulb";
font-size: 2em; font-size: 2em;
text-transform: uppercase !important; text-transform: uppercase !important;
color: #8d198f; color: #8d198f;
} }
/* line 1024, jee.scss */ /* line 1026, jee.scss */
#static-wrapper .content h4 { #static-wrapper .content h4 {
font-size: 1em; font-size: 1em;
font-weight: 700; font-weight: 700;
} }
/* line 1031, jee.scss */ /* line 1033, jee.scss */
#static-wrapper .content p { #static-wrapper .content p {
font-family: "open_sans", sans-serif; font-family: "open_sans", sans-serif;
font-weight: 600; font-weight: 600;
font-size: 0.85em; font-size: 0.85em;
line-height: 1.5em; line-height: 1.5em;
} }
/* line 1038, jee.scss */ /* line 1040, jee.scss */
#static-wrapper .content a { #static-wrapper .content a {
text-decoration: underline; text-decoration: underline;
} }
/* line 1041, jee.scss */ /* line 1043, jee.scss */
#static-wrapper .content img.floatleft { #static-wrapper .content img.floatleft {
float: left; float: left;
margin-right: 1em; margin-right: 1em;
} }
/* line 1042, jee.scss */ /* line 1044, jee.scss */
#static-wrapper .content img.floatright { #static-wrapper .content img.floatright {
float: right; float: right;
margin-left: 1em; margin-left: 1em;
@@ -5245,71 +5247,71 @@ div.messages {
/ __/ / /_/ / /_/ / / / / /___/ _, _/ / __/ / /_/ / /_/ / / / / /___/ _, _/
/_/ \____/\____/ /_/ /_____/_/ |_| /_/ \____/\____/ /_/ /_____/_/ |_|
*/ */
/* line 1054, jee.scss */ /* line 1056, jee.scss */
#footer { #footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 20px; right: 20px;
z-index: 900; z-index: 900;
} }
/* line 1059, jee.scss */ /* line 1061, jee.scss */
body.chapter-displayed #footer { body.chapter-displayed #footer {
display: none; display: none;
} }
/* line 1063, jee.scss */ /* line 1065, jee.scss */
#footer .block { #footer .block {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-size: 0.5em; font-size: 0.5em;
} }
/* line 1067, jee.scss */ /* line 1069, jee.scss */
#footer .block p { #footer .block p {
font-size: inherit; font-size: inherit;
} }
/* line 1068, jee.scss */ /* line 1070, jee.scss */
#footer .block a { #footer .block a {
color: #000; color: #000;
} }
/* line 1071, jee.scss */ /* line 1073, jee.scss */
#footer .block-menu { #footer .block-menu {
display: block; display: block;
font-size: inherit; font-size: inherit;
} }
/* line 1074, jee.scss */ /* line 1076, jee.scss */
#footer .block-menu ul { #footer .block-menu ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
/* line 1076, jee.scss */ /* line 1078, jee.scss */
#footer .block-menu ul li { #footer .block-menu ul li {
padding: 0; padding: 0;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
} }
@media only screen and (max-width: 40em) { @media only screen and (max-width: 40em) {
/* line 1076, jee.scss */ /* line 1078, jee.scss */
#footer .block-menu ul li { #footer .block-menu ul li {
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;
} }
} }
@media only screen and (min-width: 40.063em) { @media only screen and (min-width: 40.063em) {
/* line 1076, jee.scss */ /* line 1078, jee.scss */
#footer .block-menu ul li { #footer .block-menu ul li {
margin: 0 1em 0 0; margin: 0 1em 0 0;
} }
} }
/* line 1086, jee.scss */ /* line 1088, jee.scss */
#footer .block-menu ul li a { #footer .block-menu ul li a {
font-family: "epflulb"; font-family: "epflulb";
color: #000; color: #000;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.6em; font-size: 0.6em;
} }
/* line 1096, jee.scss */ /* line 1098, jee.scss */
#footer p { #footer p {
margin: 0; margin: 0;
} }
/* line 1100, jee.scss */ /* line 1102, jee.scss */
#footer #block-block-1 { #footer #block-block-1 {
display: none; display: none;
} }
@@ -5321,7 +5323,7 @@ body.chapter-displayed #footer {
/ / / // / ___/ / /___ / / / // / ___/ / /___
/_/ /_/___//____/\____/ /_/ /_/___//____/\____/
*/ */
/* line 1109, jee.scss */ /* line 1111, jee.scss */
#loader { #loader {
position: absolute; position: absolute;
top: 50%; top: 50%;
@@ -5338,13 +5340,13 @@ body.chapter-displayed #footer {
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
transition-property: opacity; transition-property: opacity;
} }
/* line 1120, jee.scss */ /* line 1122, jee.scss */
body.loading #loader { body.loading #loader {
z-index: 1000; z-index: 1000;
opacity: 1; opacity: 1;
} }
/* line 1126, jee.scss */ /* line 1128, jee.scss */
#fullscreen-btn { #fullscreen-btn {
position: fixed; position: fixed;
right: 20px; right: 20px;
@@ -5358,13 +5360,13 @@ body.loading #loader {
background: transparent url("../assets/img/fullscreen-on.png") no-repeat center center; background: transparent url("../assets/img/fullscreen-on.png") no-repeat center center;
background: none, url("../assets/img/fullscreen-on.svg") no-repeat center center; background: none, url("../assets/img/fullscreen-on.svg") no-repeat center center;
} }
/* line 1135, jee.scss */ /* line 1137, jee.scss */
.fullscreen #fullscreen-btn { .fullscreen #fullscreen-btn {
background: transparent url("../assets/img/fullscreen-off.png") no-repeat center center; background: transparent url("../assets/img/fullscreen-off.png") no-repeat center center;
background: none, url("../assets/img/fullscreen-off.svg") no-repeat center center; background: none, url("../assets/img/fullscreen-off.svg") no-repeat center center;
} }
/* line 1148, jee.scss */ /* line 1150, jee.scss */
.bubble-1 { .bubble-1 {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@@ -5377,7 +5379,7 @@ body.loading #loader {
left: -200px; left: -200px;
} }
/* line 1152, jee.scss */ /* line 1154, jee.scss */
.bubble-2 { .bubble-2 {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@@ -5390,7 +5392,7 @@ body.loading #loader {
right: -400px; right: -400px;
} }
/* line 1157, jee.scss */ /* line 1159, jee.scss */
.star { .star {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@@ -5403,7 +5405,7 @@ body.loading #loader {
} }
/*Remove Mozilla Firefox Border – Remove Dotted Line Around Link */ /*Remove Mozilla Firefox Border – Remove Dotted Line Around Link */
/* line 1167, jee.scss */ /* line 1169, jee.scss */
* { * {
outline: 0 !important; outline: 0 !important;
} }
@@ -5414,7 +5416,7 @@ body.loading #loader {
/ /_/ / /___/ /_/ / /_/ / /_/ / / /_/ / /___/ /_/ / /_/ / /_/ /
/_____/_____/_____/\____/\____/ /_____/_____/_____/\____/\____/
*/ */
/* line 1176, jee.scss */ /* line 1178, jee.scss */
#fps { #fps {
position: fixed; position: fixed;
bottom: 40px; bottom: 40px;
@@ -5422,7 +5424,7 @@ body.loading #loader {
z-index: 1000; z-index: 1000;
} }
/* line 1182, jee.scss */ /* line 1184, jee.scss */
#nav-cursor { #nav-cursor {
position: absolute; position: absolute;
width: 6px; width: 6px;
sites/all/themes/gui/jee/css/jee.scss
+21 -19
View File
@@ -913,25 +913,27 @@ div.messages{
} }
} }
.field-name-field-partie{ @media #{$medium-up}{
// position:absolute; .field-name-field-partie{
height:60%; width:100%; // position:absolute;
top:20%; left:0; height:60%; width:100%;
.field-items{ top:20%; left:0;
position:relative; .field-items{
top:0; left:0; position:relative;
height:100%; width:auto; top:0; left:0;
// overflow:hidden; height:100%; width:auto;
.field{ // overflow:hidden;
position:relative; .field{
display:inline-block; position:relative;
.mask{ display:inline-block;
position:absolute; .mask{
width:100%; height:85%; position:absolute;
top:0; left:0; width:100%; height:85%;
z-index:10; top:0; left:0;
cursor:move; z-index:10;
// background-color: rgba(150,250,250,0.2); cursor:move;
// background-color: rgba(150,250,250,0.2);
}
} }
} }
} }
sites/all/themes/gui/jee/js/jee.js
+6 -1
View File
@@ -861,14 +861,19 @@ jQuery(document).ready(function($) {
.each(this.redimVideo.bind(this)) .each(this.redimVideo.bind(this))
.each(this.setVidsEvents.bind(this)); .each(this.setVidsEvents.bind(this));
var marge = (_container.w-this.dimvideo.w)/4; var marge = (_container.w-this.dimvideo.w)/4;
this.$vids_container.css({ this.$vids_container.css({
width:this.dimvideo.w+marge,//*1.2, width:this.dimvideo.w+marge,//*1.2,
height:this.dimvideo.h, // height:this.dimvideo.h,
marginLeft:marge marginLeft:marge
}); });
if(!_is_mobile){ if(!_is_mobile){
this.$vids_container.css({
height:this.dimvideo.h
});
// add a mask on top of each iframe to avoid bad interaction with vimeo // add a mask on top of each iframe to avoid bad interaction with vimeo
this.$vids.after('<div class="mask"></div>'); this.$vids.after('<div class="mask"></div>');
// create the slider with peppermint // create the slider with peppermint