Skip to content

Instantly share code, notes, and snippets.

@horacioibrahim

horacioibrahim/renderbox.html

Last active June 14, 2016 17:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save horacioibrahim/09f5623b6ebe7bd7403d1e38ab8a5abe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save horacioibrahim/09f5623b6ebe7bd7403d1e38ab8a5abe to your computer and use it in GitHub Desktop.
Download ZIP
Renderizar boxes
Raw
renderbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- basics needs -->
<meta charset="utf-8">
<title>Link: </title>
<meta name="description" content="Engajamento entre nós da rede. Tudo são nós!">
<meta name="author" content="horacio ibrahim <horacoibrahim_at_gmail.com">
<!-- Mobile specs -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Font specs: change for your style as roboto -->
<link href='//fonts.googleapis.com/css?family=Roboto:100,500,300,700,400,400italic,500italic' rel='stylesheet' type='text/css'>
<!-- CSS -->
<link rel="stylesheet" href="vendor/skeleton/css/normalize.css">
<link rel="stylesheet" href="vendor/skeleton/css/skeleton.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/custom.css">
<!-- JS -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Favicon -->
<link rel="icon" type="image/png" href="../img/favicon.png">
</head>
<body onload="anaoRenderer();" onresize="anaoRenderer();">
<div class="container-app">
<div class="header">
<div class="header-content">
<span class="title">O que você está fazendo agora?</span>
</div>
</div>
<div class="container container-content">
<div class="face-box"></div>
<div class="face-box"></div>
<div class="face-box"></div>
<div class="face-box"></div>
<div class="face-box"></div>
<div class="face-box"></div>
</div>
</div>
</body>
<script>
var anaoRenderer = function() {
var coefficient = 2;
var containerPadding = 20;
var faceBoxPaddingAndMargin = 7;
var contentContainer = document.querySelector(".container-content");
var h = contentContainer.offsetHeight;
var w = contentContainer.offsetWidth;
var distance = 4;
var fontFator = 0.1;
var workWidth = Math.trunc(w*0.95);
var workHeight = h - 128; // botton height of button actions + margin-left.
var faceBoxWidth = Math.trunc(workWidth / coefficient);
var old_faceBoxWidth = faceBoxWidth;
// var imgList = this.querySelectorAll('.face-box img');
var faceboxList = document.querySelectorAll('.face-box');
// divisio not exact
if (faceBoxWidth % 2 != 0) {
faceBoxWidth -= 1;
}
faceBoxWidth -= containerPadding; // padding by elem
// face-boxes
for (var i = 0; i < faceboxList.length; i++){
var elem = faceboxList[i];
// containter parent per item
elem.style.width = faceBoxWidth + "px";
elem.style.height = faceBoxWidth + "px";
}
// padding internal of container
x_1 = (faceboxList.length / coefficient) * (old_faceBoxWidth + (faceBoxPaddingAndMargin*2)); // x'
var paddingTotal = h - x_1;
contentContainer.style.paddingTop = paddingTotal / 2 + "px";
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment