lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

update top form html and css

Browse source
This commit is contained in:
Matt Walsh 2022-12-21 16:20:31 -06:00
parent fc4cbc1415
commit a440990696
5 changed files with 91 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
server/scripts/index.mjs
View file

@ -44,10 +44,13 @@ const init = () => {
if (document.fullscreenElement) updateFullScreenNavigate(); if (document.fullscreenElement) updateFullScreenNavigate();
}); });
document.getElementById('txtAddress').addEventListener('keydown', (key) => { if (key.code === 'Enter') formSubmit(); });
document.getElementById('btnGetLatLng').addEventListener('click', () => formSubmit());
document.addEventListener('keydown', documentKeydown); document.addEventListener('keydown', documentKeydown);
document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); }); document.addEventListener('touchmove', (e) => { if (fullScreenOverride) e.preventDefault(); });
$('#frmGetLatLng #txtAddress').devbridgeAutocomplete({ $('#txtAddress').devbridgeAutocomplete({
serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest', serviceUrl: 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest',
deferRequestBy: 300, deferRequestBy: 300,
paramName: 'text', paramName: 'text',
@ -71,11 +74,11 @@ const init = () => {
width: 490, width: 490,
}); });
$('#frmGetLatLng').on('submit', () => { const formSubmit = () => {
const ac = $('#frmGetLatLng #txtAddress').devbridgeAutocomplete(); const ac = $('#txtAddress').devbridgeAutocomplete();
if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click'); if (ac.suggestions[0]) $(ac.suggestionsContainer.children[0]).trigger('click');
return false; return false;
}); };
// Auto load the previous query // Auto load the previous query
const query = localStorage.getItem('latLonQuery'); const query = localStorage.getItem('latLonQuery');

2
server/styles/main.css
View file

File diff suppressed because one or more lines are too long

2
server/styles/main.css.map
View file

File diff suppressed because one or more lines are too long

65
server/styles/scss/_page.scss
View file

@ -20,31 +20,20 @@ body {
} }
} }
input, #divQuery {
button { max-width: 640px;
font-family: "Star4000";
}
#imgGetGps { .buttons {
display: inline-block;
width: 150px;
text-align: right;
#imgGetGps {
height: 13px; height: 13px;
vertical-align: middle; vertical-align: middle;
}
#txtAddress {
width: 490px;
font-size: 16pt;
max-width: calc(100% - 8px);
@media (prefers-color-scheme: dark) {
background-color: #000000;
color: white;
border: 1px solid darkgray;
} }
}
#btnGetGps, button {
#btnGetLatLng,
#btnClearQuery {
font-size: 16pt; font-size: 16pt;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -53,9 +42,9 @@ button {
} }
border: 1px solid darkgray; border: 1px solid darkgray;
} }
#btnGetGps { #btnGetGps {
img { img {
&.dark { &.dark {
@ -84,8 +73,30 @@ button {
filter: invert(1); filter: invert(1);
} }
} }
} }
}
input,
button {
font-family: "Star4000";
}
#txtAddress {
width: calc(100% - 170px);
max-width: 490px;
font-size: 16pt;
min-width: 200px;
display: inline-block;
@media (prefers-color-scheme: dark) {
background-color: #000000;
color: white;
border: 1px solid darkgray;
}
}
}
.autocomplete-suggestions { .autocomplete-suggestions {
background-color: #ffffff; background-color: #ffffff;
border: 1px solid #000000; border: 1px solid #000000;
@ -93,19 +104,19 @@ button {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
background-color: #000000; background-color: #000000;
} }
}
.autocomplete-suggestion { .autocomplete-suggestion {
/*padding: 2px 5px;*/ /*padding: 2px 5px;*/
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 16pt; font-size: 16pt;
} }
.autocomplete-selected { .autocomplete-selected {
background-color: #0000ff; background-color: #0000ff;
color: #ffffff; color: #ffffff;
}
} }
#divTwc { #divTwc {

15
views/index.ejs
View file

@ -60,13 +60,14 @@
<div id="divQuery"> <div id="divQuery">
<form id="frmGetLatLng"> <input id="txtAddress" type="text" value="" placeholder="Zip or City, State" />
<input id="txtAddress" type="text" value="" placeholder="Zip or City, State" /><button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/><img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/></button> <div class="buttons">
<input id="btnGetLatLng" type="submit" value="GO" /> <button id="btnGetGps" type="button" title="Get GPS Location"><img src="images/nav/ic_gps_fixed_black_18dp_1x.png" class="light"/>
<input id="btnClearQuery" type="reset" value="Reset" /> <img src="images/nav/ic_gps_fixed_white_18dp_1x.png" class="dark"/>
</form> </button>
<div id="divLat"></div> <button id="btnGetLatLng" type="submit">GO</button>
<div id="divLng"></div> <button id="btnClearQuery" type="reset">Reset</button>
</div>
</div> </div>
<div id="version" style="display:none"> <div id="version" style="display:none">
<%- version %> <%- version %>