Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Increase padding in #users pane

Browse Source
This commit is contained in:
JC Brand 2015-10-30 18:30:39 +00:00
parent be6ae092c5
commit 5a7340b387
4 changed files with 83 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/converse.css
View File

@ -1539,7 +1539,7 @@
width: 100%;
margin: 0.5em 0; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0.5em 0.75em 0.5em; }
margin: 0 1em 0.75em 1em; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
@ -1718,6 +1718,8 @@
margin-bottom: 0; }
#conversejs #controlbox .controlbox-pane dd.odd {
background-color: #DCEAC5; }
#conversejs #controlbox #users {
overflow-y: hidden; }
#conversejs #controlbox .add-xmpp-contact {
background: none;
padding: 1em; }
@ -1739,7 +1741,7 @@
color: #D24E2B; }
#conversejs #controlbox .set-xmpp-status {
background: none;
padding: 0.75em 0.5em 0.5em 0.5em; }
margin: 0.75em 1em 0.5em 1em; }
#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .toggle-controlbox {
@ -1758,40 +1760,43 @@
text-align: left;
width: 100%;
position: relative;
margin: 0.5em 0 0 0;
margin: 1em 0 0 0;
height: 194px;
height: calc(100% - 50px - 20px);
overflow: hidden;
padding-bottom: 3em;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
padding: 0;
padding-bottom: 3em; }
#conversejs #converse-roster.no-contact-requests {
height: calc(100% - 25px - 20px); }
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .filter-type {
display: table-cell;
float: right;
font-size: calc(14px - 1px);
height: 25px;
padding: 0;
width: 84px;
border-radius: 0;
border: 1px solid; }
#conversejs #converse-roster .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 14px;
height: 25px;
margin: 0 0 0.5em 7px;
padding: 0;
padding-left: 0.4em;
width: 103px; }
#conversejs #converse-roster .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-group {
margin: 0 1em;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-group .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 14px;
height: 25px;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%; }
#conversejs #converse-roster .roster-filter-group .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-group .roster-filter.onX {
cursor: pointer; }
#conversejs #converse-roster .roster-filter-group .filter-type {
display: table-cell;
float: right;
font-size: calc(14px - 2px);
height: 25px;
padding: 0;
width: 47%;
border-radius: 0;
border: 1px solid; }
#conversejs #converse-roster .roster-contacts {
margin: 0;
height: 100%;
@ -1802,7 +1807,8 @@
color: #818479;
display: none;
font-weight: normal;
padding: 0.5em;
margin-top: 0.5em;
padding: 0.5em 1em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #DCF9F6; }
@ -1818,7 +1824,7 @@
height: 24px;
line-height: 16px;
overflow-y: hidden;
padding: 4px 2px 0 4px;
padding: 0.5em 1em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster .roster-contacts dd:hover {
background-color: #DCF9F6; }
@ -1839,10 +1845,9 @@
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 3px; }
text-overflow: ellipsis; }
#conversejs #converse-roster .roster-contacts dd span {
padding: 0 5px 0 0; }
padding: 0 0.5em 0 0; }
#conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
margin-left: 5px; }
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {

2
mockup/controlbox.html
View File

@ -136,7 +136,7 @@
</dd>
</dl>
<div id="converse-roster">
<span class="input-button-group">
<span class="roster-filter-group input-button-group">
<input class="roster-filter" placeholder="Type to filter">
<select class="filter-type">
<option value="contacts">Contacts</option>

8
sass/_controlbox.scss
View File

@ -88,7 +88,7 @@
}
#users {
.add-converse-contact {
margin: 0 0.5em 0.75em 0.5em;
margin: 0 1em 0.75em 1em;
}
}
@ -328,6 +328,10 @@
}
}
#users {
overflow-y: hidden;
}
.add-xmpp-contact {
background: none;
padding: 1em;
@ -358,7 +362,7 @@
.set-xmpp-status {
background: none;
padding: 0.75em 0.5em 0.5em 0.5em;
margin: 0.75em 1em 0.5em 1em;
.dropdown dd ul {
z-index: 22;
}

70
sass/_roster.scss
View File

@ -2,10 +2,11 @@
text-align: left;
width: 100%;
position: relative;
margin: 0.5em 0 0 0;
margin: 1em 0 0 0;
height: $roster-height;
height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
overflow: hidden;
padding: 0;
padding-bottom: 3em;
&.no-contact-requests {
@ -20,34 +21,37 @@
}
}
.filter-type {
display: table-cell;
float: right;
font-size: calc(#{$font-size} - 1px);
height: $controlbox-dropdown-height;
padding: 0;
width: 84px;
border-radius: 0;
border: 1px solid;
}
.roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999;
font-size: $font-size;
height: $controlbox-dropdown-height;
margin: 0 0 0.5em 7px;
padding: 0;
padding-left: 0.4em;
width: 103px;
}
/* (jQ addClass:) if input has value: */
.roster-filter.x {
background-position: right 3px center;
}
/* (jQ addClass:) if mouse is over the 'x' input area*/
.roster-filter.onX {
cursor: pointer;
.roster-filter-group {
margin: 0 1em;
.roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999;
font-size: $font-size;
height: $controlbox-dropdown-height;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
}
/* (jQ addClass:) if input has value: */
.roster-filter.x {
background-position: right 3px center;
}
/* (jQ addClass:) if mouse is over the 'x' input area*/
.roster-filter.onX {
cursor: pointer;
}
.filter-type {
display: table-cell;
float: right;
font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height;
padding: 0;
width: 47%;
border-radius: 0;
border: 1px solid;
}
}
.roster-contacts {
@ -60,7 +64,8 @@
color: $text-color;
display: none;
font-weight: normal;
padding: 0.5em;
margin-top: 0.5em;
padding: 0.5em 1em;
text-shadow: 0 1px 0 $text-shadow-color;
&:hover {
background-color: $highlight-color;
@ -79,7 +84,7 @@
height: 24px;
line-height: 16px;
overflow-y: hidden;
padding: 4px 2px 0 4px;
padding: 0.5em 1em;
text-shadow: 0 1px 0 $text-shadow-color;
&:hover {
background-color: $highlight-color;
@ -108,10 +113,9 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 3px;
}
span {
padding: 0 5px 0 0;
padding: 0 0.5em 0 0;
}
a {
&.decline-xmpp-request {