Fix/155 (#158)

* fix/155: fix css polution on detached views
* fix/155: test detached routes

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",

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;
+/* 2/3 window, hide info */
-  top: -4.5em;
+@media (max-width: 1450px) and (min-width: 1101px) {
-  display: flex;
+  .mainContainer {
-  justify-content: flex-end;
+    height: 100%;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 40px 48em auto;
+
+    .info {
+      visibility: hidden;
+    }
+  }
 }
 
-.buttonContainer {
+/* 1/2 window, event list only */
-  padding-bottom: 2em;
+@media (max-width: 1100px) and (min-width: 851px){
-  display: flex;
+  .mainContainer {
-  justify-content: flex-end;
+    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;
+    }
+  }
 }

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', () => {