setting contact list on the right
This commit is contained in:
parent
ba7ef4f2b0
commit
b9058292fb
2 changed files with 62 additions and 20 deletions
|
@ -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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -48,13 +82,17 @@
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
margin: 5px 0 0 0;
|
||||
#add-contact, .chat-input {
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
width: 100%;
|
||||
border-style: none;
|
||||
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 {
|
||||
|
@ -64,10 +102,6 @@
|
|||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
#tab-lst > #tab-config {
|
||||
background-image: url('img/preferences.png');
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
@ -8,6 +8,18 @@
|
|||
<body>
|
||||
<h1>Welcome to chromesoul</h1>
|
||||
|
||||
<p>
|
||||
Status: <span id="status_txt"></span><br>
|
||||
<button id="reconnect">Reconnect</button>
|
||||
</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>
|
||||
|
@ -19,11 +31,7 @@
|
|||
<button id="save">Save</button> <span id="status"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Status: <span id="status_txt"></span><br>
|
||||
<button id="reconnect">Reconnect</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="third-party/md5-min.js"></script>
|
||||
<script type="text/javascript" src="third-party/ab-str.js"></script>
|
||||
|
|
Reference in a new issue