Skip to content
This repository has been archived by the owner on Sep 23, 2023. It is now read-only.

Fix layout #692

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Fix layout #692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4eea7ea
BUG: Change layout of map key
ElDeveloper Apr 28, 2014
5bafb6d
MAINT: Remove unused code
ElDeveloper Apr 28, 2014
8864789
BUG: Re-center form
ElDeveloper Apr 28, 2014
8944102
ENH: Remove unused parts and center the form
ElDeveloper Apr 28, 2014
b3f45bb
ENH: Use templates and fix layout
ElDeveloper Apr 29, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
210 changes: 7 additions & 203 deletions www/americangut/register_user.psp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ input[type=submit]
background: #ccc;
}
</style>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/qiime/js/qiime.js"></script>
<script type="text/javascript" src="/qiime/js/jquery_validate/lib/jquery.js"></script>
Expand Down Expand Up @@ -142,220 +141,24 @@ function validateNewParticipant() {
$('#newParticipant').submit();
}


$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});

});

function toggleSection(section_name)
{
div = document.getElementById(section_name);
header_name = section_name + '_header';
if (div.style.display == 'none')
{
$('#' + section_name).fadeIn('fast')
header_content = $('#' + header_name)[0].innerHTML
$('#' + header_name)[0].innerHTML = header_content.replace('+', '-');
window.scrollBy(0, 200);
}
else
{
$('#' + section_name).fadeOut('fast')
header_content = $('#' + header_name)[0].innerHTML
$('#' + header_name)[0].innerHTML = header_content.replace('-', '+');
}
}

function drawMap(zoom_level, position)
{
var mapOptions =
{
zoom: zoom_level,
center: position,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: false,
streetViewControl: false,
panControl: false
};


var stylez = [
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: -100 } // <-- THIS
]
}
];

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

setMarkers(map, latlongs_db);
}

function renderLocalizedMap(position)
{
p = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
zoom_level = 7;
drawMap(zoom_level, p);
}

function renderMap()
{
p = new google.maps.LatLng(39.83, -99.89);
zoom_level = 4;
drawMap(zoom_level, p);
}

function initialize()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(renderLocalizedMap, renderMap);
}
else
{
renderMap()
}
}

function setMarkers(map, locations)
{
for (var i = 0; i < locations.length; i++)
{
var loc = locations[i];
var myLatLng = new google.maps.LatLng(loc[1], loc[2]);

<%
if tiny_markers:
# Indent
%>
var marker = new google.maps.Marker({
position:myLatLng,
map: map,
clickable: false,
size:(10, 10),
color:"00ff00",
icon:'/qiime/img/blue_tiny.png'
});
<%
else:
# Indent
%>
var pinColor = loc[4];
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=wc-male|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: pinImage,
shadow: pinShadow
});

<%
# End if
%>


}
}
</script>

<%
# Write out the database of points
req.write('<script type="text/javascript">')
req.write('var latlongs_db = [')

result_list=[]

# Get the map markers
ag_data_access = data_access_factory(ServerConfig.data_access_type, 'american_gut')
results = ag_data_access.getMapMarkers()

for i, val in enumerate(results):
if val[0] and val[1] and val[2]:
study_alias = str(val[0]).replace("'", "\\'")
result_list.append("\n['{0}',{1},{2},{3},'{4}']".format(study_alias, val[1], val[2], str(i+1), val[3]))

req.write('%s];' % ','.join(result_list))
req.write('window.onload=initialize;</script>')
%>

</head>

<body>
<div style="width:100%; height:100%; background-color:#000;">
<div id="map_canvas" style="width:100%; height:100%; opacity:0.8;"></div>
</div>

<div class="wrapper clearfix" style="position:absolute; top:10px; left:50px; opacity:0.9;">
<div class="wrapper clearfix" style="position:absolute; top:10px; left:50px; opacity:0.9;">
<div class="header clearfix">
<img id="logo" src="img/ag_logo.jpg">
</div>
</div>
</div>
<div class="wrapper clearfix" style="position:absolute; top:120px; left:50px; opacity:0.9; width:260px;">
<br>
<div class="left menuwrapper" style="width:100%;">
<ul class="menu">
<li><a href="FAQ.psp"><img class="icon" src="/qiime/img/what_icon.png">FAQ</a></li>
<li><a href="http://humanfoodproject.com/americangut/"><img class="icon" src="/qiime/img/purchase_icon.png">Join the Project!</a></li>
<li><a href="http://americangut.org"><img class="icon" src="/qiime/img/what_icon.png">What is American Gut?</a></li>
</ul>


</div>
<div>
&nbsp;
<br />
</div>
<div class="left menuheader">
<p>Map Key</p>
</div>
<div class="left keywrapper" style="width:100%;">
<ul class="key">
<li><img src="http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=wc-male|00B2FF"/> Participant</li>
<li><img src="http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=wc-male|ffff00"/> Kit Verified</li>
<li><img src="http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=wc-male|00ff00"/> Sample(s) Logged</li>
</ul>
</div>





<div class="registerwrapper" style="position:absolute; top:16px; left:285px; padding:15px;">
<div class="registerwrapper centered-content" >

<form action="register_user_submit.psp" method="post" name="register_user_submit" id="register_user_submit">
</form>
Expand All @@ -370,7 +173,7 @@ if 'email' in form:
else:
# Draw the form
%>

<div style="width:400px; margin:0 auto;">
<form name="newParticipant" id="newParticipant" method="post" action="add_participant.psp">
<input type="hidden" name="kit_id" id="kit_id" value="<%=kit_id%>">
<input type="hidden" name="password" id="password" value="<%=password%>">
Expand All @@ -386,11 +189,12 @@ else:
<tr><td></td><td><input type="button" onclick="validateNewParticipant()" value="Submit My Information"/></td></tr>
</table>
</form>

</div>
<%
# End indent
%>

</div>

<%@include file="loggedoutheader.psp"%>
<%@include file="loggedoutmenu.psp"%>
<%@ include file="footer.psp"%>
16 changes: 16 additions & 0 deletions www/americangut/style/americangut.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -652,3 +652,19 @@ html[xmlns] .clearfix {
* html .clearfix {
height: 1%;
}

div.centered-content {
margin:auto;
overflow:auto;
position:absolute;

/* position on screen */
top:145px;
left:385px;
padding:15px;

/* size of the div */
width:400px;
height:400px;
}