Improve layout of player screen on mobile devices

parent c8b4e129
......@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
def project do
[app: :grains,
version: "0.0.93",
version: "0.0.94",
elixir: "~> 1.2",
elixirc_paths: elixirc_paths(Mix.env),
compilers: [:phoenix, :gettext] ++ Mix.compilers,
......
......@@ -2,8 +2,10 @@
.interfacePanel {
display: block;
height: 400px;
width: 400px;
height: 300px;
width: 300px;
margin: auto;
margin-top: 40px;
}
.interfacePanel_hidden {
......@@ -71,3 +73,8 @@ svg {
border: 0px solid white;
border-radius: 0px;
}
#instructions {
font-weight: normal;
font-size: 0.7em;
}
......@@ -9,8 +9,9 @@ import XyPanel from "../xypanel";
export default class View extends MainView {
mount() {
super.mount();
let width = screen.width;
XyPanel.init(socket, "xyPanel");
XyPanel.init(socket, "xyPanel", width);
// OrientationPanel.init(socket, "orientationPanel");
AccelerationPanel.init(socket, "accelerationPanel");
......
......@@ -12,13 +12,15 @@ let XyPanel = {
dot_id: 'na',
timer: {},
init(socket, domId) {
init(socket, domId, width) {
if (!document.getElementById(domId)) {
let element = document.getElementById(domId);
if (!element) {
return;
}
let that = this;
socket.connect();
this.xyChannel = socket.channel("xy:" + domId);
......@@ -28,7 +30,7 @@ let XyPanel = {
.receive("ok", resp => {
console.log("join xy: ", resp.dot_id);
that.dot_id = resp.dot_id;
var a = new Interface.Panel({ background:"#000", container:document.getElementById(domId) });
var a = new Interface.Panel({ background:"#000", container: element });
that.xy = new Interface.XY({
childWidth: 45,
numChildren: 1,
......@@ -51,8 +53,9 @@ let XyPanel = {
// } );
})
.receive("error", reason => console.log("join failed", reason));
console.log(width);
element.style.width = width;
element.style.height = width;
console.log("adding xy");
},
......
<h1><a href="/play/play">Play</a></h1>
<div id="instructions">
<p>Find your grain on the main screen by searching it by number.
Direct it by moving your circle.</p>
<p>Listen to the sounds</p>
</div>
<div id="xyPanel" class="interfacePanel"></div>
<div id="accelerationPanel" class="interfacePanel_hidden"></div>
......@@ -5,5 +5,5 @@
</div>
<div>
<a href="/play" class="btn-lg btn-success btn-block play">Setup</a>
<a href="/play/play" class="btn-lg btn-success btn-block play">Play</a>
</div>
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