Changed web tool input style

Author: stephenchouca

_includes/demo.html

@@ -27,21 +27,20 @@
     <p style="line-height: 100%">This is an prototype implementation of the sparse tensor algebra compiler theory and contains known bugs, which are documented <a href="https://github.com/tensor-compiler/taco/issues">here</a>. If you find additional issues, please consider submitting a bug report.</p>
     <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expression in index notation to generate code that computes it:</h6>
     <div class="input-bar">
-      <div class="mdl-textfield mdl-js-textfield expr-input">
-        <input id="txtExpr" class="mdl-textfield__input" value="y(i) = A(i,j) * x(j)" style="font-family: monospace" spellcheck="false" autocomplete="off" autocorrect="false" autocapitalize="false">
+      <div class="mdl-textfield expr-input">
+        <input id="txtExpr" class="input" value="y(i) = A(i,j) * x(j)" style="font-family: monospace" spellcheck="false" autocomplete="off" autocorrect="false" autocapitalize="false">
         <span id="lblError" class="mdl-textfield__error" style="font-size: 14px"></span>
         <label class="mdl-textfield__label"></label>
       </div>
       <div class="input-bar-misc">
-        <div style="float: left; margin-top: 16px">
+        <div style="float: left">
           <button id="btnExamples" class="mdl-button mdl-js-button mdl-button--icon">
             <i class="material-icons">more_vert</i>
           </button>
           <ul id="listExamples" class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" style="margin-top: 0em; margin-left: 0em" for="btnExamples"></ul>
         </div>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label prefix-input">
-          <input id="prefix" class="mdl-textfield__input" style="font-family: monospace" spellcheck="false" autocomplete="off" autocorrect="false" autocapitalize="false">
-          <label class="mdl-textfield__label">Prefix (Optional)</label>
+        <div class="mdl-textfield prefix-input">
+          <input id="prefix" class="input" placeholder="Prefix (Optional)" style="font-family: monospace" spellcheck="false" autocomplete="off" autocorrect="false" autocapitalize="false">
         </div>
         <button id="btnGetKernel" class="button is-primary demo-btn">Generate Kernel</button>
       </div>
@@ -188,4 +187,3 @@ <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expressi
 
 <script>demo()</script>
 
-<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/app.css">

assets/css/app.scss

@@ -3,8 +3,12 @@
 $primary: #FFD150;
 
 html {
-    -webkit-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
 }
 
 // Import Main CSS file from theme
 @import "main";
+
+.button.is-primary[disabled] {
+  border-color: $primary;
+}

javascripts/demo.js

@@ -276,13 +276,15 @@ function demo() {
         clearTimeout(txtExprView.timerEvent);
         txtExprView.errorMsg = model.output.error;
         $("#txtExpr").parent().addClass('is-invalid');
+        $("#txtExpr").addClass('is-danger');
       } else if (model.input.error.message !== "") {
         if (model.input.error.message !== txtExprView.errorMsg || 
             txtExprView.lastInput != currInput) {
           clearTimeout(txtExprView.timerEvent);
           txtExprView.errorMsg = model.input.error.message;
           var markError = function() { 
             $("#txtExpr").parent().addClass('is-invalid');
+            $("#txtExpr").addClass('is-danger');
             txtExprView.errorMsg = "";
           };
           txtExprView.timerEvent = setTimeout(markError, model.input.error.delay);
@@ -291,6 +293,7 @@ function demo() {
         clearTimeout(txtExprView.timerEvent);
         txtExprView.errorMsg = "";
         $("#txtExpr").parent().removeClass('is-invalid');
+        $("#txtExpr").removeClass('is-danger');
       }
       $("#lblError").html(txtExprView.errorMsg);
       txtExprView.lastInput = currInput;

stylesheets/style.css

@@ -161,16 +161,23 @@ h1, h2, h3, h4, h5, h6 {
 .input-bar-misc {
   display: flex;
   justify-content: space-between;
-  min-width: 400px;
+  min-width: 450px;
 }
 
 #btnExamples {
   margin-left: 8px;
   margin-right: 8px;
   margin-bottom: 20px;
+  margin-top: 25px;
 }
 
-@media (max-width: 825px) {
+.demo-btn {
+  margin-top: 20px;
+  width: 175px;
+  min-width: 175px;
+}
+
+@media (max-width: 900px) {
   .input-bar {
     flex-wrap: wrap;
   }
@@ -191,12 +198,18 @@ h1, h2, h3, h4, h5, h6 {
   #btnExamples {
     margin-left: 0px;
   }
-}
 
-.demo-btn {
-  margin-top: 16px;
-  width: 175px;
-  min-width: 175px;
+  .demo-btn {
+    margin-top: 15px;
+  }
+
+  .prefix-input {
+    padding-top: 15px;
+  }
+
+  #btnExamples {
+    margin-top: 20px;
+  }
 }
 
 .prefix-input {
@@ -222,7 +235,7 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-@media (max-width: 425px) {
+@media (max-width: 500px) {
   .prefix-input {
     display: none;
   }