Skip to content
Snippets Groups Projects
Commit 91c29285 authored by Winnie's avatar Winnie
Browse files

Updates 

- CSS Changes
- DOM
parent 2dd95c5d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tomcat/webapps/Trawl/about.html 0 → 100644
+ 32
− 0
View file @ 91c29285
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="insert, some, keywords"> <!--TODO-->
<meta name="description" content="insert a description"> <!--TODO-->
<title>About|TrawlTool</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--Fonts-->
<!--Open Sans Rg-400/Semi-600/Bd-700-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
</head>
<body>
<header>
<div class="headerWrapper">
<a href="index.jsp" >TrawlTool</a>
<span class="nav-bar">
<a href="about.html">About</a> |
<a href="index.jsp" target="_blank">Gitlab/Github Nonfunc!</a>
</span>
</div>
</header>
<section>
Insert some info about the project, blah blah blah.<br>
Add photo credit if applicable
</section>
</body>
</html>
\ No newline at end of file
tomcat/webapps/Trawl/index.jsp
+ 44
− 57
View file @ 91c29285
...@@ -13,7 +13,6 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range ...@@ -13,7 +13,6 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
<title>TrawlTool</title> <title>TrawlTool</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<!--JQuery--> <!--JQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
...@@ -30,82 +29,70 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range ...@@ -30,82 +29,70 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
</head> </head>
<body> <body>
<header> <header>
<a href="index.html" >TrawlTool</a> <div class="headerWrapper">
<a href="index.jsp" >TrawlTool</a>
<span class="nav-bar">
<a href="about.html">About</a> |
<a href="index.html" target="_blank">Gitlab/Github Nonfunc!</a>
</span>
</div>
</header> </header>
<span id="menu-bar">
<a href="index.html">About</a> |
<a href="index.html" target="_blank">Gitlab/Github</a>
</span>
<section id="formWrapper"> <section id="main">
<section id="pickSciRanks"> <section id="formWrapper">
<%--<form method="POST" action="doBioLookup.do"> <!--.do extension is not necessary. This field is the servlet's url in web.xml-->--%> <section id="pickSciRanks">
<form>
Phylum: Phylum:
<%--<select name="pickPhy" size="1" onChange="this.form.submit()">--%> <select name="pickSciR" id="pickPhylum" size="1" onChange="changedSciR('phylum')"><!--Dynamically Filled--></select>
<select name="pickSciR" id="pickPhylum" size="1" onChange="changedSciR('phylum')">
</select>
Class: Class:
<select name="pickSciR" id="class" size="1" onChange="changedSciR('class')"> <select name="pickSciR" id="pickClass" size="1" onChange="changedSciR('class')">
<option>SomeClass</option>
</select>
Order:
<select name="order" size="1" onChange="alert()">
<option value="00">Arthropoda</option> <option value="00">Arthropoda</option>
<option value="01">Chordata</option> <option value="01">Chordata</option>
<option value="03">Mollusca</option> <option value="03">Mollusca</option>
</select> </select>
Order:
<select name="pickSciR" size="1" onChange="alert()"><!--Dynamically Filled--></select>
Family: Family:
<select name="family" size="1"> <select name="pickSciR" size="1"><!--Dynamically Filled--></select>
</select>
Genus: Genus:
<select name="genus" size="1"> <select name="pickSciR" size="1"><!--Dynamically Filled--></select>
</select>
Species: Species:
<select name="species" size="1"> <select name="pickSciR" size="1"><!--Dynamically Filled--></select>
</section>
</select>
<!--<input type="SUBMIT">--> <section id="yearIn">
</form> Year Range:
<span id="fromtoYear">InnerHtml</span>
<form>
<div id="slider-range"></div>
</form>
</section>
<section id="outputIn">
<%--Map and Histogram must have the same name for default checkbox to function correctly--%>
<input type="radio" name="pickOutput" value="map"> Map
<input type="radio" name="pickOutput" value="histogram" checked> Histogram
<button type="button" onclick="">Load</button>
<button type="button" onclick="">View Individual Records</button> <!--To records.html-->
</section>
</section> </section>
<section id="yearIn">
Year Range:
<span id="fromtoYear">InnerHtml</span>
<form>
<!--<input type="number" id="fromYear" class="yearN" value="2000" min="1960" max="2016" oninput="brightN()">-->
<div id="slider-range"></div>
</form>
</section>
<section id="outputIn"> <section id="outputWrapper">
<form> <section id="outputDetails">Stuff like population count, entries found, etc. go here</section>
<!--TODO: Set Default button entered--> <section id="outputBox">Map, Histogram Box. Histogram selected by default but we might want to have a loading screen instead.
<input type="radio" value="map"> Map <div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>
<input type="radio" value="histogram"> Histogram </section>
<input type="submit">
</form>
<form method="POST" action=""">
<input type="submit" value="Individual Records"> <!--To records.html-->
</form>
</section> </section>
</section> </section>
<section id="outputWrapper">
<section id="outputDetails">Stuff like population count, entries found, etc. go here</section>
<section id="outputBox">Map, Histogram Box</section>
<section id="console">~~~ PSEUDO-CONSOLE ~~~<br></section>
</section>
<%--<footer>--%> <%--<footer>--%>
<%--Footer--%> <%--Footer--%>
<%--</footer>--%> <%--</footer>--%>
</body> </body>
</html> </html>
<%--Notes--%>
<%--http://www.color-hex.com/color/002856--%>
<%--http://www.color-hex.com/color-palette/58262--%>
tomcat/webapps/Trawl/script.js
+ 5
− 5
View file @ 91c29285
...@@ -41,11 +41,11 @@ function post(path, params) { ...@@ -41,11 +41,11 @@ function post(path, params) {
function getChildren(id) { function getChildren(id) {
document.getElementById("console").innerHTML += "In | getChildren()<br>"; //TODO: Console REMOVEME document.getElementById("console").innerHTML += "In | getChildren()<br>"; //TODO: Console REMOVEME
var nodeList; var nodeList;
// nodeList = { nodeList = {
// "taxonId":[1821,51,1065], "taxonId":[1821,51,1065],
// "taxonName":["Chordata","Mollusca","Arthropoda"] "taxonName":["Chordata","Mollusca","Arthropoda"]
// }; };
nodeList = post('doBioLookup.do', { taxid: id}); // {taxid: intID} //nodeList = post('doBioLookup.do', { taxid: id}); // {taxid: intID}
return nodeList; return nodeList;
} }
......
tomcat/webapps/Trawl/style.css
+ 51
− 10
View file @ 91c29285
#console{
border: 1px solid grey;
background-color: lightgrey;
/*display: none;*/
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: 400; font-weight: 400;
text-decoration: none; text-decoration: none;
}
html{
min-height: 100%;
background-image: url("res/background2-2.jpg");
background-size: cover; /*Covers the page, some parts of the image may be hidden*/
background-position: center; /*Centers image vertically and horizontally*/
background-attachment: fixed; /*Whether the background scrolls with the page*/
} }
header{ header{
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 700;
border: 1px solid #002856; /*TODO: Replace this Hack which fills the whole box w. background color*/
background-color: #002856;
color: #74acd8;
} }
.headerWrapper{
margin: 0.5% 4%;
position: relative;
}
.nav-bar{
border: 1px solid white;
font-size: 18px;
position: absolute;
bottom: 0;
right: 0;
}
.nav-bar>*{
border: 1px solid orange;
}
body{ body{
font-size: 16px; font-size: 16px;
color: #00365a; color: #00365a;
width: 100%;
min-height: 100%;
}
#main{
margin: 0% 5%;
} }
a{ a{
color: #00243c; color: #74acd8;
font-weight: 600; font-weight: 700;
} }
a:hover{ a:hover{
font-weight: 700; font-weight: 700;
color: #004878; color: #9ca8c5;
} }
#formWrapper{ #formWrapper{
border: 1px solid; border: 1px solid;
margin-top: 1%;
} }
#pickSci{ #pickSci{
...@@ -36,11 +78,7 @@ a:hover{ ...@@ -36,11 +78,7 @@ a:hover{
} }
#yearIn{ #yearIn{
border: 1px solid sandybrown; width: 80%;
}
.yearN{
} }
#outputIn{ #outputIn{
...@@ -49,6 +87,8 @@ a:hover{ ...@@ -49,6 +87,8 @@ a:hover{
#outputWrapper{ #outputWrapper{
border: 1px solid grey; border: 1px solid grey;
height: 100%;
margin-top: 3%;
} }
#outputDetails{ #outputDetails{
...@@ -57,6 +97,7 @@ a:hover{ ...@@ -57,6 +97,7 @@ a:hover{
#outputBox{ #outputBox{
border: 1px solid darkred; border: 1px solid darkred;
min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/
} }
/*300/400/600/700*/ /*300/400/600/700*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment