opendev/irc-meetings
Code Issues Proposed changes

Make sorting consistent on smaller devices

Browse Source 
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
This commit is contained in:
John L. Villalovos 2016-05-19 17:05:57 -07:00 committed by Tony Breeds
parent 6bbaf21682
commit b52c834a2c
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
meetingindex.jinja
View File

@ -7,6 +7,20 @@
<style> <style>
h2,h3 {margin-top: 30px;} h2,h3 {margin-top: 30px;}
.masterheader {position:relative;padding:15px 30px;color:white;background-color:#760000;} .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> </style>
<title>OpenStack IRC meetings</title> <title>OpenStack IRC meetings</title>
</head> </head>
@ -33,16 +47,12 @@ use in your favorite calendaring app:</p>
</div> </div>
<h2>Meeting details</h2> <h2>Meeting details</h2>
<small> <small>
<div class="container-fluid"> <div class="meeting_index">
{% for column in batch_meetings(meetings, 4)|batch(4) %} <ul>
<div class="row"> {% for meeting in meetings|sort(attribute='project') %}
{% for meeting in column %} <li><a href="#{{ meeting.project|replace(' ', '_') }}">{{ meeting.project }}</a></li>
<div class="col-md-3 col-xs-6">
<a href="#{{ meeting.project|replace(' ', '_') }}">{{ meeting.project }}</a>
</div>
{% endfor %}
</div>
{% endfor %} {% endfor %}
</ul>
</div> </div>
</small> </small>