properly display number of users when more than 99 are on a pad + added ids + aligned chatlabel

pull/519/head
0ip 2012-02-28 21:21:59 +01:00
parent af4bd5ca65
commit 5db8c5bda9
2 changed files with 58 additions and 79 deletions

View File

@ -65,6 +65,7 @@ a img
{
text-decoration: none;
color: #ccc;
position: absolute;
}
#editbar ul li a span
@ -800,12 +801,11 @@ ul#colorpickerswatches li:hover
#chatlabel
{
font-size:13px;
line-height:16px;
font-weight:bold;
color:#555;
text-decoration: none;
position: relative;
bottom: 3px;
margin-right: 3px;
vertical-align: middle;
}
#chatinput
@ -813,6 +813,7 @@ ul#colorpickerswatches li:hover
border: 1px solid #BBBBBB;
width: 100%;
float:right;
vertical-align: middle;
}
#chaticon
@ -840,8 +841,7 @@ ul#colorpickerswatches li:hover
{
color:#555;
font-size:9px;
position:relative;
bottom: 2px;
vertical-align: middle;
}
#titlebar
@ -1062,6 +1062,8 @@ margin-top: 1px;
.buttonicon-chat {
background-position: 0px -102px;
display: inline-block;
vertical-align: middle;
margin: 0 !important;
}
.buttonicon-showusers {
background-position: 0px -183px;
@ -1087,7 +1089,10 @@ width:33px !important;
}
#online_count{
color: #999;
color: #888;
font-size: 11px;
line-height: 18px;
position: fixed;
}
#qr_center {
@ -1214,7 +1219,10 @@ label {
padding: 4px 3px;
}
#users {
right: 4px;
right: 0;
top: 36px;
bottom: 33px;
border-radius: none;
}
#mycolorpicker {
left: -72px; /* #mycolorpicker:width - #users:width */
@ -1240,7 +1248,7 @@ label {
float: right;
}
#chaticon {
bottom: 0;
bottom: 3px;
right: 55px;
border-right: none;
border-radius: 0;
@ -1292,4 +1300,7 @@ label {
.separator {
display: none;
}
#online_count {
line-height: 24px;
}
}

View File

@ -11,94 +11,64 @@
<link href="../static/custom/pad.css" rel="stylesheet">
<style title="dynamicsyntax"></style>
<!-- head and body had been removed intentionally -->
<div id="editbar">
<ul id="menu_left">
<li onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false" >
<a title="Bold (ctrl-B)">
<div class="buttonicon buttonicon-bold"></div>
</a>
<li id="bold" onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false">
<a class="buttonicon buttonicon-bold" title="Bold (ctrl-B)"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('italic'); return false;" >
<a title="Italics (ctrl-I)">
<div class="buttonicon buttonicon-italic"></div>
</a>
<li id="italic" onClick="window.pad&amp;&amp;pad.editbarClick('italic'); return false;">
<a class="buttonicon buttonicon-italic" title="Italics (ctrl-I)"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('underline');return false;" >
<a title="Underline (ctrl-U)">
<div class="buttonicon buttonicon-underline"></div>
</a>
<li id="underline" onClick="window.pad&amp;&amp;pad.editbarClick('underline');return false;" >
<a class="buttonicon buttonicon-underline" title="Underline (ctrl-U)"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('strikethrough');return false;" >
<a title="Strikethrough">
<div class="buttonicon buttonicon-strikethrough"></div>
</a>
<li id="strikethrough" onClick="window.pad&amp;&amp;pad.editbarClick('strikethrough');return false;">
<a class="buttonicon buttonicon-strikethrough" title="Strikethrough"></a>
</li>
<li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertorderedlist');return false;" >
<a title="Toggle Ordered List">
<div class="buttonicon buttonicon-insertorderedlist"></div>
</a>
<li id="oderedlist" onClick="window.pad&amp;&amp;pad.editbarClick('insertorderedlist');return false;">
<a class="buttonicon buttonicon-insertorderedlist" title="Toggle Ordered List"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertunorderedlist');return false;" >
<a title="Toggle Bullet List">
<div class="buttonicon buttonicon-insertunorderedlist"></div>
</a>
<li id="unoderedlist" onClick="window.pad&amp;&amp;pad.editbarClick('insertunorderedlist');return false;">
<a class="buttonicon buttonicon-insertunorderedlist" title="Toggle Bullet List"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('indent');return false;" >
<a title="Indent">
<div class="buttonicon buttonicon-indent"></div>
</a>
<li id="indent" onClick="window.pad&amp;&amp;pad.editbarClick('indent');return false;">
<a class="buttonicon buttonicon-indent" title="Indent"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('outdent');return false;" >
<a title="Unindent">
<div class="buttonicon buttonicon-outdent"></div>
</a>
<li id="outdent" onClick="window.pad&amp;&amp;pad.editbarClick('outdent');return false;">
<a class="buttonicon buttonicon-outdent" title="Unindent"></a>
</li>
<li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('undo');return false;" >
<a title="Undo (ctrl-Z)">
<div class="buttonicon buttonicon-undo"></div>
</a>
<li id="undo" onClick="window.pad&amp;&amp;pad.editbarClick('undo');return false;">
<a class="buttonicon buttonicon-undo" title="Undo (ctrl-Z)"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('redo');return false;" >
<a title="Redo (ctrl-Y)">
<div class="buttonicon buttonicon-redo"></div>
</a>
<li id="redo" onClick="window.pad&amp;&amp;pad.editbarClick('redo');return false;">
<a class="buttonicon buttonicon-redo" title="Redo (ctrl-Y)"></a>
</li>
<li class="separator"></li>
<li id="clearAuthorship" onClick="window.pad&amp;&amp;pad.editbarClick('clearauthorship');return false;" >
<a title="Clear Authorship Colors">
<div class="buttonicon buttonicon-clearauthorship"></div>
</a>
<li id="clearAuthorship" onClick="window.pad&amp;&amp;pad.editbarClick('clearauthorship');return false;">
<a class="buttonicon buttonicon-clearauthorship" title="Clear Authorship Colors"></a>
</li>
</ul>
<ul id="menu_right">
<li onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;">
<a id="settingslink" title="Settings of this pad">
<div class="buttonicon buttonicon-settings"></div>
</a>
<li id="settings" onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;">
<a class="buttonicon buttonicon-settings" id="settingslink" title="Settings of this pad"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('import_export');return false;">
<a id="exportlink" title="Import/Export from/to different document formats">
<div class="buttonicon buttonicon-import_export"></div>
</a>
<li id="import_export" onClick="window.pad&amp;&amp;pad.editbarClick('import_export');return false;">
<a class="buttonicon buttonicon-import_export" id="exportlink" title="Import/Export from/to different document formats"></a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('embed');return false;" >
<a id="embedlink" title="Share and Embed this pad">
<div class="buttonicon buttonicon-embed"></div>
</a>
<li id="embed" onClick="window.pad&amp;&amp;pad.editbarClick('embed');return false;" >
<a class="buttonicon buttonicon-embed" id="embedlink" title="Share and Embed this pad"></a>
</li>
<li class="separator"></li>
<li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'">
<a title="Show the history of this pad">
<div class="buttonicon buttonicon-history"></div>
</a>
<a class="buttonicon buttonicon-history" title="Show the history of this pad"></a>
</li>
<li id="usericon" onClick="window.pad&amp;&amp;pad.editbarClick('showusers');return false;" >
<a title="Show connected users">
<div class="buttonicon buttonicon-showusers" id="usericonback"></div>
<span id="online_count">1</span>
</a>
<li id="usericon" onClick="window.pad&amp;&amp;pad.editbarClick('showusers');return false;" title="Show connected users">
<span class="buttonicon buttonicon-showusers" id="usericonback"></span>
<span id="online_count">1</span>
</li>
</ul>
</div>
@ -218,11 +188,9 @@
<div id="chatthrob"></div>
<div id="chaticon">
<a onClick="chat.show();return false;" title="Open the chat for this pad">
<span id="chatlabel">Chat</span>
<div class="buttonicon buttonicon-chat"></div>
</a>
<div id="chaticon" title="Open the chat for this pad" onclick="chat.show();return false;">
<span id="chatlabel">Chat</span>
<span class="buttonicon buttonicon-chat"></span>
<span id="chatcounter">0</span>
</div>