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>
<template>
<div id="app">
<h2>Search Criteria</h2>
<div>
<label for="referenceId">Reference ID: </label>
<input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
<button @click="fetchData">Search Contacts</button>
<form>
<label for="referenceId">Reference ID: </label>
<input id="referenceId" :value="referenceId" @input="onInput" placeholder="enter Reference ID here" />
<button @click="fetchData">Search Contacts</button>
</form>
</div>
<h2>Results</h2>
<ContactsSummary v-if="contactData" :summary="contactData.data.summary" />
<div v-else>No Contacts Found</div>
<ContactTable v-if="contactData" :tableData="contactData.data.findContactsCompletedBetween.edges" />

7
src/components/ContactsSummary.vue
View File

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

27
src/style.css
View File

@ -2,7 +2,20 @@ h1 {
font-size: 18px;
line-height: 19px;
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;
vertical-align: middle;
font-family: "Lato", sans-serif;
@ -61,6 +74,18 @@ tr {
padding: 4px 0px 3px;
}
input {
border-radius: 13px;
height: 24px;
border-color: #515151;
outline: none;
}
input:focus {
border-color: #3395ff;
outline: none;
}
button {
margin-left: 5px;
color: #333333;