Mercurial > bottledash > bottledash

comparison views/hello_template.tpl @ 5:c49f7fe82743

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
changed the grid layout to a more responsive and compatible self-calculating JS based version
author sean
date Wed, 22 Jul 2015 10:25:27 +0200
parents 3e66e2f92770
children 3acc5164369e
comparison
equal deleted inserted replaced
4:3e66e2f92770 5:c49f7fe82743
1 <!-- This tempalte is a part of bottledash 1 <!-- This tempalte is a part of bottledash
2 author: sean engelhardt >sean.engelhardt@intevation.de 2 author: sean engelhardt >sean.engelhardt@intevation.de
3 License: GNU GPL >= v2. See LICENSE for details. --> 3 License: GNU GPL >= v2. See LICENSE for details. -->
4 4
5 <% 5 <%
6
6 import math 7 import math
7 break_tile_lines = math.ceil(len(tiles)/2) 8 from datetime import date
8 tilecounter = 1
9 vp_size = 1;
10 9
11 if len(tiles) <= 2: 10 #################
12 vp_size = "6vw" 11 # date and time #
13 elif len(tiles) >2 and len(tiles) <=4 : 12 #################
14 vp_size = "5vw" 13
15 elif len(tiles) >4 and len(tiles) <=6 : 14
16 vp_size = "4vw" 15 today = date.today()
17 elif len(tiles) >6 and len(tiles) <=8 : 16 weekday = ("Montag", "Dienstag", "Mittwoch", "Donnerstag",
18 vp_size = "3vw" 17 "Freitag", "Samstag", "Sonntag")[today.weekday()]
19 end 18 month_name = ("Januar", "Februar", "März", "Aprill", "Mai",
19 "Juni", "Juli", "August", "September", "Oktober",
20 "November", "Dezember")[today.month-1]
21
22
23 ##################
24 # size of tiles #
25 ##################
26
27 number_of_rows = 3
28
29 #################
30 # viewport size #
31 #################
32
33 vp_size = "12px"
34
35 #if len(tiles) <= 2:
36 # vp_size = "6vw"
37 #elif len(tiles) >2 and len(tiles) <=4 :
38 # vp_size = "5vw"
39 #elif len(tiles) >4 and len(tiles) <=6 :
40 # vp_size = "4vw"
41 #elif len(tiles) >6 and len(tiles) <=8 :
42 # vp_size = "3vw"
43 #end
20 %> 44 %>
45
46 <script type="text/javascript">
47
48 var global_width;
49 var global_height;
50 var tile_width;
51 var tile_height;
52
53 var tiles = document.getElementsByClassName("tile");
54 var border_width = 1;
55 var space_between_tiles = 8;
56
57 var space_lr_borders;
58 var space_lr_margin;
59
60 function calc_tile_with(){
61 var tiles_per_row = Math.floor(tiles.length / {{number_of_rows}});
62 var distance = (space_between_tiles*2) + (border_width*2)
63 var tile_width = ((global_width / tiles_per_row ) - distance);
64 return tile_width;
65 }
66
67 function resize_content(){
68 global_width = document.getElementById("content").clientWidth;
69 global_height = document.getElementById("content").clientHeight;
70
71
72 tile_width = calc_tile_with();
73 tile_height = (global_height / {{number_of_rows}});
74
75 for(var tile = 0; tile < tiles.length; tile++){
76 tiles[tile].style.width= tile_width + 'px';
77 tiles[tile].style.height= tile_height + 'px';
78 }
79 }
80
81 window.onresize = function(){
82 resize_content();
83 }
84
85 document.addEventListener("DOMContentLoaded", function(event) {
86 resize_content();
87 });
88
89 </script>
21 90
22 <style> 91 <style>
23 *{ 92 *{
24 margin: 0 auto; 93 margin: 0 auto;
25 padding: 0 auto; 94 padding: 0 auto;
95 font-family: "Lucida Console", Monaco, monospace;
96 }
97
98 body {
99 overflow: hidden;
26 } 100 }
27 101
28 #wrapper{ 102 #wrapper{
29 display: table; 103 background-color: #F2F2F2;
30 color: black; 104 color: black;
31 background-color: #F2F2F2;
32 min-width: 100%; 105 min-width: 100%;
33 min-height: 100%; 106 min-height: 100%;
34 border-spacing: 10px; 107 }
108
109 #topbar{
110 min-width: auto;
111 padding-left: 8px;
112 padding-top: 8px;
113 padding-bottom: 8px;
114 /*height: 5%;*/
115 font-family: Arial, Helvetica, sans-serif;
116 }
117
118 #content{
119 min-width: 100%;
120 height:95%;
35 } 121 }
36 122
37 .tile{ 123 .tile{
124 float: left;
125 margin: 8px;
38 background-color: #FFFFFF; 126 background-color: #FFFFFF;
39 display:table-cell;
40
41 width: auto;
42 height: auto;
43 border: 1px solid #999999; 127 border: 1px solid #999999;
128 border: none;
44 text-align:center; 129 text-align:center;
45 vertical-align: middle; 130 vertical-align: middle;
46
47 -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
48 -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
49 box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.4);
50
51 } 131 }
52 132
53 .clear{ 133 .clear{
54 display: table-row; 134 height: 0px;
55 clear: both; 135 clear: both;
56 margin: 0;
57 padding: 0;
58 height: 0;
59 overflow: hidden;
60 } 136 }
61 137
138 /*tiles types*/
139
62 .statusmon{ 140 .statusmon{
63 border: 1px solid #000000;
64 color: white; 141 color: white;
65 font-size: {{vp_size}}; 142 font-size: {{vp_size}};
66 font-family: "Lucida Console", Monaco, monospace;
67 } 143 }
68 144
69 .chart{ 145 .chart{
70 font-size: {{vp_size}}; 146 font-size: {{vp_size}};
71 font-family: "Lucida Console", Monaco, monospace;
72 } 147 }
73 148
74 .active{ 149 .active{
150 border: 1px solid #00cc00;
75 background-color: #009900; 151 background-color: #009900;
76 } 152 }
77 153
78 .dead{ 154 .dead{
155 border: 1px solid #cc0000;
79 background-color: #990000; 156 background-color: #990000;
80 } 157 }
81 158
82 </style> 159 </style>
83 160
84 <div id = "wrapper"> 161 <div id = "wrapper">
85 162
86 % for tile in tiles : 163 <div id = "topbar">
87 % type = "" 164 <b>{{weekday}}</b> {{today.day}}. {{month_name}}
88 % text = "" 165 </div>
89 % status = ""
90 % if tile["type"] == "mon" :
91 % type = "statusmon"
92 % text = tile["source"]
93 % if tile["status"] == "up" :
94 % status = "active"
95 % elif tile["status"] == "down" :
96 % status = "dead"
97 % end
98 % elif tile["type"] == "d3.js" :
99 % type = "chart"
100 % text = "place for a chart!"
101 % end
102 166
167 <div id = "content">
168
169 <%
170 for tile in tiles :
171 type = ""
172 text = ""
173 status = ""
174 if tile["type"] == "mon" :
175 type = "statusmon"
176 text = tile["source"]
177 if tile["status"] == "up" :
178 status = "active"
179 elif tile["status"] == "down" :
180 status = "dead"
181 end
182 elif tile["type"] == "d3.js" :
183 type = "chart"
184 text = "place for a chart!"
185 end
186 %>
103 <div class = "tile {{type}} {{status}}"> 187 <div class = "tile {{type}} {{status}}">
104 {{text}} 188 {{text}}
105 </div> 189 </div>
106 190
107 % if tilecounter == break_tile_lines:
108 <div class = "clear"></div>
109 % end 191 % end
110 192
111 % tilecounter += 1 193 </div>
112 % end
113
114 </div> 194 </div>
This site is hosted by Intevation GmbH (Datenschutzerklärung und Impressum | Privacy Policy and Imprint)