parent
064fe9efab
commit
06543d34bf
5 changed files with 95 additions and 32 deletions
@ -0,0 +1,31 @@ |
|||||||
|
import React, { Component } from "react"; |
||||||
|
import { Link } from "react-router-dom"; |
||||||
|
|
||||||
|
import "./index.scss"; |
||||||
|
|
||||||
|
const maxMobileSize = 550; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
mobile: { |
||||||
|
span: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 17, |
||||||
|
a: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20, |
||||||
|
}, |
||||||
|
}; |
||||||
|
export default class QRModal extends Component { |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="mobile-qr-modal d-flex flex-column justify-content-center align-items-center"> |
||||||
|
<span style={{ fontSize: fontSize.mobile.span }}> |
||||||
|
اسکن کد QR موفقیت آمیز بود. |
||||||
|
</span> |
||||||
|
<Link style={{ fontSize: fontSize.mobile.a }} to={"/qr"}> |
||||||
|
{this.props.tail} |
||||||
|
</Link> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,38 @@ |
|||||||
|
.mobile-qr-modal { |
||||||
|
position: fixed; |
||||||
|
left: 0px; |
||||||
|
background-color: rgba(0, 0, 0, 0.856); |
||||||
|
top: 0px; |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
z-index: 500; |
||||||
|
animation-name: qrModal; |
||||||
|
animation-duration: 0.4s; |
||||||
|
span { |
||||||
|
font-family: numeralLight; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
a { |
||||||
|
text-decoration: none; |
||||||
|
width: 50%; |
||||||
|
margin: 25px auto; |
||||||
|
background-color: #00cc69; |
||||||
|
border: 2px solid white; |
||||||
|
padding: 20px 0px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
font-family: numeralLight; |
||||||
|
border-radius: 25px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes qrModal { |
||||||
|
0% { |
||||||
|
left: -100vw; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
100% { |
||||||
|
left: 0px; |
||||||
|
top: 0px; |
||||||
|
} |
||||||
|
} |
Loading…
Reference in new issue