status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3424 from rnplay/embedded-simulator-website 

Documentation: Adjust styling and add Appetize link in the modal
This commit is contained in:
Christopher Chedeau 2015-10-15 09:17:21 -07:00
parent 02958376ad cb609f986c
commit 8ddd3e864e
3 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
website/layout/AutodocsLayout.js
View File

@ -470,9 +470,9 @@ var EmbeddedSimulator = React.createClass({
return ( return (
<div className="column-left"> <div className="column-left">
<p><strong>Run this example</strong></p> <p><a className="modal-button-open"><strong>Run this example</strong></a></p>
<div className="modal-button-open"> <div className="modal-button-open modal-button-open-img">
<img src="/react-native/img/alertIOS.png" /> <img alt="Run example in simulator" width="170" height="358" src="/react-native/img/alertIOS.png" />
</div> </div>
<Modal /> <Modal />
</div> </div>
@ -492,7 +492,8 @@ var Modal = React.createClass({
<div className="modal-content"> <div className="modal-content">
<button className="modal-button-close">&times;</button> <button className="modal-button-close">&times;</button>
<div className="center"> <div className="center">
<iframe className="simulator" src={url} width="274" height="550" frameborder="0" scrolling="no"></iframe> <iframe className="simulator" src={url} width="256" height="550" frameborder="0" scrolling="no"></iframe>
<p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p>
</div> </div>
</div> </div>
</div> </div>

33
website/src/react-native/css/react-native.css
View File

@ -880,7 +880,7 @@ small code, li code, p code {
height: 95%; height: 95%;
left: 0; left: 0;
margin: auto; margin: auto;
max-height: 620px; max-height: 648px;
max-width: 460px; max-width: 460px;
overflow: auto; overflow: auto;
position: fixed; position: fixed;
@ -890,23 +890,27 @@ small code, li code, p code {
z-index: 9999; z-index: 9999;
} }
.modal-open { .modal-open { display: block; }
display: block;
}
.modal-content { .modal-content {
padding: 40px 24px 24px 24px; padding: 40px 24px 8px 24px;
position: relative; position: relative;
} }
.modal-content iframe { .modal-content iframe { margin: 0 auto; }
margin: 0 auto;
}
.modal-button-open { .modal-button-open {
cursor: pointer;
text-align: center; text-align: center;
} }
.modal-button-open-img {
background: #05A5D1;
height: 358px;
}
.modal-button-open-img:hover img { opacity: 0.9; }
.modal-button-close { .modal-button-close {
background: transparent; background: transparent;
border-radius: 0 0 0 4px; border-radius: 0 0 0 4px;
@ -921,12 +925,13 @@ small code, li code, p code {
right: 0; right: 0;
top: 0; top: 0;
} }
.modal-button-close:active,
.modal-button-close:focus, .modal-button-close:active,
.modal-button-close:hover { .modal-button-close:focus,
background: #EAF8FD; .modal-button-close:hover {
outline: none; background: #EAF8FD;
} outline: none;
}
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {
.nav-main { .nav-main {

8
website/src/react-native/js/scripts.js vendored
View File

@ -8,12 +8,16 @@
function init() { function init() {
var backdrop = document.querySelector('.modal-backdrop'); var backdrop = document.querySelector('.modal-backdrop');
var modalButtonOpen = document.querySelector('.modal-button-open'); var modalButtonOpenList = document.querySelectorAll('.modal-button-open');
var modalButtonClose = document.querySelector('.modal-button-close'); var modalButtonClose = document.querySelector('.modal-button-close');
backdrop.addEventListener('click', hideModal); backdrop.addEventListener('click', hideModal);
modalButtonOpen.addEventListener('click', showModal);
modalButtonClose.addEventListener('click', hideModal); modalButtonClose.addEventListener('click', hideModal);
// Bind event to NodeList items
for (var i = 0; i < modalButtonOpenList.length; ++i) {
modalButtonOpenList[i].addEventListener('click', showModal);
}
} }
function showModal(e) { function showModal(e) {