@@ -594,6 +594,10 @@ |
console.log(request); |
|
// run code |
+ |
+ // open the modal |
+ window.location.href = "#chartModal"; |
+ |
$.ajax({ |
url: '/run', |
type: 'POST', |
@@ -603,6 +607,8 @@ |
statusCode: { |
500: function() { |
|
+ window.location.href = "#close"; |
+ |
alert("Could not run. This may be due to a couple issues:\n\n1. It is taking too long - reduce number of population and evaluations.\n\n2. It could not compile, try checking code."); |
|
// hide the button |
@@ -617,9 +623,6 @@ |
}, |
success: function (response) { |
|
- // open the modal |
- window.location.href = "#openModal"; |
- |
csipOutput = getCSIPParam(response, 'output'); |
csipGenCode = getCSIPParam(response, 'Problem.java'); |
var problemName = getCSIPParam(response, 'name'); |
@@ -156,6 +156,8 @@ |
display: -webkit-flex; |
display: flex; |
flex-wrap: wrap; |
+ -webkit-flex-direction: row; |
+ flex-direction: row; |
} |
|
.flex-container-center { |
@@ -172,6 +174,8 @@ |
|
.param-row { |
display: inherit; |
+ -webkit-flex-direction: inherit; |
+ flex-direction: inherit; |
margin: 0 auto; |
width: calc(100% - 10px); |
width: -moz-calc(100% - 10px); |
@@ -208,6 +212,39 @@ |
width: auto; |
} |
|
+::-webkit-input-placeholder { |
+ color: #444444; |
+} |
+ |
+:-moz-placeholder { /* Firefox 18- */ |
+ color: #444444; |
+} |
+ |
+::-moz-placeholder { /* Firefox 19+ */ |
+ color: #444444; |
+} |
+ |
+:-ms-input-placeholder { |
+ color: #444444; |
+} |
+ |
+.flex-right { |
+ margin-left: auto; |
+ display: inherit; |
+} |
+ |
+.auto-margin { |
+ margin: 0 auto; |
+} |
+ |
+.margin-top { |
+ margin-top: 10px; |
+} |
+ |
+/* |
+ * BUTTON TYPES |
+ */ |
+ |
.button-type { |
background-color: black; |
color: whitesmoke; |
@@ -228,43 +265,76 @@ |
text-align: center; |
line-height: 33px; |
|
- min-width: 100px; |
+ min-width: 35px; |
+ min-height: 35px; |
text-decoration: none; |
|
margin: 5px; |
- padding: 1px 6px; |
+ padding: 1px; |
+ /*display: inline-block;*/ |
+ |
} |
|
-::-webkit-input-placeholder { |
- color: #444444; |
-} |
+.a-button-type { |
+ background-color: black; |
+ color: whitesmoke; |
|
-:-moz-placeholder { /* Firefox 18- */ |
- color: #444444; |
-} |
+ border: none; |
+ border-radius: 5px; |
+ -webkit-border-radius: 5px; |
+ -moz-border-radius: 5px; |
+ /*-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);*/ |
+ /*-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);*/ |
+ /*box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);*/ |
|
-::-moz-placeholder { /* Firefox 19+ */ |
- color: #444444; |
-} |
+ cursor: pointer; |
|
-:-ms-input-placeholder { |
- color: #444444; |
-} |
+ font-family: Arial, Helvetica, sans-serif; |
+ font-weight: 700; |
+ font-size: large; |
+ text-align: center; |
+ line-height: 33px; |
|
-.float-right{ |
- margin-left: auto; |
+ min-width: 35px; |
+ min-height: 33px; |
+ text-decoration: none; |
+ |
+ margin: 5px; |
+ padding: 1px; |
+ /*display: inline-block;*/ |
+ |
} |
|
.button-padding-extra { |
- display: inline-block; |
- height: 100%; |
padding: 1px 20px; |
} |
|
-.auto-margin { |
- margin: 0 auto; |
+.play-button { |
+ background: #000000 url("/images/play_white.png") no-repeat center; |
+ background-size: 31px; |
} |
|
-.margin-top { |
- margin-top: 10px; |
+.chart-button { |
+ background: #000000 url("/images/chart_white.png") no-repeat center; |
+ background-size: 29px; |
+} |
+ |
+.download-button { |
+ background: #000000 url("/images/download_white.png") no-repeat center; |
+ background-size: 21px; |
+} |
+ |
+.code-button { |
+ background: #000000 url("/images/code_white.png") no-repeat center; |
+ background-size: 20px; |
+} |
+ |
+.save-button { |
+ background: #000000 url("/images/save_white.png") no-repeat center; |
+ background-size: 29px; |
+} |
+ |
+.open-button { |
+ background: #000000 url("/images/open_white.png") no-repeat center; |
+ background-size: 29px; |
} |
\ No newline at end of file |
@@ -34,17 +34,18 @@ |
<div class="flex-container"> |
<div class="param-row"> |
<div> |
- <button onclick="runCode();" class="button-type">Run</button> |
- <button id="modal-button" onclick="window.location.href = '#openModal';" class="button-type hidden">Graph</button> |
- <button id="download-button" onclick="downloadOutput();" class="button-type hidden">Data</button> |
- <button id="download-code" class="button-type hidden">Code</button> |
+ <button onclick="runCode();" class="button-type play-button" title="Run Optimization"></button> |
+ <button id="modal-button" onclick="window.location.href = '#chartModal';" class="button-type chart-button hidden" title="Show Graph or Table"></button> |
+ <button id="download-button" onclick="downloadOutput();" class="button-type download-button hidden" title="Download Results"></button> |
+ <button id="download-code" class="button-type code-button hidden" title="Download Code"></button> |
</div> |
- <div class="float-right"> |
+ <div class="flex-right"> |
{% if has_user %} |
- <button onclick="saveCode();" class="button-type button-padding-extra">Save</button> |
- <a href="{{ user_url }}" class="button-type button-padding-extra">Sign Out</a> |
+ <button onclick="openDialog();" class="button-type open-button" title="Open Different Optimization Problems"></button> |
+ <button onclick="saveCode();" class="button-type save-button" title="Save this Optimization Problem"></button> |
+ <a href="{{ user_url }}" class="a-button-type button-padding-extra">Sign Out</a> |
{% else %} |
- <a href="{{ user_url }}" class="button-type button-padding-extra">Sign In To Save</a> |
+ <a href="{{ user_url }}" class="a-button-type button-padding-extra" title="Sign in so you can save">Sign In To Save</a> |
{% endif %} |
</div> |
</div> |
@@ -107,13 +108,19 @@ |
|
<div id="editor">{{ problem.code.strip()|safe }}</div> |
|
- <div id="openModal" class="modalDialog"> |
+ <div id="chartModal" class="chartModal"> |
<div id="innerModal"> |
<div id="container" class="contained-chart"></div> |
<a href="#close" title="Close" class="close">X</a> |
</div> |
</div> |
|
+ <div id="openModal" class="openModal"> |
+ <div> |
+ |
+ </div> |
+ </div> |
+ |
</body> |
|
<script> |