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;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
#messageTable td {
@ -190,25 +191,13 @@ h1 {
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 {
background-color: #fff ! important;
background-color: transparent ! important;
border: 0px ! important;
}
.membership {
background-color: #fff ! important;
background-color: transparent ! important;
border: 0px ! important;
}
@ -221,6 +210,13 @@ h1 {
}
.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-bottom: 5px;
padding-left: 1em;
@ -229,27 +225,24 @@ h1 {
}
.differentUser td {
padding-top: 5px ! important;
margin-top: 5px ! important;
padding-bottom: 5px ! important;
}
.mine {
text-align: right;
}
.mine .text {
background-color: #f8f8ff ! important;
}
.mine .emote {
background-color: #fff ! important;
}
.mine .membership {
background-color: #fff ! important;
.text.emote .bubble,
.text.membership .bubble,
.mine .text.emote .bubble,
.mine .text.membership .bubble
{
background-color: transparent ! important;
border: 0px ! important;
}
.mine .text .bubble {
background-color: #f8f8ff ! 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 -->
<table id="messageTable" infinite-scroll="paginateMore()">
<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">
<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>
@ -77,7 +77,7 @@
{{ state.user_id }}
</td>
<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 width="150px">
<button ng-click="send()" ng-disabled="state.sending">Send</button>