responsive design

This commit is contained in:
Jonas Weinz 2019-02-26 10:09:24 +01:00
parent 337a1b9b7d
commit fd5504dd2f
4 changed files with 94 additions and 26 deletions

15
grid.js
View File

@ -94,4 +94,19 @@ class Grid
} }
} }
} }
on_screen_orientation_change(tile_w,tile_h)
{
this.tile_width = tile_w;
this.tile_h = tile_h;
var x,y;
for (y = 0; y < this.height; y++)
{
for (x = 0; x < this.width; x++)
{
this.cells[y][x].update_css_transform(tile_w, tile_h);
}
}
}
} }

13
main.js
View File

@ -2,9 +2,18 @@
var width = getComputedStyle(document.body).getPropertyValue("--grid-width"); var width = getComputedStyle(document.body).getPropertyValue("--grid-width");
var height = getComputedStyle(document.body).getPropertyValue("--grid-height"); var height = getComputedStyle(document.body).getPropertyValue("--grid-height");
var tilesize = parseInt(getComputedStyle(document.body).getPropertyValue("--tile-size")); var tilesize = getComputedStyle(document.body).getPropertyValue("--tile-size");
var default_opacity = getComputedStyle(document.body).getPropertyValue("--opacity") var default_opacity = getComputedStyle(document.body).getPropertyValue("--opacity")
console.log("tilesize: " + tilesize);
var grid = new Grid(width,height, document.getElementById("grid-container"), tilesize, tilesize); var grid = new Grid(width,height, document.getElementById("grid-container"), tilesize, tilesize);
var game_manager = new GameManager(grid, document.getElementById("sidebar-container"), default_opacity); var game_manager = new GameManager(grid, document.getElementById("sidebar-container"), default_opacity);
var sidebar = new Sidebar(grid, document.getElementById("control-container"), document.getElementById("info-container"), game_manager); var sidebar = new Sidebar(grid, document.getElementById("control-container"), document.getElementById("info-container"), game_manager);
// register listener to detect change in screen orientation an update tilesize
window.addEventListener("resize", function() {
console.log("screen changed");
var tilesize = getComputedStyle(document.body).getPropertyValue("--tile-size");
grid.on_screen_orientation_change(tilesize, tilesize);
})

View File

@ -8,9 +8,22 @@ body {
:root{ :root{
--grid-width: 6; --grid-width: 6;
--grid-height: 6; --grid-height: 6;
--tile-size: 6vw; --button-margin: 0.5vh;
--button-margin: 0.5vw; --tile-size: calc((100vh / var(--grid-height)) - 2 * var(--button-margin));
--opacity: 0.164; --opacity: 0.164;
--border-radius: 1vh;
--sidebar-width: 25vh;
}
/* override settings on portrait mode: */
@media (orientation: portrait) {
:root{
--button-margin: 0.5vw;
--tile-size: calc((100vw / var(--grid-width)) - 2 * var(--button-margin));
--border-radius: 1vw;
--sidebar-width: 45vw;
}
} }
@ -29,16 +42,16 @@ body {
} }
.control-button { .control-button {
border-radius: 1vw; border-radius: var(--border-radius);
margin: 1vw; margin: var(--border-radius);
border: none; border: none;
display: list-item; display: list-item;
outline: 0; outline: 0;
transition-duration: 0.3s; transition-duration: 0.3s;
background: rgba(0, 0, 0, var(--opacity)); background: rgba(0, 0, 0, var(--opacity));
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 3vw; font-size: calc(5 * var(--border-radius));
width: 15vw; width: var(--sidebar-width);
} }
.control-button:hover { .control-button:hover {
@ -50,8 +63,8 @@ body {
} }
.info-button { .info-button {
border-radius: 1vw; border-radius: var(--border-radius);
margin: 1vw; margin: var(--border-radius);
border: none; border: none;
outline: 0; outline: 0;
transition-duration: 0.3s; transition-duration: 0.3s;
@ -59,13 +72,13 @@ body {
flex-direction: column; flex-direction: column;
background: none; background: none;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 3vw; font-size: calc(5 * var(--border-radius));
width: 15vw; width: var(--sidebar-width);
} }
.status-button { .status-button {
border-radius: 1vw; border-radius: var(--border-radius);
margin: 1vw; margin: var(--border-radius);
border: none; border: none;
outline: 0; outline: 0;
transition-duration: 0.3s; transition-duration: 0.3s;
@ -73,8 +86,8 @@ body {
flex-direction: column; flex-direction: column;
background: none; background: none;
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
font-size: 2vw; font-size: calc(2 * var(--border-radius));
width: 15vw; width: var(--sidebar-width);
} }
.grid-tile { .grid-tile {
@ -88,12 +101,22 @@ body {
.main-container { .main-container {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
padding-top: calc(50vh - 0.5 * (var(--grid-height) * var(--tile-size)) - 1vw); padding-top: calc(50vh - 0.5 * (var(--grid-height) * var(--tile-size)) - var(--border-radius));
}
/* override settings on portrait mode: */
@media (orientation: portrait) {
.main-container {
white-space: normal;
padding-top: 10px;
}
} }
.grid-container { .grid-container {
border-radius: 1vw; border-radius: var(--border-radius);
padding: 1vw; padding: var(--border-radius);
margin: auto; margin: auto;
width: calc(var(--grid-width) * var(--tile-size)); width: calc(var(--grid-width) * var(--tile-size));
height: calc(var(--grid-height) * var(--tile-size)); height: calc(var(--grid-height) * var(--tile-size));
@ -103,8 +126,8 @@ body {
} }
.sidebar-container { .sidebar-container {
border-radius: 1vw; border-radius: var(--border-radius);
padding: 1vw; padding: var(--border-radius);
vertical-align: top; vertical-align: top;
background: rgba(0, 0, 0, var(--opacity)); background: rgba(0, 0, 0, var(--opacity));
display: inline-flex; display: inline-flex;
@ -115,16 +138,29 @@ body {
transition-duration: 1s; transition-duration: 1s;
} }
/* override settings on portrait mode: */
@media (orientation: portrait) {
.sidebar-container {
display: inline-flex;
justify-content: space-between;
flex-direction:row;
min-height: 0;
min-width: calc(var(--grid-width) * var(--tile-size));
}
}
.control-container { .control-container {
border-radius: 1vw; border-radius: var(--border-radius);
padding: 1vw; padding: var(--border-radius);
top: 0; top: 0;
background: none; background: none;
} }
.info-container { .info-container {
border-radius: 1vw; border-radius: var(--border-radius);
padding: 1vw; padding: var(--border-radius);
bottom: 0; bottom: 0;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

10
tile.js
View File

@ -15,12 +15,20 @@ class Tile
this.locked = false; this.locked = false;
this.div.style.transform = "translate( " + (x * w) + "vw, " + (y*h) + "vw )"; this.div.style.transform = "translate( calc( " + x + "*" + w + "), calc(" + y + "*" + h + "))";
this.reset(); this.reset();
this.bind(); this.bind();
} }
update_css_transform(w,h)
{
this.w = w;
this.h = h;
this.div.style.transform = "translate( calc( " + this.x + "*" + this.w + "), calc(" + this.y + "*" + this.h + "))";
}
register_click_callback(func) register_click_callback(func)
{ {
this.click_callback = func; this.click_callback = func;