fix: fix fullscreen transition (#73)

Co-authored-by: Adrián Insua Yañez <[email protected]>
adrianiy · Apr 27, 2020 · f897f0d · f897f0d
1 parent 22f1c96
commit f897f0d
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 10 deletions.
diff --git a/src/components/card/Card.js b/src/components/card/Card.js
@@ -62,7 +62,6 @@ function Card(props) {
     }
 
     const toggleFullScreen = () => {
-        props.toggleFullScreen(!fullscreen);
         setFullscreen(!fullscreen);
     };
 
@@ -93,7 +92,6 @@ function Card(props) {
     return (
         <ColumnLayout
             className={cls(styles.card, expanded ? styles.expanded : "", fullscreen ? styles.fullscreen : "")}
-            style={{ marginTop: fullscreen ? 85 - props.idx * 500 : 0 }}
         >
             <header className="row middle spaced">
                 <span className={styles.cardTitle}>QUERY</span>

diff --git a/src/components/card/Card.module.css b/src/components/card/Card.module.css
@@ -22,6 +22,8 @@
     height: 100vh;
     z-index: 99;
     position: fixed;
+    top: 0;
+    margin-top: 0;
     max-width: 100%;
 }
 .card header {

diff --git a/src/components/comander/Comander.js b/src/components/comander/Comander.js
@@ -17,7 +17,6 @@ function Comander(props) {
     const [queries, setQueries] = useState([]);
     const [showStored, setShowStored] = useState(false);
     const [highlightedSuggestion, setHighlightedSuggestion] = useState(-1);
-    const [fullscreen, setFullscreen] = useState(false);
     const [editor, setEditor] = useState(null);
     const schema = useRef(neo4jSchema);
     const cm = useRef(null);
@@ -75,10 +74,6 @@ function Comander(props) {
         setQueries(queries.filter(q => q !== query));
     }
 
-    const toggleFullScreen = (value) => {
-        setFullscreen(value);
-    }
-
     useEventListener("keydown", (event) => {
         switch (event.keyCode) {
             case 40: // ArrowDown
@@ -98,7 +93,7 @@ function Comander(props) {
 
     return (
         <ColumnLayout dist="spaced" className={cls(styles.comanderContainer, "animated", "fadeIn")}>
-            <RowLayout dist="middle" className={cls(styles.inputContainer, fullscreen ? styles.fullscreen : "")}>
+            <RowLayout dist="middle" className={styles.inputContainer}>
                 <CypherCodeMirror
                     className={styles.input}
                     options={{ ...codeMirrorSettings, ...{ theme: theme.codemirror } }}
@@ -141,7 +136,6 @@ function Comander(props) {
                 queries={queries}
                 selectQuery={selectQuery}
                 deleteQuery={deleteQuery}
-                toggleFullScreen={toggleFullScreen}
             />
         </ColumnLayout>
     );

diff --git a/src/components/comander/Comander.module.css b/src/components/comander/Comander.module.css
@@ -17,7 +17,6 @@
 .inputContainer {
     background: var(--p-color);
     margin: 0 var(--margin);
-    /* transition: all linear 300ms; */
     box-shadow: var(--box-decoration--shadow);
 }
 .inputContainer em {