fix(ui): flex / percentage based layout (#492)

vitest-dev · Jan 9, 2022 · c43ebaf · c43ebaf
1 parent 125eeab
commit c43ebaf
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 15 deletions.
diff --git a/packages/ui/client/components/FileDetails.vue b/packages/ui/client/components/FileDetails.vue
@@ -32,7 +32,7 @@ const changeViewMode = (view: Params['view']) => {
 </script>
 
 <template>
-  <div v-if="current" h-full>
+  <div v-if="current" flex flex-col h-full max-h-full>
     <div>
       <div p="2" h-10 flex="~ gap-2" items-center bg-header border="b base">
         <StatusIcon :task="current" />
@@ -55,15 +55,10 @@ const changeViewMode = (view: Params['view']) => {
         </button>
       </div>
     </div>
-    <ViewModuleGraph v-show="viewMode === 'graph'" :graph="graph" class="file-details-graph" />
-    <ViewEditor v-if="viewMode === 'editor'" :file="current" />
-    <ViewReport v-else-if="!viewMode" :file="current" />
+    <div flex flex-col flex-1 overflow="hidden">
+      <ViewModuleGraph v-if="viewMode === 'graph'" :graph="graph" class="file-details-graph" />
+      <ViewEditor v-if="viewMode === 'editor'" :file="current" />
+      <ViewReport v-else-if="!viewMode" :file="current" />
+    </div>
   </div>
 </template>
-
-<style scoped>
-.file-details-graph {
-  /* The graph container is offset in its parent. Thus we can't use the default 100% height and have to subtract the offset. */
-  --graph-height: calc(100% - 78px - 39px);
-}
-</style>
diff --git a/packages/ui/client/components/views/ViewEditor.vue b/packages/ui/client/components/views/ViewEditor.vue
@@ -61,6 +61,7 @@ watch([cm, failed], () => {
   <CodeMirror
     ref="editor"
     v-model="code"
+    min-h-75
     v-bind="{ lineNumbers: true }"
     :mode="ext"
     @save="onSave"

diff --git a/packages/ui/client/components/views/ViewModuleGraph.vue b/packages/ui/client/components/views/ViewModuleGraph.vue
@@ -115,7 +115,7 @@ function bindOnClick(selection: Selection<SVGCircleElement, ModuleNode, SVGGElem
 </script>
 
 <template>
-  <div h-full overflow="hidden">
+  <div h-full min-h-75 flex-1 overflow="hidden">
     <div>
       <div flex items-center gap-4 px-3 py-2>
         <div v-for="node of controller?.nodeTypes.sort()" :key="node" flex="~ gap-1" items-center select-none>
@@ -178,7 +178,8 @@ html.dark {
 }
 
 .graph {
-  height: var(--graph-height, 100%) !important;
+    /* The graph container is offset in its parent. Thus we can't use the default 100% height and have to subtract the offset. */
+  height: calc(100% - 39px) !important;
 }
 
 .graph .node {

diff --git a/packages/ui/client/components/views/ViewReport.vue b/packages/ui/client/components/views/ViewReport.vue
@@ -16,7 +16,7 @@ function relative(p: string) {
 </script>
 
 <template>
-  <div class="scrolls">
+  <div class="scrolls" h-full min-h-75 flex-1>
     <template v-if="failed.length">
       <div v-for="task of failed" :key="task.id">
         <div bg="red-500/10" text="red-500 sm" p="x3 y2" m-2 rounded>

diff --git a/packages/ui/client/styles/main.css b/packages/ui/client/styles/main.css
@@ -132,7 +132,6 @@ html.dark {
 .CodeMirror-scroll,
 .scrolls {
   overflow: auto !important;
-  height: calc(100vh - 78px) !important;
   scrollbar-width: thin;
   scrollbar-color: var(--cm-ttc-c-thumb) var(--cm-ttc-c-track);
 }