From 83230395100436e37a15104f48fdfdb97a13b505 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 14:36:06 +0200
Subject: [PATCH] Polished XPath view

---
 Frontend/src/components/CodeEditorComponent.vue         | 2 +-
 Frontend/src/components/xml/XmlInputFieldComponent.vue  | 4 ++--
 Frontend/src/components/xml/XmlOutputFieldComponent.vue | 4 ++--
 Frontend/src/views/XPathView.vue                        | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index a366f53..1b57d4b 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -58,7 +58,7 @@ import {html} from '@codemirror/lang-html'
   <div class="editor w-full max-w-full h-full overflow-scroll">
     
     <codemirror
-      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: x-large;"
+      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
       :model-value="code"
       @update:model-value="dataUpdated"
       :extensions="extensions"
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 3847f66..5867645 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -42,8 +42,8 @@ function canBeFormatted() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2 gap-2">
-        <div class="flex place-content-between w-full pr-2 items-center">
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pb-1">
+        <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">{{ stylizedName }}</span>
             <div class="flex space-x-2">
                 <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index e404435..fbe3d84 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -129,8 +129,8 @@ function emitVersionChange() {
 </script>
 
 <template>
-    <div class="flex flex-col gap-2 flex-none w-full lg:w-1/2 h-1/2 lg:h-full items-center">
-        <div class="flex place-content-between w-full items-center">
+    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center px-2 pt-4 lg:pt-0">
+        <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2">
                 <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index bb7386e..b622063 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full space-x-4">
-        <div class="flex flex-col lg:flex-row gap-4 w-full lg:w-7/12 grow">
-            <div class="flex flex-col w-full lg:w-1/2 h-full flex-none items-center gap-4 ">
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
+        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-scroll">
+            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center p-2 gap-3">
                 <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                 <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>