remove focus (unneccesary)

front/dist/index.tmpl.html

@@ -59,10 +59,6 @@
                 <button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
                     <img src="resources/logos/close.svg"/>
                 </button>
-                <button class="top-right-btn" id="cowebsite-focus" alt="focus the iframe">
-                    <img id="cowebsite-focus-inactive" src="resources/logos/cinema.svg"/>
-                    <img id="cowebsite-focus-active" style="display: none;" src="resources/logos/cinema-close.svg"/>
-                </button>
             </div>
 
             <div id="audioplayerctrl" class="hidden">

front/src/WebRtc/CoWebsiteManager.ts

@@ -16,9 +16,7 @@ export const cowebsiteCloseButtonId = 'cowebsite-close';
 const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
 const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
 const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
-const cowebsiteFocusButtonId = 'cowebsite-focus';
+
-const cowebsiteFocusInactiveImageId = 'cowebsite-focus-inactive';
-const cowebsiteFocusActiveImageId = 'cowebsite-focus-active';
 const animationTime = 500; //time used by the css transitions, in ms.
 
 interface TouchMoveCoordinates {
@@ -88,9 +86,6 @@ class CoWebsiteManager {
             buttonFullScreenFrame.blur();
             this.fullscreen();
         });
-        HtmlUtils.getElementByIdOrFail(cowebsiteFocusButtonId).addEventListener('click', () => {
-            this.toggleFocus();
-        });
     }
 
     private initResizeListeners(touchMode:boolean) {
@@ -150,25 +145,13 @@ class CoWebsiteManager {
         this.resetStyle();
     }
 
-    private toggleFocus(): void {
-        if (this.cowebsiteDiv.classList.contains('focus')) {
-            this.cowebsiteDiv.classList.remove('focus');
-            HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'inline';
-            HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'none';
-        } else {
-            this.cowebsiteDiv.classList.add('focus');
-            HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'none';
-            HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'inline';
-        }
-    }
-
     private load(): void {
         this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
         this.cowebsiteDiv.classList.add('loading');
         this.opened = iframeStates.loading;
     }
     private open(): void {
-        this.cowebsiteDiv.classList.remove('loading', 'hidden', 'focus'); //edit the css class to trigger the transition
+        this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
         this.opened = iframeStates.opened;
         this.resetStyle();
     }
@@ -176,8 +159,6 @@ class CoWebsiteManager {
     public resetStyle() {
         this.cowebsiteDiv.style.width = '';
         this.cowebsiteDiv.style.height = '';
-        HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'inline';
-        HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'none';
         HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
         HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
     }

front/style/cowebsite-mobile.scss

@@ -44,9 +44,6 @@
         &#cowebsite-fullscreen {
           left: 0;
         }
-        &#cowebsite-focus {
-          left: 25px;
-        }
       }
     }
   }

front/style/cowebsite.scss

@@ -9,10 +9,6 @@
     background-color: gray;
   }
 
-  &.focus {
-    z-index: 999;
-  }
-
   main {
     iframe {
       width: 100%;
@@ -90,9 +86,6 @@
       &#cowebsite-fullscreen {
         top: 25px;
       }
-      &#cowebsite-focus {
-        top: 50px;
-      }
     }
   }
 }

front/style/style.scss

@@ -576,7 +576,6 @@ input[type=range]:focus::-ms-fill-upper {
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: 999;
     /* TODO: DO WE NEED FLEX HERE???? WE WANT A SIDEBAR OF EXACTLY 25% (note: flex useful for direction!!!) */
 }
 
@@ -1244,7 +1243,6 @@ div.action.danger p.action-body {
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: 999;
 
     & > div {
         position: relative;