Improve thread styling

This commit is contained in:
rubenwardy 2018-12-22 20:13:43 +00:00
parent a21a5c24d8
commit c551201f79
8 changed files with 144 additions and 97 deletions

@ -17,6 +17,7 @@
from flask import *
from flask_user import *
from flask_gravatar import Gravatar
import flask_menu as menu
from flask_mail import Mail
from flask.ext import markdown
@ -36,6 +37,14 @@ github = GitHub(app)
csrf = CsrfProtect(app)
mail = Mail(app)
pages = FlatPages(app)
gravatar = Gravatar(app,
size=58,
rating='g',
default='mp',
force_default=False,
force_lower=False,
use_ssl=True,
base_url=None)
if not app.debug:
from .maillogger import register_mail_error_handler

@ -1,49 +1,28 @@
.comments, .comments li {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #444;
.img-thumbnail-1 {
padding: 0px;
// width: 100%;
}
.comments {
border-radius: 5px;
margin: 15px 0;
background: #333;
list-style: none;
padding: 0;
.info_strip, .msg {
display: block;
margin: 0;
}
.card {
position:relative;
.info_strip {
padding: 0.2em 1em;
border-bottom: 1px solid #444;
}
.msg {
padding: 1em;
background: #222;
}
.author {
font-weight: bold;
float: left;
display: inline-block;
}
.info_strip span {
float: right;
display: inline-block;
color: #bbb;
.card-header:before {
position: absolute;
top: 11px;
right: 100%;
width: 0;
height: 0;
display: block;
content:" ";
border-color: transparent;
border-style: solid solid outset;
pointer-events:none;
border-right-color: #444;
border-width: 14px;
}
}
}
.comment_form {
margin: 1em 0;
}
.comment_form textarea {
min-width: 60%;
max-width: 100%;
margin: 0 0 1em 0;
}

@ -1,28 +1,56 @@
{% macro render_thread(thread, current_user) -%}
<ul class="comments">
{% for r in thread.replies %}
<li>
<div class="info_strip">
<ul class="comments mt-4 mb-0">
{% for r in thread.replies %}
<li class="row my-2 mx-0">
<div class="col-md-1 p-1">
<a href="{{ url_for('user_profile_page', username=r.author.username) }}">
<img class="img-responsive user-photo img-thumbnail img-thumbnail-1" src="{{ (r.author.email or '') | gravatar }}">
</a>
</div>
<div class="col">
<div class="card">
<div class="card-header">
<a class="author {{ r.author.rank.name }}"
href="{{ url_for('user_profile_page', username=r.author.username) }}">
{{ r.author.display_name }}</a>
<span>{{ r.created_at | datetime }}</span>
<div class="clearboth"></div>
{{ r.author.display_name }}
</a>
<a name="reply-{{ r.id }}" class="text-muted float-right"
href="{{ url_for('thread_page', id=thread.id) }}#reply-{{ r.id }}">
{{ r.created_at | datetime }}
</a>
</div>
<div class="msg">
<div class="card-body">
{{ r.comment | markdown }}
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</li>
{% endfor %}
</ul>
{% if current_user.is_authenticated %}
<form method="post" action="{{ url_for('thread_page', id=thread.id)}}" class="comment_form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<textarea required maxlength=500 name="comment" placeholder="Markdown supported"></textarea><br />
<input type="submit" value="Comment" />
</form>
{% endif %}
{% if current_user.is_authenticated %}
<div class="row mt-0 mb-4 comments mx-0">
<div class="col-md-1 p-1">
<img class="img-responsive user-photo img-thumbnail img-thumbnail-1" src="{{ (current_user.email or '') | gravatar }}">
</div>
<div class="col">
<div class="card">
<div class="card-header {{ current_user.rank.name }}">
{{ current_user.display_name }}
<a name="reply"></a>
</div>
<form method="post" action="{{ url_for('thread_page', id=thread.id)}}" class="card-body">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<textarea class="form-control" required maxlength=500 name="comment" placeholder="Markdown supported"></textarea><br />
<input class="btn btn-primary" type="submit" value="Comment" />
</form>
</div>
</div>
</div>
{% endif %}
{% endmacro %}
{% macro render_threadlist(threads, list_group=False) -%}

@ -53,7 +53,7 @@
{% elif (package.type == package.type.GAME or package.type == package.type.TXP) and package.screenshots.count() == 0 %}
You need to add at least one screenshot.
{% elif topic_error_lvl == "error" %}
{% elif topic_error_lvl == "danger" %}
Please fix the below topic issue(s).
{% elif "Other" in package.license.name or "Other" in package.media_license.name %}
@ -97,26 +97,13 @@
</div>
{% endif %}
{% if package.author == current_user or package.checkPerm(current_user, "APPROVE_NEW") %}
{% if review_thread %}
<h2>{% if review_thread.private %}&#x1f512;{% endif %} {{ review_thread.title }}</h2>
{% if review_thread.private %}
<p><i>
This thread is only visible to the package owner and users of
Editor rank or above.
</i></p>
{% endif %}
{% if not review_thread and (package.author == current_user or package.checkPerm(current_user, "APPROVE_NEW")) %}
<div class="alert alert-info">
<a class="float-right btn btn-sm btn-info" href="{{ url_for('new_thread_page', pid=package.id, title='Package approval comments') }}">Open Thread</a>
{% from "macros/threads.html" import render_thread %}
{{ render_thread(review_thread, current_user) }}
{% else %}
<div class="alert alert-info">
<a class="float-right btn btn-sm btn-info" href="{{ url_for('new_thread_page', pid=package.id, title='Package approval comments') }}">Open Thread</a>
Privately ask a question or give feedback
<div style="clear:both;"></div>
</div>
{% endif %}
Privately ask a question or give feedback
<div style="clear:both;"></div>
</div>
{% endif %}
{% endif %}
@ -301,6 +288,21 @@
</div>
</aside>
{% if not package.approved and (package.author == current_user or package.checkPerm(current_user, "APPROVE_NEW")) %}
{% if review_thread %}
<h2>{% if review_thread.private %}&#x1f512;{% endif %} {{ review_thread.title }}</h2>
{% if review_thread.private %}
<p><i>
This thread is only visible to the package owner and users of
Editor rank or above.
</i></p>
{% endif %}
{% from "macros/threads.html" import render_thread %}
{{ render_thread(review_thread, current_user) }}
{% endif %}
{% endif %}
<ul class="screenshot_list mb-4">
{% if package.checkPerm(current_user, "EDIT_PACKAGE") %}
<a class="btn btn-primary float-right" href="{{ package.getNewScreenshotURL() }}">Add screenshot</a>

@ -5,25 +5,26 @@ Threads
{% endblock %}
{% block content %}
{% if current_user.is_authenticated %}
{% if current_user in thread.watchers %}
<form method="post" action="{{ thread.getUnsubscribeURL() }}" class="float-right">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" class="btn btn-primary" value="Unsubscribe" />
</form>
{% else %}
<form method="post" action="{{ thread.getSubscribeURL() }}" class="float-right">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" class="btn btn-primary" value="Subscribe" />
</form>
{% endif %}
{% endif %}
<h1>{% if thread.private %}&#x1f512; {% endif %}{{ thread.title }}</h1>
{% if thread.package or current_user.is_authenticated %}
{% if thread.package %}
<p>Package: <a href="{{ thread.package.getDetailsURL() }}">{{ thread.package.title }}</a></p>
{% endif %}
{% if current_user.is_authenticated %}
{% if current_user in thread.watchers %}
<form method="post" action="{{ thread.getUnsubscribeURL() }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Unsubscribe" />
</form>
{% else %}
<form method="post" action="{{ thread.getSubscribeURL() }}">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="submit" value="Subscribe" />
</form>
{% endif %}
{% endif %}
{% endif %}
{% if thread.private %}

@ -66,13 +66,40 @@
{% endif %}
</table>
</div>
<div class="row mt-4">
<div class="col-md-2">
<img class="img-responsive user-photo img-thumbnail img-thumbnail-1" src="{{ (user.email or '') | gravatar }}">
</div>
<div class="col">
<div class="card">
<div class="card-header">
Profile Picture
</div>
<div class="card-body">
<p>ContentDB uses Gravatar for profile pictures</p>
{% if user == current_user %}
{% if user.email %}
<a class="btn btn-primary" href="https://en.gravatar.com/">
Gravatar
</a>
{% else %}
<p>
Please add an email to your profile.
</p>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if form %}
{% from "macros/forms.html" import render_field, render_submit_field %}
<div class="col-sm-6">
<div class="card">
<h2 class="card-header">Edit Details</h2>
<div class="card-header">Edit Details</div>
<div class="card-body">
<form action="" method="POST" class="form box-body" role="form">
{{ form.hidden_tag() }}

@ -181,13 +181,13 @@ def package_page(package):
errors = []
if Package.query.filter_by(forums=package.forums, soft_deleted=False).count() > 1:
errors.append("<b>Error: Another package already uses this forum topic!</b>")
topic_error_lvl = "error"
topic_error_lvl = "danger"
topic = ForumTopic.query.get(package.forums)
if topic is not None:
if topic.author != package.author:
errors.append("<b>Error: Forum topic author doesn't match package author.</b>")
topic_error_lvl = "error"
topic_error_lvl = "danger"
if topic.wip:
errors.append("Warning: Forum topic is in WIP section, make sure package meets playability standards.")

@ -14,3 +14,4 @@ Flask-FlatPages==0.6
Flask-Migrate==2.1.1
pillow==5.1.0
GitPython==2.1.10
Flask-Gravatar=0.5.0