Mercurial > prosody-modules
view mod_http_muc_log/res/http_muc_log.html @ 4963:479d618c9e6d
mod_http_muc_log: Show XEP-0444 reactions
author | Kim Alvefur <zash@zash.se> |
---|---|
date | Sun, 26 Jun 2022 21:23:42 +0200 |
parents | b65a363d32d2 |
children | b49d72160497 |
line wrap: on
line source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {date&<meta name="dcterms.date" content="{date}">} <title>{title?{room.name?{jid_node}}{date& - {date}}}</title> <style> :link,:visited{color:#3465a4;text-decoration:none;} :link:hover,:visited:hover{color:#6197df;} body{background-color:#eeeeec;margin:1ex 0;padding-bottom:3em;font-family:Arial,Helvetica,sans-serif;} ul,ol{padding:0;} li{list-style:none;} hr{visibility:hidden;clear:both;} br{clear:both;} header,footer{margin:1ex 1em;} footer{font-size:smaller;color:#babdb6;} nav{font-size:large;margin:1ex 1ex;clear:both;line-height:1.5em;} footer nav .up{display:none;} @media screen and (min-width: 460px) { nav {font-size:x-large;margin:1ex 1em;} } nav a{padding:1ex} nav li,nav dt{margin:1ex} nav .up{font-size:smaller;display:block;clear:both;} nav .up::before{content:"↑ ";} nav .prev{float:left;} nav .next{float:right;} nav .next::after{content:" →";} nav .prev::before{content:"← ";} nav .last::after{content:" ⇥";} nav :empty::after,nav :empty::before{content:""} table{display:inline-block; margin:1ex 1em;vertical-align:top;} th{font-size:x-small} td{text-align:right;color:#bababa} td > a, td > span{padding:0.4em} .content{background-color:white;padding:1em;list-style-position:inside;} .time{float:right;font-size:small;opacity:0.2;} li:hover .time{opacity:1;} .description{font-size:smaller;} .body{white-space:pre-line;} .body::before,.body::after{content:"";} .presence .verb{font-style:normal;color:#30c030;} .unavailable .verb{color:#c03030;} .button{display:inline-block} .button>a{color:white;background-color:orange;border-radius:4px} .reaction{font-size:smaller;outline:1px solid silver;border-radius:2px} form{text-align:right} li.edited{display:none} li:target{outline:1px gray dotted;display:inherit} @media (prefers-color-scheme: dark) { html{color:#eee} body{background-color:#161616} .content{background-color:#1c1c1c} footer{color:#444} td{color:#444} .button>a{background-color:#282828} } </style> </head> <body> <header> <h1 {lang&lang="{lang}"} title="xmpp:{jid?}">{title?{room.name?{jid_node}}{date& - {date}}}</h1> <nav> <ul> {jid_node& <li class="button"><a href="xmpp:{jid?}?join">Join using a client</a></li> } {room.webchat_url& <li class="button"><a href="{room.webchat_url}">Join via web</a></li> } {links# <li><a class="{item.rel?}" href="{item.href}{hide_presence&?p=h}" rel="{item.rel?}">{item.text}</a></li>} </ul> </nav> </header> <hr> <main {lang&lang="{lang}"} class="content"> <nav> <dl class="room-list"> {rooms# <dt {item.lang&lang="{item.lang}"} class="name"><a href="{item.href}{hide_presence&?p=h}">{item.name}</a></dt> <dd {item.lang&lang="{item.lang}"} class="description">{item.description?}</dd>} </dl> {dates|calendarize# <h2 id="{item.year}">{item.year}</h2> {item.months# <table id="{item.month}-{item.year}"> <caption>{item.month}</caption> <thead><tr><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr></thead> <tbody>{item.weeks# <tr>{item.days#<td>{item.href&<a href="{item.href}{hide_presence&?p=h}">}<span>{item.day? }</span>{item.href&</a>}</td>}</tr>} </tbody> </table> } } </nav> <div> {presence_available&<form> <label> <input name="p" value="h" type="checkbox"{hide_presence& checked}> <span>Hide joins and parts</span> </label> <noscript> <button type="submit">Apply</button> </noscript> </form>} </div> <ol class="chat-logs">{lines# <li {item.lang&lang="{item.lang}"} class="{item.st_name} {item.st_type?} {item.edited&edited}" id="{item.key}"> <a class="time" href="#{item.key}"><time id="{item.time}" datetime="{item.datetime}">{item.time}</time></a> <b class="nick">{item.nick}</b> <em class="verb">{item.verb?}</em> <q class="body">{item.edited&<del>}{item.body?}{item.edited&</del> <a href="#{item.edited}">✎</a>}{item.edit& <a href="#{item.edit}">✏</a>}</q> {item.reactions%<span class="reaction">{idx} {item}</span>} {item.oob.url&<figure><a rel="nofollow" href="{item.oob.url?}"><img style="max-height:9em;max-width:16em" alt="{item.oob.desc?}" src="{item.oob.url?}"/></a><figcaption>{item.oob.desc?}</figcaption></figure>} </li>} </ol> </main> <hr> <footer> <nav> <ul>{links# <li><a class="{item.rel?}" href="{item.href}{hide_presence&?p=h}" rel="{item.rel?}">{item.text}</a></li>} </ul> </nav> <br> <div class="powered-by">Prosody</div> </footer> <script> /* * Local timestamps */ (function () { var timeTags = document.getElementsByTagName("time"); var i = 0, tag, date; while(timeTags[i]) { tag = timeTags[i++]; if(date = tag.getAttribute("datetime")) { date = new Date(date); tag.textContent = date.toLocaleTimeString(navigator.language); tag.setAttribute("title", date.toString()); } } document.forms[0].elements.p.addEventListener("change", function() { document.forms[0].submit(); }); })(); </script> </body> </html>