Use modal for event details

_includes/modals.html

@@ -17,21 +17,22 @@ <h2>{{ post.title }}</h2>
                             {% if post.img %}
                               <img src="img/portfolio/{{ post.img }}" class="img-responsive img-centered" alt="{{ post.alt }}">
                             {% endif %}
-                            <p>{{ post.description }}</p>
+                            <p>{{ post.text }}</p>
                             <ul class="list-inline item-details">
-                                <li>Client:
-                                    <strong><a href="http://startbootstrap.com">{{ post.client }}</a>
+                                <li>Location:
+                                    <strong>{{ post.location }}</a>
                                     </strong>
                                 </li>
                                 <li>Date:
-                                    <strong><a href="http://startbootstrap.com">{{ post.project-date }}</a>
+                                    <strong><a href="http://startbootstrap.com">{{ post.date | date: "%-d %B %Y"}}</a>
                                     </strong>
                                 </li>
-                                <li>Service:
-                                    <strong><a href="http://startbootstrap.com">{{ post.category }}</a>
+                                <li>Time:
+                                    <strong><a href="http://startbootstrap.com">{{post.startTime | date:"%r"}}</a>
                                     </strong>
                                 </li>
                             </ul>
+                            {{ post.content }}
                             <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                         </div>
                     </div>

_includes/portfolio_grid.html

@@ -21,8 +21,8 @@ <h3 class="section-subheading text-muted">{{site.data[site.language].eventsSubhe
                   {% if postyear > nowyear or postday >= nowday and postyear >= nowyear %}
                     {% assign isEvent = 1 %}
                     <li>
-                      <a class='eventTitle' href="{{ post.link }}">{{ post.title }}, {{ post.location }}, {{ post.date | date: "%-d %B %Y"}}, {{post.startTime | date:"%r"}} </a>
-                      <div class='eventSub'><a href="https://mozillascience.github.io/study-group-orientation/3.4-add-event.html">{{ post.text }}</a></div>
+                       <a class='eventTitle' href="#portfolioModal{{ post.modal-id }}" class="portfolio-link" data-toggle="modal">{{ post.title }}, {{ post.location }}, {{ post.date | date: "%-d %B %Y"}}, {{post.startTime | date:"%r"}} </a>
+                      <div class='eventSub'>{{ post.text }}</div>
                     </li>
                   {% endif %}
                 {% endfor %}
@@ -59,7 +59,7 @@ <h3 class="section-subheading text-muted">{{site.data[site.language].eventsSubhe
                           {% assign nowday = nowday | minus: 2 %}
                           {% if postyear < nowyear or postday < nowday and postyear == nowyear %}
                             <li>
-                              <a class='eventTitle' href="{{ post.link }}">{{ post.title }}, {{ post.location }}, {{ post.date | date: "%-d %B %Y"}}, {{post.startTime | date:"%r"}} </a>
+                              <a class='eventTitle' href="#portfolioModal{{ post.modal-id }}" class="portfolio-link" data-toggle="modal">{{ post.title }}, {{ post.location }}, {{ post.date | date: "%-d %B %Y"}}, {{post.startTime | date:"%r"}} </a>
                               <div class='eventSub'>{{ post.text }}</div>
                             </li>
                           {% endif %}

_layouts/default.html

@@ -12,6 +12,7 @@
     {% include contact.html %}
     {% include team.html %}
     {% include footer.html %}
+    {% include modals.html %}
     {% include js.html %}
 
     </body>

_posts/1977-01-01-myEvent.markdown

@@ -1,10 +1,10 @@
 ---
 title: Make Your First Event
+modal-id: 2
 text: In order to make your first event, follow the instructions here.
 location: Your Location
 link: https://github.com/mozillascience/studyGroup#how-to-set-up-your-own-mozilla-study-group-website
 date: 1977-01-01
 startTime: '20:00'
 endTime: '21:00'
-
 ---

_posts/2077-01-01-myEvent.markdown

@@ -1,10 +1,12 @@
 ---
 title: Make Your First Event
+modal-id: 1
 text: In order to make your first event, follow the instructions here.
 location: Your Location
 link: https://github.com/mozillascience/studyGroup#how-to-launch-a-new-event
 date: 2077-01-01
 startTime: '20:00'
 endTime: '21:00'
-
 ---
+
+Give more details on the event here