Mercurial > bottledash
comparison views/hello_template.tpl @ 3:3f5bcad45756
pars a .conf | dynamic adding of divs | dynamiv VP scaling
| author | sean |
|---|---|
| date | Wed, 15 Jul 2015 14:06:03 +0200 |
| parents | 3671857d1dfe |
| children | 3e66e2f92770 |
comparison
equal
deleted
inserted
replaced
| 2:3671857d1dfe | 3:3f5bcad45756 |
|---|---|
| 1 <% | |
| 2 import math | |
| 3 break_tile_lines = math.ceil(len(tiles)/2) | |
| 4 tilecounter = 1 | |
| 5 vp_size = 1; | |
| 6 | |
| 7 if len(tiles) <= 2: | |
| 8 vp_size = "6vw" | |
| 9 elif len(tiles) >2 and len(tiles) <=4 : | |
| 10 vp_size = "5vw" | |
| 11 elif len(tiles) >4 and len(tiles) <=6 : | |
| 12 vp_size = "4vw" | |
| 13 elif len(tiles) >6 and len(tiles) <=8 : | |
| 14 vp_size = "3vw" | |
| 15 end | |
| 16 %> | |
| 1 | 17 |
| 2 <style> | 18 <style> |
| 19 *{ | |
| 20 margin: 0 auto; | |
| 21 padding: 0 auto; | |
| 22 } | |
| 23 | |
| 3 #wrapper{ | 24 #wrapper{ |
| 4 color: red; | 25 display: table; |
| 26 color: black; | |
| 27 background-color: #F2F2F2; | |
| 28 min-width: 100%; | |
| 29 min-height: 100%; | |
| 30 border-spacing: 10px; | |
| 5 } | 31 } |
| 6 | 32 |
| 7 .tile{ | 33 .tile{ |
| 34 background-color: #FFFFFF; | |
| 35 display:table-cell; | |
| 36 | |
| 37 width: auto; | |
| 38 height: auto; | |
| 39 border: 1px solid #999999; | |
| 40 text-align:center; | |
| 41 vertical-align: middle; | |
| 42 | |
| 43 -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4); | |
| 44 -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4); | |
| 45 box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4); | |
| 46 | |
| 47 } | |
| 48 | |
| 49 .clear{ | |
| 50 display: table-row; | |
| 51 clear: both; | |
| 52 margin: 0; | |
| 53 padding: 0; | |
| 54 height: 0; | |
| 55 overflow: hidden; | |
| 56 } | |
| 57 | |
| 58 .statusmon{ | |
| 59 border: 1px solid #000000; | |
| 8 color: white; | 60 color: white; |
| 61 font-size: {{vp_size}}; | |
| 62 font-family: "Lucida Console", Monaco, monospace; | |
| 63 } | |
| 64 | |
| 65 .chart{ | |
| 66 font-size: {{vp_size}}; | |
| 67 font-family: "Lucida Console", Monaco, monospace; | |
| 68 } | |
| 69 | |
| 70 .active{ | |
| 71 background-color: #009900; | |
| 72 } | |
| 73 | |
| 74 .dead{ | |
| 75 background-color: #990000; | |
| 9 } | 76 } |
| 10 | 77 |
| 11 </style> | 78 </style> |
| 12 | 79 |
| 13 <div id = "wrapper"> | 80 <div id = "wrapper"> |
| 14 | 81 |
| 82 % for tile in tiles : | |
| 83 % type = "" | |
| 84 % text = "" | |
| 85 % status = "" | |
| 86 % if tile["type"] == "mon" : | |
| 87 % type = "statusmon" | |
| 88 % text = tile["source"] | |
| 89 % if tile["status"] == "up" : | |
| 90 % status = "active" | |
| 91 % elif tile["status"] == "down" : | |
| 92 % status = "dead" | |
| 93 % end | |
| 94 % elif tile["type"] == "d3.js" : | |
| 95 % type = "chart" | |
| 96 % text = "place for a chart!" | |
| 97 % end | |
| 15 | 98 |
| 16 <div class = "tile"> | 99 <div class = "tile {{type}} {{status}}"> |
| 100 {{text}} | |
| 101 </div> | |
| 102 | |
| 103 % if tilecounter == break_tile_lines: | |
| 104 <div class = "clear"></div> | |
| 105 % end | |
| 106 | |
| 107 % tilecounter += 1 | |
| 108 % end | |
| 17 | 109 |
| 18 </div> | 110 </div> |
| 19 dsndsakj | |
| 20 | |
| 21 </div> |