Displaying differences for changeset
 
display as  

src/moplay/js/multiobj.js

@@ -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');

src/moplay/stylesheets/main.css

@@ -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

src/moplay/stylesheets/modal.css

@@ -1,4 +1,8 @@
-.modalDialog {
+/*
+ * CHART MODAL
+ */
+
+.chartModal {
 
     font-weight: 900;
     font-size: large;
@@ -21,12 +25,12 @@
 
 }
 
-.modalDialog:target {
+.chartModal:target {
     opacity:1;
     pointer-events: auto;
 }
 
-.modalDialog > div {
+.chartModal > div {
     width: 80%;
     height: 80%;
     position: relative;
@@ -40,6 +44,11 @@
 
 }
 
+/*
+ * OPEN MODAL
+ */
+
+
 .close {
     background: #606061;
     color: #FFFFFF;

src/moplay/templates/index.html

@@ -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>