Poll WIP (#231):

* fix css depending on chat height.
This commit is contained in:
John Livingston 2024-07-04 15:48:22 +02:00
parent 1249f0895d
commit 3665096836
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 28 additions and 15 deletions

View File

@ -13,8 +13,6 @@
border: 1px solid var(--peertube-menu-background); border: 1px solid var(--peertube-menu-background);
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
max-height: 150px;
overflow-y: scroll;
.livechat-poll-toggle { .livechat-poll-toggle {
background: unset; background: unset;
@ -92,6 +90,15 @@
} }
} }
} }
&[livechat-converse-root-height="small"],
&[livechat-converse-root-height="medium"] {
/* stylelint-disable-next-line no-descending-specificity */
livechat-converse-muc-poll > div {
max-height: 150px;
overflow-y: scroll;
}
}
} }
body[livechat-viewer-mode="on"] { body[livechat-viewer-mode="on"] {
@ -103,17 +110,15 @@ body[livechat-viewer-mode="on"] {
.livechat-readonly { .livechat-readonly {
.conversejs { .conversejs {
livechat-converse-muc-poll { /* stylelint-disable-next-line no-descending-specificity */
/* stylelint-disable-next-line no-descending-specificity */ livechat-converse-muc-poll > div {
& > div { // In readonly mode, dont impose max-height
// In readonly mode, dont impose max-height max-height: initial !important;
max-height: initial !important; overflow-y: visible !important;
overflow-y: visible !important;
&.livechat-poll-over { &.livechat-poll-over {
// stop showing poll when over in readonly mode // stop showing poll when over in readonly mode
display: none !important; display: none !important;
}
} }
} }
} }

View File

@ -43,17 +43,25 @@ function start () {
function stop () { function stop () {
rootResizeObserver.disconnect() rootResizeObserver.disconnect()
document.querySelector('converse-root')?.removeAttribute('livechat-converse-root-width') const root = document.querySelector('converse-root')
if (root) {
root.removeAttribute('livechat-converse-root-width')
root.removeAttribute('livechat-converse-root-height')
}
} }
function handle (el) { function handle (el) {
const rect = el.getBoundingClientRect() const rect = el.getBoundingClientRect()
const height = rect.height > 576 ? 'high' : (rect.height > 250 ? 'medium' : 'small')
const width = rect.width > 576 ? 'large' : (rect.width > 250 ? 'medium' : 'small') const width = rect.width > 576 ? 'large' : (rect.width > 250 ? 'medium' : 'small')
const previous = el.getAttribute('livechat-converse-root-width') const previousHeight = el.getAttribute('livechat-converse-root-height')
if (width === previous) { return } const previousWidth = el.getAttribute('livechat-converse-root-width')
if (width === previousWidth && height === previousHeight) { return }
el.setAttribute('livechat-converse-root-width', width) el.setAttribute('livechat-converse-root-width', width)
el.setAttribute('livechat-converse-root-height', height)
api.trigger('livechatSizeChanged', { api.trigger('livechatSizeChanged', {
height: height,
width: width width: width
}) })
} }