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

View File

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