aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-04 15:29:03 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commitbd144e40af14a6cb8206b67412d0658257b0c049 (patch)
treeaf5a302e036ff607870799b1eb5b2326eaa2229c /vnext
parentc91105360bedcd500ab927798d0b2e262b6ceed3 (diff)
Modal window styling
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/LoginButton.js3
-rw-r--r--vnext/src/components/Modal.css95
-rw-r--r--vnext/src/components/Modal.js14
3 files changed, 100 insertions, 12 deletions
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} /><br />
- <input className="signsubmit" type="submit" value="OK" />
+ <Button onClick={this.login}>OK</Button>
</form>
</div>
</Modal>
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 ? (
- <div id="dialogt" style={backdropStyle}>
+ <div id="dialogt">
<div id="dialogw">
<div id="dialog_header">
<div id="dialogc" onClick={props.onClose}>