Responsive grid with CSS Grids

Responsive grid with CSS Grids

by humanzing

HTML

<img id='poster_blur' style='position:fixed;top:0;right:0;left:0;bottom:0;' class='image_blur' src='https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/21198/large_thumb_placeit__88_.jpg'>
<ul class="title">
  <li>A</li>
</ul>


<div id="background">
    <img id='poster'src='https://img2-placeit-net.s3-accelerate.amazonaws.com/uploads/stage/stage_image/21198/large_thumb_placeit__88_.jpg' class='stretch' />
</div>

<div id='gesture' style='position:fixed;top:0;bottom:0;left:0;right:0;z-index:99;'>

</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 5px;
  padding:5px;
}

li {
  background-color: rgba(255,255,255,0.1);
  border-radius: 3px;
  padding: 10px;
  font-size: 14px;
}

.title {
  z-index: 1;
  color: rgba(255,255,255,0.8);
  text-align:center;
}

.next_skip_ui {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.next_skip_ui > li {
    background: none;
}

.background {
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.stretch {
    width: 80%;
    height: 80%;
        padding:10%;
}
.image_blur {
    -webkit-filter: blur(100px);
    -moz-filter: blur(100px);
    -o-filter: blur(100px);
    -ms-filter: blur(100px);
    filter: blur(100px);
    z-index: -1;
     min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

JavaScript

document.getElementById('double-tap_skip').addEventListener('touchstart', tapHandler_skip);
document.getElementById('double-tap_next').addEventListener('touchstart', tapHandler_next);

var tapedTwice = false;

function tapHandler_skip(event) {
    if(!tapedTwice) {
        tapedTwice = true;
        setTimeout( function() { tapedTwice = false; }, 300 );
        return false;
    }
    event.preventDefault();
    //action on double tap goes below
     const req = new XMLHttpRequest();
      	req.open('GET', location.protocol + '//' + location.host + '/prev', false); 
      	req.send(null);
        if (req.status === 200) {
} else {
}
 }
  
 function tapHandler_next(event) {
    if(!tapedTwice) {
        tapedTwice = true;
        setTimeout( function() { tapedTwice = false; }, 300 );
        return false;
    }
    event.preventDefault();
    //action on double tap goes below
    const req = new XMLHttpRequest();
      	req.open('GET', location.protocol + '//' + location.host + '/next', false); 
      	req.send(null);
        if (req.status === 200) {
} else {
}
 }
 
 
 
 var direction = '',
    path = '',
    oldx = 0,
    oldy = 0,
    block = false;    
$(document).bind('touchmove mousemove', function (e) {
  var introunded = 50;
if(e.originalEvent.touches == undefined){
	introunded = 1;
}else{
  introunded = 50;
}
	if(oldx == 0 || oldy == 0)
  {
  	oldy = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : Math.round(e.pageY / introunded) * introunded;
		oldx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : Math.round(e.pageX / introunded) * introunded;
  }
				var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
   			var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
     
       currentY =  Math.round(currentY / introunded) * introunded;
       currentX =  Math.round(currentX / introunded) * introunded;
        
        direction = d(oldx,currentX,oldy,currentY);

     ...