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 (
<div className="column-left">
<p><strong>Run this example</strong></p>
<div className="modal-button-open">
<img src="/react-native/img/alertIOS.png" />
<p><a className="modal-button-open"><strong>Run this example</strong></a></p>
<div className="modal-button-open modal-button-open-img">
<img alt="Run example in simulator" width="170" height="358" src="/react-native/img/alertIOS.png" />
</div>
<Modal />
</div>
@ -492,7 +492,8 @@ var Modal = React.createClass({
<div className="modal-content">
<button className="modal-button-close">&times;</button>
<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>

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

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

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

@ -8,12 +8,16 @@
function init() {
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');
backdrop.addEventListener('click', hideModal);
modalButtonOpen.addEventListener('click', showModal);
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) {