diff --git a/css/converse.css b/css/converse.css index 37a958179..c2f0c75bb 100644 --- a/css/converse.css +++ b/css/converse.css @@ -649,32 +649,6 @@ #conversejs a.close-chatbox-button:active { position: relative; top: 1px; } - #conversejs .chatroom-form-container { - height: 100%; - color: #6C4C44; - overflow-y: auto; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; } - #conversejs .chatroom-form { - padding: 1em; } - #conversejs .chatroom-form .instructions { - color: gray; - font-size: 95%; } - #conversejs .chatroom-form input { - width: 100%; - padding: 5px; - text-align: center; } - #conversejs .chatroom-form legend { - font-size: 16px; - font-weight: bold; - margin: 10px 0 15px 0; } - #conversejs .chatroom-form label { - height: 30px; - font-weight: bold; - display: block; - clear: both; } - #conversejs .chatroom-form label label input, #conversejs .chatroom-form label label select { - float: right; } #conversejs .requesting-xmpp-contact .request-actions { margin-left: 0.5em; float: right; } @@ -873,78 +847,6 @@ cursor: pointer; display: block; padding: 4px 7px 0 5px; } - #conversejs .chatroom { - width: 300px; } - @media screen and (max-width: 480px) { - #conversejs .chatroom { - width: 100%; } - #conversejs .chatroom .box-flyout { - min-width: 100%; - width: 100%; } } - #conversejs .chatroom .box-flyout { - min-width: 300px; - width: 300px; } - #conversejs .chatroom .box-flyout .chatroom-body { - height: 289px; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - height: -webkit-calc(100% - 44px); - height: calc(100% - 44px); - background-color: white; - border-top: 0; - display: table; - table-layout: fixed; - width: 100%; } - #conversejs .chatroom .box-flyout .chatroom-body .chat-area { - word-wrap: break-word; - display: table-cell; - height: 100%; - min-width: 200px; } - #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { - padding: 0.5em 0.5em 0 0.5em; } - #conversejs .chatroom .box-flyout .chatroom-body .participants { - display: table-cell; - vertical-align: top; - background-color: white; - overflow-y: auto; - overflow-x: hidden; - border-left: 1px solid #AAA; - border-bottom-right-radius: 4px; - width: 100px; - height: 100%; } - #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden { - display: none; } - #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list { - list-style: none; } - #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li { - cursor: default; - display: block; - font-size: 12px; - font-weight: bold; - overflow: hidden; - padding: 2px 5px; - text-overflow: ellipsis; - white-space: nowrap; - width: 100px; } - #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator { - color: #8f2831; } - #conversejs .chatroom .box-flyout .chatroom-body .participants label { - font-size: 12px; - font-style: italic; - margin: 5px; - display: block; } - #conversejs .chatroom label { - margin-left: 2px; - font-size: 12px; } - #conversejs .chatroom .chat-textarea { - border-bottom-right-radius: 0; } - #conversejs .chatroom .invited-contact { - margin: -1px 0 0 -1px; - width: 100px; - border: 1px solid #999; } - #conversejs .chatroom .invited-contact.tt-input { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; } - #conversejs .chatroom-form, #conversejs .controlbox-pane { background-color: white; border-bottom-left-radius: 4px; @@ -1315,4 +1217,115 @@ top: 0; left: 0; } +#conversejs .chatroom { + width: 300px; } + @media screen and (max-width: 480px) { + #conversejs .chatroom { + width: 100%; } + #conversejs .chatroom .box-flyout { + min-width: 100%; + width: 100%; } } + #conversejs .chatroom .box-flyout { + min-width: 300px; + width: 300px; } + #conversejs .chatroom .box-flyout .chatroom-body { + height: 289px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + height: -webkit-calc(100% - 44px); + height: calc(100% - 44px); + background-color: white; + border-top: 0; + display: table; + table-layout: fixed; + width: 100%; } + #conversejs .chatroom .box-flyout .chatroom-body .chat-area { + word-wrap: break-word; + display: table-cell; + height: 100%; + min-width: 200px; } + #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { + padding: 0.5em 0.5em 0 0.5em; } + #conversejs .chatroom .box-flyout .chatroom-body .participants { + display: table-cell; + vertical-align: top; + background-color: white; + overflow-y: auto; + overflow-x: hidden; + border-left: 1px solid #AAA; + border-bottom-right-radius: 4px; + width: 100px; + height: 100%; } + #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden { + display: none; } + #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list { + list-style: none; } + #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li { + cursor: default; + display: block; + font-size: 12px; + font-weight: bold; + overflow: hidden; + padding: 2px 5px; + text-overflow: ellipsis; + white-space: nowrap; + width: 100px; } + #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator { + color: #8f2831; } + #conversejs .chatroom .box-flyout .chatroom-body label { + display: block; + font-size: 12px; + font-style: italic; + margin-left: 2px; + margin: 0.5em; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { + background-color: white; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: 0; + color: #6C4C44; + font-size: 14px; + height: 289px; + height: -webkit-calc(100% - 44px); + height: calc(100% - 44px); + overflow-y: auto; + position: absolute; + text-align: center; + width: 100%; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form { + padding: 1em; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form .instructions { + color: gray; + font-size: 95%; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input { + width: 100%; + padding: 0.5em; + text-align: left; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=checkbox] { + width: auto; + margin: auto; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=submit], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=button] { + width: 50%; + margin-top: 1em; + text-align: center; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form legend { + font-size: 16px; + font-weight: bold; + margin: 10px 0 15px 0; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label { + font-weight: bold; + display: block; + clear: both; + margin-top: 1em; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select { + float: right; } + #conversejs .chatroom .chat-textarea { + border-bottom-right-radius: 0; } + #conversejs .chatroom .invited-contact { + margin: -1px 0 0 -1px; + width: 100px; + border: 1px solid #999; } + #conversejs .chatroom .invited-contact.tt-input { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; } + /*# sourceMappingURL=converse.css.map */ diff --git a/mockup/chatroom2.html b/mockup/chatroom2.html index a574a7e6a..fa0604c64 100644 --- a/mockup/chatroom2.html +++ b/mockup/chatroom2.html @@ -116,7 +116,7 @@

-
+
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss new file mode 100644 index 000000000..752d3fddd --- /dev/null +++ b/sass/_chatrooms.scss @@ -0,0 +1,137 @@ +#conversejs { + .chatroom { + width: $chatroom-width; + @media screen and (max-width: $mobile-landscape-length) { + width: $mobile-chat-width; + .box-flyout { + min-width: $mobile-chat-width; + width: $mobile-chat-width; + } + } + .box-flyout { + min-width: $chatroom-width; + width: $chatroom-width; + .chatroom-body { + height: 289px; + @include border-bottom-radius($chatbox-border-radius); + @include calc(height, '100% - #{$chat-head-height}'); + background-color: white; + border-top: 0; + display: table; + table-layout: fixed; + width: 100%; + + .chat-area { + word-wrap: break-word; + display: table-cell; + height: 100%; + min-width: $chat-width; + .chat-content { + padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding. + } + } + .participants { + display: table-cell; + vertical-align: top; + background-color: white; + overflow-y: auto; + overflow-x: hidden; + border-left: 1px solid #AAA; + border-bottom-right-radius: $chatbox-border-radius; + width: 100px; + height: 100%; + &.hidden { + display: none; + } + .participant-list { + list-style: none; + li { + cursor: default; + display: block; + font-size: 12px; + font-weight: bold; + overflow: hidden; + padding: 2px 5px; + text-overflow: ellipsis; + white-space: nowrap; + width: 100px; + &.moderator { + color: #8f2831; + } + } + } + } + label { + display: block; + font-size: 12px; + font-style: italic; + margin-left: 2px; + margin: 0.5em; + } + .chatroom-form-container { + background-color: white; + border-bottom-left-radius: $chatbox-border-radius; + border-bottom-right-radius: $chatbox-border-radius; + border: 0; + color: $text-color; + font-size: $font-size; + height: 289px; + @include calc(height, '100% - #{$chat-head-height}'); + overflow-y: auto; + position: absolute; + text-align: center; + width: 100%; + + .chatroom-form { + padding: 1em; + + .instructions { + color: gray; + font-size: 95%; + } + input { + width: 100%; + padding: 0.5em; + text-align: left; + } + input[type=checkbox] { + width: auto; + margin: auto; + } + input[type=submit], input[type=button] { + width: 50%; + margin-top: 1em; + text-align: center; + } + legend { + font-size: $legend-font-size; + font-weight: bold; + margin: 10px 0 15px 0; + } + label { + font-weight: bold; + display: block; + clear: both; + margin-top: 1em; + + label input, label select { + float: right; + } + } + } + } + } + } + .chat-textarea { + border-bottom-right-radius: 0; + } + .invited-contact { + margin: -1px 0 0 -1px; + width: 100px; + border: 1px solid #999; + } + .invited-contact.tt-input { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center; + } + } +} diff --git a/sass/_core.scss b/sass/_core.scss index 773d099b4..3af31afbb 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -31,7 +31,6 @@ } #conversejs { - @import "variables"; ::selection { background-color: $highlight-color; } @@ -678,42 +677,6 @@ top: 1px; } - .chatroom-form-container { - height: 100%; - color: $text-color; - overflow-y: auto; - border-bottom-right-radius: $chatbox-border-radius; - border-bottom-left-radius: $chatbox-border-radius; - } - - .chatroom-form { - padding: 1em; - .instructions { - color: gray; - font-size: 95%; - } - input { - width: 100%; - padding: 5px; - text-align: center; - } - legend { - font-size: $legend-font-size; - font-weight: bold; - margin: 10px 0 15px 0; - } - label { - height: 30px; - font-weight: bold; - display: block; - clear: both; - - label input, label select { - float: right; - } - } - } - .requesting-xmpp-contact .request-actions { margin-left: 0.5em; float: right; @@ -985,94 +948,6 @@ } } - .chatroom { - width: $chatroom-width; - @media screen and (max-width: $mobile-landscape-length) { - width: $mobile-chat-width; - .box-flyout { - min-width: $mobile-chat-width; - width: $mobile-chat-width; - } - } - .box-flyout { - min-width: $chatroom-width; - width: $chatroom-width; - .chatroom-body { - height: 289px; - @include border-bottom-radius($chatbox-border-radius); - @include calc(height, '100% - #{$chat-head-height}'); - background-color: white; - border-top: 0; - display: table; - table-layout: fixed; - width: 100%; - .chat-area { - word-wrap: break-word; - display: table-cell; - height: 100%; - min-width: $chat-width; - .chat-content { - padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding. - } - } - .participants { - display: table-cell; - vertical-align: top; - background-color: white; - overflow-y: auto; - overflow-x: hidden; - border-left: 1px solid #AAA; - border-bottom-right-radius: $chatbox-border-radius; - width: 100px; - height: 100%; - &.hidden { - display: none; - } - .participant-list { - list-style: none; - li { - cursor: default; - display: block; - font-size: 12px; - font-weight: bold; - overflow: hidden; - padding: 2px 5px; - text-overflow: ellipsis; - white-space: nowrap; - width: 100px; - &.moderator { - color: #8f2831; - } - } - } - label { - font-size: 12px; - font-style: italic; - margin: 5px; - display: block; - } - } - } - } - - label { - margin-left: 2px; - font-size: 12px; - } - .chat-textarea { - border-bottom-right-radius: 0; - } - .invited-contact { - margin: -1px 0 0 -1px; - width: 100px; - border: 1px solid #999; - } - .invited-contact.tt-input { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center; - } - } - - .chatroom-form, .controlbox-pane { background-color: white; border-bottom-left-radius: $chatbox-border-radius; diff --git a/sass/converse.scss b/sass/converse.scss index eb7e66c41..b977377d8 100644 --- a/sass/converse.scss +++ b/sass/converse.scss @@ -9,3 +9,4 @@ @import "bourbon"; @import "variables"; @import "core"; +@import "chatrooms";