diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html index 0a3b24b..26314d7 100644 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -6,6 +6,11 @@
Instructions
+
+
+
+
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss index 91651dd..59daafd 100644 --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -39,6 +39,38 @@ 100% { transform: scale(1,1); } } +.jumping-circle-container { + display: flex; + padding-top: 1.3em; + padding-bottom: 1em; +} + +.jumping-circle { + width: 0.35em; + height: 0.35em; + border-radius: 50%; + background-color: gray; + margin-top: 0.3em; + margin-left: 0.3em; + + animation-name: float; + animation-duration: 1.7s; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} + +#jc2 { animation-delay: 0.2s; } +#jc3 { animation-delay: 0.45s; } + +@keyframes float { + 0% { transform: translateY(0em); } + 30% { transform: translateY(-0.5em); } + 60% { transform: translateY(0.2em); } + 80% { transform: translateY(0em); } + 90% { transform: translateY(-0.5em); } + 100% { transform: translateY(0em); } +} + .tfw-grid-message-header { display: grid; grid-template-columns: 1fr 5fr 8fr; diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts index b9e77c7..9d9198c 100644 --- a/src/app/messages/messages.component.ts +++ b/src/app/messages/messages.component.ts @@ -19,6 +19,8 @@ import { Subject, Observer } from 'rxjs'; }) export class MessagesComponent implements OnInit { newMessage: Subject = new Subject(); + messageInQueue = true; + messages: MessagesMessage[] = []; messageQueueAttender: MessageQueueAttender; showNextButton: boolean = config.messages.showNextButton;