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);
margin: 5px;
padding: 5px;
max-height: 150px;
overflow-y: scroll;
.livechat-poll-toggle {
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"] {
@ -103,17 +110,15 @@ body[livechat-viewer-mode="on"] {
.livechat-readonly {
.conversejs {
livechat-converse-muc-poll {
/* stylelint-disable-next-line no-descending-specificity */
& > div {
// In readonly mode, dont impose max-height
max-height: initial !important;
overflow-y: visible !important;
/* stylelint-disable-next-line no-descending-specificity */
livechat-converse-muc-poll > div {
// In readonly mode, dont impose max-height
max-height: initial !important;
overflow-y: visible !important;
&.livechat-poll-over {
// stop showing poll when over in readonly mode
display: none !important;
}
&.livechat-poll-over {
// stop showing poll when over in readonly mode
display: none !important;
}
}
}

View File

@ -43,17 +43,25 @@ function start () {
function stop () {
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) {
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 previous = el.getAttribute('livechat-converse-root-width')
if (width === previous) { return }
const previousHeight = el.getAttribute('livechat-converse-root-height')
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-height', height)
api.trigger('livechatSizeChanged', {
height: height,
width: width
})
}