From c1de3190e946051d5a1b6970b34f33571111affa Mon Sep 17 00:00:00 2001
From: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
Date: Thu, 16 Jun 2022 14:27:13 +0200
Subject: [PATCH] Fix/155 (#158)

* fix/155: fix css polution on detached views
* fix/155: test detached routes
---
 client/package.json                           |   2 +-
 .../src/features/editors/Editor.module.scss   | 166 ++++++++----------
 server/cypress/integration/navigation.spec.js |  23 ++-
 3 files changed, 94 insertions(+), 97 deletions(-)

diff --git a/client/package.json b/client/package.json
index 72bfb1fb0..ad2931b49 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ontime-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.0.0-next.3",
diff --git a/client/src/features/editors/Editor.module.scss b/client/src/features/editors/Editor.module.scss
index 6c4d5dd04..8ee05e3ad 100644
--- a/client/src/features/editors/Editor.module.scss
+++ b/client/src/features/editors/Editor.module.scss
@@ -9,6 +9,12 @@
   color: $ontime-pink;
 }
 
+h1 {
+  font-size: max(1.5em, 16px);
+  color: $bg-gray-100;
+  padding-bottom: 0.25em;
+}
+
 .mainContainer {
   background: $bg-black;
   width: 100%;
@@ -38,89 +44,6 @@
   }
 }
 
-/* 2/3 window, hide info */
-@media (max-width: 1450px) and (min-height: 700px) {
-  .mainContainer {
-    height: 100%;
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 40px 48em auto;
-    /* grid-template-areas:
-      'even play sett'
-      'even mess sett'; */
-  }
-
-  .info {
-    visibility: hidden;
-  }
-}
-
-/* 1/2 window, event list only */
-@media (max-width: 1100px) {
-  .mainContainer {
-    height: 100%;
-    grid-template-rows: 1fr auto;
-    grid-template-columns: 40px 48em;
-    /* grid-template-areas:
-      'sett even '
-      'sett play '; */
-  }
-
-  .info,
-  .messages,
-  .playback {
-    visibility: hidden;
-  }
-}
-
-/* 1/3 window, show control only */
-@media (max-width: 850px) and (min-height: 500px) {
-  .mainContainer {
-    grid-template-rows: auto 1fr;
-    grid-template-columns: 100%;
-    column-gap: 0;
-    grid-template-areas:
-      'play'
-      'mess';
-  }
-
-  .playback,
-  .messages {
-    visibility: visible;
-  }
-
-  .editor,
-  .info,
-  .settings {
-    visibility: hidden;
-  }
-}
-
-/* 1/3 corner window, playback only */
-@media (max-width: 850px) and (max-height: 500px) {
-  .mainContainer {
-    grid-template-rows: 100%;
-    grid-template-columns: 100%;
-    grid-template-areas: 'play';
-  }
-
-  .playback {
-    visibility: visible;
-  }
-
-  .editor,
-  .messages,
-  .info,
-  .settings {
-    visibility: hidden;
-  }
-}
-
-h1 {
-  font-size: max(1.5em, 16px);
-  color: $bg-gray-100;
-  padding-bottom: 0.25em;
-}
-
 .mainContainer > div {
   border-radius: 0.5em;
   height: 100%;
@@ -184,15 +107,74 @@ h1 {
   padding-top: 0.5em;
 }
 
-.cornerButtonContainer {
-  position: relative;
-  top: -4.5em;
-  display: flex;
-  justify-content: flex-end;
+
+/* 2/3 window, hide info */
+@media (max-width: 1450px) and (min-width: 1101px) {
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 40px 48em auto;
+
+    .info {
+      visibility: hidden;
+    }
+  }
 }
 
-.buttonContainer {
-  padding-bottom: 2em;
-  display: flex;
-  justify-content: flex-end;
+/* 1/2 window, event list only */
+@media (max-width: 1100px) and (min-width: 851px){
+  .mainContainer {
+    height: 100%;
+    grid-template-rows: 1fr auto;
+    grid-template-columns: 40px 48em;
+
+    .info,
+    .messages,
+    .playback {
+      visibility: hidden;
+    }
+  }
+}
+
+/* 1/3 window, show control only */
+@media (max-width: 850px) and (min-height: 500px) {
+  .mainContainer {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    column-gap: 0;
+    grid-template-areas:
+      'play'
+      'mess';
+
+    .playback,
+    .messages {
+      visibility: visible;
+    }
+
+    .editor,
+    .info,
+    .settings {
+      visibility: hidden;
+    }
+  }
+}
+
+/* 1/3 corner window, playback only */
+@media (max-width: 850px) and (max-height: 500px) {
+  .mainContainer {
+    grid-template-rows: 100%;
+    grid-template-columns: 100%;
+    grid-template-areas: 'play';
+
+    .playback {
+      visibility: visible;
+    }
+
+    .editor,
+    .messages,
+    .info,
+    .settings {
+      visibility: hidden;
+    }
+  }
 }
diff --git a/server/cypress/integration/navigation.spec.js b/server/cypress/integration/navigation.spec.js
index c54f54ac7..3652c6854 100644
--- a/server/cypress/integration/navigation.spec.js
+++ b/server/cypress/integration/navigation.spec.js
@@ -49,13 +49,28 @@ describe('validate routes', () => {
 
   it('self contained editor routes', () => {
     cy.visit('http://localhost:4001/eventlist');
-    cy.contains('Event List');
+    cy.get('.App').should('contain', 'Event List');
+    cy.get('.App').should('not.contain', 'Timer Control');
+    cy.get('.App').should('not.contain', 'Messages Control');
+    cy.get('.App').should('not.contain', 'Info');
+
     cy.visit('http://localhost:4001/timercontrol');
-    cy.contains('Timer Control');
+    cy.get('.App').should('not.contain', 'Event List');
+    cy.get('.App').should('contain', 'Timer Control');
+    cy.get('.App').should('not.contain', 'Messages Control');
+    cy.get('.App').should('not.contain', 'Info');
+
     cy.visit('http://localhost:4001/messagecontrol');
-    cy.contains('Messages Control');
+    cy.get('.App').should('not.contain', 'Event List');
+    cy.get('.App').should('not.contain', 'Timer Control');
+    cy.get('.App').should('contain', 'Messages Control');
+    cy.get('.App').should('not.contain', 'Info');
+
     cy.visit('http://localhost:4001/info');
-    cy.contains('Info');
+    cy.get('.App').should('not.contain', 'Event List');
+    cy.get('.App').should('not.contain', 'Timer Control');
+    cy.get('.App').should('not.contain', 'Messages Control');
+    cy.get('.App').should('contain', 'Info');
   });
 
   it('table routes', () => {