Descriptive header for each option (per #30 / #38)

conveyal · Oct 17, 2014 · 79e9229 · 79e9229
1 parent b94e214
commit 79e9229
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/client/options-view/option/index.js b/client/options-view/option/index.js
@@ -394,3 +394,28 @@ function ndescription(a, dir, dis, st) {
   return a + ' ' + dir + ' on ' + st + ' for ' + convert.metersToMiles(dis) +
     ' mi';
 }
+
+
+/**
+ * Get the option number for display purposes (1-based)
+ */
+
+View.prototype.optionNumber = function() {
+  return this.model.index + 1;
+};
+
+/**
+ * Construct a simple mode-based descriptor (e.g. "Drive to Transit")
+ */
+
+View.prototype.optionModes = function() {
+  var modeStr;
+
+  if(this.model.bikeDistance() > 0) modeStr = 'Bike';
+  else if(this.model.driveDistance() > 0) modeStr = 'Drive';
+  else modeStr = 'Walk';
+
+  if(this.model.hasTransit()) modeStr += ' to Transit';
+
+  return modeStr;
+};
diff --git a/client/options-view/option/style.css b/client/options-view/option/style.css
@@ -15,6 +15,14 @@
   border-radius: var(--border-radius);
 }
 
+.Options .header {
+  display: inline-block;
+  font-size: 18px;
+  text-transform: uppercase;
+  color: var(--gray);
+  padding: 10px 0 0 16px;
+}
+
 .Options .option:first-of-type {
   border-top-right-radius: 0;
 }

diff --git a/client/options-view/option/template.html b/client/options-view/option/template.html
@@ -1,4 +1,5 @@
 <li class="option">
+  <div class="header"><strong>Option {optionNumber}:</strong> {optionModes}</div>
   <div class="simple" on-click="showHide">
     <table class="segments"><tbody data-html="simpleSegments"></tbody></table>