ki9
/
compass
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed portrait formatting 

Signed-off-by: Keith Irwin <mail@keithirwin.us>
master
Keith Irwin 2016-12-13 17:46:57 -05:00
parent 4fea967b43
commit 0efcc2afa8
2 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -40,19 +40,27 @@
<body>
<header>
<div class='error' id='no-gps'>No GPS data available. <br><a href="javascript:tryGPS()">retry</a></div>
<div class='coord' id='lat'></div>
<div class='coord' id='lon'></div>
</header>
<main>
<noscript>You need javascript to use this. </noscript>
<p id='error'>No direction available. Try this on a smartphone with an internal compass.</p>
<div class='error' id='no-dir'>No direction available. Try this on a smartphone with an internal compass.</div>
<img src='rose.svg'>
<img id='rose' src="rose.svg">
</main>
<!--<footer>-->
<!-- <span style="float:left"><a href="https://github.com/keith24/Compass/blob/master/README.md">About</a></span>-->
<!-- <span style="float:right">Made by <a href="https://keithirwin.us/">Keith Irwin</a>.</span>-->
<!--</footer>-->
<footer>
<div style="float:left"><a href="https://github.com/keith24/Compass/blob/master/README.md">About</a></div>
<div style="float:right">Made by <a href="https://keithirwin.us/">Keith Irwin</a>.</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
@ -61,12 +69,11 @@
// No orientation data
if(!event.absolute) {
$('img').hide();
$('#error').show();
$('#rose-error').show();
} else {
var rot = 'rotate('+event.alpha.toString().substring(0,5)+'deg)';
$('img').css({
$('#rose').css({
'-ms-transform': rot,
'-webkit-transform': rot,
'transform': rot

39
style.css
View File

@ -6,33 +6,38 @@ body {
color: #EEE;
}
main {
.error, noscript {
color: #E00;
text-align: center;
} .error {
display: none;
}
#error {
color: #E00;
#rose {
width: 100%;
}
@media (orientation:portrait) {
main {
width: 100vw;
height: 100vw;
position: relative;
top:
header, main, footer {
width: 90vw;
padding: 5vw;
position: absolute;
}
img {
width: 95vw;
height: 95vw;
header {
height: calc(60vh - 60vw);
top: 0;
}
main {
height: 90vw;
top: calc(60vh - 50vw);
}
footer {
height: calc(40vh - 60vw);
bottom: 0;
}
}
@media (orientation:landscape) {
img {
width: 95vh;
height: 95vh;
}
}
#error { display: none; }