diff --git a/static/scripts/frontpage3d.js b/static/scripts/frontpage3d.js index 7491e3e8..6f3bbae0 100644 --- a/static/scripts/frontpage3d.js +++ b/static/scripts/frontpage3d.js @@ -11,7 +11,7 @@ var homeY = 0; var renderer = new THREE.WebGLRenderer(); var w = $("#workarea").width();//-20; -var h = $("#workarea").height();//-20; +var h = $("#workarea").height()- 10;//-20; renderer.setSize( w, h ); //console.log("w="+w+", h="+h); @@ -245,26 +245,25 @@ animate(); window.addEventListener( 'resize', onWindowResize, false ); function onWindowResize(){ - - //w=window.innerWidth; - //h=window.innerHeight; - //console.log("wr="+w+", hr="+h); - we = $("#workarea").width(); //-20; - he = $("#workarea").height(); //-20; + // Make canvas tiny so the container can shrink. + renderer.setSize( 10, 10 ); + // Get new size of fluid container. + we = $("#workarea").width(); + // Can't find the source of this 10px offset. + // Needed to stop unneccesary scrool bar on main window. + he = $("#workarea").height() - 10; //console.log("we="+we+", he="+he); - //cameraO.aspect = window.innerWidth / window.innerHeight; cameraO.left = we/-2*scale; cameraO.right = we/2*scale; cameraO.top = he/2*scale; cameraO.bottom = he/-2*scale; cameraO.updateProjectionMatrix(); - //cameraP.aspect = window.innerWidth / window.innerHeight; + cameraP.aspect = we / he; cameraP.updateProjectionMatrix(); - + // Finally resize the canvas. renderer.setSize( we, he ); - } diff --git a/static/styles/base.css b/static/styles/base.css index ed8a3b86..acaad0d5 100644 --- a/static/styles/base.css +++ b/static/styles/base.css @@ -1,7 +1,7 @@ - .modalxlg > .modal-dialog { - max-width: 90% !important; - width: 90% !important; - } +.modalxlg>.modal-dialog { + max-width: 90% !important; + width: 90% !important; +} .disabler { } @@ -9,93 +9,92 @@ .alert { margin-bottom: 1px; height: 30px; - line-height:30px; - padding:0px 15px; + line-height: 30px; + padding: 0px 15px; } - #contentModalText { - max-height: 70vh; - overflow-y: auto; + max-height: 70vh; + overflow-y: auto; } #fpCircle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - width: 150px; - height: 150px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 150px; + height: 150px; } + #gcCircle { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); - width: 150px; - height: 150px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 150px; + height: 150px; } + #notificationCircle { - position: absolute; - top: 70%; - left: 50%; - transform: translate(-50%,-30%); - width: 80px; - height: 80px; + position: absolute; + top: 70%; + left: 50%; + transform: translate(-50%, -30%); + width: 80px; + height: 80px; } #notificationModal { - z-index: 1051; + z-index: 1051; } - .loader { - width: calc(100% - 0px); - height: calc(100% - 0px); - border: 8px solid #162534; - border-top: 8px solid #09f; - border-radius: 50%; - animation: rotate 5s linear infinite; + width: calc(100% - 0px); + height: calc(100% - 0px); + border: 8px solid #162534; + border-top: 8px solid #09f; + border-radius: 50%; + animation: rotate 5s linear infinite; } @keyframes rotate { 100% {transform: rotate(360deg);} } - #editor { - margin: 0; - position: relative; - top: 0; - bottom: 0; - left: 0; - right: 0; - height: 60vh; - } +#editor { + margin: 0; + position: relative; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 60vh; +} .alert-circle.alert-sm { - width: 16px; - height: 16px; - padding: 6px 0px; - border-radius: 8px; - font-size: 8px; - text-align: center; + width: 16px; + height: 16px; + padding: 6px 0px; + border-radius: 8px; + font-size: 8px; + text-align: center; } .dot { - height: 15px; - width: 15px; - background-color: red; - border-radius: 50%; - display: inline-block; - } + height: 15px; + width: 15px; + background-color: red; + border-radius: 50%; + display: inline-block; +} -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - /* display: none; <- Crashes Chrome on hover */ - -webkit-appearance: none; - margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ +input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { + /* display: none; <- Crashes Chrome on hover */ + -webkit-appearance: none; + margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ } input[type=number] { - -moz-appearance:textfield; /* Firefox */ -} \ No newline at end of file + -moz-appearance: textfield; /* Firefox */ +} diff --git a/static/styles/frontpage.css b/static/styles/frontpage.css index 9282acfd..be4f4820 100644 --- a/static/styles/frontpage.css +++ b/static/styles/frontpage.css @@ -1,108 +1,96 @@ .my-sidebar { - -ms-flex: 0 0 460px; - flex: 0 0 460px; - height: calc(100vh - 85px) + -ms-flex: 0 0 460px; + flex: 0 0 460px; + height: calc(100vh - 85px) } -.flex-fixed-width-item { - flex: 0 0 410px; - height: calc(100vh - 85px); +.sidebar { + flex: 0 0 410px; } .text-nowrap { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .btn-wrap { - white-space: normal !important; + white-space: normal !important; } .scrollText { - height: calc(100vh - 740px); - overflow-y: scroll; + overflow-y: scroll; } .scrollTextMobile { - height: 400px; - overflow-y: scroll; + height: 400px; + overflow-y: scroll; } -.container-fluid { -} - -html, body{ - height: 100vh; -} - -.flex-fill { - flex:1; +html, body { + height: 100%; } .fullWorkArea { - height: calc(100vh - 85px); - cursor: none; + cursor: none; } /*#button3D, #buttonReset {*/ -#button3DResetGroup{ - position: absolute; - /*display: inline-block;*/ - z-index: 95; - left: 1%; - +#button3DResetGroup { + position: absolute; + /*display: inline-block;*/ + z-index: 95; + left: 1%; } -#cursorPosition{ - width: 125px; +#cursorPosition { + width: 125px; } #cursorPosition { - cursor: none; + cursor: none; } #cameraDiv1 { - position: absolute; - display: block; - z-index: 95; - top: 77%; - left: 1%; - width: 256; - height: 192; + position: absolute; + display: block; + z-index: 95; + top: 77%; + left: 1%; + width: 256; + height: 192; } #cameraDiv2 { - position: absolute; - display: block; - z-index: 94; - top: 77%; - left: 1%; - width: 256; - height: 192; + position: absolute; + display: block; + z-index: 94; + top: 77%; + left: 1%; + width: 256; + height: 192; } #mobileCameraDiv1 { - position: absolute; - display: block; - z-index: 95; - top: 0%; - left: 0%; - width: 100%; - height: 200; + position: absolute; + display: block; + z-index: 95; + top: 0%; + left: 0%; + width: 100%; + height: 200; } #mobileCameraDiv2 { - position: absolute; - display: block; - z-index: 94; - top: 0%; - left: 0%; - width: 100%; - height: 200; + position: absolute; + display: block; + z-index: 94; + top: 0%; + left: 0%; + width: 100%; + height: 200; } - .stopbutton { background-color: #004A7F; -webkit-border-radius: 10px; @@ -119,6 +107,7 @@ html, body{ -o-animation: glowing 1500ms infinite; animation: glowing 1500ms infinite; } + @-webkit-keyframes glowing { 0% { background-color: #B20000; -webkit-box-shadow: 0 0 3px #B20000; } 50% { background-color: #FF0000; -webkit-box-shadow: 0 0 40px #FF0000; } @@ -159,10 +148,18 @@ html, body{ } #pauseButton { - color: #fff; + color: #fff; } -#controllerMessage { overflow-wrap: anywhere; } +#controllerMessage { + position: absolute; + overflow: auto; + min-height: 150px; + top: 0; + bottom: 0; + left: 0; + right: 0; +} #stickyButtons { position: sticky; @@ -171,6 +168,6 @@ html, body{ position: -ms-sticky; position: -o-sticky; top: 0px; - z-index:1020; + z-index: 1020; background-color: #FFF; } diff --git a/static/styles/switches.css b/static/styles/switches.css index b61c9909..d6af5058 100644 --- a/static/styles/switches.css +++ b/static/styles/switches.css @@ -110,10 +110,6 @@ margin-left: 1rem; } -body { - padding-top: 70px; -} - .dropdown-menu { margin-top: .75rem; } diff --git a/templates/archive/frontpage_mobile.html b/templates/archive/frontpage_mobile.html index a1064036..ef684ee7 100644 --- a/templates/archive/frontpage_mobile.html +++ b/templates/archive/frontpage_mobile.html @@ -1,7 +1,10 @@ {% extends 'base.html' %} -{% block header %} +{% block head %} +{% endblock %} + +{% block header %} {% endblock %} diff --git a/templates/base.html b/templates/base.html index 7b439a77..7f614143 100644 --- a/templates/base.html +++ b/templates/base.html @@ -5,108 +5,70 @@ - - - - - - - - + {% block head %}{% endblock %} - - -
-
- {% block header %}{% endblock %} -
+
+ + +
{% block header %}{% endblock %}
{% for message in get_flashed_messages() %} -
{{ message }}
- {% endfor %} - {% block content %}{% endblock %} -
+
{{ message }}
+ {% endfor %} {% block content %}{% endblock %} +