Add Meetup video and slide links (#40)

Author: mctaylorpants

css/vanruby.css

@@ -19,10 +19,20 @@ body {
 
 .meetup-date {
   color: #9c9c9c;
+  min-width: 8em;
+  vertical-align: top;
 }
 
-.meetup-date-md {
-  display: inline-block;
-  width: 8em;
+.meetup-details {
+  border-top: 2px solid #efefef;
 }
 
+.meetup-row {
+  border-bottom: 15px solid transparent;
+}
+
+@media (max-width: 768px) {
+  .xs-block {
+    display: block;
+  }
+}

js/application.js

@@ -14,5 +14,11 @@
 
   $("a[data-toggle='tooltip']").tooltip();
 
+  $("a[data-expand]").click(function() {
+    var target = $(this).attr('data-expand')
+    var $target = $(target);
+    $target.toggleClass('hide');
+  });
+
 
 })(jQuery);

meetups.html

@@ -10,19 +10,40 @@ <h2>Meetups</h2>
 
 <hr />
 
-{% for meetup in meetups %}
-<div class="row meetups">
-  <div class="col-xs-12 visible-xs meetup-date">
-    <small>{{ meetup.date | date: '%b %d, %Y' }}</small>
-  </div>
-  <div class="col-xs-12" style="margin-bottom: 20px">
-    <h4>
-      <small class="hidden-xs meetup-date-md">{{ meetup.date | date: '%b %d, %Y' }}</small>
-      <a href="{{ meetup.url }}">
-        {{ meetup.name }}
-      </a>
-    </h4>
-  </div>
-</div>
-{% endfor %}
+<table class"table hover">
+  <tbody>
+    {% for meetup in meetups %}
+      {% assign num_slides = meetup.slides | size %}
+      {% assign num_videos = meetup.videos | size %}
+
+      <tr class="meetup-row">
+        <td class="meetup-date xs-block">{{ meetup.date | date: '%b %d, %Y' }}</td>
+        <td class="xs-block">
+          {% if num_slides > 0 or num_videos > 0 %}
+            <a href="javascript:void(0)" data-expand="#meetup-details-{{ forloop.index }}">
+              {{ meetup.name }}
+            </a>
+            <div id="meetup-details-{{ forloop.index }}" class="js-meetup-details meetup-details hide">
+              <ul>
+                <li><a href="{{ meetup.url }}" target="_blank">Event on Meetup.com</a></li>
+                {% for video in meetup.videos %}
+                  <li><a href="{{ video }}" target="_blank">Video</a></li>
+                {% endfor %}
+
+                {% for slide in meetup.slides %}
+                  <li><a href="{{ slide }}" target="_blank">Slides</a></li>
+                {% endfor %}
+              </ul>
+              </p>
+            </div>
+          {% else %}
+            <a href="{{ meetup.url }}">
+              {{ meetup.name }}
+            </a>
+          {% endif %}
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>