jump text

diff --git a/src/App.css b/src/App.css
index 8d847727c1c6bbbb7971eb9705dd062dfd55362c..41fff1ad2cb7a02e9222d2edec8b7b4cc8772f54 100644 (file)
--- 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 b12b8bddfb77f6ac3f2de301350c2b685623717f..7cf800db8531c41a9ec892b398736238c11a2a9c 100644 (file)
--- 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 (file)
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