Commit c8e504c1 authored by Marco Kellershoff's avatar Marco Kellershoff
Browse files

Fix layouting

parent 44bc25ce
......@@ -97,6 +97,26 @@
],
'#drawer ul'
);
self.append(
self.createElement(
'div',
null,
[
['id', 'table']
]
),
'#app'
);
self.append(
self.createElement(
'div',
null,
[
['id', 'table-row']
]
),
'#table'
);
self.append(
[
self.createElement(
......@@ -112,9 +132,9 @@
[
['id', 'col2']
]
),
)
],
'#app'
'#table-row'
);
self.append(
self.createElement(
......@@ -267,8 +287,8 @@
col2.style.display = 'block';
col2.style.width = '100%';
col1.parentNode.removeChild(col1);
ifr.style.border = '0 none';
ifr.style.marginTop = '0';
$(ifr).addClass('fullscreen');
$('#table').addClass('fullscreen');
};
this.loadFromHash = function() {
......@@ -369,7 +389,7 @@
col2.style.display = 'none';
btn_run.style.display = 'none';
} else {
col2.style.display = 'inline-block';
col2.style.display = 'table-cell';
btn_run.style.display = 'inline-block';
}
};
......
......@@ -18,28 +18,42 @@ html,body,div,iframe {margin:0;padding:0;border:0 none;}
#drawer select {font-family:"Helvetica Neue", "Calibri Light", Roboto, sans-serif;border:1px solid #333;margin:3px;font-size:1rem;padding:0.75rem 1.35rem;}
#app iframe {display:block;border:1px solid #444;margin-top:0;}
html,body,#app{margin:0;padding:0;width:100%;height:100%;}
@media (max-width: 1000px) {
body #app #logo {display: none;}
body #app {margin-top: 25px;}
}
#table {
display: table;
width: 100%;
height: calc(100% - 111px);
}
#table-row {
display: table-row;
width: 100%;
height: 100%;
}
#app {
display: none;
box-sizing: border-box;
margin: 100px 0 0 0;
margin: 111px 0 0 0;
width: 100%;
height: calc(100%-50px);
height: 100%;
overflow-x: hidden;
overflow-y: auto;
overflow-scrolling: touch;
padding: 20px;
}
#col1, #col2 {display:inline-block;}
#col1 {width: 49.5%;height: 100%;float:left;overflow:auto;}
#col1 .ace_editor {width:100%;height:85%;}
#col2 {width: 49.5%;height: 100%;float:right;}
#col2 iframe {width:100%;height:100%;}
#col1, #col2 {height:100%;width:50%;display:table-cell;}
#col1 .ace_editor {width:100%;height:100%;}
#col2 iframe {position:relative;top:-10px;left:10px;width:100%;height:100%;}
#app #col2 iframe.fullscreen {
position:relative;top:0;left:0;width:100%;height:100%;
border: 0 none;
margin-top: 0;
}
#app #table.fullscreen {
height: 100%;
}
#btn_run {
background-color: #82BF56;
border-bottom: 5px solid #669644;
......@@ -170,7 +184,7 @@ html,body,#app{margin:0;padding:0;width:100%;height:100%;}
left: 0;
}
#drawer-toggle:checked ~ #app { margin-left: 300px; }
#drawer-toggle:checked ~ #app { margin-left: 300px; width: calc(100% - 300px); }
@media screen and (min-width: 380px) {
#drawer-toggle:checked ~ #drawer-toggle-label,
#drawer-toggle:checked ~ #drawer {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment