From b52c834a2c75a7cd0b5cbee262e7ed33491fa246 Mon Sep 17 00:00:00 2001
From: "John L. Villalovos" <john.l.villalovos@intel.com>
Date: Thu, 19 May 2016 17:05:57 -0700
Subject: [PATCH] Make sorting consistent on smaller devices

Unfortunately using the batch_meetings() function causes the content
to become unsorted on smaller devices. This could be seen on phones or
if making the windows size small on a desktop browser.

Instead of using batch_meetings() use the column-count CSS property.
This allows the index list to switch from 1 to 4 columns based on the page
width

Change-Id: Iebae34488412cc35ca3c9f38a43897d30d20d8db
---
 meetingindex.jinja | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/meetingindex.jinja b/meetingindex.jinja
index a2e15df1..2431fb5e 100644
--- a/meetingindex.jinja
+++ b/meetingindex.jinja
@@ -7,6 +7,20 @@
 <style>
 h2,h3 {margin-top: 30px;}
 .masterheader {position:relative;padding:15px 30px;color:white;background-color:#760000;}
+.meeting_index ul { height: auto; width:100%; }
+.meeting_index ul li { display: block; }
+@media(min-width: 480px){
+  .meeting_index ul{-webkit-column-count:1;-moz-column-count:1;column-count:1;}
+}
+@media(min-width: 768px){
+  .meeting_index ul{-webkit-column-count:2;-moz-column-count:2;column-count:2;}
+}
+@media(min-width: 992px){
+  .meeting_index ul{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
+}
+@media(min-width: 1150px){
+  .meeting_index ul{-webkit-column-count:4;-moz-column-count:4;column-count:4;}
+}
 </style>
 <title>OpenStack IRC meetings</title>
 </head>
@@ -33,16 +47,12 @@ use in your favorite calendaring app:</p>
 </div>
  <h2>Meeting details</h2>
   <small>
-  <div class="container-fluid">
-  {% for column in batch_meetings(meetings, 4)|batch(4) %}
-   <div class="row">
-   {% for meeting in column %}
-    <div class="col-md-3 col-xs-6">
-     <a href="#{{ meeting.project|replace(' ', '_') }}">{{ meeting.project }}</a>
-    </div>
-   {% endfor %}
-   </div>
+  <div class="meeting_index">
+  <ul>
+  {% for meeting in meetings|sort(attribute='project') %}
+    <li><a href="#{{ meeting.project|replace(' ', '_') }}">{{ meeting.project }}</a></li>
   {% endfor %}
+  </ul>
   </div>
   </small>