Added max-height of 50% to variables pane.

Closes #462.
altair-graphql · Dec 1, 2018 · 87d5894 · 87d5894
1 parent 9423e87
commit 87d5894
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/app/components/query-editor/query-editor.component.html b/src/app/components/query-editor/query-editor.component.html
@@ -7,7 +7,7 @@
     [options]="editorConfig"
   ></ngx-codemirror>
 </div>
-<div class="variables-editor-container">
+<div class="variables-editor-container" [ngClass]="{ 'show-variables': showVariableDialog }">
   <div class="variables-editor--title" track-id="toggle_variables" (click)="toggleVariableDialog.next($event)">{{ 'VARIABLES_TEXT' | translate }}</div>
   <div class="variables-editor-inner" *ngIf="showVariableDialog">
     <app-variables-editor

diff --git a/src/scss/components/_editor.scss b/src/scss/components/_editor.scss
@@ -147,6 +147,14 @@ app-query-editor {
   color: var(--theme-off-font-color);
 }
 
+.variables-editor-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 50%;
+  &.show-variables {
+    min-height: 50%;
+  }
+}
 .variables-editor {
   &--title {
     text-transform: uppercase;
@@ -158,4 +166,14 @@ app-query-editor {
   // &-inner {
     // height: 0;
   // }
-}
+}
+.variables-editor-inner {
+  position: relative;
+  overflow: auto;
+  flex: 1;
+}
+.set-variable-textarea {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}