Skip to content

D
df-aggregator
Commit 4715e741 by Corey Koval
Options

Receiver Menu Works on Mobile

parent e32e9e27
Showing with 13 additions and 20 deletions
static/menu.css
body {
overflow: hidden;
overflow-x: hidden;
}
#menuToggle
{
#menuToggle {
display: block;
position: absolute;
top: 95px;
right: 40px;
opacity: 0.8;
z-index: 1;
}
#menuToggle input
{
#menuToggle #burgerbars {
display: block;
width: 40px;
height: 32px;
......@@ -31,8 +27,7 @@ body {
-webkit-touch-callout: none;
}
.borger
{
.borger {
display: block;
width: 40px;
height: 5px;
......@@ -68,26 +63,23 @@ body {
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ .borger
{
#menuToggle #burgerbars:checked ~ .borger {
opacity: 1;
transform: rotate(45deg) translate(-3px, -2px);
/* background: #232323; */
}
#menuToggle input:checked ~ .borger:nth-last-child(3)
{
#menuToggle #burgerbars:checked ~ .borger:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ .borger:nth-last-child(2)
{
#menuToggle #burgerbars:checked ~ .borger:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -0px);
}
#menu {
position: absolute;
position: fixed;
width: 500px;
margin: -75px 0 0 90px;
padding: 25px;
......@@ -106,7 +98,7 @@ body {
font-size: 22px;
}
#menuToggle input:checked ~ ul {
#menuToggle #burgerbars:checked ~ ul {
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
......
views/cesium.tpl
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, height=device-height">
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js"></script>
......@@ -58,18 +59,18 @@
</script>
<div id="menuToggle">
<input type="checkbox" />
<input id="burgerbars" type="checkbox" />
<span class="borger"></span>
<span class="borger"></span>
<span class="borger"></span>
<ul id="menu">
<h2 style="color: #eee;">Receivers</h2>
<h2 style="color: #eee; padding-left: 5px;">Receivers</h2>
% for x in receivers:
<div class="receiver">
<span>Station ID: <a href="{{x.station_url}}" target="_blank">{{x.station_id}}</a></span>
<span>Location: {{x.latitude}}, {{x.longitude}}</span>
<span>Location: {{x.latitude}}&#176;, {{x.longitude}}&#176;</span>
<span>Heading: {{x.heading}}&#176;</span>
<span>Tuned to {{x.frequency}} MHz</span>
</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