Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update mockup somewhat to see how to more nicely render avatars

Browse Source
This commit is contained in:
JC Brand 2018-04-25 18:02:39 +02:00
parent e487fe4e54
commit a15192974d
1 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
mockup/chatroom.html
View File

@ -37,30 +37,31 @@
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-24T00:00:00+02:00">Tuesday Apr 24th 2018</time>
<div class="message chat-info chat-event" data-isodate="2018-04-24T18:07:24+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-24T18:07:26+02:00" data-msgid="4fb4d101-8124-4f2a-8dfb-2615896b8316">
<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-36T00:00:00+02:00">Tuesday Apr 36th 2018</time>
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-36T18:07:26+02:00" data-msgid="4fb4d101-8136-4f2a-8dfb-2615896b8316">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-me">18:07 me:&nbsp;</span>
<span class="chat-msg-content">ee</span>
<div class="chat-msg-media"></div>
</div>
<div class="chat-message">
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-room">luke:&nbsp;</span>
</span>
<span class="chat-msg-content">leia: hi :)</span>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">19:36&nbsp;
<span class="chat-msg-room">leia:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div>
<time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">19:36&nbsp;
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
@ -72,16 +73,16 @@
patient if your questions aren't answered immediately. We're all in different timezones.</div>
<div class="chat-message">
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-me">me:&nbsp;</span>
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-message">
<div class="message chat-message">
<canvas height="36" width="36" class="avatar"></canvas>
<span class="chat-msg-author chat-msg-room">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
</span>
<span class="chat-msg-content">Another message to check that scrolling works.</span>