From bd144e40af14a6cb8206b67412d0658257b0c049 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Thu, 4 Apr 2019 15:29:03 +0300
Subject: Modal window styling
---
vnext/src/components/LoginButton.js | 3 +-
vnext/src/components/Modal.css | 95 +++++++++++++++++++++++++++++++++++++
vnext/src/components/Modal.js | 14 ++----
3 files changed, 100 insertions(+), 12 deletions(-)
create mode 100644 vnext/src/components/Modal.css
(limited to 'vnext/src')
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js
index 02a1db35..c25b0e81 100644
--- a/vnext/src/components/LoginButton.js
+++ b/vnext/src/components/LoginButton.js
@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import Icon from './Icon';
import Modal from './Modal';
+import Button from './Button';
import { me, facebookLink, vkLink } from '../api';
@@ -75,7 +76,7 @@ export default class LoginButton extends React.Component {
type="password" name="password"
placeholder="Password..."
value={this.state.password} onChange={this.passwordChanged} />
-
+
diff --git a/vnext/src/components/Modal.css b/vnext/src/components/Modal.css
new file mode 100644
index 00000000..428ee2e3
--- /dev/null
+++ b/vnext/src/components/Modal.css
@@ -0,0 +1,95 @@
+#dialogt {
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+#dialogw {
+ z-index: 11;
+ max-width: 96%;
+ max-height: calc(100% - 100px);
+ background-color: #fff;
+}
+#dialogw a {
+ display: block;
+}
+#dialogw img {
+ max-height: 100%;
+ max-height: 90vh;
+ max-width: 100%;
+}
+#dialog_header {
+ width: 100%;
+ height: 44px;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+}
+.header_image {
+ background: rgba(0, 0, 0, 0.28);
+}
+#dialogc {
+ cursor: pointer;
+ color: #ccc;
+ padding-right: 6px;
+}
+.dialoglogin {
+ background: #fff;
+ padding: 25px;
+}
+.dialog-opened {
+ overflow: hidden;
+}
+#signemail,
+#signfb,
+#signvk {
+ display: block;
+ line-height: 32px;
+ margin: 10px 0;
+ text-decoration: none;
+ width: 100%;
+}
+#signvk {
+ margin-bottom: 30px;
+}
+.dialoglogin form {
+ margin-top: 7px;
+}
+.signinput,
+.signsubmit {
+ border: 1px solid #CCC;
+ margin: 3px 0;
+ padding: 3px;
+}
+.signsubmit {
+ width: 70px;
+}
+.dialogshare {
+ background: #fff;
+ min-width: 300px;
+ overflow: auto;
+ padding: 20px;
+}
+.dialogl {
+ background: #fff;
+ border: 1px solid #DDD;
+ margin: 3px 0 20px;
+ padding: 5px;
+}
+.dialogshare li {
+ float: left;
+ margin: 5px 10px 0 0;
+}
+.dialogshare a {
+ display: block;
+}
+.dialogtxt {
+ background: #fff;
+ padding: 20px;
+}
diff --git a/vnext/src/components/Modal.js b/vnext/src/components/Modal.js
index 50516d05..799a6f35 100644
--- a/vnext/src/components/Modal.js
+++ b/vnext/src/components/Modal.js
@@ -3,19 +3,11 @@ import PropTypes from 'prop-types';
import Icon from './Icon';
+import './Modal.css';
+
function Modal(props) {
- // The gray background
- const backdropStyle = {
- position: 'fixed',
- top: 0,
- bottom: 0,
- left: 0,
- right: 0,
- backgroundColor: 'rgba(0, 0, 0, 0.3)',
- padding: 50
- };
return props.show ? (
-