Mercurial > prosody-modules
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[[ |