Просмотр исходного кода

Add horizontal version of the topic view

sh4nks 9 лет назад
Родитель
Сommit
67aca9b1d1

+ 26 - 0
flaskbb/themes/aurora/src/flaskbb.scss

@@ -248,6 +248,11 @@ body {
         min-height: 19em;
         position: relative;
 
+        &.post-horizontal {
+            border-left: none;
+            min-height: 14em;
+        }
+
         // post meta information
         .post-meta {
             padding-top: 0.5em;
@@ -298,8 +303,29 @@ body {
     }
 }
 
+
 // author
 .author {
+    // probably not the best name but i couldn't come up with a better one
+    &.author-horizontal {
+        min-height: 9em;
+        border-bottom: 1px solid $post-box-border;
+        .author-box {
+            float: left;
+            margin-top: 0.5em;
+            .author-avatar {
+                margin-top: 0em;
+                margin-right: 1em;
+            }
+            .author-online, .author-offline {
+                margin-top: 0.5em;
+            }
+            .author-name {
+                margin-top: -0.5em;
+            }
+        }
+    }
+
     .author-name h4 {
         float: left;
         margin-bottom: 0;

+ 16 - 0
flaskbb/themes/aurora/static/css/flaskbb.css

@@ -121,6 +121,9 @@ body {
   padding-right: 0;
   min-height: 19em;
   position: relative; }
+  .topic-body .post-box.post-horizontal {
+    border-left: none;
+    min-height: 14em; }
   .topic-body .post-box .post-meta {
     padding-top: 0.5em;
     padding-left: 0.5em;
@@ -153,6 +156,19 @@ body {
       .topic-body .post-box .post-footer .post-menu .inline-form {
         padding: 6px 12px; }
 
+.author.author-horizontal {
+  min-height: 9em;
+  border-bottom: 1px solid #cad7e1; }
+  .author.author-horizontal .author-box {
+    float: left;
+    margin-top: 0.5em; }
+    .author.author-horizontal .author-box .author-avatar {
+      margin-top: 0em;
+      margin-right: 1em; }
+    .author.author-horizontal .author-box .author-online, .author.author-horizontal .author-box .author-offline {
+      margin-top: 0.5em; }
+    .author.author-horizontal .author-box .author-name {
+      margin-top: -0.5em; }
 .author .author-name h4 {
   float: left;
   margin-bottom: 0; }

+ 187 - 0
flaskbb/themes/aurora/templates/forum/topic_horizontal.html

@@ -0,0 +1,187 @@
+{% extends theme("layout.html") %}
+{% set page_title = _("%(title)s - Topic", title=topic.title) %}
+{% set active_forum_nav=True %}
+
+{% block css %}
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-markdown.min.css') }}">
+{% endblock %}
+
+{% block content %}
+{% from theme('macros.html') import render_pagination, form_field, generate_post_id, generate_post_url %}
+
+<div class="topic-view">
+    <ol class="breadcrumb flaskbb-breadcrumb">
+        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li><a href="{{ topic.forum.category.url }}">{{ topic.forum.category.title }}</a></li>
+        <li><a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a></li>
+        <li class="active">{{ topic.title }}</li>
+    </ol>
+
+    {% include theme('forum/topic_controls.html') %}
+
+    <div class="panel topic-panel">
+        <div class="panel-heading topic-head">
+            <a href="{{ topic.url }}">{{ topic.title }}</a>
+        </div>
+        <div class="panel-body topic-body">
+            {% for post, user in posts.items %}
+            <div id="{{ post.id }}" class="row post-row clearfix">
+
+                <div class="author author-horizontal col-md-12 col-sm-12 col-xs-12">
+                    <div class="pull-left">
+                        {% if user.avatar %}
+                        <div class="author-box">
+                            <div class="author-avatar hidden-xs"><img src="{{ user.avatar }}" alt="avatar"></div>
+                        </div>
+                        {% endif %}
+
+                        <div class="author-box">
+                            <!-- Registered User -->
+                            <div class="author-name"><h4><a href="{{ user.url }}">{{ user.username }}</a></h4></div>
+
+                            <!-- check whether user is online or not -->
+                            {% if user|is_online %}
+                            <div class="author-online" data-toggle="tooltip" data-placement="top" title="online"></div>
+                            {% else %}
+                            <div class="author-offline" data-toggle="tooltip" data-placement="top" title="offline"></div>
+                            {% endif %}
+                            <div class="author-title"><h5>{{ user.primary_group.name }}</h5></div>
+                        </div>
+                    </div>
+
+                    <div class="pull-right">
+                        <div class="author-box clearfix">
+                            <div class="author-registered">{% trans %}Joined{% endtrans %}: {{ user.date_joined|format_date('%b %d %Y') }}</div>
+                            <div class="author-posts">{% trans %}Posts{% endtrans %}: {{ user.post_count }}</div>
+                            <div class="author-pm">
+                                {% if current_user.is_authenticated() and post.user_id %}
+                                <a href="{{ url_for('message.new_conversation') }}?to_user={{ user.username }}">{% trans %}Message{% endtrans %}</a>
+                                {% endif %}
+                            </div>
+
+                            {% if user.website %}
+                            <div class="author-website"><a href="{{ user.website }}" rel="nofollow">{% trans %}Website{% endtrans %}</a></div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+
+                <div class="post-box post-horizontal col-md-12 col-sm-12 col-xs-12">
+                    <div class="post-meta clearfix">
+                        <div class="pull-left">
+                            <!-- Creation date / Date modified -->
+                            <a href="{{ generate_post_url(topic, post, posts.page) }}">
+                                {{ post.date_created|format_date('%d %B %Y - %H:%M') }}
+                            </a>
+                            {% if post.user_id and post.date_modified %}
+                            <small>
+                                (Last modified: {{ post.date_modified|format_date('%d %B %Y - %H:%M') }} by
+                                <a href="{{ url_for('user.profile', username=post.modified_by) }}">{{ post.modified_by }}</a>.)
+                            </small>
+                            {% endif %}
+                        </div>
+
+                        <!-- Post number -->
+                        <div class="pull-right">
+                            <strong>#{{ generate_post_id(posts, loop.index, flaskbb_config["POSTS_PER_PAGE"]) }}</strong>
+                        </div>
+                    </div>
+
+                    <div class="post-content post_body clearfix" id="pid{{ post.id }}">
+                        {{ post.content|markup|safe }}
+                        <!-- Signature Begin -->
+                        {% if flaskbb_config["SIGNATURE_ENABLED"] and post.user_id and user.signature %}
+                        <div class="post-signature hidden-xs">
+                        <hr />
+                            {{ user.signature|markup|safe }}
+                        </div>
+                        {% endif %}
+                        <!-- Signature End -->
+                    </div>
+
+                        <div class="post-footer clearfix">
+
+                            <!-- Report/Edit/Delete/Quote Post-->
+                            <div class="post-menu pull-right">
+
+                            {% if current_user|post_reply(topic) %}
+                            <!-- Quick quote -->
+                                <a href="#" class="btn btn-icon icon-reply quote-btn" data-post-id="{{ post.id }}" data-toggle="tooltip" data-placement="top" title="Quote this post"></a>
+                            <!-- Full quote/reply -->
+                                <a href="{{ url_for('forum.reply_post', topic_id=topic.id, post_id=post.id) }}" class="btn btn-icon icon-replyall" data-toggle="tooltip" data-placement="top" title="Full Reply"></a>
+                            {% endif %}
+
+                            {% if current_user|edit_post(post) %}
+                            <!-- Edit Post -->
+                            <a href="{{ url_for('forum.edit_post', post_id=post.id) }}" class="btn btn-icon icon-edit" data-toggle="tooltip" data-placement="top" title="Edit this post"></a>
+                            {% endif %}
+                            {% if topic.first_post_id == post.id %}
+                                {% 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-icon icon-delete" data-toggle="tooltip" data-placement="top" title="Delete this topic"></button>
+                                </form>
+                                {% endif %}
+                            {% else %}
+                                {% if current_user|delete_post(post) %}
+                            <!-- Delete Post -->
+                                <form class="inline-form" method="post" action="{{ url_for('forum.delete_post', post_id=post.id) }}">
+                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                                    <button  class="btn btn-icon icon-delete" data-toggle="tooltip" data-placement="top" title="Delete this post"></button>
+                                </form>
+                                {% endif %}
+
+                            {% endif %}
+
+                            {% if current_user.is_authenticated() %}
+                            <!-- Report post -->
+                                <a href="{{ url_for('forum.report_post', post_id=post.id) }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;" class="btn btn-icon icon-report" data-toggle="tooltip" data-placement="top" title="Report this post"></a>
+                            {% endif %}
+
+                            </div> <!-- end post-menu -->
+                        </div> <!-- end footer -->
+
+                </div>
+            </div>
+            {% endfor %}
+
+        </div> <!-- end topic-body -->
+    </div> <!-- end topic-panel -->
+
+    {% include theme('forum/topic_controls.html') %}
+    {% from theme("macros.html") import render_field, render_quickreply, render_submit_field %}
+    {% if form %}
+    <form class="form" action="#" method="post">
+        {{ form.hidden_tag() }}
+        <div class="row">
+            <div class="col-md-12 col-sm-12 col-xs-12">
+                <div class="editor-box">
+                    <div class="editor quickreply">
+                        {{ render_quickreply(form.content, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'id': 'quickreply-editor'}) }}
+                    </div>
+                    <div class="editor-submit">
+                        <div class="editor-options pull-left">
+                            <span class="label label-info">Markdown</span>
+                            <a class="label label-success" href="#">help</a> <!-- TODO: add markdown cheat sheet -->
+                            <a class="label label-success" href="#">emojis</a> <!-- TODO: add emoji cheat sheet -->
+                        </div>
+                        {{ render_submit_field(form.submit, input_class="btn btn-success pull-right") }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </form>
+    {% endif %}
+
+</div>
+{% endblock %}
+
+{% block scripts %}
+    <script>
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/marked.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-markdown.js') }}"></script>
+{% endblock %}