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>
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>