comparison mod_http_muc_log/mod_http_muc_log.lua @ 1563:49ba05d75119

mod_http_muc_log: Style fixes and mobile optimizations
author Kim Alvefur <zash@zash.se>
date Sun, 09 Nov 2014 17:18:51 +0100
parents bc9cfd1c5391
children cb4111a4cd36
comparison
equal deleted inserted replaced
1562:bc9cfd1c5391 1563:49ba05d75119
55 local base = template(template[[ 55 local base = template(template[[
56 <!DOCTYPE html> 56 <!DOCTYPE html>
57 <html> 57 <html>
58 <head> 58 <head>
59 <meta charset="utf-8"> 59 <meta charset="utf-8">
60 <meta name="viewport" content="width=device-width, initial-scale=1">
60 <link rel="canonical" href="{canonical}"> 61 <link rel="canonical" href="{canonical}">
61 <title>{title}</title> 62 <title>{title}</title>
62 <style> 63 <style>
63 body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;} 64 body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;}
64 header,footer{margin:1ex 1em;} 65 header,footer{margin:1ex 1em;}
65 footer{font-size:smaller;color:#babdb6;} 66 footer{font-size:smaller;color:#babdb6;}
66 .content{background-color:white;padding:1em;list-style-position:inside;} 67 .content{background-color:white;padding:1em;list-style-position:inside;}
67 nav{font-size:x-large;margin:1ex 2em;} 68 nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;}
68 nav a{text-decoration:none;} 69 nav a{padding: 1ex;text-decoration:none;}
69 nav a.up{font-size:smaller;} 70 nav a.up{font-size:smaller;}
70 nav a.prev{float:left;} 71 nav a.prev{float:left;}
71 nav a.next{float:right;} 72 nav a.next{float:right;}
72 nav a.next::after{content:" →";} 73 nav a.next::after{content:" →";}
73 nav a.prev::before{content:"← ";} 74 nav a.prev::before{content:"← ";}
74 nav a:empty::after,nav a:empty::before{content:""} 75 nav a:empty::after,nav a:empty::before{content:""}
76 @media screen and (min-width: 460px) {
77 nav{font-size:x-large;margin:1ex 1em;}
78 }
75 a:link,a:visited{color:#2e3436;text-decoration:none;} 79 a:link,a:visited{color:#2e3436;text-decoration:none;}
76 a:link:hover,a:visited:hover{color:#3465a4;} 80 a:link:hover,a:visited:hover{color:#3465a4;}
77 ul,ol{padding:0;} 81 ul,ol{padding:0;}
78 li{list-style:none;} 82 li{list-style:none;}
79 hr{display:none;} 83 hr{visibility:hidden;clear:both;}
84 br{clear:both;}
80 li time{float:right;font-size:small;opacity:0.2;} 85 li time{float:right;font-size:small;opacity:0.2;}
81 li:hover time{opacity:1;} 86 li:hover time{opacity:1;}
82 .room-list .name{font-size:larger;} 87 .room-list .description{font-size:smaller;}
83 q.body::before,q.body::after{content:"";} 88 q.body::before,q.body::after{content:"";}
84 .presence .verb{font-style:normal;color:#30c030;} 89 .presence .verb{font-style:normal;color:#30c030;}
85 .presence.unavailable .verb{color:#c03030;} 90 .presence.unavailable .verb{color:#c03030;}
86 </style> 91 </style>
87 </head> 92 </head>
95 {body!} 100 {body!}
96 </div> 101 </div>
97 <hr> 102 <hr>
98 <footer> 103 <footer>
99 {footer!} 104 {footer!}
105 <br>
100 <div class="powered-by">Prosody {prosody_version?}</div> 106 <div class="powered-by">Prosody {prosody_version?}</div>
101 </footer> 107 </footer>
102 </body> 108 </body>
103 </html> 109 </html>
104 ]] { prosody_version = prosody.version }); 110 ]] { prosody_version = prosody.version });
143 <a class="prev" href="{prev}">{prev}</a> 149 <a class="prev" href="{prev}">{prev}</a>
144 <a class="next" href="{next}">{next}</a> 150 <a class="next" href="{next}">{next}</a>
145 </div> 151 </div>
146 </nav> 152 </nav>
147 <script> 153 <script>
154 /*
155 * Local timestamps
156 */
148 (function () { 157 (function () {
149 var timeTags = document.getElementsByTagName("time"); 158 var timeTags = document.getElementsByTagName("time");
150 var i = 0; 159 var i = 0, tag, date;
151 var date;
152 while(timeTags[i]) { 160 while(timeTags[i]) {
153 date = new Date(timeTags[i].getAttribute("datetime")); 161 tag = timeTags[i++];
154 timeTags[i].textContent = date.toLocaleTimeString(); 162 if(date = tag.getAttribute("datetime")) {
155 timeTags[i].setAttribute("title", date.toString()); 163 date = new Date(date);
156 i++; 164 tag.textContent = date.toLocaleTimeString();
165 tag.setAttribute("title", date.toString());
166 }
157 } 167 }
158 })(); 168 })();
159 </script> 169 </script>
160 ]]; 170 ]];
161 }); 171 });
173 183
174 local room_list_template = template(base{ 184 local room_list_template = template(base{
175 title = "Rooms on {host}"; 185 title = "Rooms on {host}";
176 header = ""; 186 header = "";
177 body = [[ 187 body = [[
188 <nav>
178 <dl class="room-list"> 189 <dl class="room-list">
179 {rooms!} 190 {rooms!}
180 </dl> 191 </dl>
192 </nav>
181 ]]; 193 ]];
182 footer = ""; 194 footer = "";
183 }); 195 });
184 196
185 local room_item_template = template[[ 197 local room_item_template = template[[