Various formatting changes and fixes

Author: stephenchouca

_includes/demo.html

@@ -56,10 +56,10 @@ <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expressi
           <th class="mdl-data-table__cell--non-numeric" style="min-width: 70px; vertical-align: middle; padding-left: 9px">
             <div align="center" style="position:relative"><big>Tensor</big></div></th>
           <th class="mdl-data-table__cell--non-numeric" style="width: 100%; padding-left: 0px; vertical-align: middle; text-align: left">
-            <big>
+            <big id="formatHeading">
               Format
             </big>
-            <big id="levelHeading" style="padding-left: 158px">
+            <big class="optional-header" style="padding-left: 93px">
               (Level Formats)
             </big>
             <big>
@@ -132,7 +132,7 @@ <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expressi
           <th class="mdl-data-table__cell--non-numeric"></th>
           <th class="mdl-data-table__cell--non-numeric" style="padding-left: 0px; padding-right: 8px; vertical-align: middle; text-align: left">
             <big>
-              Scheduling Commands
+              Scheduling Command
             </big>
             <big>
               <button class="help-btn mdl-button mdl-js-button mdl-button--icon">
@@ -141,6 +141,9 @@ <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expressi
                 </a>
               </button>
             </big>
+            <big class="optional-header" style="padding-left: 26px">
+              Arguments
+            </big>
           </th>
         </tr>
       </thead>

assets/css/app.scss

@@ -0,0 +1,10 @@
+---
+---
+$primary: #FFD150;
+
+html {
+    -webkit-text-size-adjust: none;
+}
+
+// Import Main CSS file from theme
+@import "main";

javascripts/demo.js

@@ -425,7 +425,7 @@ function demo() {
             listTensorsBody += "style=\"padding: 0px; vertical-align: middle\">";
 
             listTensorsBody += "<div class=\"format-selector\">";
-            listTensorsBody += "<div class=\"dropdown\" style=\"margin-top: 6px; margin-bottom: 6px\">";
+            listTensorsBody += "<div class=\"dropdown format-dropdown\" style=\"margin-top: 6px; margin-bottom: 6px\">";
             listTensorsBody += "<div class=\"dropdown-trigger\">";
             listTensorsBody += "<button class=\"button has-text-spaced\" style=\"width: 190px\" ";
             listTensorsBody += "aria-haspopup=\"true\" aria-controls=\"dropdown-menu\">";
@@ -465,7 +465,7 @@ function demo() {
               listTensorsBody += "<label class=\"label\" style=\"cursor: move; margin-bottom: 0px\">";
               listTensorsBody += "<small>Dimension ";
               listTensorsBody += (dim + 1)
-              listTensorsBody += "</small></label><div class=\"dropdown\" data-val=\"";
+              listTensorsBody += "</small></label><div class=\"dropdown format-dropdown\" data-val=\"";
               listTensorsBody += level;
               listTensorsBody += "\" id=\"";
               listTensorsBody += selectId;
@@ -485,14 +485,14 @@ function demo() {
               listTensorsBody += "<a data-val=\"d\" class=\"dropdown-item\">Dense</a>";
               listTensorsBody += "<hr class=\"dropdown-divider\">";
               listTensorsBody += "<a data-val=\"s\" class=\"dropdown-item\">";
-              listTensorsBody += "Compressed (w/ Unique Elements)</a>";
+              listTensorsBody += "<div>Compressed</div><div>(w/ Unique Elements)</div></a>";
               listTensorsBody += "<a data-val=\"u\" class=\"dropdown-item\">";
-              listTensorsBody += "Compressed (w/ Duplicate Elements)</a>";
+              listTensorsBody += "<div>Compressed</div><div>(w/ Duplicate Elements)</div></a>";
               listTensorsBody += "<hr class=\"dropdown-divider\">";
               listTensorsBody += "<a data-val=\"q\" class=\"dropdown-item\">";
-              listTensorsBody += "Singleton (w/ Unique Elements)</a>";
+              listTensorsBody += "<div>Singleton</div><div>(w/ Unique Elements)</div></a>";
               listTensorsBody += "<a data-val=\"c\" class=\"dropdown-item\">";
-              listTensorsBody += "Singleton (w/ Duplicate Elements)</a>";
+              listTensorsBody += "<div>Singleton</div><div>(w/ Duplicate Elements)</div></a>";
               listTensorsBody += "</div></div></div></div></li>";
             }
 
@@ -588,12 +588,12 @@ function demo() {
             dropdown.removeClass('is-active');
           });
 
-          $(".dropdown .button").click(function() {
+          $(".format-dropdown .button").click(function() {
             var dropdown = $(this).parents('.dropdown');
             dropdown.toggleClass('is-active');
           });
 
-          $(".dropdown .button").each(function() {
+          $(".format-dropdown .button").each(function() {
             var dropdown = $(this).parents('.dropdown');
             document.addEventListener("click", function(ev) {
               if (!dropdown[0].contains(ev.target)) {
@@ -1202,14 +1202,26 @@ function demo() {
   for (var e in examples) {
     listExamplesBody += "<li id=\"example_";
     listExamplesBody += e;
-    listExamplesBody += "\" class=\"mdl-menu__item\">";
+    listExamplesBody += "\" class=\"mdl-menu__item\"><div class=\"short-name\">";
+    listExamplesBody += examples[e].name;
+    listExamplesBody += "</div><div class=\"long-name\">";
     listExamplesBody += examples[e].name;
     listExamplesBody += ":&nbsp; <code style=\"background-color: transparent\">";
     listExamplesBody += examples[e].code;
-    listExamplesBody += "</code></li>";
+    listExamplesBody += "</code></div></li>";
   }
   $("#listExamples").html(listExamplesBody);
 
+  $("#btnExamples").click(function() {
+    if ($(window).width() > 480) {
+      $("#listExamples .long-name").css("display", "block");
+      $("#listExamples .short-name").css("display", "none");
+    } else {
+      $("#listExamples .long-name").css("display", "none");
+      $("#listExamples .short-name").css("display", "block");
+    }
+  });
+
   var getURLParam = function(k) {
     var url = window.location.search.substring(1);
     var params = url.split('&');

stylesheets/style.css

@@ -92,10 +92,22 @@ h1, h2, h3, h4, h5, h6 {
   padding-right: 28px;
 }
 
-#levelHeading {
+.format-selector .dropdown-menu {
+  min-width: 190px;
+}
+
+.schedule-dropdown .dropdown-menu {
+  min-width: 200px;
+}
+
+.optional-header {
   display: inline;
 }
 
+#formatHeading {
+  padding-left: 65px;
+}
+
 @media (max-width: 580px) {
   .format-selector {
     flex-wrap: wrap;
@@ -109,9 +121,13 @@ h1, h2, h3, h4, h5, h6 {
     padding-right: 50px;
   }
 
-  #levelHeading {
+  .optional-header {
     display: none;
   }
+
+  #formatHeading {
+    padding-left: 55px; 
+  }
 }
 
 @media (max-width: 480px) {
@@ -215,3 +231,11 @@ h1, h2, h3, h4, h5, h6 {
     width: 100%;
   }
 }
+
+.level-formats .dropdown-item {
+  padding-right: 16px;
+}
+
+#listExamples .long-name {
+  display: none;
+}