1
0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00

Improve message design with CSS tables

This commit is contained in:
Tim Düsterhus 2013-01-30 16:34:02 +01:00
parent 8772981d92
commit 26ac9b8626
3 changed files with 43 additions and 27 deletions

View File

@ -23,34 +23,46 @@
overflow-x: hidden; overflow-x: hidden;
padding-left: 7px !important; padding-left: 7px !important;
.timsChatMessage { ul {
padding-left: 16px; display: table;
min-height: 16px;
clear: both; .timsChatMessage {
position: relative; min-height: 16px;
display: table-row;
time:first-child {
&::before {
content: "[";
}
&::after {
content: "]";
}
}
.username {
font-weight: bold;
}
> {
time, .usernameContainer, .text {
display: table-cell;
}
.usernameContainer {
text-align: right;
min-width: 100px;
padding: 0px 5px;
}
}
&.unloaded {
opacity: 0.4;
}
time:first-child {
&::before { &::before {
content: "["; .icon;
.icon16;
} }
&::after {
content: "]";
}
}
.username {
font-weight: bold;
}
&.unloaded {
opacity: 0.4;
}
&::before {
.icon;
.icon16;
position: absolute;
left: 0px;
} }
} }
} }

View File

@ -60,6 +60,10 @@
</script> </script>
<style type="text/css"> <style type="text/css">
.timsChatMessage::before {
content: "";
}
{assign var='type' value='\chat\data\message\Message::TYPE_'} {assign var='type' value='\chat\data\message\Message::TYPE_'}
.timsChatMessage{$type|concat:'JOIN'|constant}::before { .timsChatMessage{$type|concat:'JOIN'|constant}::before {
content: "\f090"; content: "\f090";

View File

@ -1 +1 @@
{literal}<time>{@$formattedTime}</time> <span class="username">{@$formattedUsername}</span><span class="separator">{$separator}</span> <span class="text">{@$formattedMessage}</span>{/literal} {literal}<time>{@$formattedTime}</time> <span class="usernameContainer"><span class="username">{@$formattedUsername}</span><span class="separator">{$separator}</span></span> <span class="text">{@$formattedMessage}</span>{/literal}