From 39ca1ef5db2f5dcd3d6372e67a01bcfc05ab68a6 Mon Sep 17 00:00:00 2001 From: Robert L Date: Wed, 14 Jun 2017 09:46:14 -0400 Subject: [PATCH] More responsive design and split out CSS to styles.css --- js/GUI.Utils.js | 5 +-- styles/styles.css | 103 ++++++++++++++++++++++++++++++++++++++++++++++ webviewgl.htm | 89 +-------------------------------------- 3 files changed, 107 insertions(+), 90 deletions(-) create mode 100644 styles/styles.css diff --git a/js/GUI.Utils.js b/js/GUI.Utils.js index 9238c94..c3ffb58 100644 --- a/js/GUI.Utils.js +++ b/js/GUI.Utils.js @@ -14,7 +14,7 @@ $(document).ready(function() { zoomfocus(selected); // Populate information area about target console.log(object) - var objdata = "Name: " + object.name + "
"; + var objdata = "Name: " + object.name + "
"; objdata += "
Location (Galactic Ref.)
X: " + object.x + "
Y: " + object.y + "
Z: " + object.z; objdata += "

Classification
" + object.type; objdata += "

Owning Faction
" + object.parent.name; @@ -62,8 +62,7 @@ $(document).ready(function() { var predicted = predictDestination(new THREE.Vector3(Number($('#x').val()),Number($('#y').val()),Number($('#z').val())),new THREE.Vector2(Number($('#azmuth').val()),Number($('#inclination').val())),$('#intel_frame option:selected').val()); $('#intel_predicted').html(predicted); }); - - + }); diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..01efd31 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,103 @@ +body { margin: 0; overflow:hidden;} +canvas { width: 75%; height: 100% ;} +.reset-button {margin: 0; padding: 0; padding: 0.25em 0.25em; color: #AAA; font-size: 1.0em;} +.menu-button { position: fixed; right: 0.1vw; top: 0; z-index: 5; color:white; background-color:#003133; padding: 0px; font-weight: bold; font-size:2.5vh; } +.reset-container { margin: 0; margin-top: -4.5vh; padding-top:5vh; padding: 1vh; font-weight: bold; text-align: center; font-family: 'Open Sans', sans-serif; color:#67989A; background-color: maroon; width: 100%; height: 1.75em; float:bottom; } +.wvg-controls { position: fixed; + right: 15%; + height: 100%; + width: 20%; + margin: 0; + display: none; + -webkit-transition-duration: 0.5s; + -moz-transition-duration: 0.5s; + -o-transition-duration: 0.5s; + transition-duration: 0.5s; + } + .wvg-controls.active { right: 0; } +.wvg-navbar { height: 2.0em; width: 100%; list-style-type: none; overflow: hidden; padding: 0; margin: 0; border: 0; background-color:#003133 } +.wvg-navbar li { width:auto; height: 100%; float: left; padding-top: 0.25vh; padding-bottom: 0.25vh; padding-left: 0.5vw; padding-right: 0.5vw; margin: 0; border: 0; text-decoration: none;} +.wvg-tablink { height: 100%; border: 0; margin: 0; padding: 0; font-weight: bold; text-align: center; font-family: 'Raleway', sans-serif; color:#67989A; font-size: 1.0em; } +.wvg-tab-active { background-color: #0D4A4D; color: #003133; } +.wvg-tools { width: 100%; height: 98%; background: #333; display: none; color: #AAA; padding-top: 2vh; padding-left:1vw; padding-right: 2.5vw;} +.wvg-tools select, .wvg-tools input { + width: 12vw; + padding: 5px; + font-size: 16px; + line-height: 1; + border: 1px solid #67878A; + border-radius: 0; + height: auto; + -webkit-appearance: none; + background: url('/assets/select-arrow.png') no-repeat right center #333; + color: #67989A; + margin: 0 auto; + + } +.wvg-tools input { background: #333; width: 11.4vw; } +.wvg-tools span { text-align: center; color: #FFF; font-family: 'Raleway', sans-serif; display: block; padding-right: 3vw; font-size: 1.0em; } +.wvg-tools span label { font-weight: bold;} +.wvg-first { display: block; } +#wrapper { height: inherit; width: 100%; } +.active { display: block; } +input[type=radio], input[type=checkbox] { + display:none; +} +input[type=checkbox] + label:before { + content: ""; + display: inline-block; + width: 15px; + height: 15px; + vertical-align:middle; + margin-right: 8px; + background-color: #aaa; + box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .3); + border-radius: 4px; +} +input[type=radio]:checked + label:before { + content: "\2022"; /* Bullet */ + color:white; + background-color: #666; + font-size:1.8em; + text-align:center; + line-height:14px; + text-shadow:0px 0px 3px #eee; +} + input[type=checkbox]:checked + label:before { + content:"\2714"; /* Tick */ + color:white; + background-color: #666; + text-align:center; + line-height:15px; + text-shadow:0px 0px 3px #eee; +} +.btn { + background: #67989A; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0px; + font-family: 'Raleway', sans-serif; + color: #003133; + font-size: 14px; + font-weight: bolder; + width: 75%; + height: 4vh; + padding: 3px; + margin-top:1vh; + border: solid #67878A 1px; + text-decoration: none; +} +.btn:hover { + background: #0D4A4D; + text-decoration: none; +} +.tool-header { font-weight: bold; padding-top: 0.75em; display: block; } +#route_output {font-size: 1.25vh; height: 30%; padding-top: 1vh; width: 90%;} +.toolsep { margin-right: 1vw; padding:0; padding-top: 1vh; padding-bottom: 2.5vh; border-bottom: 1px #AAA solid; height: 1vh; display: block; width: 64%;} +.calc_data { padding-top: 2.5vh; font-size: 1.5vh; font-family: 'Open Sans', sans-serif;} + + +@media only screen and (max-width: 900px) { .wvg-navbar { height: 6vh; font-size: 1.25em;} .wvg-controls { width: 65%;} .wvg-navbar li { padding-left: 1vw; padding-right: 2vw; padding-top: 2.0vh;} .wvg-tools span, .select-route-map {width: 95%;} + .menu-button { font-weight: bold; font-size:1.5em; padding-top: 0.5vh; }} +@media only screen and (max-width: 500px) { .wvg-controls { width: 100%;} .wvg-tablink { font-size: 0.75em; padding:0; padding-left: 2vw; padding-right: 2vw;} } +@media only screen and (max-height: 575px) { .reset-container { height: 4em;} .wvg-controls { overflow-y: auto; margin-bottom: -5vh;} .wvg-tools {font-size: 0.75em;} } diff --git a/webviewgl.htm b/webviewgl.htm index 3443cd0..5aaa608 100644 --- a/webviewgl.htm +++ b/webviewgl.htm @@ -9,6 +9,8 @@ + + -