better layout

rcmiller · Aug 5, 2013 · 9f506ac · 9f506ac
1 parent 5662b2f
commit 9f506ac
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 112 deletions.
diff --git a/drawSaved.js b/drawSaved.js
@@ -43,7 +43,7 @@ var drawFinished=function(myMeatType,myMaxTemps,instructions,startingtemp,side)
 		//$(".span6").append(dropdown);
 		var svgContainer = d3.select(".span6").append("svg")
                                    .attr("width", '50%')
-                                    .attr("height", '200px')
+                                    .attr("height", '150px')
 									.append("g")
 	.attr("class",'savedInfo')
     .attr("transform", "translate(" + 45 + "," + 140 + ")")

diff --git a/graph.css b/graph.css
@@ -56,3 +56,43 @@ background-image:-ms-linear-gradient(top, #693d34 10%, #e87c66 30%,#f52900 50%,#
   stroke: black;
   stroke-width: 1.5px;
 }
+ul {
+    font-family: Arial, Verdana;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+ul li {
+    display: block;
+    position: relative;
+    float: left;
+}
+li ul {
+    display: none;
+}
+ul li a {
+    display: block;
+    text-decoration: none;
+    color: #ffffff;
+    border-top: 1px solid #ffffff;
+    padding: 5px 15px 5px 15px;
+    background: #1e7c9a;
+    margin-left: 1px;
+    white-space: nowrap;
+}
+ul li a:hover {
+background: #3b3b3b;
+}
+li:hover ul {
+    display: block;
+    position: absolute;
+}
+li:hover li {
+    float: none;
+    font-size: 11px;
+}
+li:hover a { background: #3b3b3b; }
+li:hover li a:hover {
+    background: #1e7c9a;
+}
diff --git a/home-screen.html b/home-screen.html
@@ -7,7 +7,7 @@
         <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 		<script src="data.js"></script>
         <script src="numeric-1.2.6.js"></script>
-
+		<script src="drawSaved.js"></script>
 		<script src="heat-diffusion.js"></script>
 		<script src="sample.js"></script>
 		<script src="graph.js"></script>
@@ -75,7 +75,7 @@ <h3 id="myModalLabel">About this Applet</h3>
         <h3 id="myModalLabel">Create Your Meat</h3>
         </div>
         <div class="modal-body">
-            <div id=thickInpDiv>Meat Thickness: <input type='text' id='thicknessInp' value='6'> cm </div>
+            <div id=thickInpDiv>Meat Thickness: <input type='text' id='thicknessInp' value='3'> cm </div>
             <div id=tempInpDiv>Initial Meat Temperature: <input type='text' id='steakTemp' value='23'>&#176;C</div>
             <form id="meatInp">What type of meat are you cooking?<br>
                 <input type="radio" name="meat" id="Steak" checked>Steak<br>

diff --git a/perfectSteak.css b/perfectSteak.css
@@ -1,21 +1,48 @@
 .inputTable{
 	position: relative;
-	width: 120% !important;
+	width: 150% !important;
 	text-align: center;
+	padding: 0px !important;
+	margin: 0px!important;
 /*	left: 10% !important;*/
 }
 
 .displayDiv{
 	position: relative;
-	width: 80%;
+	width: 100%;
 }
 
+.dropdown{
+	top:100%;
+	height:20px;
+}
+
+.selectName{
+	position: absolute;
+	width: 30%;
+	height: 20%;
+}
 
+#recipeName{
+	width: 200px !important;
+}
+
+#saveBut{
+	position:relative;
+	top: -5px;
+	float: left;
+	width: 29% !important;
+	height: 17px !important;
+	font-size:6pt;
+	padding:1px;
+	margin:1px;
+
+}
 
 .table-container{
     overflow-x: hidden;
     overflow-y: auto;
-    width:120%;
+    width:100%;
     height:160px;
 	font-size: 10px;
    }
@@ -26,7 +53,7 @@ th{
 }
 td{
     height: 30px !important;
-
+	max-width:33%!important;
 }
 #addButton{
 
@@ -37,7 +64,7 @@ td{
 }
 .displayDiv{
 	position:relative;
-	width:80%
+	width:100%
 }
 #subButton{
 /*	position: absolute;*/
@@ -57,6 +84,15 @@ td{
 	
 }
 */
+#steakHist
+{
+	width:40%;
+	height:20px;
+	margin-left:5%;
+	margin-right:5%;
+	margin-top:0%;
+	margin-bottom:0%;
+}
 #meatInp{
 	position:relative;
 	padding: 20px;
@@ -67,7 +103,7 @@ input[type="text"] {
     border: 1px solid black;
     font-size: 12px;
     width: 40px;
-		
+
 	margin-right:0px;
 }
 #thickInpDiv, #tempInpDiv, #meatTypeDiv{
@@ -82,4 +118,4 @@ input[type="text"] {
 	margin:0px !important;
 	position: relative !important;
 	top:-5px!important;
-}
+}