#2 Have nearby items display a page

Nearby will now open on a page when clicked on
Moved templates to a template file
Using Yahoo fujicons instead of material icons

fonts/fujicons.css

@@ -0,0 +1,205 @@
+@font-face {
+    font-family: 'Fujicons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(fujicons.ttf) format('truetype');
+    unicode-range: U+0-10FFFF;
+}
+
+
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 Fujicons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
+.fa-fw {
+  width: 1.28571429em;
+  text-align: center;
+}
+.fa-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.fa-ul > li {
+  position: relative;
+}
+.fa-li {
+  position: absolute;
+  left: -2.14285714em;
+  width: 2.14285714em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.fa-li.fa-lg {
+  left: -1.85714286em;
+}
+.fa-border {
+  padding: .2em .25em .15em;
+  border: solid 0.08em #eeeeee;
+  border-radius: .1em;
+}
+.fa-pull-left {
+  float: left;
+}
+.fa-pull-right {
+  float: right;
+}
+.fa.fa-pull-left {
+  margin-right: .3em;
+}
+.fa.fa-pull-right {
+  margin-left: .3em;
+}
+/* Deprecated as of 4.4.0 */
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+.fa.pull-left {
+  margin-right: .3em;
+}
+.fa.pull-right {
+  margin-left: .3em;
+}
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+.fa-rotate-90 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.fa-rotate-180 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.fa-rotate-270 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
+  -webkit-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+  filter: none;
+}
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-1x {
+  line-height: inherit;
+}
+.fa-stack-2x {
+  font-size: 2em;
+}
+.fa-inverse {
+  color: #ffffff;
+}
+
+
+.fa-back:before {
+  content: "";
+}
+
+.fa-forward:before {
+  content: "";
+}
+
+.fa-globe:before {
+  content: "\EA12"
+}
+
+.fa-up:before {
+  content: "\E925"
+}
+
+.fa-down:before {
+  content: "\E922"
+}
+
+.fa-work:before {
+  content: "\E998"
+}
+
+.fa-home:before {
+  content: "\EA1E"
+}

gulp/build.js

@@ -70,3 +70,9 @@ gulp.task('gotham', function() {
   gulp.src(['fonts/gotham.css']).pipe(gulp.dest('live/fonts'));
   gulp.src(['fonts/GothamSSm-Black.otf', 'fonts/GothamSSm-Bold.otf', 'fonts/GothamSSm-Book.otf', 'fonts/GothamSSm-Light.otf', 'fonts/GothamSSm-Medium.otf']).pipe(gulp.dest('live/fonts'));
 });
+
+
+gulp.task('fujicons', function() {
+  gulp.src(['fonts/fujicons.css']).pipe(gulp.dest('live/fonts'));
+  gulp.src(['fonts/fujicons.ttf']).pipe(gulp.dest('live/fonts'));
+});

gulpfile.js

@@ -4,4 +4,4 @@ const requireDir = require('require-dir');
 
 requireDir('./gulp');
 
-gulp.task('default', ['bundleBackbone', 'styles', 'copy', 'customMUI', 'vendor', 'fonts', 'gotham']);
+gulp.task('default', ['bundleBackbone', 'styles', 'copy', 'customMUI', 'vendor', 'fonts', 'gotham', 'fujicons']);

package-lock.json

@@ -52,7 +52,7 @@
     },
     "@sinonjs/formatio": {
       "version": "2.0.0",
-      "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
       "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
       "dev": true,
       "requires": {

server.js

@@ -110,7 +110,7 @@ app.get('/rightbyme', cache('15 minutes'), (req, res) => {
   }
 });
 
-app.get('/nearbydetail', cache('15 minutes'), (req, res) => {
+app.get('/nearbydetail'/*, cache('15 minutes')*/, (req, res) => {
   if (req.query.hasOwnProperty('id'))
     rightbyme.doGetMoreDetail(req.query.id)
       .then((d) => {

server/RightByMe.js

@@ -103,7 +103,7 @@ function doYelpSearch(data = {}) {
       yelpSearch.latitude = payLoad.latitude;
       yelpSearch.longitude = payLoad.longitude;
 
-      // yelpSearch.radius = 250;
+      yelpSearch.radius = 250;
       yelpSearch.sort_by = 'distance';
       logger.debug(yelpSearch);
       client.search(yelpSearch).then(response => {

src/service-worker.js

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const CACHE_VERSION = { 'version': '0.0.483' };
+const CACHE_VERSION = { 'version': '0.0.538' };
 const dataCacheName = 'jubileeData-v1';
 const cacheName = 'jubilee-final-1';
 const filesToCache = [

src/v1/index.html

@@ -7,8 +7,8 @@
     <title>Jubilee</title>
 
     <link href="//cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css" rel="stylesheet" type="text/css"/>
-    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css"/>
+    <link href="/fonts/fujicons.css" rel="stylesheet" type="text/css"/>
     <link href="/css/mui.custom.css" rel="stylesheet" type="text/css"/>
 
     <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
@@ -31,8 +31,8 @@
         <div id="location" class="mui-row" style="display: none;"></div>
     </div>
     <div class="mui-container" id="connectionStatus" style="display:none;">
-        <div class="mui--text-center"><i class="large material-icons mui--align-middle  mui--text-center"
-                                         style="color:grey;">new_releases</i></div>
+        <div class="mui--text-center"><i class="large fa fa-globe mui--align-middle  mui--text-center"
+                                         style="color:grey;"></i></div>
         <div class="mui--text-body1 mui--text-center">No internet connection</div>
     </div>
     <div class="mui-container" id="viewFrame">
@@ -64,7 +64,7 @@
             <div class="mui--text-title cardTitle">Latest news</div>
             <div id="news" class="scrolling-wrapper-flexbox"></div>
             <div id='newsMore' class="cardLink">
-                <i class="seemore material-icons mui--align-middle " >arrow_forward</i> <span class="seemore mui--align-middle">More news</span>
+                <i class="seemore fa fa-forward mui--align-middle " ></i> <span class="seemore mui--align-middle">More news</span>
             </div>
         </div>
 

src/v1/js/Forecast.js

@@ -62,8 +62,8 @@ const ForecastView = Backbone.View.extend({
   <div class="forecastCurrently mui-panel glassy">
         <div class="mui--text-title"><i class="medium wi wi-forecast-io-<%= icon %>"></i> <%=summary%></div>
         <div>
-        <i class="small material-icons mui--align-middle " >vertical_align_top</i><%=tempMax%>°
-        <i class="small material-icons mui--align-middle " >vertical_align_bottom</i><%=tempMin%>°
+        <i class="small fa fa-up mui--align-middle " ></i><%=tempMax%>°
+        <i class="small fa fa-down mui--align-middle " ></i><%=tempMin%>°
         </div>
         <div class="large temp<%=~~(temperature) %>"><%=temperature%>°</div>
   </div>
@@ -186,7 +186,7 @@ const ForecastView = Backbone.View.extend({
     const currently = this.model.get('currently');
     const forcastToday = { 'today':this.model.get('forcastToday'), 'daily':this.model.get('dailyForecast') };
     const details = this.model.get('details');
-html.push('<div class="mui-container">');
+html.push('<div class="">');
     html.push(this.templateCurrently(currently));
     html.push(this.templateForecast(forcastToday));
     html.push(this.templateDetails(details));

src/v1/js/Nearby.js

@@ -25,7 +25,7 @@ const fsItemView = Backbone.View.extend({
   'tagName': 'div',
   'className': 'itemRow mui--align-middle',
   'template': _.template(`
-<span class="mui--text-dark mui--text-subhead"><%= name %></span> <span class="mui--text-caption mui--text-dark-secondary"><%= category %></span>      `),
+<img class='mui--align-middle' src="<%= icon %>" width="32px" height="32px" style="-webkit-filter: invert(100%);"/><span class="mui--text-dark mui--text-subhead"><%= name %></span> <span class="mui--text-caption mui--text-dark-secondary"><%= category %></span>      `),
   'initialize': function() {
     this.render();
   },
@@ -36,6 +36,7 @@ const fsItemView = Backbone.View.extend({
   },
 
   'render': function() {
+    console.log(this.model.attributes);
     this.$el.html(this.template(this.model.toJSON()));
   }
 });
@@ -136,7 +137,7 @@ const NearbyView = Backbone.View.extend({
     this.fsCollection.bind('reset', this.render, this);
     this.eventBus.on('focused', this.focused, this);
 
-    this.other = $('<div id="nearbyOther" class="cardLink"><i class="seemore material-icons mui--align-middle " >arrow_forward</i> <span class="seemore mui--align-middle">Other locations</span></div>');
+    this.other = $('<div id="nearbyOther" class="cardLink"><i class="seemore fa fa-forward mui--align-middle " ></i> <span class="seemore mui--align-middle">Other locations</span></div>');
   },
   'events': {
     'click .itemRow': 'doClick'
@@ -176,7 +177,7 @@ const NearbyView = Backbone.View.extend({
     console.log('Do click', d);
     const id = get(d, 'currentTarget.dataset.id', '');
     console.log(id);
-
+    this.eventBus.trigger('showVenueDetail', id);
     const fsdetail = new FSDetailView({ 'fsID':id });
   }, 'focused': function() {
     console.log('>> Nearby received focus msg');

src/v1/js/News.js

@@ -108,7 +108,7 @@ const NewsView = Backbone.View.extend({
     <div class="mui--text-title cardTitle">Latest news</div>
                 <div id="news" class="scrolling-wrapper-flexbox"></div>
                 <div id='newsMore' class="cardLink">
-                    <i class="seemore material-icons mui--align-middle " >arrow_forward</i> <span class="seemore mui--align-middle">More news</span>
+                    <i class="seemore fa fa-forward mui--align-middle " ></i> <span class="seemore mui--align-middle">More news</span>
                 </div>
     `),
 

src/v1/js/NewsList.js

@@ -18,7 +18,7 @@ const newsCollection = new NewsCollection();
 
 const NewsItemView = Backbone.View.extend({
   'tagName': 'div',
-  'className' : 'newsItem mui-container',
+  'className' : 'newsItem',
   'template': _.template(`
     
     <div class="mui--text-subhead mui--text-accent"><%=title%></div>

src/v1/js/RightByMe.js

@@ -4,6 +4,7 @@ const Backbone = require('backbone');
 const request = require('request');
 const { get, isEmpty } = require('lodash');
 const { maybePluralize } = require('./libs/utils');
+const templates = require('./libs/templates');
 
 const ByMeModel = Backbone.Model.extend({
   'initialize': function() {
@@ -77,53 +78,7 @@ const ByMeView = Backbone.View.extend({
   'id':'byme',
   'className': '',
   'template': _.template('<div></div>'),
-  'yelpTemplate': _.template(`<div id="bymeYelp" class="itemRow">
-<div class="mui-col-md-4 mui-col-xs-4">
-<img src="gfx/stars_<%= yelp.rating * 10 %>.png">
-</div>
-<div class="mui-col-md-4 mui-col-xs-4 mui--text-center">
-<%= yelp.reviewCount %> review
-</div>
-<div class="mui-col-md-4 mui-col-xs-4 mui--text-right">
-<img src="gfx/yssdk_yelp_logo.png">
-</div>
-</div>
-  `),
-  'tipsTemplate': _.template(`
-  <div id='bymeTips'>
-  <div class="mui--text-body2">Tips</div>
-  <div  class='scrolling-wrapper-flexbox' style="height: 100px;">
-      <%_.forEach(tips, function(i) {%>
-      <div class="scrollCardHalf mui--text-body1">
-              <%=i %>
-          </div>
-      <%}) %>
-    </div>
-  </div>  
-  `),
-  'imagesTemplate': _.template(`
-    <div id='bymeImages'>
-    <div  class='scrolling-wrapper-flexbox' style="height: 100%;">
-        <%_.forEach(images, function(i) {%>
-        <div class="imageCard">
-        <img src="<%=i %>" class="scrollImg">
-        </div>
-        <%}) %>
-      </div>
-    </div>  
-    `),
-  'tweetsTemplate': _.template(`
-    <div id='bymeTweets'>
-    <div class="mui--text-body2">Tweets</div>
-    <div  class='scrolling-wrapper-flexbox' style="height: 100px;">
-        <%_.forEach(tweets, function(i) {%>
-        <div class="scrollCardHalf mui--text-body1">
-                <%=i %>
-            </div>
-        <%}) %>
-      </div>
-    </div>  
-    `),
+
   'initialize': function(options) {
     this.eventBus = options.eventBus;
     this.location = options.location;
@@ -169,16 +124,16 @@ const ByMeView = Backbone.View.extend({
     // this.imagesTemplate(this.model.toJSON()), this.yelpTemplate(this.model.toJSON()), this.tipsTemplate(this.model.toJSON())
 
     if (!isEmpty(m.images))
-      contents.push(this.imagesTemplate(m));
+      contents.push(templates.imagesTemplate(m));
 
     if (!isEmpty(m.yelp))
-      contents.push(this.yelpTemplate(m));
+      contents.push(templates.yelpTemplate(m));
 
     if (!isEmpty(m.tips))
-      contents.push(this.tipsTemplate(m));
+      contents.push(templates.tipsTemplate(m));
 
     if (!isEmpty(m.tweets))
-      contents.push(this.tweetsTemplate(m));
+      contents.push(templates.tweetsTemplate(m));
 
     this.$el.html(contents.join(''));
     // console.log(this.el);

src/v1/js/Traffic.js

@@ -37,9 +37,9 @@ const TrafficModel = Backbone.Model.extend({
     console.log('((hour >= 7) && (hour <= 9))', ((hour >= 7) && (hour <= 9)));
     console.log('((hour >= 17) && (hour <= 19))', ((hour >= 17) && (hour <= 19)));
     let delay;
-    if (day === 0 || day === 6) 
+    if (day === 0 || day === 6)
       delay = toHour();
-    else 
+    else
       delay = ( ((hour >= 7) && (hour <= 9)) || ((hour >= 17) && (hour <= 19)) ) ? 600000 : toHour();
 
     console.log('Delay', delay);
@@ -141,7 +141,7 @@ const TrafficView = Backbone.View.extend({
   },
   'template': _.template(`
     <div class="">
-    <div><i class="small material-icons mui--align-middle "><%= dest.toLowerCase() %></i> <%=readable%> to <%= dest.toLowerCase() %></div>
+    <div><i class="small fa <%= "fa-" + dest.toLowerCase() %> mui--align-middle "></i> <%=readable%> to <%= dest.toLowerCase() %></div>
     <div class="<%= className %>"><%=traffic %></div>  
     
     </div>

src/v1/js/VenueDetail.js

@@ -0,0 +1,106 @@
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+const request = require('request');
+const { get, isEmpty } = require('lodash');
+const { createPanel, addPanel } = require('./libs/panel');
+
+const templates = require('./libs/templates');
+
+const VenueDetailModel = Backbone.Model.extend({
+  'initialize': function() {
+    this.listenTo(this, 'change:id', this.newId);
+  },
+  'newId': function() {
+    console.log('>> ID changed:', this.get('id'));
+    this.getVenue();
+  },
+  'getVenue': function() {
+    const id = this.get('id');
+    request({
+      'url': `${window.loc}/nearbydetail`,
+      'method': 'GET',
+      'qs': {
+        'id': id
+      }
+    }, function(err, res, body) {
+      console.log('statusCode', res.statusCode);
+      if (err)
+        console.error(err);
+      else{
+        // console.log(body);
+        const fsJSON = JSON.parse(body);
+        // console.log(fsJSON);
+
+        this.set('details', fsJSON);
+        //    console.log(body);
+      }
+    }.bind(this));
+  }
+
+});
+
+const VenueDetailView = Backbone.View.extend({
+  'initialize': function(options) {
+    this.eventBus = options.eventBus;
+
+    this.model.bind('change:details', this.doRender, this);
+    this.eventBus.on('showVenueDetail', this.showNewsPanel, this);
+  },
+
+  'showNewsPanel': function(id) {
+    console.log('Showing venue details', id);
+    const prevId = this.model.get('id');
+
+    this.model.set('id', id);
+
+    this.$newPanel = createPanel({ 'title':'Venue details', 'divId':'VenueDetail' });
+
+    this.$el = addPanel(this.$newPanel);
+
+    this.$el.empty();
+    this.$newPanel.show();
+
+    if (prevId === id)
+      this.doRender();
+  },
+  'events': {
+    'click .closebutton': 'doClick'
+  },
+  'doClick': function(d) {
+    console.log('Do click', d);
+    const id = get(d, 'currentTarget', '');
+    console.log(id);
+    // this.eventBus.trigger('showNews', id);
+  },
+  'doClose': function(d) {
+    console.log('close??');
+  },
+  'doRender': function() {
+    const contents = [];
+    const m = this.model.get('details');
+    // this.imagesTemplate(this.model.toJSON()), this.yelpTemplate(this.model.toJSON()), this.tipsTemplate(this.model.toJSON())
+
+    contents.push(templates.venueTitle(m));
+
+    if (!isEmpty(m.images))
+      contents.push(templates.imagesTemplate(m));
+
+    if (!isEmpty(m.yelp))
+      contents.push(templates.yelpTemplate(m));
+
+    if (!isEmpty(m.tips))
+      contents.push(templates.tipsTemplate(m));
+
+    if (!isEmpty(m.tweets))
+      contents.push(templates.tweetsTemplate(m));
+
+    contents.push(templates.openInFS(m));
+    this.$el.html(contents.join(''));
+
+  }
+
+});
+
+module.exports = { VenueDetailModel, VenueDetailView };
+

src/v1/js/Weather.js

@@ -40,7 +40,7 @@ const weatherItemView = Backbone.View.extend({
           For <%=city%> to <%= readdate %>
         </div>
         <div id='wForecast' class="cardLink">
-        <i class="seemore material-icons mui--align-middle " >arrow_forward</i> <span class="seemore mui--align-middle">See forecast</span>
+        <i class="seemore fa fa-forward mui--align-middle " ></i> <span class="seemore mui--align-middle">See forecast</span>
         </div>
         `),
   'initialize': function() {
@@ -201,7 +201,7 @@ const WeatherView = Backbone.View.extend({
     console.log('>> Weather received focus msg');
     if (!this.model.has('log')) {
       console.log('No log yet');
-      
+
       return ;
     }
     const now = new Date().getTime();

src/v1/js/app.js

@@ -14,6 +14,7 @@ const { NewsModel, NewsView } = require('./News');
 const { NewsCardModel, NewsCardView } = require('./NewsViewer');
 const { NewsListModel, NewsListView } = require('./NewsList');
 const { ByMeModel, ByMeView } = require('./RightByMe');
+const { VenueDetailModel, VenueDetailView } = require('./VenueDetail');
 const { AgendaModel, AgendaView } = require('./Agenda');
 const { TrafficModel, TrafficView } = require('./Traffic');
 var app = app || {};
@@ -60,7 +61,7 @@ else
 
   app.newsCard = new NewsCardView({ 'model': new NewsCardModel(), 'eventBus': app.eventBus });
 
-  app.newsList = new NewsListView({'model': new NewsListModel(), 'eventBus' : app.eventBus});
+  app.newsList = new NewsListView({ 'model': new NewsListModel(), 'eventBus' : app.eventBus });
 
   app.news = new NewsView({ 'model': new NewsModel(), 'eventBus': app.eventBus, 'el':'#newsShell' });
 
@@ -70,6 +71,8 @@ else
 
   app.traffic = new TrafficView({ 'model': new TrafficModel(), 'eventBus': app.eventBus, 'location': app.locationModel, 'el':'#traffic' });
 
+  app.newsCard = new VenueDetailView({ 'model': new VenueDetailModel(), 'eventBus': app.eventBus });
+
   app.updateOnlineStatus = function(event) {
     if (navigator.onLine)
     // handle online status

src/v1/js/libs/panel.js

@@ -10,7 +10,7 @@ function createPanel(params) {
       <div class="mui-appbar mui--appbar-line-height mui--z1" style="vertical-align:middle;">
            <span>
             <button class="mui-btn mui-btn--large mui-btn--primary mui-btn--flat closebutton" id="close_${divId}">
-                <i class="small material-icons mui--align-middle" style="color:black;">arrow_back</i>
+                <i class="small fa fa-back mui--align-middle" style="color:black;"></i>
             </button>
         
         </span>
@@ -22,7 +22,7 @@ function createPanel(params) {
     
   <div class="box">
   
-    <div class="content" id="${divId}"></div>
+    <div class="content mui-panel" id="${divId}"></div>
   </div>
    
  <!-- end fullscreen-->   

src/v1/js/libs/reducers.js

@@ -88,7 +88,7 @@ const reduceNearby = function(item) {
   obj.id = get(item, 'venue.id', '');
   obj.name = get(item, 'venue.name', '');
   obj.category = get(categories[0], 'name', '');
-  obj.icon = `${get(categories[0], 'icon.prefix', '')}${get(categories[0], 'icon.suffix', '')}`;
+  obj.icon = `${get(categories[0], 'icon.prefix', '')}32${get(categories[0], 'icon.suffix', '')}`;
 
   return obj;
 };

src/v1/js/libs/templates.js

@@ -0,0 +1,67 @@
+const _ = require('underscore');
+
+const templates = {
+
+  'empty': _.template('<div></div>'),
+  'yelpTemplate': _.template(`<div id="bymeYelp" class="itemRow">
+<div class="mui-col-md-4 mui-col-xs-4">
+<img src="gfx/stars_<%= yelp.rating * 10 %>.png">
+</div>
+<div class="mui-col-md-4 mui-col-xs-4 mui--text-center">
+<%= yelp.reviewCount %> review
+</div>
+<div class="mui-col-md-4 mui-col-xs-4 mui--text-right">
+<img src="gfx/yssdk_yelp_logo.png">
+</div>
+</div>
+  `),
+  'tipsTemplate': _.template(`
+  <div id='bymeTips'>
+  <div class="mui-row">
+          <div class="mui-col-xs-10 mui--text-body2">Tips</div>
+          <div class="mui-col-xs-1" style="font-family:fujicons;"></div>
+         </div>
+  <div  class='scrolling-wrapper-flexbox' style="height: 100px;">
+      <%_.forEach(tips, function(i) {%>
+      <div class="scrollCardHalf mui--text-body1">
+              <%=i %>
+          </div>
+      <%}) %>
+    </div>
+  </div>  
+  `),
+  'imagesTemplate': _.template(`
+    <div id='bymeImages'>
+    <div  class='scrolling-wrapper-flexbox' style="height: 100%;">
+        <%_.forEach(images, function(i) {%>
+        <div class="imageCard">
+        <img src="<%=i %>" class="scrollImg">
+        </div>
+        <%}) %>
+      </div>
+    </div>  
+    `),
+  'tweetsTemplate': _.template(`
+    <div id='bymeTweets'>
+    <div class="mui-row">
+        <div class="mui-col-xs-10 mui--text-body2">Tweets</div>
+        <div class="mui-col-xs-1" style="font-family:fujicons;"></div>
+       </div>
+    <div  class='scrolling-wrapper-flexbox' style="height: 100px;">
+        <%_.forEach(tweets, function(i) {%>
+        <div class="scrollCardHalf mui--text-body1">
+                <%=i %>
+            </div>
+        <%}) %>
+      </div>
+    </div>  
+    `),
+  'venueTitle' : _.template(`
+  <div class="mui--text-display1 mui--text-center" style="font-weight: 900;"><%=name %></div>
+  `),
+    'openInFS' : _.template(`
+    <div class=""><a href="https://m.foursquare.com/v/<%=id%>">Open in Foursquare</a></div>
+    `)
+};
+
+module.exports = templates;