Mercurial > bottledash
comparison views/hello_template.tpl @ 6:3acc5164369e
resize content in height too
| author | sean |
|---|---|
| date | Wed, 22 Jul 2015 10:47:55 +0200 |
| parents | c49f7fe82743 |
| children | c8cb2aa0b72c |
comparison
equal
deleted
inserted
replaced
| 5:c49f7fe82743 | 6:3acc5164369e |
|---|---|
| 22 | 22 |
| 23 ################## | 23 ################## |
| 24 # size of tiles # | 24 # size of tiles # |
| 25 ################## | 25 ################## |
| 26 | 26 |
| 27 number_of_rows = 3 | 27 number_of_rows = 2 |
| 28 | 28 |
| 29 ################# | 29 ################# |
| 30 # viewport size # | 30 # viewport size # |
| 31 ################# | 31 ################# |
| 32 | 32 |
| 42 # vp_size = "3vw" | 42 # vp_size = "3vw" |
| 43 #end | 43 #end |
| 44 %> | 44 %> |
| 45 | 45 |
| 46 <script type="text/javascript"> | 46 <script type="text/javascript"> |
| 47 | 47 |
| 48 var global_width; | 48 var global_width; |
| 49 var global_height; | 49 var global_height; |
| 50 var tile_width; | 50 var tile_width; |
| 51 var tile_height; | 51 var tile_height; |
| 52 | 52 |
| 53 var tiles = document.getElementsByClassName("tile"); | 53 var tiles = document.getElementsByClassName("tile"); |
| 54 var border_width = 1; | 54 var border_width = 1; |
| 55 var space_between_tiles = 8; | 55 var space_between_tiles = 8; |
| 56 | 56 |
| 57 var space_lr_borders; | 57 var space_lr_borders; |
| 58 var space_lr_margin; | 58 var space_lr_margin; |
| 59 | 59 |
| 60 function calc_tile_with(){ | 60 function calc_tile_with(){ |
| 61 var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); | 61 var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}}); |
| 62 var distance = (space_between_tiles*2) + (border_width*2) | 62 var distance = (space_between_tiles*2) + (border_width*2); |
| 63 var tile_width = ((global_width / tiles_per_row ) - distance); | 63 var tile_width = ((global_width / tiles_per_row ) - distance); |
| 64 return tile_width; | 64 return tile_width; |
| 65 } | 65 } |
| 66 | 66 |
| 67 function calc_tile_height(){ | |
| 68 var distance = (space_between_tiles*2) + (border_width*2); | |
| 69 var tile_height = ((global_height / {{number_of_rows}} ) - distance); | |
| 70 return tile_height; | |
| 71 } | |
| 72 | |
| 67 function resize_content(){ | 73 function resize_content(){ |
| 68 global_width = document.getElementById("content").clientWidth; | 74 global_width = document.getElementById("content").clientWidth; |
| 69 global_height = document.getElementById("content").clientHeight; | 75 global_height = document.getElementById("content").clientHeight; |
| 70 | 76 |
| 71 | 77 |
| 72 tile_width = calc_tile_with(); | 78 tile_width = calc_tile_with(); |
| 73 tile_height = (global_height / {{number_of_rows}}); | 79 tile_height = calc_tile_height(); |
| 74 | 80 |
| 75 for(var tile = 0; tile < tiles.length; tile++){ | 81 for(var tile = 0; tile < tiles.length; tile++){ |
| 76 tiles[tile].style.width= tile_width + 'px'; | 82 tiles[tile].style.width= tile_width + 'px'; |
| 77 tiles[tile].style.height= tile_height + 'px'; | 83 tiles[tile].style.height= tile_height + 'px'; |
| 78 } | 84 } |
| 79 } | 85 } |
| 80 | 86 |
| 81 window.onresize = function(){ | 87 window.onresize = function(){ |
| 82 resize_content(); | 88 resize_content(); |
| 83 } | 89 } |
| 84 | 90 |
| 85 document.addEventListener("DOMContentLoaded", function(event) { | 91 document.addEventListener("DOMContentLoaded", function(event) { |
| 86 resize_content(); | 92 resize_content(); |
| 87 }); | 93 }); |
| 88 | 94 |
| 89 </script> | 95 </script> |
| 90 | 96 |
| 91 <style> | 97 <style> |
| 92 *{ | 98 *{ |
| 93 margin: 0 auto; | 99 margin: 0 auto; |
| 94 padding: 0 auto; | 100 padding: 0 auto; |
| 95 font-family: "Lucida Console", Monaco, monospace; | 101 font-family: "Lucida Console", Monaco, monospace; |
| 96 } | 102 } |
| 97 | 103 |
| 98 body { | 104 body { |
| 99 overflow: hidden; | 105 overflow: hidden; |
| 100 } | 106 } |
| 101 | 107 |
| 102 #wrapper{ | 108 #wrapper{ |