verint.com/eo-services-client
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added input styling
Some checks are pending
clarama/eo-services-client/pipeline/head Build queued...
Details

Browse Source
This commit is contained in:
Peter Morton 2022-10-19 13:31:41 -05:00
parent b0ac2a4412
commit 27253fec10
3 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/ReferenceID.vue
View File

@ -37,12 +37,16 @@ function fetchData() {
</script> </script>
<template> <template>
<div id="app"> <div id="app">
<h2>Search Criteria</h2>
<div> <div>
<label for="referenceId">Reference ID: </label> <form>
<input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" /> <label for="referenceId">Reference ID: </label>
<button @click="fetchData">Search Contacts</button> <input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
<button @click="fetchData">Search Contacts</button>
</form>
</div> </div>
<h2>Results</h2>
<ContactsSummary v-if="contactData" :summary="contactData.data.summary" /> <ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
<div v-else>No Contacts Found</div> <div v-else>No Contacts Found</div>
<ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" /> <ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />

7
src/components/ContactsSummary.vue
View File

@ -16,8 +16,8 @@ defineProps(["summary"]);
</div> </div>
<div class="item"> <div class="item">
<div class="measure">{{ summary.totalHTDays.toFixed(2) }}</div> <div class="measure">{{ summary.totalHTHours.toFixed(2) }}</div>
<div class="label">Total Handle Time (days)</div> <div class="label">Total Handle Time (hours)</div>
</div> </div>
<div class="item"> <div class="item">
@ -35,6 +35,7 @@ defineProps(["summary"]);
.stats { .stats {
display: flex; display: flex;
} }
.item { .item {
width: 100%; width: 100%;
border: 2px solid rgb(57, 145, 201); border: 2px solid rgb(57, 145, 201);
@ -50,7 +51,7 @@ defineProps(["summary"]);
.measure { .measure {
width: 100%; width: 100%;
color: rgb(57,145,201); color: rgb(57, 145, 201);
font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif; font-family: 'DejaVu Sans', Ariel, Helvetica, sans-serif;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;

27
src/style.css
View File

@ -2,7 +2,20 @@ h1 {
font-size: 18px; font-size: 18px;
line-height: 19px; line-height: 19px;
overflow: hidden; overflow: hidden;
padding: 6px 0 12px 0; padding: 4px 0 12px 0;
min-height: 23px;
vertical-align: middle;
font-family: "Lato", sans-serif;
font-weight: 400;
border-bottom: 1px solid #c7c7c7;
margin: 0;
}
h2 {
font-size: 14px;
line-height: 19px;
overflow: hidden;
padding: 4px 0 4px 0;
min-height: 23px; min-height: 23px;
vertical-align: middle; vertical-align: middle;
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
@ -61,6 +74,18 @@ tr {
padding: 4px 0px 3px; padding: 4px 0px 3px;
} }
input {
border-radius: 13px;
height: 24px;
border-color: #515151;
outline: none;
}
input:focus {
border-color: #3395ff;
outline: none;
}
button { button {
margin-left: 5px; margin-left: 5px;
color: #333333; color: #333333;