Fix some frontend bugs. (#22)

* Remove the loader animation to avoid confusion.

* Optimize the icon image file size

* Fix layouting issue of GitHub icon.

js/index.html

@@ -19,12 +19,14 @@ <h1>Sarcastobot</h1>
   <main>
     <section class="chat">
       <div class="conversation" id="conversation">
-        <h2 class="chat__heading">Say Hi.</h2>
+        <h2 class="conversation__heading">
+          <span class="conversation__heading__text--loading">Loading Seq2Seq model. This may take a while..</span>
+          <span class="conversation__heading__text--ready">Say Hi.</span>
+        </h2>
       </div>
       <div class="chat__input">
         <div class="input-window">
-          <input type="text" class="input-window__text" id="input-text" disabled placeholder="Loading Seq2Seq model. This may take a while..">
-          <img alt="loading the model" src="resources/loader.gif" class="input-window__loader" id="model-load-anim">
+          <input type="text" class="input-window__text" id="input-text" disabled placeholder="Loading...">
           <div class="input-window__temp">
             <label for="temperature">Temperature: <span class="input-window__temp__val" id="temperature-display"></span></label>
             <input type="range" class="input-window__range" name="temperature" id="slider-range" min="0" max="1" step="0.01">

js/main.js

@@ -53,7 +53,7 @@ class Main {
   enableGeneration() {
     this.inputText.placeholder = "Sarcastobot is live. Start typing..";
     this.inputText.disabled = "";
-    this.modelLoadAnimEle.classList.add('hidden');
+    this.conversationEle.classList.add('ready');
   }
 
   async sendChat() {

js/main.scss

@@ -35,9 +35,9 @@ body {
   }
 
   &__github-link {
-    position: fixed;
-    top: 27px;
+    position: absolute;
     right: 20px;
+    top: 27px;
 
     img {
       width: 50px;
@@ -80,12 +80,6 @@ footer {
   position: relative;
   width: 90%;
 
-  &__heading {
-    margin: 0;
-    font-weight: normal;
-    font-size: 1.2rem;
-  }
-
   &__input {
     bottom: 0;
     left: 0;
@@ -98,6 +92,24 @@ footer {
   overflow-y: scroll;
   height: calc(100% - 150px);
 
+  &__heading {
+    font-size: 1.2rem;
+    font-weight: normal;
+    margin: 0;
+
+    &__text--ready {
+      display: none;
+    }
+  }
+
+  &.ready &__heading__text--ready {
+    display: inline;
+  }
+
+  &.ready  &__heading__text--loading {
+    display: none;
+  }
+
   &__row {
     margin: 15px 0;
     position: relative;
@@ -173,6 +185,10 @@ footer {
     font-size: 1.2rem;
     padding: 10px;
     width: 100%;
+
+    &:disabled {
+      background: #eee;
+    }
   }
 
   &__temp {