diff --git a/assets/css/layout/_browserWindow.scss b/assets/css/layout/_browserWindow.scss
index f47b55fbb..7d0cfacc5 100644
--- a/assets/css/layout/_browserWindow.scss
+++ b/assets/css/layout/_browserWindow.scss
@@ -8,7 +8,7 @@
background-color: white;
box-sizing: border-box;
touch-action: none;
-
+
display: flex;
flex-direction: column;
box-shadow: $card-box-shadow-3dp;
@@ -17,6 +17,7 @@
&:not(.maximized,.minified) {
border: 8px solid $background-color;
border-radius: 8px;
+
.dragger {
cursor: move;
}
@@ -67,6 +68,35 @@
height: 100%;
width: 100%;
}
+
+ &.jitsiadminiframe {
+ &.maximized {
+ .headerBar {
+ padding: 4px;
+ }
+
+ .button-restore {
+ display: block !important;
+ }
+
+ .button-maximize {
+ display: none!important;
+ }
+ }
+ &:not(.maximized ){
+ .headerBar {
+ padding: 4px;
+ }
+
+ .button-restore {
+ display: none !important;
+ }
+
+ .button-maximize {
+ display: block!important;
+ }
+ }
+ }
}
.blackMode {
diff --git a/assets/js/createConference.js b/assets/js/createConference.js
index 46652a033..6b810c0f2 100644
--- a/assets/js/createConference.js
+++ b/assets/js/createConference.js
@@ -134,8 +134,8 @@ function createIframe(url, title, startMaximized = true, borderColor = '') {
'
' +
'
' +
'
' +
- '
' +
- '
' +
+ '
' +
+ '
' +
(document.fullscreenEnabled ? '
' : '') +
'
' +
'
' +
@@ -287,7 +287,7 @@ function maximizeWindow(container) {
var frame = container.closest('.jitsiadminiframe');
var maxiIcon = frame.querySelector('.button-maximize');
var restoreButton = frame.querySelector('.button-restore');
- if (maxiIcon.dataset.maximal === "0") {
+ if (!frame.classList.contains('maximized')) {
maxiIcon.dataset.height = startHeight;
maxiIcon.dataset.width = startWidth;
maxiIcon.dataset.translation = startTransform;
@@ -298,7 +298,7 @@ function maximizeWindow(container) {
frame.style.transform = 'translate(0px, 0px)'
frame.style.borderWidth = '0px'
frame.classList.add('maximized');
- frame.querySelector('.headerBar').style.padding = '8px'
+
restoreButton.classList.remove('d-none');
maxiIcon.classList.add('d-none');
maxiIcon.dataset.maximal = "1";
@@ -311,12 +311,11 @@ function restoreWindowFromMaximized(container) {
var frame = container.closest('.jitsiadminiframe');
var maxiIcon = frame.querySelector('.button-maximize');
var restoreButton = frame.querySelector('.button-restore');
- if (maxiIcon.dataset.maximal === "1") {
+ if (frame.classList.contains('maximized')) {
frame.style.width = maxiIcon.dataset.width + 'px';
frame.style.height = maxiIcon.dataset.height + 'px';
frame.style.transform = maxiIcon.dataset.translation;
frame.style.removeProperty('border-width');
- frame.querySelector('.headerBar').style.removeProperty('padding');
frame.dataset.x = maxiIcon.dataset.x;
frame.dataset.y = maxiIcon.dataset.y;
maxiIcon.dataset.maximal = "0";
@@ -433,9 +432,7 @@ function addInteractions(ele) {
startTransform = event.target.closest('.jitsiadminiframe').style.transform
tryfullscreen = false;
event.target.closest('.jitsiadminiframe').querySelector('.button-maximize').dataset.maximal = "0";
- event.target.closest('.jitsiadminiframe').style.removeProperty('border');
- event.target.closest('.jitsiadminiframe').querySelector('.headerBar').style.removeProperty('padding');
event.target.closest('.jitsiadminiframe').querySelector('.button-maximize').querySelector('i').classList.remove('fa-window-restore');
event.target.closest('.jitsiadminiframe').querySelector('.button-maximize').querySelector('i').classList.add('fa-window-maximize');
}).on("drag", event => {
@@ -571,7 +568,7 @@ function addInteractions(ele) {
event.target.style.height = `${event.height}px`;
event.target.style.transform = `translate(${beforeTranslate[0]}px, ${beforeTranslate[1]}px)`;
// event.target.style.removeProperty('border');
- event.target.querySelector('.headerBar').style.removeProperty('padding');
+
event.target.dataset.x = beforeTranslate[0];
event.target.dataset.y = beforeTranslate[1];