|
|
@@ -1,15 +1,62 @@
|
|
|
+<style>
|
|
|
+ [v-cloak] {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ #queueComponent .patient-avatar {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background: #ddd;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+ #queueComponent .large {
|
|
|
+ font-size: 16px !important;
|
|
|
+ }
|
|
|
+ #queueComponent .queue-item {
|
|
|
+ width: 100px;
|
|
|
+ padding: 0.5rem;
|
|
|
+ padding-bottom: 0.25rem;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .patient-queue {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 4;
|
|
|
+ }
|
|
|
+ .patient-queue .btn.btn-primary:not(:disabled),
|
|
|
+ .patient-queue .btn.btn-primary:not(:disabled):active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #0062cc;
|
|
|
+ border-color: #005cbf;
|
|
|
+ font-family: Verdana, sans-serif;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ body.has-mcp-queue {
|
|
|
+ padding-bottom: 150px;
|
|
|
+ }
|
|
|
+ body.has-mcp-queue #call-actions {
|
|
|
+ bottom: 150px;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<div class="border-top patient-queue mcp-theme-1" id="queueComponent" v-cloak>
|
|
|
- <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length > 0">
|
|
|
+ <div class="bg-secondary text-white font-weight-bold text-center py-1 small " v-if="items.length > 0">
|
|
|
@{{ items.length }} patient@{{ items.length > 1 ? 's' : '' }} in the queue
|
|
|
</div>
|
|
|
- <div class="bg-secondary text-white font-weight-bold text-center py-1" v-if="items.length === 0">
|
|
|
+ <div class="bg-secondary text-white font-weight-bold text-center py-1 small " v-if="items.length === 0">
|
|
|
No patients in the queue
|
|
|
</div>
|
|
|
<div v-if="items && items.length" class="d-flex align-items-center my-1">
|
|
|
<div v-for="item in items">
|
|
|
<div class="queue-item border border-primary rounded mx-1" :title="item.name">
|
|
|
- <div class="patient-avatar mb-1 text-dark">@{{ item.initials }}</div>
|
|
|
- <div class="font-weight-bold small text-nowrap text-ellipsis">@{{ item.name }}</div>
|
|
|
+ <div class="patient-avatar mb-1 text-dark small font-weight-bold">@{{ item.initials }}</div>
|
|
|
+ <div class="font-weight-bold small text-nowrap text-ellipsis text-secondary">@{{ item.name }}</div>
|
|
|
</div>
|
|
|
<button class="btn btn-sm btn-primary mt-1 text-white font-weight-bold py-0 mx-auto d-block"
|
|
|
v-on:click.prevent="claim(item.clientUid)">Claim</button>
|
