Merge pull request #320 from CoderDojo/display-online-status

Display online status

Author: Glen Pike

src/dojos/cd-dojo-details.vue

@@ -19,6 +19,8 @@
           {{ address }}
           <a class="cd-dojo-details__google-maps-link" target="_blank" rel="noopener noreferrer" v-if="dojoDetails.geoPoint" :href="googleMapsLink">{{ $t('Open in Google Maps') }} <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
         </info-column-section>
+        <info-column-section v-if="dojoDetails.onlineSessions" class="cd-dojo-details__left-column-section" icon="laptop" :header="$t('Running Online')">
+        </info-column-section>
         <info-column-section class="hidden-xs" icon="envelope-o" :header="$t('Email')">
           <a :href="'mailto:' + dojoDetails.email">{{ dojoDetails.email }}</a>
         </info-column-section>

src/dojos/cd-dojo-list-item.vue

@@ -13,6 +13,7 @@
       </h4>
       <p class="cd-dojo-list-item__meta">{{dojo.address1}}</p>
       <p class="cd-dojo-list-item__meta">{{buildDojoFrequency(dojo)}}</p>
+      <p v-if="dojo.onlineSessions" class="cd-dojo-list-item__meta"><i class="fa fa-laptop" aria-hidden="true"></i>{{ $t('Running Online') }}</p>
       <event-stamp :dojo="dojo"></event-stamp>
     </div>
   </div>
@@ -67,6 +68,10 @@
       font-size: 16px;
       margin-bottom: 0;
     }
+
+    &__meta .fa {
+      margin-right: 8px;
+    }
   }
 
   @media (max-width: @screen-xs-max) {