matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix UI on little screens (form for anonymous users was too high).

Browse Source
This commit is contained in:
John Livingston 2024-04-23 10:05:56 +02:00
parent 2074ec8546
commit 2b6cd15951
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
3 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -5,6 +5,7 @@
### Minor changes and fixes ### Minor changes and fixes
* Fix #370: "open with a remote Peertube" broken when chat is embedded in an iframe. * Fix #370: "open with a remote Peertube" broken when chat is embedded in an iframe.
* Fix UI on little screens (form for anonymous users was too high).
## 9.0.0 ## 9.0.0

8
assets/styles/style.scss
View File

@ -79,10 +79,16 @@
} }
} }
/* Note: livechat-viewer-mode-content (the form where anonymous users can
choose nickname or log in with external account), can be something like
~180px height (at time of writing).
We must ensure that the 200px limit for converse-muc and converse-root is
always higher than livechat-viewer-mode-content max size.
*/
#peertube-plugin-livechat-container converse-root { #peertube-plugin-livechat-container converse-root {
display: block; display: block;
border: 1px solid black; border: 1px solid black;
min-height: max(30vh, 200px); min-height: max(30vh, 200px); // Always at least 200px, and ideally at least 30% of viewport.
height: 100%; height: 100%;
converse-muc { converse-muc {

11
conversejs/custom/shared/styles/livechat.scss
View File

@ -62,10 +62,16 @@ body.livechat-readonly.livechat-noscroll {
display: flex !important; display: flex !important;
flex-flow: row wrap !important; flex-flow: row wrap !important;
padding-bottom: 0.5em !important; padding-bottom: 0.5em !important;
padding-top: 0.5em !important;
border-top: 1px solid var(--chatroom-head-bg-color) !important; border-top: 1px solid var(--chatroom-head-bg-color) !important;
gap: 10px; gap: 0.5em 10px;
align-items: baseline; align-items: baseline;
.form-group,
label {
margin-bottom: 0 !important; // replaced by the gap on .livechat-viewer-mode-content
}
label { label {
color: var(--text-color); // fix converseJs css that breaks this label color. color: var(--text-color); // fix converseJs css that breaks this label color.
} }
@ -77,7 +83,8 @@ body.livechat-readonly.livechat-noscroll {
} }
.livechat-viewer-mode-external-login { .livechat-viewer-mode-external-login {
padding: 2em; margin: 0.5em 0;
padding: 0;
} }
} }