lkm/stomping-grounds
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fuck

Browse Source
This commit is contained in:
Robin Hägg 2015-09-12 17:53:04 +02:00
parent c61e4c5d6b
commit 0415784dca
3 changed files with 119 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
server/templates/pages/services/entertainment.dust
View File

@ -22,64 +22,76 @@
</div>
<div class="row six-display fade-mode t0-active" data-view="EntertainmentSlider">
<div class="hover-wrap">
<div class="col s-12 m-6 l-4 t1 tt">
<div class="back">
<h3>Audio Visual</h3>
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p>
</div>
<div class="front">
<h3>Audio Visual</h3>
<p>Like you've never seen it before</p>
<div class="col s-12 m-6 l-4 t1 tt flip-container">
<div class="flipper">
<div class="back">
<h3>Audio Visual</h3>
<p>From high fidelity audio to Ultra HD video, our team have a wealth of experience in supplying, installing and supporting the very best whole-home audio visual systems on the market. Ease of operation is an integral part of every setup, whilst maintaining a clean and unobtrusive design that will allow you to experience music and film exactly as the creators intended.</p>
</div>
<div class="front">
<h3>Audio Visual</h3>
<p>Like you've never seen it before</p>
</div>
</div>
</div>
<div class="col s-12 m-6 l-4 t2 tt">
<div class="back">
<h3>Multiroom Audio</h3>
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p>
</div>
<div class="front">
<h3>Multiroom Audio</h3>
<p>Your music, all around your home</p>
<div class="col s-12 m-6 l-4 t2 tt flip-container vertical">
<div class="flipper">
<div class="back">
<h3>Multiroom Audio</h3>
<p>The ability to move freely around your home whilst listening to your favourite music is a fantastic addition to any property. Seamless incorporation of audio equipment with wireless functionality provides a refined listening experience that’s extremely simple to use, and enjoyable to share with friends and family.</p>
</div>
<div class="front">
<h3>Multiroom Audio</h3>
<p>Your music, all around your home</p>
</div>
</div>
</div>
<div class="col s-12 m-6 l-4 t3 tt">
<div class="back">
<h3>Media</h3>
<p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p>
</div>
<div class="front">
<h3>Media</h3>
<p>Access your favourite content, everywhere</p>
<div class="col s-12 m-6 l-4 t3 tt flip-container">
<div class="flipper">
<div class="back">
<h3>Media</h3>
<p>The things we watch, listen to and share with friends and family define personal entertainment. We believe that these things should be available all the time and everywhere you go, and as such, develop our media distribution systems to present your favourite digital content, all around your home, at the touch of a button.</p>
</div>
<div class="front">
<h3>Media</h3>
<p>Access your favourite content, everywhere</p>
</div>
</div>
</div>
<div class="col s-12 m-6 l-4 t4 tt">
<div class="back">
<h3>Bespoke Design</h3>
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p>
</div>
<div class="front">
<h3>Bespoke Design</h3>
<p>Customised to perfection</p>
<div class="col s-12 m-6 l-4 t4 tt flip-container verical">
<div class="flipper">
<div class="back">
<h3>Bespoke Design</h3>
<p>All of our entertainment services require detailed custom planning and support, but if you have something extraordinary in mind, we can work with you to make this a reality, the only limit is your imagination. Delivery has to be met with perfection, minimising spatial presence and maximising user enjoyment.</p>
</div>
<div class="front">
<h3>Bespoke Design</h3>
<p>Customised to perfection</p>
</div>
</div>
</div>
<div class="col s-12 m-6 l-4 t5 tt">
<div class="back">
<h3>Cinema</h3>
<p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
</div>
<div class="front">
<h3>Cinema</h3>
<p>Ultra-HD is just the beginning</p>
<div class="col s-12 m-6 l-4 t5 tt flip-container">
<div class="flipper">
<div class="back">
<h3>Cinema</h3>
<p>Our immersive media rooms combine awe-inspiring visuals with breathtaking audio to make sure you see every detail and feel every moment. By working with the finest suppliers of cinema equipment, perfectly suited to your budget, our team can deliver a system that not only impresses, but defies belief.</p>
</div>
<div class="front">
<h3>Cinema</h3>
<p>Ultra-HD is just the beginning</p>
</div>
</div>
</div>
<div class="col s-12 m-6 l-4 t6 tt">
<div class="back">
<h3>Control</h3>
<p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
</div>
<div class="front">
<h3>Control</h3>
<p>Simple, yet powerful</p>
<div class="col s-12 m-6 l-4 t6 tt flip-container verical">
<div class="flipper">
<div class="back">
<h3>Control</h3>
<p>Technology is only as useful as it is usable, and even complex systems can be intricately designed so that front-end control is simple and user-friendly. We offer varying levels of control with our entertainment setups and can supply you with a fully programmed ‘Smart Control’ or replace conventional remotes with dedicated app support, empowering your smartphone or tablet.</p>
</div>
<div class="front">
<h3>Control</h3>
<p>Simple, yet powerful</p>
</div>
</div>
</div>
</div>

9
src/js/views/entertainment-slider.js
View File

@ -38,12 +38,17 @@ module.exports = {
}
},
initialize: function(){
if(window.innerHeight > 900 && window.innerWidth > 1024){
function isIE () {
var myNav = navigator.userAgent.toLowerCase();
return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
}
if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){
this.$el.removeClass('fade-mode')
}
var thisView = this;
$( window ).resize(function() {
if(window.innerHeight > 900 && window.innerWidth > 1024){
if(window.innerHeight > 900 && window.innerWidth > 1024 && !isIE()){
thisView.$el.removeClass('fade-mode')
}else{
thisView.$el.addClass('fade-mode')

53
src/sass/_content.scss
View File

@ -235,7 +235,7 @@
border:1px solid $softwhite;
.tt {
height:320px;
border:1px solid $softwhite;
border:1px solid transparent;
padding:0;
cursor:pointer;
.front, .back {
@ -335,6 +335,57 @@
.t5:hover .front {opacity:0;}
.t6:hover .front {opacity:0;}
}
.six-display.flip-mode {
.flip-container {
perspective: 1000;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 50%; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
}
.six-display {
.slide-container {