Commit 72b82ced authored by Nathan Pasko's avatar Nathan Pasko
Browse files

fix frame size bug and frame background transition

parent ea8621cd
......@@ -53,6 +53,9 @@
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼◼︎◼︎
LOAD CATRIDGE HERE
-->
<script id="cartridge" type="application/json">
{"info":{"title":"Cat man","nav":[{"text":"by NP","href":"nathanpasko.com"}],"labels":true},"layers":[{"id":"101","audio":"","images":["","","",""],"background":"#77bb41"},{"id":"102","audio":"","images":["","","",""],"background":"#ff4013"},{"id":"103","audio":"","images":["","","",""],"background":"#8d8600"}]}
</script>
<!--
CARTRIDGE ABOVE
......
......@@ -62,15 +62,14 @@ function initFrame() {
createLayer(cartridge.layers[2], position.inner, 2);
createLayer(cartridge.layers[1], position.focused, 1);
createLayer(cartridge.layers[0], position.outer, 0);
updateBackground();
}
function initButtons() {
document.getElementById('inward-btn').addEventListener('click', () => {
moveLayer(1);
updateDisplay();
});
document.getElementById('outward-btn').addEventListener('click', () => {
moveLayer(-1);
updateDisplay();
});
}
function initIOS(val) {
......@@ -105,7 +104,6 @@ function init() {
initHeader();
initFrame();
initButtons();
updateDisplay();
}
else {
// No cartridge
......@@ -381,7 +379,6 @@ function clearStartupLogo() {
document.getElementById('startup-logo').remove();
}
function addBlankLayer() {
console.log('add blank layer');
cartridge.layers.push(
{
id: (Math.random()*100),
......@@ -398,15 +395,12 @@ function setLayerPosition(element, val) {
// Update
function updateBackground() {
if (layers[currentLayer].background != undefined) {
frame.style.background = layers[currentLayer].background;
if (cartridge.layers[currentLayer].background != undefined) {
frame.style.background = cartridge.layers[currentLayer].background;
}
else {
frame.style.background = 'unset';
}
}
function updateDisplay() {
//updateLayerDisplay();
}
init();
\ No newline at end of file
......@@ -5,6 +5,10 @@
--blue: #00f;
--greyTrans: #8a8a8a8a;
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
html {
height: -webkit-fill-available;
background: var(--white);
......@@ -12,10 +16,6 @@ html {
font-family: sans-serif;
transition: background .25s ease-in-out;
}
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
* {
position: relative;
margin: 0;
......@@ -202,8 +202,8 @@ nav a, nav span {
}
#frame {
min-height: 100vh;
min-height: -webkit-fill-available;
width: 100vw;
transition: background .125s;
}
.layer {
......
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