Merge pull request #11 from mgrabovsky/catalog-search

Add a simple search functionality to the catalog page

1 files changed, 61 insertions, 58 deletions

diff --git a/templates/themes/catalog/catalog.html b/templates/themes/catalog/catalog.html
index 45239c5b..12b3cd98 100644
--- a/templates/themes/catalog/catalog.html
+++ b/templates/themes/catalog/catalog.html
@@ -18,74 +18,77 @@
 		<div class="subtitle">{{ settings.subtitle }}</div>
 	</header>
 
-        <ul style="display: none">
-                <li id="sort-bump-order" class="sort" data-sort="data-bump" data-order="asc">{% trans 'Bump order' %}</li>
-                <li id="sort-creation-date" class="sort" data-sort="data-time" data-order="asc">{% trans 'Creation date' %}</li>
-                <li id="sort-reply-count" class="sort" data-sort="data-reply" data-order="asc">{% trans 'Reply count' %}</li>
-                <li id="sort-random" class="sort" data-sort="random">{% trans 'Random' %}</li>
-        </ul>
- 
-        <span>{% trans 'Sort by' %}: </span>
-        <select id="sort_by" style="display: inline-block">
-                <option selected value="bump-order">{% trans 'Bump order' %}</option>
-                <option value="creation-date">{% trans 'Creation date' %}</option>
-                <option value="reply-count">{% trans 'Reply count' %}</option>
-                <option value="random">{% trans 'Random' %}</option>
-        </select>
- 
-        <span>{% trans 'Image size' %}: </span>
-        <select id="image_size" style="display: inline-block">
-                <option value="vsmall">{% trans 'Very small' %}</option>
-                <option selected value="small">{% trans 'Small' %}</option>
-                <option value="large">{% trans 'Large' %}</option>
-        </select>
-        <div class="threads">
-                <ul id="Grid">
-                {% for post in recent_posts %}
-                        <li class="mix"
+	<div class="controls">
+		<ul style="display: none">
+			<li id="sort-bump-order" class="sort" data-sort="data-bump" data-order="asc">{% trans 'Bump order' %}</li>
+			<li id="sort-creation-date" class="sort" data-sort="data-time" data-order="asc">{% trans 'Creation date' %}</li>
+			<li id="sort-reply-count" class="sort" data-sort="data-reply" data-order="asc">{% trans 'Reply count' %}</li>
+			<li id="sort-random" class="sort" data-sort="random">{% trans 'Random' %}</li>
+		</ul>
+
+		<span>{% trans 'Sort by' %}: </span>
+		<select id="sort_by" style="display: inline-block">
+			<option selected value="bump-order">{% trans 'Bump order' %}</option>
+			<option value="creation-date">{% trans 'Creation date' %}</option>
+			<option value="reply-count">{% trans 'Reply count' %}</option>
+			<option value="random">{% trans 'Random' %}</option>
+		</select>
+
+		<span>{% trans 'Image size' %}: </span>
+		<select id="image_size" style="display: inline-block">
+			<option value="vsmall">{% trans 'Very small' %}</option>
+			<option selected value="small">{% trans 'Small' %}</option>
+			<option value="large">{% trans 'Large' %}</option>
+		</select>
+	</div>
+
+	<div class="threads">
+		<ul id="Grid">
+		{% for post in recent_posts %}
+			<li class="mix"
 				data-reply="{{ post.reply_count }}"
 				data-bump="{{ post.bump }}"
 				data-time="{{ post.time }}"
 			>
-                                <div class="thread grid-li grid-size-small">  
-                                        <a href="{{post.link}}">  
-						{% if post.youtube %}
-							<img src="http://img.youtube.com/vi/{{ post.youtube }}/0.jpg" 
-						{% else %}
-							<img src="{{post.file}}" 
-						{% endif %}
-                                                 id="img-{{ post.id }}" data-subject="{% if post.subject %}{{ post.subject|e }}{% endif %}" data-name="{{ post.name|e }}" data-muhdifference="{{ post.muhdifference }}" class="{{post.board}} thread-image" title="{{post.bump|date('%b %d %H:%M')}}">
-                                        </a>
-                                                <div class="replies">
-                                                        <strong>R: {{ post.reply_count }} / I: {{ post.image_count }}</strong>
-                                                        {% if post.subject %}
-								<p class="intro">
-									<span class="subject">
-										{{ post.subject|e }}
-									</span>
-								</p>
-							{% else %}
-								<br />
-							{% endif %}
+				<div class="thread grid-li grid-size-small">
+					<a href="{{post.link}}">
+		{% if post.youtube %}
+			<img src="http://img.youtube.com/vi/{{ post.youtube }}/0.jpg"
+		{% else %}
+			<img src="{{post.file}}"
+		{% endif %}
+							id="img-{{ post.id }}" data-subject="{% if post.subject %}{{ post.subject|e }}{% endif %}" data-name="{{ post.name|e }}" data-muhdifference="{{ post.muhdifference }}" class="{{post.board}} thread-image" title="{{post.bump|date('%b %d %H:%M')}}">
+					</a>
+					<div class="replies">
+						<strong>R: {{ post.reply_count }} / I: {{ post.image_count }}</strong>
+						{% if post.subject %}
+						<p class="intro">
+							<span class="subject">
+								{{ post.subject|e }}
+							</span>
+						</p>
+					{% else %}
+						<br />
+					{% endif %}
+
+						{{ post.body }}
+					</div>
+				</div>
+			</li>
+		{% endfor %}
+		</ul>
+	</div>
 
-								{{ post.body }}
-                                                </div>
-                                </div>
-                        </li>
-                {% endfor %}
-                </ul>
-        </div>
-	
 	<hr/>
 	<footer>
-		<p class="unimportant" style="margin-top:20px;text-align:center;">- <a href="http://tinyboard.org/">Tinyboard</a> + 
+		<p class="unimportant" style="margin-top:20px;text-align:center;">- <a href="http://tinyboard.org/">Tinyboard</a> +
 			<a href='https://int.vichan.net/devel/'>vichan</a> {{ config.version }} -
-		<br><a href="http://tinyboard.org/">Tinyboard</a> Copyright &copy; 2010-2014 Tinyboard Development Group    
+		<br><a href="http://tinyboard.org/">Tinyboard</a> Copyright &copy; 2010-2014 Tinyboard Development Group
 		<br><a href="https://int.vichan.net/devel/">vichan</a> Copyright &copy; 2012-2014 vichan-devel</p>
 	</footer>
-        <script type="text/javascript">
-                ready();
-        </script>
+	<script type="text/javascript">
+		ready();
+	</script>
 </body>
 </html>
 {% endfilter %}