tileradotorg/synapse
1
0
Fork 0
forked from MirrorHub/synapse
Code Pull requests Activity

sacrifice a goat or two to make wordwrap actually work properly

Browse source
This commit is contained in:
Matthew Hodgson 2014-08-22 01:33:34 +01:00
parent ab27b49ded
commit fd47f55e94
2 changed files with 21 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
webclient/app.css
View file

@ -145,6 +145,7 @@ h1 {
max-width: 1280px; max-width: 1280px;
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed;
} }
#messageTable td { #messageTable td {
@ -190,25 +191,13 @@ h1 {
object-fit: cover; object-fit: cover;
} }
.text {
background-color: #eee;
border: 1px solid #d8d8d8;
height: 31px;
display: inline-table;
margin-top: -1px;
max-width: 90%;
font-size: 16px;
/* word-wrap: break-word; */
word-break: break-all;
}
.emote { .emote {
background-color: #fff ! important; background-color: transparent ! important;
border: 0px ! important; border: 0px ! important;
} }
.membership { .membership {
background-color: #fff ! important; background-color: transparent ! important;
border: 0px ! important; border: 0px ! important;
} }
@ -221,6 +210,13 @@ h1 {
} }
.bubble { .bubble {
background-color: #eee;
border: 1px solid #d8d8d8;
display: inline-block;
margin-bottom: -1px;
max-width: 90%;
font-size: 16px;
word-wrap: break-word;
padding-top: 7px; padding-top: 7px;
padding-bottom: 5px; padding-bottom: 5px;
padding-left: 1em; padding-left: 1em;
@ -229,27 +225,24 @@ h1 {
} }
.differentUser td { .differentUser td {
padding-top: 5px ! important; padding-bottom: 5px ! important;
margin-top: 5px ! important;
} }
.mine { .mine {
text-align: right; text-align: right;
} }
.mine .text { .text.emote .bubble,
background-color: #f8f8ff ! important; .text.membership .bubble,
} .mine .text.emote .bubble,
.mine .text.membership .bubble
.mine .emote { {
background-color: #fff ! important; background-color: transparent ! important;
} border: 0px ! important;
.mine .membership {
background-color: #fff ! important;
} }
.mine .text .bubble { .mine .text .bubble {
background-color: #f8f8ff ! important;
text-align: left ! important; text-align: left ! important;
} }

4
webclient/room/room.html
View file

@ -29,7 +29,7 @@
<!-- FIXME: need to have better timestamp semantics than the (msg.content.hsob_ts || msg.ts) hack below --> <!-- FIXME: need to have better timestamp semantics than the (msg.content.hsob_ts || msg.ts) hack below -->
<table id="messageTable" infinite-scroll="paginateMore()"> <table id="messageTable" infinite-scroll="paginateMore()">
<tr ng-repeat="msg in events.rooms[room_id].messages" <tr ng-repeat="msg in events.rooms[room_id].messages"
ng-class="(events.rooms[room_id].messages[$index - 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item> ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
<td class="leftBlock"> <td class="leftBlock">
<div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div> <div class="sender" ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id">{{ members[msg.user_id].displayname || msg.user_id }}</div>
<div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}</div> <div class="timestamp">{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}</div>
@ -77,7 +77,7 @@
{{ state.user_id }} {{ state.user_id }}
</td> </td>
<td width="*" style="min-width: 100px"> <td width="*" style="min-width: 100px">
<input id="mainInput" ng-model="textInput" ng-enter="send()" ng-disabled="state.sending" ng-focus="true" auto-complete/> <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-disabled="state.sending" ng-focus="true" autocomplete="off" tab-complete/>
</td> </td>
<td width="150px"> <td width="150px">
<button ng-click="send()" ng-disabled="state.sending">Send</button> <button ng-click="send()" ng-disabled="state.sending">Send</button>