Improved UI legibility and added some labels

This commit is contained in:
2023-11-08 14:10:20 +01:00
parent 18dd798000
commit 6e3b53fd32
3 changed files with 8 additions and 6 deletions

View File

@@ -44,10 +44,10 @@ function showUpdatedCode(newCode : string){
</script>
<template>
<div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
<div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-3 p-1">
<div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
<div class="flex flex-col w-full">
<label for="link">Link</label><br/>
<label for="link">REST Service URL</label><br/>
<div class="p-2 w-full border-slate-400 border-2 rounded-lg">
<a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
</div>
@@ -57,18 +57,18 @@ function showUpdatedCode(newCode : string){
</div>
<div class="flex flex-col md:flex-row w-full gap-4">
<div class="w-full">
<label for="contentType">Content Type</label><br/>
<label for="contentType">Response Content Type</label><br/>
<input class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
</div>
<div class="w-full">
<label for="httpStatus">HttpStatus</label><br/>
<label for="httpStatus">Response HTTP Status</label><br/>
<input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
</div>
</div>
<div class="flex text-left flex-col overflow-scroll h-3/4">
<label for="messageBody text-center">Body</label>
<div class="flex text-left flex-col overflow-scroll gap-2 h-3/4">
<label class="text-center" for="messageBody text-center">Response Body</label>
<CodeEditorComponent
@update:updated-code="showUpdatedCode"
v-model="messageData.messageBody"