From fd5504dd2fb9dfe91f7068a66943115a899379bb Mon Sep 17 00:00:00 2001 From: Jonas Weinz Date: Tue, 26 Feb 2019 10:09:24 +0100 Subject: [PATCH] responsive design --- grid.js | 15 ++++++++++ main.js | 13 +++++++-- style.css | 82 +++++++++++++++++++++++++++++++++++++++---------------- tile.js | 10 ++++++- 4 files changed, 94 insertions(+), 26 deletions(-) diff --git a/grid.js b/grid.js index 2d924c4..5b8f5e3 100644 --- a/grid.js +++ b/grid.js @@ -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); + } + } + } } \ No newline at end of file diff --git a/main.js b/main.js index 69dad23..abc7a39 100644 --- a/main.js +++ b/main.js @@ -2,9 +2,18 @@ var width = getComputedStyle(document.body).getPropertyValue("--grid-width"); 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") +console.log("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 sidebar = new Sidebar(grid, document.getElementById("control-container"), document.getElementById("info-container"), game_manager); \ No newline at end of file +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); +}) \ No newline at end of file diff --git a/style.css b/style.css index 4e91987..5d8170d 100644 --- a/style.css +++ b/style.css @@ -8,9 +8,22 @@ body { :root{ --grid-width: 6; --grid-height: 6; - --tile-size: 6vw; - --button-margin: 0.5vw; + --button-margin: 0.5vh; + --tile-size: calc((100vh / var(--grid-height)) - 2 * var(--button-margin)); --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 { - border-radius: 1vw; - margin: 1vw; + border-radius: var(--border-radius); + margin: var(--border-radius); border: none; display: list-item; outline: 0; transition-duration: 0.3s; background: rgba(0, 0, 0, var(--opacity)); color: rgb(255, 255, 255); - font-size: 3vw; - width: 15vw; + font-size: calc(5 * var(--border-radius)); + width: var(--sidebar-width); } .control-button:hover { @@ -50,8 +63,8 @@ body { } .info-button { - border-radius: 1vw; - margin: 1vw; + border-radius: var(--border-radius); + margin: var(--border-radius); border: none; outline: 0; transition-duration: 0.3s; @@ -59,13 +72,13 @@ body { flex-direction: column; background: none; color: rgb(255, 255, 255); - font-size: 3vw; - width: 15vw; + font-size: calc(5 * var(--border-radius)); + width: var(--sidebar-width); } .status-button { - border-radius: 1vw; - margin: 1vw; + border-radius: var(--border-radius); + margin: var(--border-radius); border: none; outline: 0; transition-duration: 0.3s; @@ -73,8 +86,8 @@ body { flex-direction: column; background: none; color: rgb(128, 128, 128); - font-size: 2vw; - width: 15vw; + font-size: calc(2 * var(--border-radius)); + width: var(--sidebar-width); } .grid-tile { @@ -88,12 +101,22 @@ body { .main-container { text-align: center; 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 { - border-radius: 1vw; - padding: 1vw; + border-radius: var(--border-radius); + padding: var(--border-radius); margin: auto; width: calc(var(--grid-width) * var(--tile-size)); height: calc(var(--grid-height) * var(--tile-size)); @@ -103,8 +126,8 @@ body { } .sidebar-container { - border-radius: 1vw; - padding: 1vw; + border-radius: var(--border-radius); + padding: var(--border-radius); vertical-align: top; background: rgba(0, 0, 0, var(--opacity)); display: inline-flex; @@ -115,16 +138,29 @@ body { 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 { - border-radius: 1vw; - padding: 1vw; + border-radius: var(--border-radius); + padding: var(--border-radius); top: 0; background: none; } .info-container { - border-radius: 1vw; - padding: 1vw; + border-radius: var(--border-radius); + padding: var(--border-radius); bottom: 0; display: inline-block; vertical-align: middle; diff --git a/tile.js b/tile.js index 42d1b39..a7cf457 100644 --- a/tile.js +++ b/tile.js @@ -15,12 +15,20 @@ class Tile 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.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) { this.click_callback = func;