mattburchett/webglmapview
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Vertically resizable client window

Browse Source
This commit is contained in:
Robert L 2018-01-11 22:52:29 -05:00
parent bafcbcb3dd
commit fdc9bbeea9
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.htm
View File

@ -13,7 +13,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="styles/styles.css" rel="stylesheet"> <link href="styles/styles.css" rel="stylesheet">
<link href="styles/ansi.css" rel="stylesheet"> <link href="styles/ansi.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="js/GUI.Utils.js"></script> <script src="js/GUI.Utils.js"></script>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@ -133,7 +134,10 @@
<a href="#" id="client-bar-control"><i id="client-ico-up" class="fa fa-chevron-up" aria-hidden="true"></i><i id="client-ico-down" class="fa fa-chevron-down hidden" aria-hidden="true"></i><b id="client-tab-desc">Client</b></a> <a href="#" id="client-bar-control"><i id="client-ico-up" class="fa fa-chevron-up" aria-hidden="true"></i><i id="client-ico-down" class="fa fa-chevron-down hidden" aria-hidden="true"></i><b id="client-tab-desc">Client</b></a>
</span> </span>
</div> </div>
<div id="client-term-container" class="hidden"> <div id="client-term-container" class="hidden vertical-resize">
<div id="client-term-resize" class="handle ui-resizable-handle ui-resizable-n" >
<i class="fa fa-angle-double-up" aria-hidden="true"></i>
</div>
<form id="client-term"> <form id="client-term">
<div id="client-term-output" class="ansi-37 ansi-40"></div> <div id="client-term-output" class="ansi-37 ansi-40"></div>
<div id="client-term-prompt" class="ansi-37 ansi-40"></div> <div id="client-term-prompt" class="ansi-37 ansi-40"></div>

14
js/GUI.Utils.js
View File

@ -68,7 +68,19 @@ $(document).ready(function() {
$('#client-ico-up').toggleClass("hidden"); $('#client-ico-up').toggleClass("hidden");
}); });
$('#client-login').click(function() { reconnect();}) $('#client-login').click(function() { reconnect();})
$(".vertical-resize").resizable({
handles: {
'n': '#client-term-resize'
},
alsoResize: "#client-term-output",
minWidth: "100%",
maxWidth: "100%",
stop: function(event, ui) {
$(this).css("width", '');
$('#client-term-output').css("width",'');
}
});
$(".client-term-container").resize(function() { width = $(this).width(); $("#client").css({'width' : '100%'}); $("#client-term-output").css({'margin-right' : '0px !important', 'padding-right' : '0 !important'}) })
startup(); startup();
}); });

5
styles/styles.css
View File

@ -157,9 +157,14 @@ input[type=radio]:checked + label:before {
text-align: left; text-align: left;
background-color: #111 background-color: #111
} }
#client-term-button { position: fixed; bottom: 1vh; }
#client { display: block; } #client { display: block; }
.hidden { display: none; } .hidden { display: none; }
#client-term-entry { width: 100%; height: 5vh; border: 0; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #222; margin: 0; padding:0; resize: none; color: silver; vertical-align: middle;} #client-term-entry { width: 100%; height: 5vh; border: 0; border-top: 1px solid white; border-bottom: 1px solid white; background-color: #222; margin: 0; padding:0; resize: none; color: silver; vertical-align: middle;}
#client-term-resize {color: lightgrey; text-align: center; width: 100%; background-color: #333; }
#client-term-resize i { margin: 0 auto; width: 2vw;}
@media only screen and (max-width: 1290px) { #client-tab-desc { display: none; } } @media only screen and (max-width: 1290px) { #client-tab-desc { display: none; } }
@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%;} @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%;}