summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authoremkael <emkael@tlen.pl>2014-12-16 13:34:58 +0100
committeremkael <emkael@tlen.pl>2014-12-16 13:34:58 +0100
commit67fa29786898819ca5af0e3b9e667f586a3c24d2 (patch)
tree8525e02c91555ffb97788033a71aa8e1be835278
parentd0474cc7dec9919ac79e0e4e3af14c75183cd638 (diff)
* styles modified to more mobile-friendly version
-rw-r--r--how.js4
-rw-r--r--index.html51
-rw-r--r--style.css24
3 files changed, 34 insertions, 45 deletions
diff --git a/how.js b/how.js
index 0f19d7c..4997369 100644
--- a/how.js
+++ b/how.js
@@ -352,7 +352,7 @@ var Viewport = function(width, height) {
if (!where) {
where = jQuery('body');
}
- jQuery(where).append(that.container);
+ jQuery(where).prepend(that.container);
}
};
@@ -410,7 +410,7 @@ var Control = function(movement) {
}
jQuery(document).ready(function() {
- var vp = new Viewport(jQuery(window).width()*0.6, jQuery(window).height()*0.9);
+ var vp = new Viewport(jQuery(window).width()*0.70, jQuery(window).height()*0.9);
vp.render();
var movements;
var moveList = jQuery('.selector .list');
diff --git a/index.html b/index.html
index 7b8877e..394acf1 100644
--- a/index.html
+++ b/index.html
@@ -9,36 +9,29 @@
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
- <div class="info">
- <h1>Howellki</h1>
- Obsługa: wybierz rotację z menu po prawej stronie.<br />
- Autor: <a href="http://emkael.info">MKL</a>
- </div>
- <div class="selector">
- <div class="lollipop">
- <br /><br />
- &laquo;<br />
- M<br />
- E<br />
- N<br />
- U<br />
- &laquo;
+ <div class="rightPane">
+ <div class="selector">
+ <div class="list">
+ <div class="layout">Stoły
+ <select class="direction">
+ <option value="left">od lewej</option>
+ <option value="right">od prawej</option>
+ <option value="top">od góry</option>
+ <option value="bottom">od dołu</option>
+ </select>
+ <select class="way">
+ <option value="straight">w dwóch rzędach</option>
+ <option value="uturn">zawinięte</option>
+ <option value="snake">wężykiem</option>
+ </select>
+ </div>
+ <div> RUNDY STOŁY</div>
+ </div>
</div>
- <div class="list">
- <div class="layout">Stoły
- <select class="direction">
- <option value="left">od lewej</option>
- <option value="right">od prawej</option>
- <option value="top">od góry</option>
- <option value="bottom">od dołu</option>
- </select>
- <select class="way">
- <option value="straight">w dwóch rzędach</option>
- <option value="uturn">zawinięte</option>
- <option value="snake">wężykiem</option>
- </select>
- </div>
- <div> RUNDY STOŁY</div>
+ <div class="info">
+ <h1>Howellki</h1>
+ Obsługa: wybierz rotację z menu.<br />
+ Autor: <a href="http://emkael.info">MKL</a>
</div>
</div>
</body>
diff --git a/style.css b/style.css
index ae4323e..a571a0b 100644
--- a/style.css
+++ b/style.css
@@ -5,27 +5,24 @@ body {
}
.selector {
- position: fixed;
- top: 0;
- right: 0;
background-color: grey;
height: 395px;
color: white;
z-index: 100;
border: solid 1px black;
+ min-width: 280px;
+ width: 25%;
+ margin-top: 5px;
+ padding: 5px;
+ overflow: hidden;
}
.selector .list {
width: 500px;
- display: none;
float: left;
padding-top: 5px;
}
-.selector:hover .list {
- display: block;
-}
-
.selector .lollipop {
text-align: center;
width: 50px;
@@ -106,9 +103,6 @@ table.summary td {
}
.controls {
- position: fixed;
- top: 400px;
- right: 0px;
}
.controls .play,
@@ -127,10 +121,12 @@ table.summary td {
border: solid 1px black;
}
+.rightPane {
+ float: right;
+ width: 25%;
+}
+
.info {
- position: fixed;
- bottom: 0;
- right: 0;
width: 250px;
height: 150px;
}