From 1d6ffe3939ef6951835b065a3ece789f55e0e746 Mon Sep 17 00:00:00 2001
From: "a.soldatof" <a.soldatof@gmail.com>
Date: Sun, 19 May 2019 00:19:43 +0300
Subject: [PATCH] jump text

---
 src/App.css         | 59 +++++++++++++++++++++++++++++++++++++++++++++
 src/Game.js         |  2 +-
 src/Notification.js | 30 +++++++++++++++++++++++
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/Notification.js

diff --git a/src/App.css b/src/App.css
index 8d84772..41fff1a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -105,3 +105,62 @@
     transform: rotate(360deg);
   }
 }
+
+@-webkit-keyframes button_jump {
+  0% {
+    margin-bottom: 0;
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  50% {
+    -webkit-transform: translate(0, -10px);
+    transform: translate(0, -10px);
+  }
+}
+
+@keyframes button_jump {
+  0% {
+    margin-bottom: 0;
+    -webkit-transform: translate(0, 0);
+    transform: translate(0, 0);
+  }
+  50% {
+    -webkit-transform: translate(0, -10px);
+    transform: translate(0, -10px);
+  }
+}
+
+.jump-text {
+  margin: 50px;
+  display: block;
+  position: relative;
+  -webkit-animation-delay: 0;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-name: button_jump;
+  -webkit-animation-timing-function: ease-out;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-fill-mode: forwards;
+  /* this prevents the animation from restarting! */
+  -moz-animation-delay: 0;
+  -moz-animation-duration: 1s;
+  -moz-animation-name: button_jump;
+  -moz-animation-timing-function: ease-out;
+  -moz-animation-iteration-count: infinite;
+  -moz-animation-fill-mode: forwards;
+  /* this prevents the animation from restarting! */
+  -o-animation-delay: 0;
+  -o-animation-duration: 1s;
+  -o-animation-name: button_jump;
+  -o-animation-timing-function: ease-out;
+  -o-animation-iteration-count: infinite;
+  -o-animation-fill-mode: forwards;
+  /* this prevents the animation from restarting! */
+  animation-delay: 0;
+  animation-duration: 1s;
+  animation-name: button_jump;
+  animation-timing-function: ease-out;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
+  /* this prevents the animation from restarting! */
+}
+
diff --git a/src/Game.js b/src/Game.js
index b12b8bd..7cf800d 100644
--- a/src/Game.js
+++ b/src/Game.js
@@ -38,7 +38,7 @@ export class Game extends Component {
     if(this.state.loading) {
       return (
         <AppLayout>
-          <h1>Парсим википедию</h1>
+          <h1 className="jump-text">Парсим википедию</h1>
         </AppLayout>
       );
     }
diff --git a/src/Notification.js b/src/Notification.js
new file mode 100644
index 0000000..e88d2ea
--- /dev/null
+++ b/src/Notification.js
@@ -0,0 +1,30 @@
+import * as ReactDOM from 'react-dom';
+import React from 'react';
+
+import Modal from '@skbkontur/react-ui/Modal';
+import Button from '@skbkontur/react-ui/Button';
+
+export class Notification {
+  constructor() {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    this.div = div;
+  }
+
+  show(text, info) {
+    ReactDOM.render(
+      <Modal onClose={this.hide}>
+        <Modal.Header>{text}</Modal.Header>
+        <Modal.Body>{info}</Modal.Body>
+        <Modal.Footer panel={true}>
+          <Button onClick={this.hide}>Ясно понятно</Button>
+        </Modal.Footer>
+      </Modal>,
+      this.div
+    );
+  }
+
+  hide() {
+    ReactDOM.render(null, this.div);
+  }
+}
\ No newline at end of file
-- 
2.50.1