Make typo list scrollable. Improve styles.

cp/application/views/footer.php

             </div>
         </div>
 
-        <div class="footer bg-primary">
-            <span class="text-white copyright">Копирайт (С) 2018 "Этерсофт"</span>
+        <div class="footer">
+            <span class="copyright">Копирайт (С) 2018 "Этерсофт"</span>
         </div>
     </body>
 

cp/application/views/users/typos.php

-<div id="root" class="body border border-light">
+<div id="root" class="body border border-white">
 
 </div>
\ No newline at end of file

cp/javascript/src/components/Typo/index.jsx

@@ -96,16 +96,16 @@ export default class Typo extends Component {
         if (show) {
             console.log("Render typo #" + typo.id);
         } else {
-            console.log("Render hidden typo #" + typo.id);
+            return null;
         }
 
         if (!this.state.textHighlighted) {
             this._highlightTypoInContext();
             this.state.textHighlighted = true;
-        }
+        }   
 
         return (
-            <Card className={className}>
+            <Card id={`typo-${typo.id}`} className={className}>
                 <CardHeader>
                     Опечатка #{typo.id}
                     <span id="typo-id">
@@ -144,11 +144,25 @@ export default class Typo extends Component {
         );
     }
 
+    /**
+     * Hides typo card 
+     */
+    hideTypoCard(completeFunc) {
+        $(`#typo-${this.typo.id}`).animate({
+            marginLeft: "3000px",
+            opacity: 0
+        }, 500, completeFunc);
+    }
+
     applyCorrection = () => {
-        this.acceptCallback(this.typo.correctedText);
+        this.hideTypoCard(() => {
+            this.acceptCallback(this.typo.correctedText);
+        });
     };
 
     declineCorrection = () => {
-        this.declineCallback();
+        this.hideTypoCard(() => {
+            this.declineCallback();
+        });
     };
 }
\ No newline at end of file

cp/javascript/src/components/Typo/style.css

 .TypoCard {
     width: 80%;
     margin: 0 auto;
+    margin-bottom: 25px;
 }
 
 .TypoCard .card-body {

cp/javascript/src/components/TypoList/index.jsx

@@ -13,8 +13,8 @@ const alertify = require("alertify.js");
 
 export default class TypoList extends Component {
     state = {
-        currentTypo: 0,
         siteId: 0,
+        resolvedTypos: []
     };
 
     /**
@@ -31,7 +31,7 @@ export default class TypoList extends Component {
                     alertify.success(`<p>Опечатка ${typoId} была подтверждена.</p>
                         <p>Исправления применены к тексту, содержащему опечатку.</p>`);
 
-                    this.state.currentTypo++;
+                    this.state.resolvedTypos.push(typoId)
                     this._decrementSiteTyposCount();
                     this.forceUpdate();
                     return;
@@ -54,7 +54,8 @@ export default class TypoList extends Component {
         this._setTypoStatus(0, typoId, this.state.siteId)
             .done(() => {
                 alertify.success(`Опечатка ${typoId} была отклонена`);
-                this.state.currentTypo++;
+                
+                this.state.resolvedTypos.push(typoId)
                 this._decrementSiteTyposCount();
                 this.forceUpdate();
             })
@@ -112,13 +113,13 @@ export default class TypoList extends Component {
 
         console.log("Render typolist for site " + this.state.siteId);
 
-        if (typos.length === 0 || this.state.currentTypo >= typos.length) {
+        if (typos.length === 0 || this.state.resolvedTypos.length >= typos.length) {
             return TypoList._displayEmptyMessage();
         }
 
         const typoCards = typos.map((typo, index) =>
             <Typo key={typo.id} typo={typo}
-                  show={this.state.currentTypo === index}
+                  show={!this.state.resolvedTypos.includes(typo.id)}
                   acceptCallback={this.acceptCorrection.bind(this, typo.id)}
                   declineCallback={this.declineCorrection.bind(this, typo.id)}/>
         );

cp/stylesheet/stylesheet.css

@@ -26,7 +26,8 @@ body {
 }
 
 .footer  {
-    position: absolute;
+    color: black;
+    position: fixed;
     bottom: 0;
     width: 100%;
     text-align: center;
@@ -34,6 +35,8 @@ body {
 
 .footer .copyright {
     font-size: 80%;
+    float: right;
+    margin-right: 10px;
 }
 
 .typo {
@@ -59,9 +62,14 @@ li.nav-item {
     border-radius: 0 !important;
 }
 
-li.nav-item:hover {
-    border-bottom: 1px solid #007bff;
-    border-radius: 0 !important;
+li.nav-item > a.nav-link {
+    transition-property: background-color;
+    transition-duration: 0.8s;
+}
+
+li.nav-item > a.nav-link:hover {
+    background-color: #ffd556;
+    border-radius: 0.25em;
 }
 
 a.nav-link.active {