Skip to content
Browse files

Changed the behavior of the main page

  • Loading branch information...
1 parent 3d6c792 commit e5dca3a3ec6a48f1406a4a3c87deb005d4d10065 Asem Radhwi committed Jul 13, 2011
Showing with 548 additions and 513 deletions.
  1. +250 −231 geocamCover/static/javascripts/app.js
  2. +212 −209 geocamCover/static/stylesheets/layout.css
  3. +86 −73 geocamCover/templates/geocamCover/index.html
View
481 geocamCover/static/javascripts/app.js
@@ -18,7 +18,7 @@ function LogItem() {
function Task() {
this.description = "";
this.priority = 0;
- this.completed = false;
+ this.completed = false;
}
Task.prototype = new LogItem();
@@ -46,36 +46,40 @@ var views = ["Task View", "Report View"];
var requestView = 0;
var reportView = 1;
var isTapHold = false;
+var isiPad = false;
$(window).resize(function() {
pageResize();
});
function endZoom() {
- zoom = false;
- isTapHold = false;
+ zoom = false;
+ isTapHold = false;
}
$(document).ready(function () {
- jQuery("title").html("GeoCam Cover");
- initiateGeolocation();
- //setInterval("refreshGps()", 5000);
- selectedView = requestView;
- populateCategories();
+
+ isiPad = navigator.userAgent.match(/iPad/i) != null;
+
+ jQuery("title").html("GeoCam Cover");
+ initiateGeolocation();
+ //setInterval("refreshGps()", 5000);
+ selectedView = requestView;
+ populateCategories();
//INITIAL COORDINATES - MOFFETT FIELD
var latlng = new google.maps.LatLng(37.41288, -122.052934);
-
+
$('#map_canvas').gmap({
'center': latlng,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
'zoom': 12,
'callback': function (map) {
- globalMap = map;
+ globalMap = map;
$.getJSON('/geocamCover/places.json', function(data) {
- markerCluster = new MarkerClusterer($('#map_canvas').gmap('getMap'), $('#map_canvas').gmap('getMarkers'));
-
- $.each(data.places, function(key, val) {
+ markerCluster = new MarkerClusterer($('#map_canvas').gmap('getMap'), $('#map_canvas').gmap('getMarkers'));
+
+ $.each(data.places, function(key, val) {
var place = new Place();
latlng = new google.maps.LatLng(val.place.latitude, val.place.longitude);
place.id = val.place.id;
@@ -105,125 +109,125 @@ $(document).ready(function () {
report.notes = r.notes;
report.status = r.status;
report.modified_at = new Date(r.modified_at);
- report.modified_at_str = r.modified_at;
- report.task_id = r.task_id;
- if (report.task_id && report.percentCompleted == 100)
- place.tasks[report.task_id].completed = true;
+ report.modified_at_str = r.modified_at;
+ report.task_id = r.task_id;
+ if (report.task_id && report.percentCompleted == 100)
+ place.tasks[report.task_id].completed = true;
place.reports[report.id] = report;
}
places[place.id] = place;
addMarker(place);
});
- });
+ });
}
});
-
+
pageResize();
- $('#map_canvas').gmap({'callback':function(map) {
- $(map).click(function(event) {
- if(isTapHold){
- isTapHold = false;
- clickedPosition = event.latLng;
- showForm('place');
- }
- });
- }});
-
- $('#map_canvas').taphold(function(){
- isTapHold = true;
- });
-
- google.maps.event.addListener(globalMap, 'zoom_changed', function() {
- zoom = true;
- isTapHold = false;
- setTimeout("endZoom()", 1000);
- });
-
- google.maps.event.addListener(globalMap, 'drag', function() {
- zoom = true;
- isTapHold = false;
- });
-
- google.maps.event.addListener(globalMap, 'dragend', function() {
- setTimeout("endZoom()", 1000);
- });
-
- $("#address-form-form").submit(function(e) {
- createPlaceFromAddress();
- return false;
+ $('#map_canvas').gmap({'callback':function(map) {
+ $(map).click(function(event) {
+ if (isTapHold) {
+ isTapHold = false;
+ clickedPosition = event.latLng;
+ showForm('place');
+ }
+ });
+ }});
+
+// $('#map_canvas').taphold(function(){
+// isTapHold = true;
+// });
+
+ google.maps.event.addListener(globalMap, 'zoom_changed', function() {
+ zoom = true;
+ isTapHold = false;
+ setTimeout("endZoom()", 1000);
+ });
+
+ google.maps.event.addListener(globalMap, 'drag', function() {
+ zoom = true;
+ isTapHold = false;
+ });
+
+ google.maps.event.addListener(globalMap, 'dragend', function() {
+ setTimeout("endZoom()", 1000);
+ });
+
+ $("#address-form-form").submit(function(e) {
+ createPlaceFromAddress();
+ return false;
});
$("#place-form-form").submit(function() {
- createPlace();
+ createPlace();
return false;
});
$("#edit-place-page-form").submit(function() {
- updatePlace();
+ updatePlace();
return false;
});
$("#tasks-page form").submit(function() {
- createTask();
+ createTask();
return false;
});
$("#reports-page form").submit(function() {
- createReport();
- return false;
+ createReport();
+ return false;
});
});
function createPlaceFromAddress() {
- $('#map_canvas').gmap('search', { 'address': $('#address-name').val() }, function(isFound,results) {
- if (isFound) {
- $('#map_canvas').gmap('getMap').panTo(results[0].geometry.location);
- var place = new Place();
- place.position = results[0].geometry.location;
- savePlace(place, 'address');
- } else {
- alert("not found"); //Need another way to display to the user that the address wasn't found
- }
- });
+ $('#map_canvas').gmap('search', { 'address': $('#address-name').val() }, function(isFound, results) {
+ if (isFound) {
+ $('#map_canvas').gmap('getMap').panTo(results[0].geometry.location);
+ var place = new Place();
+ place.position = results[0].geometry.location;
+ savePlace(place, 'address');
+ } else {
+ alert("not found"); //Need another way to display to the user that the address wasn't found
+ }
+ });
}
function createPlace(form) {
- var place = new Place();
- place.position = clickedPosition;
- savePlace(place, 'place');
+ var place = new Place();
+ place.position = clickedPosition;
+ savePlace(place, 'place');
}
function updatePlace() {
- markerCluster.removeMarker(selectedPlace.marker);
- savePlace(selectedPlace, 'edit-place');
+ markerCluster.removeMarker(selectedPlace.marker);
+ savePlace(selectedPlace, 'edit-place');
}
function savePlace(place, which) {
- place.category = $('#' + which + '-categories-select').val();
+ place.category = $('#' + which + '-categories-select').val();
place.name = $('#' + which + '-name').val();
- addPlace(place);
+ addPlace(place);
$('#' + which + '-name').val("");
$('#' + which + '-categories-select').val("0");
$('#' + which + '-categories-select').parent().find('.ui-btn-text').html("Select Category");
hideForm(which);
}
function addPlace(place) {
- var new_place = JSON.stringify({"place_id": place.id, "latitude": place.position.lat(),
- "longitude": place.position.lng(), "name": place.name, "category": place.category });
- $.post('/geocamCover/place/', new_place, function(data) {
- place.id = data;
- places[place.id] = place;
- addMarker(place);
- showLog(place.id);
- pageResize();
- });
+ var new_place = JSON.stringify({"place_id": place.id, "latitude": place.position.lat(),
+ "longitude": place.position.lng(), "name": place.name, "category": place.category });
+ $.post('/geocamCover/place/', new_place, function(data) {
+ place.id = data;
+ places[place.id] = place;
+ addMarker(place);
+ showLog(place.id);
+ pageResize();
+ });
}
function createTask() {
- task = new Task();
+ task = new Task();
task.id = taskId;
task.description = $('#tasks-page .description').val();
task.priority = $('#tasks-page .priority').val();
@@ -233,12 +237,12 @@ function createTask() {
"description": task.description, "priority": task.priority });
$.post('/geocamCover/task/', newTask, function(data) {
- createLogItemCallback("task", data);
+ createLogItemCallback("task", data);
});
}
function createReport() {
- report = new Report();
+ report = new Report();
report.id = reportId;
report.title = $('#reports-page .title').val();
report.status = $('#reports-page .status').val();
@@ -253,20 +257,20 @@ function createReport() {
"notes": report.notes, "task_id": report.task_id});
$.post('/geocamCover/report/', newReport, function(data) {
- createLogItemCallback("report", data);
+ createLogItemCallback("report", data);
});
}
function createLogItemCallback(which, data) {
- eval("var logItem = " + which + ";");
+ eval("var logItem = " + which + ";");
var temp_array = data.split(",");
logItem.id = temp_array[0];
logItem.modified_at = new Date(temp_array[1]);
logItem.modified_at_str = temp_array[1];
eval("places[logItem.place_id]." + which + "s[logItem.id] = logItem;");
- places[logItem.place_id].marker.setVisible(false);
- markerCluster.removeMarker(places[logItem.place_id].marker);
- addMarker(places[logItem.place_id]);
+ places[logItem.place_id].marker.setVisible(false);
+ markerCluster.removeMarker(places[logItem.place_id].marker);
+ addMarker(places[logItem.place_id]);
showLog(logItem.place_id);
}
@@ -279,106 +283,106 @@ function populateCategories() {
}
function deletePlace() {
- if (confirm("Delete place '" + selectedPlace.name + "'?"))
- deleteItemAjax("Place", JSON.stringify({"type": "Place", "id": selectedPlace.id}));
+ if (confirm("Delete place '" + selectedPlace.name + "'?"))
+ deleteItemAjax("Place", JSON.stringify({"type": "Place", "id": selectedPlace.id}));
}
function deleteTask() {
- if (confirm("Delete task '" + selectedPlace.tasks[taskId].title + "'?"))
- deleteItemAjax("Task", JSON.stringify({"type": "Task", "id": taskId}));
+ if (confirm("Delete task '" + selectedPlace.tasks[taskId].title + "'?"))
+ deleteItemAjax("Task", JSON.stringify({"type": "Task", "id": taskId}));
}
function deleteReport() {
- if (confirm("Delete report '" + selectedPlace.reports[reportId].title + "'?"))
- deleteItemAjax("Report", JSON.stringify({"type": "Report", "id": reportId}));
+ if (confirm("Delete report '" + selectedPlace.reports[reportId].title + "'?"))
+ deleteItemAjax("Report", JSON.stringify({"type": "Report", "id": reportId}));
}
function deleteItemAjax(itemType, data) {
- $.ajax({url: '/geocamCover/delete_item/',
- data: data,
- type: "DELETE",
- success: function(data) {
- eval("delete" + itemType + "Success();");
- }
- });
+ $.ajax({url: '/geocamCover/delete_item/',
+ data: data,
+ type: "DELETE",
+ success: function(data) {
+ eval("delete" + itemType + "Success();");
+ }
+ });
}
function deletePlaceSuccess() {
- markerCluster.removeMarker(selectedPlace.marker);
- delete places[selectedPlace.id];
- showMap();
+ markerCluster.removeMarker(selectedPlace.marker);
+ delete places[selectedPlace.id];
+ showMap();
}
function deleteReportSuccess() {
- delete places[selectedPlace.id].reports[reportId];
- showLog(selectedPlace.id);
+ delete places[selectedPlace.id].reports[reportId];
+ showLog(selectedPlace.id);
}
function deleteTaskSuccess() {
- delete places[selectedPlace.id].tasks[taskId];
- showLog(selectedPlace.id);
-}
-
-function placeIcon(place){
- var icon;
- if (selectedView == requestView) {
- var priorityToDisplay = 0;
- for (var t_id in place.tasks) {
- if (!place.tasks[t_id].completed && place.tasks[t_id].priority > priorityToDisplay)
- priorityToDisplay = place.tasks[t_id].priority;
- }
- if (priorityToDisplay == 0)
- icon = "whiteBox";
- else
- icon = "priority" + priorityToDisplay;
- } else if (selectedView == reportView) {
- var reportToDisplay = null;
- var mostRecent = new Date();
- mostRecent.setYear(1900);
- for (var r_id in place.reports) {
- if (place.reports[r_id].modified_at > mostRecent){
- mostRecent = place.reports[r_id].modified_at;
- reportToDisplay = place.reports[r_id];
- }
- }
- if (reportToDisplay) {
- switch(parseInt(reportToDisplay.status)) {
- case 0:
- case 1:
- icon = "statusRed";
- break;
- case 2:
- case 3:
- case 4:
- icon = "statusYellow";
- break;
- case 5:
- case 6:
- icon = "statusGreen";
- break;
- default:
- icon = "whiteBox";
- }
- } else {
- icon = "whiteBox";
- }
- }
- return icon;
+ delete places[selectedPlace.id].tasks[taskId];
+ showLog(selectedPlace.id);
+}
+
+function placeIcon(place) {
+ var icon;
+ if (selectedView == requestView) {
+ var priorityToDisplay = 0;
+ for (var t_id in place.tasks) {
+ if (!place.tasks[t_id].completed && place.tasks[t_id].priority > priorityToDisplay)
+ priorityToDisplay = place.tasks[t_id].priority;
+ }
+ if (priorityToDisplay == 0)
+ icon = "whiteBox";
+ else
+ icon = "priority" + priorityToDisplay;
+ } else if (selectedView == reportView) {
+ var reportToDisplay = null;
+ var mostRecent = new Date();
+ mostRecent.setYear(1900);
+ for (var r_id in place.reports) {
+ if (place.reports[r_id].modified_at > mostRecent) {
+ mostRecent = place.reports[r_id].modified_at;
+ reportToDisplay = place.reports[r_id];
+ }
+ }
+ if (reportToDisplay) {
+ switch (parseInt(reportToDisplay.status)) {
+ case 0:
+ case 1:
+ icon = "statusRed";
+ break;
+ case 2:
+ case 3:
+ case 4:
+ icon = "statusYellow";
+ break;
+ case 5:
+ case 6:
+ icon = "statusGreen";
+ break;
+ default:
+ icon = "whiteBox";
+ }
+ } else {
+ icon = "whiteBox";
+ }
+ }
+ return icon;
}
function addMarker(place) {
$("#map_canvas").gmap('addMarker', {
'position': place.position,
'title': place.name,
- 'icon': "/static/images/" + placeIcon(place) + ".png"
+ 'icon': "/static/images/" + placeIcon(place) + ".png"
}, function(map, marker) {
place_marker = marker;
});
$(place_marker).click(function() {
showLog(place.id);
});
places[place.id].marker = place_marker;
- markerCluster.addMarker(place_marker);
+ markerCluster.addMarker(place_marker);
}
function showLog(place_id) {
@@ -415,27 +419,28 @@ function showLog(place_id) {
try {
$('#logs').listview("refresh");
- } catch(e) {}
- showPage("#logs-page");
+ } catch(e) {
+ }
+ showPage("#logs-page");
}
-function showPage(page){
- $(".mobile-page").hide();
- $(page).show();
+function showPage(page) {
+ $(".mobile-page").hide();
+ $(page).show();
}
function showEditPlace() {
$("#edit-place-page h1 .name").html(selectedPlace.name.length == 0 ? "Unnamed Place" : selectedPlace.name);
$("#edit-place-name").val(selectedPlace.name);
$("#edit-place-categories-select").val(selectedPlace.category);
- showPage("#edit-place-page");
+ showPage("#edit-place-page");
}
function showNewTask() {
taskId = null;
$("#tasks-page .description").val("");
$("#tasks-page .priority").val(3);
- showNewLogItem('task');
+ showNewLogItem('task');
}
function showNewReport() {
@@ -452,15 +457,15 @@ function showNewLogItem(which) {
$('#' + which + '-name-h1').html('New ' + which + ' for ' + (selectedPlace.name.length == 0 ? "Unnamed Place" : selectedPlace.name));
$('#' + which + 's-page .submit-button').val("Submit " + which);
$('#' + which + 's-page .delete-button').hide();
- showPage("#" + which + "s-page");
+ showPage("#" + which + "s-page");
}
function showEditTask(task_id) {
var task = selectedPlace.tasks[task_id];
taskId = task.id;
$("#tasks-page .priority").val(task.priority);
- $("#tasks-page .description").val(task.description);
- showEditLogItem('task');
+ $("#tasks-page .description").val(task.description);
+ showEditLogItem('task');
}
function showEditReport(report_id) {
@@ -471,18 +476,18 @@ function showEditReport(report_id) {
$("#reports-page .percent-completed").val(report.percentCompleted);
$("#reports-page .notes").val(report.notes);
populateTasksForReport(report.task_id);
- showEditLogItem('report');
+ showEditLogItem('report');
}
function showEditLogItem(which) {
$('#' + which + '-name-h1').html("Edit " + which);
$('#' + which + 's-page .submit-button').val('Update ' + which);
$('#' + which + 's-page .delete-button').show();
- showPage('#' + which + 's-page');
+ showPage('#' + which + 's-page');
}
function showForm(which) {
- $('#footer').hide();
+ $('#footer').hide();
$('#' + which + '-form').show();
$('#' + which + '-categories-select').parent().find('.ui-btn-text').html("Select Category");
$('#dim').show();
@@ -491,8 +496,8 @@ function showForm(which) {
function hideForm(which) {
$('#dim').hide();
$('#' + which + '-form').hide();
- $('#footer').show();
- pageResize();
+ $('#footer').show();
+ pageResize();
}
function populateTasksForReport(selectedId) {
@@ -514,80 +519,94 @@ function populateTasksForReport(selectedId) {
function switchViews() {
- jQuery("#switch-view-button .ui-btn-text").html(views[selectedView]);
- switch (selectedView) {
- case (requestView): selectedView = reportView;
- break;
- case (reportView): selectedView = requestView;
- break;
- }
- for (var p_id in places) {
- places[p_id].marker.setVisible(false);
- markerCluster.removeMarker(places[p_id].marker);
- addMarker(places[p_id]);
- }
- jQuery(".ui-btn-active").removeClass("ui-btn-active");
- return false;
+ $("#switch-view-button").val(views[selectedView]);
+ switch (selectedView) {
+ case (requestView):
+ selectedView = reportView;
+ break;
+ case (reportView):
+ selectedView = requestView;
+ break;
+ }
+ for (var p_id in places) {
+ places[p_id].marker.setVisible(false);
+ markerCluster.removeMarker(places[p_id].marker);
+ addMarker(places[p_id]);
+ }
+ return false;
}
function showMap() {
- showPage("#map-page");
+ showPage("#map-page");
pageResize();
}
function pageResize() {
- $('#map_canvas, #place-form, #address-form, #dim').height($(window).height() - 43);
-}
-
-function initiateGeolocation() {
- navigator.geolocation.getCurrentPosition(handleGeolocationQuery, handleErrors);
-}
-
-function handleErrors(error) {
- gpsDenied = true;
- switch(error.code) {
- case error.PERMISSION_DENIED: alert("user did not share geolocation data");
- break;
- case error.POSITION_UNAVAILABLE: alert("could not detect current position");
- break;
- case error.TIMEOUT: alert("retrieving position timed out");
- break;
- default: alert("unknown error");
- break;
- }
-}
+ var page_height = $(window).height() - $("#map-header").height() - $("#footer").height() - 4;
+ if (isiPad)
+ {
+ page_height -= 78;
+ $('body,html').height(page_height);
+
+ }
+
+
+ $('#map_canvas, #place-form, #address-form, #dim').height(page_height);
+}
+
+function initiateGeolocation() {
+ navigator.geolocation.getCurrentPosition(handleGeolocationQuery, handleErrors);
+}
+
+function handleErrors(error) {
+ gpsDenied = true;
+ switch (error.code) {
+ case error.PERMISSION_DENIED:
+ alert("user did not share geolocation data");
+ break;
+ case error.POSITION_UNAVAILABLE:
+ alert("could not detect current position");
+ break;
+ case error.TIMEOUT:
+ alert("retrieving position timed out");
+ break;
+ default:
+ alert("unknown error");
+ break;
+ }
+}
function handleGeolocationQuery(position) {
- var firstCall = true;
-
- if (myMarker) {
- if (markerCluster)
- markerCluster.removeMarker(myMarker);
- myMarker.setVisible(false);
- }
-
+ var firstCall = true;
+
+ if (myMarker) {
+ if (markerCluster)
+ markerCluster.removeMarker(myMarker);
+ myMarker.setVisible(false);
+ }
+
var myLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
$("#map_canvas").gmap('addMarker', {
'position': myLocation,
'title': "You are here",
- 'icon': "/static/images/youAreHere.png"
+ 'icon': "/static/images/youAreHere.png"
}, function(map, marker) {
myMarker = marker;
- });
+ });
- if (markerCluster)
- markerCluster.addMarker(myMarker);
-
- if (firstCall) {
- firstCall = false;
- $('#map_canvas').gmap({
- 'center': myLocation
- });
- }
+ if (markerCluster)
+ markerCluster.addMarker(myMarker);
+
+ if (firstCall) {
+ firstCall = false;
+ $('#map_canvas').gmap({
+ 'center': myLocation
+ });
+ }
}
function refreshGps() {
- if (gpsDenied)
- return;
- initiateGeolocation();
+ if (gpsDenied)
+ return;
+ initiateGeolocation();
}
View
421 geocamCover/static/stylesheets/layout.css
@@ -1,239 +1,242 @@
html, body {
- background: #DDD;
+ background: blue;
padding: 0;
margin: 0;
}
-.mobile-page{
- display: none;
+.mobile-page {
+ display: none;
}
-#maps-page{
- display: block;
+
+#map-page {
+ display: block;
}
+
#map_canvas {
- position: absolute;
- height: 100%;
+ position: relative;
width: 100%;
}
#place-form, #address-form {
position: absolute;
z-index: 10;
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
display: none;
}
#place-form form, #address-form form {
- position: absolute;
- bottom: 0px;
- width: 100%;
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
- text-align: center;
+ position: absolute;
+ bottom: 0px;
+ width: 100%;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+ text-align: center;
}
#dim {
- display: none;
- background: black;
- opacity: .5;
- position: absolute;
- z-index: 1;
- width: 100%;
- height: 100%;
+ display: none;
+ background: black;
+ opacity: .5;
+ position: absolute;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
}
.label {
- font-size: larger;
- font-family: Helvetica,Arial,sans-serif;
+ font-size: larger;
+ font-family: Helvetica, Arial, sans-serif;
}
-select{
- background: #F0F0F0;
+select {
+ background: #F0F0F0;
}
.button {
- border: 1px solid #222;
- font-family:Helvetica,Arial,sans-serif;
- cursor: pointer;
- padding: .6em 25px;
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- position: relative;
- box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
- border-radius: 1em;
- font-family: Helvetica,Arial,sans-serif;
- font-weight: bold;
- color: white;
- font-size: 16px;
- text-shadow: 0 -1px 1px black;
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#555),color-stop(1,#333));
-}
-
-.button:active{
- border: 1px solid black;
- background: #3D3D3D;
- font-weight: bold;
- color: white;
- text-shadow: 0 -1px 1px black;
- background-image: -moz-linear-gradient(top,#333,#5A5A5A);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#333),color-stop(1,#5A5A5A));
-}
-
-.header{
- position: relative;
-}
-
-.ui-header .ui-title{
- padding-top: 10px;
- margin: .6em 110px .8em;
-}
-
-.content {
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
-}
-
-.big-button{
- -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
- -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
- box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
- display: block;
- text-align: center;
- position: relative;
- margin: .5em 5px;
- padding: .6em 25px;
- height: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- border: 1px solid #CCC;
- background: #EEE;
- color: #444;
- -webkit-border-radius: 1em;
- border-radius: 1em;
- font-family: Helvetica,Arial,sans-serif;
- width: 95%;
- font-size: larger;
- font-weight: bold;
- text-shadow: 0 1px 1px #F6F6F6;
- background-image: -moz-linear-gradient(top,#FEFEFE,#EEE);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FDFDFD),color-stop(1,#EEE));
-}
-
-
-.big-button:active{
- border: 1px solid gray;
- background: #FDFDFD;
- font-weight: bold;
- color: #111;
- text-shadow: 0 1px 1px white;
- background-image: -moz-linear-gradient(top,#EEE,#FDFDFD);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#FDFDFD));
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEE', EndColorStr='#FDFDFD')";
-}
-
-.page-h1{
- font-family: Helvetica,Arial,sans-serif;
- color: #333;
- text-align: center;
-}
-
-li{
- list-style: none;
- font-family: Helvetica,Arial,sans-serif;
- text-decoration: none;
- border: 1px solid #F7C942;
- background: #FADB4E;
- padding: .7em 75px .7em 15px;
- font-size: larger;
- font-weight: bold;
- color: #333;
- text-shadow: 0 1px 0 white;
- background-image: -moz-linear-gradient(top,#FCEDA7,#FADB4E);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FCEDA7),color-stop(1,#FADB4E));
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FCEDA7', EndColorStr='#FADB4E')";
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-}
-
-
-li:active{
- background: #FCEDA7;
- font-weight: bold;
- color: #111;
- text-shadow: 0 1px 1px white;
- background-image: -moz-linear-gradient(top,#FADB4E,#FCEDA7);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FADB4E),color-stop(1,#FCEDA7));
- -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FADB4E', EndColorStr='#FCEDA7')";
-}
-
-
-textarea{
- width: 95%;
- height: 60px;
- padding: .4em;
- line-height: 1.4;
- font-size: 16px;
- -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
- -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
- box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
- -moz-border-radius: .6em;
- -webkit-border-radius: .6em;
- border-radius: .6em;
- font-family: Helvetica,Arial,sans-serif;
- border: 1px solid #B3B3B3;
- color: #333;
- text-shadow: 0 1px 0 white;
- background: #F0F0F0;
- background-image: -moz-linear-gradient(top,#EEE,#DDD);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
-}
-
-input[type="text"]{
- padding: .4em;
- line-height: 1.4;
- font-size: 16px;
- width: 95%;
- -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
- -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
- box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
- -moz-border-radius: .6em;
- -webkit-border-radius: .6em;
- border-radius: .6em;
- font-family: Helvetica,Arial,sans-serif;
- border: 1px solid #B3B3B3;
- color: #333;
- text-shadow: 0 1px 0 white;
- background: #F0F0F0;
- background-image: -moz-linear-gradient(top,#EEE,#DDD);
- background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#EEE),color-stop(1,#DDD));
-}
-
-select{
- margin: 8px 0;
- width: 100%;
- font-size: larger;
- padding: .6em 25px;
- display: block;
- height: 100%;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- position: relative;
- -moz-border-radius: 1em;
- -webkit-border-radius: 1em;
- border-radius: 1em;
- border: 1px solid #CCC;
- background: #EEE;
- font-weight: bold;
- color: #444;
- text-shadow: 0 1px 1px #F6F6F6;
- font-family: Helvetica,Arial,sans-serif;
-}
-
-input[type='range']{
- width: 95%;
- height: 40px;
+ border: 1px solid #222;
+ font-family: Helvetica, Arial, sans-serif;
+ cursor: pointer;
+ padding: .6em 25px;
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ border-radius: 1em;
+ font-family: Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ color: white;
+ font-size: 16px;
+ text-shadow: 0 -1px 1px black;
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(1, #333));
+}
+
+.button:active {
+ border: 1px solid black;
+ background: #3D3D3D;
+ font-weight: bold;
+ color: white;
+ text-shadow: 0 -1px 1px black;
+ background-image: -moz-linear-gradient(top, #333, #5A5A5A);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #333), color-stop(1, #5A5A5A));
+}
+
+.header {
+ position: relative;
+}
+
+.ui-header .ui-title {
+ padding-top: 10px;
+ margin: .6em 110px .8em;
+}
+
+.footer{
+ position: relative;
+ height: 50px;
+}
+
+.content {
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+}
+
+.big-button {
+ -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+ display: block;
+ text-align: center;
+ position: relative;
+ margin: .5em 5px;
+ padding: .6em 25px;
+ height: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ border: 1px solid #CCC;
+ background: #EEE;
+ color: #444;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ font-family: Helvetica, Arial, sans-serif;
+ width: 95%;
+ font-size: larger;
+ font-weight: bold;
+ text-shadow: 0 1px 1px #F6F6F6;
+ background-image: -moz-linear-gradient(top, #FEFEFE, #EEE);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FDFDFD), color-stop(1, #EEE));
+}
+
+.big-button:active {
+ border: 1px solid gray;
+ background: #FDFDFD;
+ font-weight: bold;
+ color: #111;
+ text-shadow: 0 1px 1px white;
+ background-image: -moz-linear-gradient(top, #EEE, #FDFDFD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #FDFDFD));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#EEE', EndColorStr='#FDFDFD')";
+}
+
+.page-h1 {
+ font-family: Helvetica, Arial, sans-serif;
+ color: #333;
+ text-align: center;
+}
+
+li {
+ list-style: none;
+ font-family: Helvetica, Arial, sans-serif;
+ text-decoration: none;
+ border: 1px solid #F7C942;
+ background: #FADB4E;
+ padding: .7em 75px .7em 15px;
+ font-size: larger;
+ font-weight: bold;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ background-image: -moz-linear-gradient(top, #FCEDA7, #FADB4E);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCEDA7), color-stop(1, #FADB4E));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FCEDA7', EndColorStr='#FADB4E')";
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+li:active {
+ background: #FCEDA7;
+ font-weight: bold;
+ color: #111;
+ text-shadow: 0 1px 1px white;
+ background-image: -moz-linear-gradient(top, #FADB4E, #FCEDA7);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FADB4E), color-stop(1, #FCEDA7));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#FADB4E', EndColorStr='#FCEDA7')";
+}
+
+textarea {
+ width: 95%;
+ height: 60px;
+ padding: .4em;
+ line-height: 1.4;
+ font-size: 16px;
+ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -moz-border-radius: .6em;
+ -webkit-border-radius: .6em;
+ border-radius: .6em;
+ font-family: Helvetica, Arial, sans-serif;
+ border: 1px solid #B3B3B3;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ background: #F0F0F0;
+ background-image: -moz-linear-gradient(top, #EEE, #DDD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+}
+
+input[type="text"] {
+ padding: .4em;
+ line-height: 1.4;
+ font-size: 16px;
+ width: 95%;
+ -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2);
+ -moz-border-radius: .6em;
+ -webkit-border-radius: .6em;
+ border-radius: .6em;
+ font-family: Helvetica, Arial, sans-serif;
+ border: 1px solid #B3B3B3;
+ color: #333;
+ text-shadow: 0 1px 0 white;
+ background: #F0F0F0;
+ background-image: -moz-linear-gradient(top, #EEE, #DDD);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EEE), color-stop(1, #DDD));
+}
+
+select {
+ margin: 8px 0;
+ width: 100%;
+ font-size: larger;
+ padding: .6em 25px;
+ display: block;
+ height: 100%;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ position: relative;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+ border: 1px solid #CCC;
+ background: #EEE;
+ font-weight: bold;
+ color: #444;
+ text-shadow: 0 1px 1px #F6F6F6;
+ font-family: Helvetica, Arial, sans-serif;
+}
+
+input[type='range'] {
+ width: 95%;
+ height: 40px;
}
View
159 geocamCover/templates/geocamCover/index.html
@@ -3,24 +3,29 @@
<head>
<meta name="viewport"
content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+ <meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"/>
-<link rel="stylesheet" href="{{ MEDIA_URL }}stylesheets/layout.css"/>
-
+ <link rel="stylesheet" href="{{ MEDIA_URL }}stylesheets/layout.css"/>
+
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
- <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"
+ type="text/javascript"></script>
+ {# <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>#}
<script src="{{ MEDIA_URL }}javascripts/markerclusterer_packed.js" type="text/javascript"></script>
- <script src="{{ MEDIA_URL }}javascripts/jquery.ui.map.min.js" type="text/javascript"></script>
+ <script src="{{ MEDIA_URL }}javascripts/jquery.ui.map.min.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}javascripts/app.js" type="text/javascript"></script>
</head>
-<body>
-<div class='mobile-page' id="map-page" data-role="page">
- <div id="map-header" data-role="header">
- <h1>GeoCam Cover</h1>
- <input type='submit' onclick="return switchViews();" value='Report View'/>
- </div>
- <div data-role="content" style='padding:0px'>
+
+<body onload="setTimeout(function() { window.scrollTo(0, 0) }, 100);">
+
+<div class='mobile-page' id="map-page">
+ <div id="map-header" class='header ui-bar-a ui-header'>
+ <h1 class='ui-title'>GeoCam Cover</h1>
+ </div>
+
+ <div style='padding:0px'>
<div id="dim"></div>
<div id="map_canvas"></div>
@@ -34,84 +39,91 @@
</form>
</div>
- <div id="address-form">
- <form id="address-form-form">
- <h1>Please enter an address</h1>
- <input style='width:95%' id="address-name" type="text" placeholder="Enter Address..."/>
- <select id="address-categories-select" class="categories"></select>
- <input type="submit" value="Add Place"/>
- <input type="button" value="Back to Map" onclick="hideForm('address');"/>
- </form>
- </div>
+ <div id="address-form">
+ <form id="address-form-form">
+ <h1>Please enter an address</h1>
+ <input style='width:95%' id="address-name" type="text" placeholder="Enter Address..."/>
+ <select id="address-categories-select" class="categories"></select>
+ <input type="submit" value="Add Place"/>
+ <input type="button" value="Back to Map" onclick="hideForm('address');"/>
+ </form>
+ </div>
+ </div>
+ <div id="footer" class="footer ui-bar-a ui-header">
+ <input type='submit' onclick="return showForm('address');" id="show-address-button" class='button ui-btn-left'
+ value="Enter Address"/>
+ <input id="switch-view-button" class="button ui-btn-right" type='submit' onclick="return switchViews();"
+ value='Report View'/>
</div>
- <div id="footer" data-role="footer" data-position="fixed">
- <input type='submit' onclick="return showForm('address');" id="show-address-button" class='ui-btn-left' value="Enter Address"/>
- </div>
</div>
<div class='mobile-page' id="logs-page">
<div class='header ui-bar-a ui-header'>
- <input class='button ui-btn-left' type='submit' onclick="return showMap();" value='Back'/>
+ <input class='button ui-btn-left' type='submit' onclick="return showMap();" value='Back'/>
+
<h1 class='ui-title'>Place</h1>
- <input class='button ui-btn-right' type='submit' onclick="return showEditPlace();" value='Edit'/>
+ <input class='button ui-btn-right' type='submit' onclick="return showEditPlace();" value='Edit'/>
</div>
-
- <h1 class='page-h1' id='place-name-h1'></h1>
+
+ <h1 class='page-h1' id='place-name-h1'></h1>
<div>
<input class='big-button' onclick="showNewTask();" type="submit" value="Add Task"/>
<input class='big-button' onclick="showNewReport();" type="submit" value="Add Report"/>
- <input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
+ <input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
</div>
<div>
- <ul class='ui-listview ui-listview-inset ui-corner-all ui-shadow' id="logs" data-role="listview" data-theme="e">
+ <ul class='ui-listview ui-listview-inset ui-corner-all ui-shadow' id="logs" data-theme="e">
</ul>
</div>
</div>
<div class='mobile-page' id="tasks-page">
- <div class='header ui-bar-a ui-header'>
- <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' data-icon="delete" value="Cancel"/>
- <h1 class='ui-title'>Task</h1>
- <input class='delete-button button ui-btn-right' type='submit' onclick="return deleteTask();" value='Delete'/>
- </div>
-
- <h1 class='page-h1' id='task-name-h1'></h1>
-
- <div>
- <form>
- <div>
- <b class="label">Description:</b><br/>
- <textarea class="description"></textarea>
- </div>
- <div class="select-priority">
- <select class="priority">
- <option value="3" selected>Priority: Low</option>
- <option value="2">Priority: Medium</option>
- <option value="1">Priority: High</option>
- </select>
- </div>
- <div class='submit-div'>
- <input class='submit-button big-button' type="submit" value="Submit Task" class="submit-button"/>
- </div>
- <input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
- </form>
- </div>
-</div>
+ <div class='header ui-bar-a ui-header'>
+ <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' data-icon="delete"
+ value="Cancel"/>
+ <h1 class='ui-title'>Task</h1>
+ <input class='delete-button button ui-btn-right' type='submit' onclick="return deleteTask();" value='Delete'/>
+ </div>
+
+ <h1 class='page-h1' id='task-name-h1'></h1>
+
+ <div>
+ <form>
+ <div>
+ <b class="label">Description:</b><br/>
+ <textarea class="description"></textarea>
+ </div>
+ <div class="select-priority">
+ <select class="priority">
+ <option value="3" selected>Priority: Low</option>
+ <option value="2">Priority: Medium</option>
+ <option value="1">Priority: High</option>
+ </select>
+ </div>
+ <div class='submit-div'>
+ <input class='submit-button big-button' type="submit" value="Submit Task" class="submit-button"/>
+ </div>
+ <input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
+ </form>
+ </div>
+</div>
<div class='mobile-page' id="reports-page">
<div class='header ui-bar-a ui-header'>
- <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' data-icon="delete" value="Cancel"/>
+ <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' data-icon="delete"
+ value="Cancel"/>
+
<h1 class='ui-title'>Report</h1>
- <input class='delete-button button ui-btn-right' type='submit' onclick="return deleteReport();" value='Delete'/>
+ <input class='delete-button button ui-btn-right' type='submit' onclick="return deleteReport();" value='Delete'/>
</div>
-
- <h1 class='page-h1' id='report-name-h1'></h1>
-
+
+ <h1 class='page-h1' id='report-name-h1'></h1>
+
<div>
<form>
<div>
@@ -137,7 +149,7 @@ <h1 class='page-h1' id='report-name-h1'></h1>
</div>
<div>
<b class="label">Percent Completed:</b><br/>
-
+
<div>
<input type="range" name="points" min="0" max="100" value="0" class="percent-completed"/>
</div>
@@ -146,24 +158,25 @@ <h1 class='page-h1' id='report-name-h1'></h1>
<b class="label">Notes:</b><br/>
<textarea class="notes"></textarea>
</div>
- <div class='submit-div'>
- <input class='submit-button big-button' type="submit" value="Submit Report" class="submit-button"/>
- </div>
- <input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
+ <div class='submit-div'>
+ <input class='submit-button big-button' type="submit" value="Submit Report" class="submit-button"/>
+ </div>
+ <input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
</form>
</div>
</div>
<div class='mobile-page' id="edit-place-page">
<div class='header ui-bar-a ui-header'>
- <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' value="Cancel"/>
+ <input class='button ui-btn-left' type='submit' onclick='return showPage("#logs-page");' value="Cancel"/>
+
<h1 class='ui-title'>Place</h1>
- <input class='button ui-btn-right' type='submit' onclick="return deletePlace();" value='Delete'/>
+ <input class='button ui-btn-right' type='submit' onclick="return deletePlace();" value='Delete'/>
</div>
-
- <h1 class='page-h1' id='report-name-h1'>Edit '<span class='name'></span>'</h1>
-
+
+ <h1 class='page-h1' id='report-name-h1'>Edit '<span class='name'></span>'</h1>
+
<div>
<form id="edit-place-page-form">
<div>
@@ -181,7 +194,7 @@ <h1 class='page-h1' id='report-name-h1'>Edit '<span class='name'></span>'</h1>
<input class='big-button' type="button" value="Back to Logs" onclick="return showLog(selectedPlace.id);"/>
<input class='big-button' type="submit" value="Back to Map" onclick="return showMap();"/>
</div>
-
+
</div>

0 comments on commit e5dca3a

Please sign in to comment.
Something went wrong with that request. Please try again.