added qr code popup to Chinese site
This commit is contained in:
andmironov
parent
535cae92a1
commit
5e6b3aaf9b
15
src/cn.html
15
src/cn.html
|
|
@ -40,15 +40,21 @@
|
|||
<div class="slide__inner">
|
||||
<div class="header">
|
||||
<div class="header__inner">
|
||||
|
||||
<div class="nav">
|
||||
<div class="qr-popup">
|
||||
<h4>中文社区经理微信号</h4>
|
||||
<div class="qr-popup-wrap">
|
||||
<div class="qr-code qr-code--one"></div>
|
||||
<div class="qr-code qr-code--two"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav nav--left">
|
||||
<a class="nav__item" target="_blank" href="https://blog.status.im/">博客</a>
|
||||
<a class="nav__item nav__item--features" href="#">特性</a>
|
||||
<a class="nav__item nav__item--about" href="#">发现</a>
|
||||
<a class="nav__item" target="_blank" href="https://wiki.status.im/">维基</a>
|
||||
<a class="nav__item" target="_blank" href="http://artifacts.status.im:8081/artifactory/nightlies-local/im.status.ethereum-07c247.apk">Download</a>
|
||||
<a class="nav__item nav__item--download" target="_blank" href="http://artifacts.status.im:8081/artifactory/nightlies-local/im.status.ethereum-07c247.apk">Download</a>
|
||||
</div>
|
||||
<div class="nav nav--right">
|
||||
<div class="nav nav--hide">
|
||||
<a class="nav__item" target="_blank" href="https://status.im/">English</a>
|
||||
<a class="nav__item" target="_blank" href="https://www.facebook.com/ethstatus">Facebook</a>
|
||||
<a class="nav__item" target="_blank" href="https://twitter.com/ethstatus">Twitter</a>
|
||||
|
|
@ -565,7 +571,6 @@
|
|||
|
||||
|
||||
<script src="js/app.js?v=44d5354"></script>
|
||||
<script src="js/mc-validate.js"></script>
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
|
|
|
|||
|
|
@ -219,7 +219,7 @@ a {
|
|||
z-index: 900;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
opacity: .6;
|
||||
opacity: 1;
|
||||
transition: opacity .2s ease; }
|
||||
|
||||
.header-wrap--page .header {
|
||||
|
|
@ -229,6 +229,7 @@ a {
|
|||
opacity: 1; }
|
||||
|
||||
.header__inner {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -238,6 +239,52 @@ a {
|
|||
.header-wrap--page .header__inner {
|
||||
width: 1012px; }
|
||||
|
||||
.qr-popup {
|
||||
left: 0;
|
||||
top: 48px;
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 3px 7px 0 rgba(175, 192, 202, 0.41);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 15px, 0) scale(1);
|
||||
visibility: hidden;
|
||||
transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease; }
|
||||
|
||||
.qr-popup.qr-popup--shown {
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1); }
|
||||
|
||||
.qr-popup h4 {
|
||||
font-size: 22px;
|
||||
color: #49555F;
|
||||
line-height: 35px;
|
||||
margin: 8px 8px 0 8px;
|
||||
font-weight: bold; }
|
||||
|
||||
.qr-popup-wrap {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 8px; }
|
||||
|
||||
.qr-code {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
border: 1px solid #E5EAEE;
|
||||
border-radius: 8px;
|
||||
background-size: 256px;
|
||||
background-repeat: no-repeat;
|
||||
margin: 8px; }
|
||||
|
||||
.qr-code.qr-code--one {
|
||||
background-image: url(../img/new-site/u32.jpg); }
|
||||
|
||||
.qr-code.qr-code--two {
|
||||
background-image: url(../img/new-site/u38.jpg); }
|
||||
|
||||
.nav {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -392,6 +439,8 @@ li.social-link a {
|
|||
width: 100%; } }
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.qr-popup.qr-popup--shown {
|
||||
display: none; }
|
||||
.header-wrap--page .nav {
|
||||
display: none; }
|
||||
.header-wrap--page a.logo,
|
||||
|
|
@ -414,7 +463,7 @@ li.social-link a {
|
|||
.nav {
|
||||
-ms-flex-align: center;
|
||||
align-items: center; }
|
||||
.nav:first-child {
|
||||
.nav--hide {
|
||||
display: none; } }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
@ -1462,7 +1511,7 @@ li.social-link a {
|
|||
background-image: linear-gradient(-180deg, #F2F5F8 0%, #FAFBFC 99%); }
|
||||
|
||||
.crowdsale .tagline {
|
||||
margin: 130px 0 60px 0; }
|
||||
margin: 120px 0 30px 0; }
|
||||
|
||||
.tagline .tagline__title {
|
||||
width: 440px;
|
||||
|
|
@ -1550,7 +1599,10 @@ li.social-link a {
|
|||
color: #6673CE; }
|
||||
|
||||
.about {
|
||||
padding: 50px 0 0 0; }
|
||||
padding: 40px 0 0 0; }
|
||||
|
||||
.about .tagline {
|
||||
margin: 0 0 50px 0; }
|
||||
|
||||
.app-buttons {
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -1560,7 +1612,7 @@ li.social-link a {
|
|||
.app-button {
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 210px;
|
||||
width: 224px;
|
||||
height: 68px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -1912,8 +1964,6 @@ input.email-form__input--email:disabled {
|
|||
top: 69px; } }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.about {
|
||||
padding: 20px 0 0 0; }
|
||||
.app-buttons {
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
|
|
@ -2028,7 +2078,7 @@ input.email-form__input--email:disabled {
|
|||
.dapp__inner {
|
||||
background-color: white;
|
||||
height: 240px;
|
||||
margin: 10px;
|
||||
margin: 8px;
|
||||
box-shadow: 0px 4px 18px 0px rgba(189, 208, 223, 0.26);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -40,13 +40,12 @@
|
|||
<div class="slide__inner">
|
||||
<div class="header">
|
||||
<div class="header__inner">
|
||||
<div class="nav">
|
||||
<div class="nav nav--hide">
|
||||
<a class="nav__item" target="_blank" href="https://blog.status.im/">Blog</a>
|
||||
<a class="nav__item nav__item--features" href="#">Features</a>
|
||||
<a class="nav__item nav__item--about" href="#">Discover</a>
|
||||
<a class="nav__item" target="_blank" href="https://hackathon.status.im/">Hackathon</a>
|
||||
<a class="nav__item" target="_blank" href="https://wiki.status.im/">Wiki</a>
|
||||
|
||||
</div>
|
||||
<div class="nav nav--right">
|
||||
<a class="nav__item" target="_blank" href="https://status.im/cn.html">中文</a>
|
||||
|
|
|
|||
|
|
@ -9982,6 +9982,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
event.preventDefault();
|
||||
});
|
||||
|
||||
if (document.querySelectorAll(".nav__item--download")[0]) {
|
||||
document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseover', function (event) {
|
||||
showQRPopup();
|
||||
});
|
||||
|
||||
document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseout', function (event) {
|
||||
hideQRPopup();
|
||||
});
|
||||
}
|
||||
|
||||
cookieButton.addEventListener('click', function (event) {
|
||||
createCookie("status-cookie-policy", "accepted", 30);
|
||||
hideCookiePopup();
|
||||
|
|
@ -10024,6 +10034,14 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
}]
|
||||
}).init();
|
||||
|
||||
function showQRPopup() {
|
||||
addClassToElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown");
|
||||
}
|
||||
|
||||
function hideQRPopup() {
|
||||
removeClassFromElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown");
|
||||
}
|
||||
|
||||
function hideCookiePopup() {
|
||||
document.querySelectorAll(".cookie-popup__inner")[0].style.display = "none";
|
||||
return true;
|
||||
|
|
@ -10071,4 +10089,19 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
}
|
||||
window.location.replace("https://status.im/" + lang + ".html");
|
||||
});
|
||||
|
||||
/*---Utils---*/
|
||||
function addClassToElement(element, className) {
|
||||
element.classList ? element.classList.add(className) : element.className += ' ' + className;
|
||||
return element;
|
||||
}
|
||||
|
||||
function removeClassFromElement(element, className) {
|
||||
if (element.classList) {
|
||||
element.classList.remove(className);
|
||||
} else {
|
||||
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
return element;
|
||||
}
|
||||
}, { "./lib/ScrollOver.js": 17, "./lib/animatescroll.js": 18 }] }, {}, [19]);
|
||||
|
|
@ -31,6 +31,16 @@ document.querySelectorAll(".nav__item--about")[0].addEventListener('click', func
|
|||
event.preventDefault()
|
||||
})
|
||||
|
||||
if(document.querySelectorAll(".nav__item--download")[0]) {
|
||||
document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseover', function(event){
|
||||
showQRPopup()
|
||||
})
|
||||
|
||||
document.querySelectorAll(".nav__item--download")[0].addEventListener('mouseout', function(event){
|
||||
hideQRPopup()
|
||||
})
|
||||
}
|
||||
|
||||
cookieButton.addEventListener('click', function(event){
|
||||
createCookie("status-cookie-policy", "accepted", 30)
|
||||
hideCookiePopup()
|
||||
|
|
@ -81,6 +91,14 @@ new ScrollOver({
|
|||
]
|
||||
}).init()
|
||||
|
||||
function showQRPopup() {
|
||||
addClassToElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown")
|
||||
}
|
||||
|
||||
function hideQRPopup() {
|
||||
removeClassFromElement(document.querySelectorAll(".qr-popup")[0], "qr-popup--shown")
|
||||
}
|
||||
|
||||
function hideCookiePopup() {
|
||||
document.querySelectorAll(".cookie-popup__inner")[0].style.display = "none"
|
||||
return true
|
||||
|
|
@ -129,3 +147,18 @@ languageSelect.addEventListener("change", function () {
|
|||
}
|
||||
window.location.replace("https://status.im/" + lang + ".html")
|
||||
})
|
||||
|
||||
/*---Utils---*/
|
||||
function addClassToElement(element, className) {
|
||||
(element.classList) ? element.classList.add(className) : element.className += ' ' + className
|
||||
return element
|
||||
}
|
||||
|
||||
function removeClassFromElement(element, className) {
|
||||
if(element.classList) {
|
||||
element.classList.remove(className)
|
||||
} else {
|
||||
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ')
|
||||
}
|
||||
return element
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
z-index: 900;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
opacity: .6;
|
||||
opacity: 1;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
}
|
||||
|
||||
.header__inner {
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -41,6 +42,60 @@
|
|||
width: 1012px;
|
||||
}
|
||||
|
||||
.qr-popup {
|
||||
left: 0;
|
||||
top: 48px;
|
||||
position: absolute;
|
||||
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 3px 7px 0 rgba(175,192,202,0.41);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 15px ,0) scale(1);
|
||||
visibility: hidden;
|
||||
transition: visibility .5s linear 0s, opacity .2s ease, transform .2s ease;
|
||||
}
|
||||
|
||||
.qr-popup.qr-popup--shown {
|
||||
transition-delay: 0s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0 ,0) scale(1);
|
||||
}
|
||||
|
||||
.qr-popup h4 {
|
||||
font-size: 22px;
|
||||
color: #49555F;
|
||||
line-height: 35px;
|
||||
margin: 8px 8px 0 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.qr-popup-wrap {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
border: 1px solid #E5EAEE;
|
||||
border-radius: 8px;
|
||||
background-size: 256px;
|
||||
background-repeat: no-repeat;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.qr-code.qr-code--one {
|
||||
background-image: url(../img/new-site/u32.jpg);
|
||||
}
|
||||
|
||||
.qr-code.qr-code--two {
|
||||
background-image: url(../img/new-site/u38.jpg);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
@ -218,6 +273,10 @@ li.social-link a {
|
|||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
.qr-popup.qr-popup--shown {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-wrap--page .nav {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -249,7 +308,7 @@ li.social-link a {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.nav:first-child {
|
||||
.nav--hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
}
|
||||
|
||||
.crowdsale .tagline {
|
||||
margin: 130px 0 60px 0;
|
||||
margin: 120px 0 30px 0;
|
||||
}
|
||||
|
||||
.tagline .tagline__title {
|
||||
|
|
@ -129,9 +129,12 @@
|
|||
}
|
||||
|
||||
.about {
|
||||
padding: 50px 0 0 0
|
||||
padding: 40px 0 0 0;
|
||||
}
|
||||
|
||||
.about .tagline {
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.app-buttons {
|
||||
display: flex;
|
||||
|
|
@ -141,7 +144,7 @@
|
|||
.app-button {
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 210px;
|
||||
width: 224px;
|
||||
height: 68px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -621,10 +624,6 @@ input.email-form__input--email:disabled {
|
|||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.about {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.app-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
.dapp__inner {
|
||||
background-color: $colorWhite;
|
||||
height: 240px;
|
||||
margin: 10px;
|
||||
margin: 8px;
|
||||
box-shadow: 0px 4px 18px 0px rgba(189,208,223,0.26);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue