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

2
mockup/controlbox.html
View File

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

8
sass/_controlbox.scss
View File

@ -88,7 +88,7 @@
} }
#users { #users {
.add-converse-contact { .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 { .add-xmpp-contact {
background: none; background: none;
padding: 1em; padding: 1em;
@ -358,7 +362,7 @@
.set-xmpp-status { .set-xmpp-status {
background: none; background: none;
padding: 0.75em 0.5em 0.5em 0.5em; margin: 0.75em 1em 0.5em 1em;
.dropdown dd ul { .dropdown dd ul {
z-index: 22; z-index: 22;
} }

70
sass/_roster.scss
View File

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