Move topic options to dropdown

flaskbb/themes/aurora/templates/forum/topic_controls.html

@@ -1,75 +1,102 @@
 <div class="row controls-row">
-    <div class="pull-left">
-        {{ render_pagination(posts, topic.url) }}
+    <div class ="col-md-6 col-sm-6 col-xs-12 controls-col">
+        <div class="pull-left">
+            {{ render_pagination(posts, topic.url) }}
+        </div>
     </div> <!-- end span pagination -->
 
 {% if current_user.is_authenticated() %}
-    <div class="pull-right">
-        {% if current_user.is_tracking_topic(topic) %}
-        <form class="inline-form" method="post" action="{{ url_for('forum.untrack_topic', topic_id=topic.id, slug=topic.slug) }}">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-            <button class="btn btn-default">
-                <span class="fa fa-tag" aria-hidden="true"></span> {% trans %}Untrack Topic{% endtrans %}
-            </button>
-        </form>
-        {% else %}
-        <form class="inline-form" method="post" action="{{ url_for('forum.track_topic', topic_id=topic.id, slug=topic.slug) }}">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-            <button class="btn btn-default">
-                <span class="fa fa-tag" aria-hidden="true"></span> {% trans %}Track Topic{% endtrans %}
-            </button>
-        </form>
-        {% endif %}
+    <div class="col-md-6 col-sm-6 col-xs-12 controls-col">
+        <div class="pull-right">
+            {% if current_user|can_moderate(topic.forum) or current_user|delete_topic(topic)%}
+            <!-- Moderation buttons -->
+            <div class="btn-group">
+                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <span class="fa fa-bars" aria-hidden="true"></span> {% trans %}Moderate{% endtrans %} <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu">
 
-        {% if current_user|post_reply(topic) %}
-        <a href="{{ url_for('forum.new_post', topic_id=topic.id, slug=topic.slug) }}" class="btn btn-primary">
-            <span class="fa fa-pencil"></span> {% trans %}Reply{% endtrans %}
-        </a>
-        {% endif %}
-    </div>
-{% endif %}
+                {% if current_user|delete_topic(topic) %}
+                <li>
+                    <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
+                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                        <button class="btn btn-link">
+                            <span class="fa fa-trash-o"></span> {% trans %}Delete Topic{% endtrans %}
+                        </button>
+                    </form>
+                </li>
+                {% endif %}
 
-    <div class="pull-right">
-    {% if current_user|delete_topic(topic) %}
-        <form class="inline-form" method="post" action="{{ url_for('forum.delete_topic', topic_id=topic.id, slug=topic.slug) }}">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-            <button class="btn btn-danger">
-                <span class="fa fa-trash-o"></span> {% trans %}Delete Topic{% endtrans %}
-            </button>
-        </form>
-    {% endif %}
-    {% if current_user|can_moderate(topic.forum) %}
-        {% if not topic.locked %}
-            <form class="inline-form" method="post" action="{{ url_for('forum.lock_topic', topic_id=topic.id, slug=topic.slug) }}">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-warning">
-                    <span class="fa fa-lock"></span> {% trans %}Lock Topic{% endtrans %}
-                </button>
-            </form>
-        {% else %}
-            <form class="inline-form" method="post" action="{{ url_for('forum.unlock_topic', topic_id=topic.id, slug=topic.slug) }}">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-warning">
-                    <span class="fa fa-unlock"></span> {% trans %}Unlock Topic{% endtrans %}
-                </button>
-            </form>
-        {% endif %}
+                {% if current_user|can_moderate(topic.forum) %}
+                    {% if not topic.locked %}
+                    <li>
+                        <form class="inline-form" method="post" action="{{ url_for('forum.lock_topic', topic_id=topic.id, slug=topic.slug) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                            <button class="btn btn-link">
+                                <span class="fa fa-lock"></span> {% trans %}Lock Topic{% endtrans %}
+                            </button>
+                        </form>
+                    </li>
+                    {% else %}
+                    <li>
+                        <form class="inline-form" method="post" action="{{ url_for('forum.unlock_topic', topic_id=topic.id, slug=topic.slug) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                            <button class="btn btn-link">
+                                <span class="fa fa-unlock"></span> {% trans %}Unlock Topic{% endtrans %}
+                            </button>
+                        </form>
+                    </li>
+                    {% endif %}
 
-        {% if not topic.important %}
-            <form class="inline-form" method="post" action="{{ url_for('forum.highlight_topic', topic_id=topic.id, slug=topic.slug) }}">
+                    {% if not topic.important %}
+                    <li>
+                        <form class="inline-form" method="post" action="{{ url_for('forum.highlight_topic', topic_id=topic.id, slug=topic.slug) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                            <button class="btn btn-link">
+                                <span class="fa fa-star"></span> {% trans %}Highlight Topic{% endtrans %}
+                            </button>
+                        </form>
+                    </li>
+                    {% else %}
+                    <li>
+                        <form class="inline-form" method="post" action="{{ url_for('forum.trivialize_topic', topic_id=topic.id, slug=topic.slug) }}">
+                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                            <button class="btn btn-link">
+                                <span class="fa fa-star-o"></span> {% trans %}Trivialize Topic{% endtrans %}
+                            </button>
+                        </form>
+                    </li>
+                    {% endif %}
+                {% endif %}
+                </ul>
+            </div>
+            <!-- end Moderation buttons -->
+            {% endif %}
+
+            {% if current_user.is_tracking_topic(topic) %}
+            <form class="inline-form" method="post" action="{{ url_for('forum.untrack_topic', topic_id=topic.id, slug=topic.slug) }}">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-success">
-                    <span class="fa fa-star"></span> {% trans %}Highlight Topic{% endtrans %}
+                <button class="btn btn-default">
+                    <span class="fa fa-tag" aria-hidden="true"></span> {% trans %}Untrack Topic{% endtrans %}
                 </button>
             </form>
-        {% else %}
-            <form class="inline-form" method="post" action="{{ url_for('forum.trivialize_topic', topic_id=topic.id, slug=topic.slug) }}">
+            {% else %}
+            <form class="inline-form" method="post" action="{{ url_for('forum.track_topic', topic_id=topic.id, slug=topic.slug) }}">
                 <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                <button class="btn btn-success">
-                    <span class="fa fa-star-o"></span> {% trans %}Trivialize Topic{% endtrans %}
+                <button class="btn btn-default">
+                    <span class="fa fa-tag" aria-hidden="true"></span> {% trans %}Track Topic{% endtrans %}
                 </button>
             </form>
-        {% endif %}
-    {% endif %}
+            {% endif %}
+
+            {% if current_user|post_reply(topic) %}
+            <a href="{{ url_for('forum.new_post', topic_id=topic.id, slug=topic.slug) }}" class="btn btn-primary">
+                <span class="fa fa-pencil"></span> {% trans %}Reply{% endtrans %}
+            </a>
+            {% else %}
+            <div class="btn btn-primary"><span class="fa fa-lock"></span> {% trans %}Locked{% endtrans %}</div>
+            {% endif %}
+        </div>
     </div>
+{% endif %} {# end current_user.is_authenticated #}
 </div>