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