refactor css grid to keep headers when scrolling

Juraci · Jul 12, 2024 · fcd27bd · fcd27bd
1 parent d30164b
commit fcd27bd
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 67 deletions.
diff --git a/src/views/HomeIndex.vue b/src/views/HomeIndex.vue
@@ -55,7 +55,9 @@ const handleNodeNotFound = () => {
           @click="handleAddNode"
         />
       </div>
-      <NodesArbor />
+      <div class="side-panel-content">
+        <NodesArbor />
+      </div>
     </div>
     <router-view
       ref="active-node"
@@ -76,13 +78,18 @@ const handleNodeNotFound = () => {
 .side-panel {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  height: 100%;
-  max-height: 98vh;
-  overflow: auto;
+  gap: 0.5rem;
 }
 .side-panel-header {
   display: flex;
   justify-content: flex-end;
 }
+.side-panel-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 100%;
+  max-height: 94vh;
+  overflow: auto;
+}
 </style>
diff --git a/src/views/NodeShow.vue b/src/views/NodeShow.vue
@@ -72,74 +72,86 @@ const handleAddChildNode = () => {
         @click="emit('delete', node.uuid)"
       />
     </div>
-    <InputText
-      v-if="editingTitle"
-      v-model="nodeTitle"
-      autofocus
-      data-test-node-title
-      type="text"
-      @blur="editingTitle = false"
-      @focusout="editingTitle = false"
-      @keydown.enter="editingTitle = false"
-      @keydown.esc="editingTitle = false"
-    />
-    <div v-else data-test-node-title @click="editingTitle = true">
-      {{ node.title || titlePlaceHolder }}
-    </div>
-    <Divider />
-    <Textarea
-      v-if="editingContent"
-      v-model="nodeContent"
-      data-test-node-content
-      tabindex="0"
-      rows="20"
-      autofocus
-      @blur="editingContent = false"
-      @focusout="editingContent = false"
-      @keydown.esc="editingContent = false"
-    />
-    <div v-else data-test-node-content class="final-content" @dblclick="editingContent = true">
-      {{ node.content || contentPlaceholder }}
-    </div>
-    <Divider />
-    <div class="child-nodes-actions">
-      <Button
-        data-test-node-add-child-node
-        label="Add child node"
-        icon="pi pi-plus-circle"
-        severity="secondary"
-        aria-label="Add child node"
-        rounded
-        @click="handleAddChildNode"
+    <div class="active-node-content">
+      <InputText
+        v-if="editingTitle"
+        v-model="nodeTitle"
+        autofocus
+        data-test-node-title
+        type="text"
+        @blur="editingTitle = false"
+        @focusout="editingTitle = false"
+        @keydown.enter="editingTitle = false"
+        @keydown.esc="editingTitle = false"
       />
-      <Button
-        v-if="node.parentNode"
-        data-test-node-go-back-to-root
-        label="Back to root node"
-        icon="pi pi-arrow-left"
-        as="router-link"
-        :to="rootNodeAddress"
-        severity="secondary"
-        aria-label="Back to root node"
-        rounded
+      <div v-else data-test-node-title @click="editingTitle = true">
+        {{ node.title || titlePlaceHolder }}
+      </div>
+      <Divider />
+      <Textarea
+        v-if="editingContent"
+        v-model="nodeContent"
+        data-test-node-content
+        tabindex="0"
+        rows="20"
+        autofocus
+        @blur="editingContent = false"
+        @focusout="editingContent = false"
+        @keydown.esc="editingContent = false"
+      />
+      <div v-else data-test-node-content class="final-content" @dblclick="editingContent = true">
+        {{ node.content || contentPlaceholder }}
+      </div>
+      <Divider />
+      <div class="child-nodes-actions">
+        <Button
+          data-test-node-add-child-node
+          label="Add child node"
+          icon="pi pi-plus-circle"
+          severity="secondary"
+          aria-label="Add child node"
+          rounded
+          @click="handleAddChildNode"
+        />
+        <Button
+          v-if="node.parentNode"
+          data-test-node-go-back-to-root
+          label="Back to root node"
+          icon="pi pi-arrow-left"
+          as="router-link"
+          :to="rootNodeAddress"
+          severity="secondary"
+          aria-label="Back to root node"
+          rounded
+        />
+      </div>
+      <ChildNode
+        v-for="childNodeUuid in node.childNodes"
+        :key="childNodeUuid"
+        :node-uuid="childNodeUuid"
+        :parent-node-uuid="node.uuid"
+        :level="0"
       />
     </div>
-    <ChildNode
-      v-for="childNodeUuid in node.childNodes"
-      :key="childNodeUuid"
-      :node-uuid="childNodeUuid"
-      :parent-node-uuid="node.uuid"
-      :level="0"
-    />
   </div>
 </template>
 
 <style>
 .active-node {
   display: flex;
   flex-direction: column;
-  gap: 20px;
-  max-height: 98vh;
+  gap: 0.5rem;
+}
+.active-node-panel-header {
+  display: flex;
+  justify-content: flex-end;
+}
+.active-node-content {
+  padding-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 94vh;
   overflow: auto;
 }
 .final-content {
@@ -152,10 +164,6 @@ const handleAddChildNode = () => {
 .p-textarea {
   min-height: 400px;
 }
-.active-node-panel-header {
-  display: flex;
-  justify-content: flex-end;
-}
 .expand-button {
   margin-right: auto;
 }