rodolphe/chromesoul
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

setting contact list on the right

Browse source
This commit is contained in:
Rodolphe Breard 2012-11-26 15:32:01 +01:00
parent ba7ef4f2b0
commit b9058292fb
2 changed files with 62 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
chromesoul.css
View file

@ -1,3 +1,37 @@
#l-lst {
position: fixed;
right: 0;
top: 0;
padding: 0 5px 0 5px;
width: 200px;
height: 100%;
border-left: 1px solid #aaa;
}
#l-lst > h2 {
margin: 0;
padding: 0;
text-align: center;
font-size: 1em;
}
#contact-lst {
margin: 15px 0 0 0;
padding: 0;
list-style: none;
}
#contact-lst > li {
margin: 5px 0 0 0;
padding: 5px;
border: 1px solid #aaa;
}
#r-lst {
padding-right: 210px;
min-width: 400px;
}
#tab-lst { #tab-lst {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -48,13 +82,17 @@
overflow-y: scroll; overflow-y: scroll;
} }
.chat-input { #add-contact, .chat-input {
margin: 5px 0 0 0;
padding: 0; padding: 0;
height: 20px;
width: 100%;
border-style: none; border-style: none;
outline: 1px solid #aaa; outline: 1px solid #aaa;
width: 100%;
height: 20px;
margin: 5px 0 0 0;
}
#add-contact:focus, .chat-input:focus {
outline-offset: 0;
} }
.chat-input-wrapper { .chat-input-wrapper {
@ -64,10 +102,6 @@
padding-left: 24px; padding-left: 24px;
} }
.chat-input:focus {
outline-offset: 0;
}
#tab-lst > #tab-config { #tab-lst > #tab-config {
background-image: url('img/preferences.png'); background-image: url('img/preferences.png');
background-repeat: no-repeat; background-repeat: no-repeat;

32
chromesoul.html
View file

@ -8,23 +8,31 @@
<body> <body>
<h1>Welcome to chromesoul</h1> <h1>Welcome to chromesoul</h1>
<ul id="tab-lst">
<li id="tab-config"><span>configuration</span></li>
</ul>
<div id="tab-body-wrapper">
<div id="configuration" class="tab-body">
Login: <input type="text" id="login" class="opt"><br>
Password (socks): <input type="password" id="pwd_socks" class="opt"><br>
Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br>
<button id="save">Save</button> <span id="status"></span>
</div>
</div>
<p> <p>
Status: <span id="status_txt"></span><br> Status: <span id="status_txt"></span><br>
<button id="reconnect">Reconnect</button> <button id="reconnect">Reconnect</button>
</p> </p>
<div id="l-lst">
<h2>Contacts</h2>
<input type="text" id="add-contact" placeholder="New contact">
<ul id="contact-lst"></ul>
</div>
<div id="r-lst">
<ul id="tab-lst">
<li id="tab-config"><span>configuration</span></li>
</ul>
<div id="tab-body-wrapper">
<div id="configuration" class="tab-body">
Login: <input type="text" id="login" class="opt"><br>
Password (socks): <input type="password" id="pwd_socks" class="opt"><br>
Enable messages: <input type="checkbox" id="enable_msg" class="opt" checked="checked"><br>
<button id="save">Save</button> <span id="status"></span>
</div>
</div>
</div>
<script type="text/javascript" src="third-party/md5-min.js"></script> <script type="text/javascript" src="third-party/md5-min.js"></script>
<script type="text/javascript" src="third-party/ab-str.js"></script> <script type="text/javascript" src="third-party/ab-str.js"></script>
<script type="text/javascript" src="lib/ns_client.js"></script> <script type="text/javascript" src="lib/ns_client.js"></script>