Improve thread styling

8 files changed, 145 insertions, 98 deletions

diff --git a/app/__init__.py b/app/__init__.py
index 37c6cc8..b7913f5 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -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
diff --git a/app/scss/comments.scss b/app/scss/comments.scss
index d2302b1..a3ce50f 100644
--- a/app/scss/comments.scss
+++ b/app/scss/comments.scss
@@ -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;
-
-	.info_strip, .msg {
-		display: block;
-		margin: 0;
-	}
-
-	.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;
-	}
+	list-style: none;
+	padding: 0;
 
-	.info_strip span {
-		float: right;
-		display: inline-block;
-		color: #bbb;
+	.card {
+		position:relative;
+
+		.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;
-}
diff --git a/app/templates/macros/threads.html b/app/templates/macros/threads.html
index 9ce8a73..0f6df88 100644
--- a/app/templates/macros/threads.html
+++ b/app/templates/macros/threads.html
@@ -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 %}
+<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>
 
-	{% 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 %}
+			<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) -%}
diff --git a/app/templates/packages/view.html b/app/templates/packages/view.html
index 960c2b2..cb0c3ca 100644
--- a/app/templates/packages/view.html
+++ b/app/templates/packages/view.html
@@ -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 %}
-
-					{% 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>
+			{% 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>
 
-						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>
diff --git a/app/templates/threads/view.html b/app/templates/threads/view.html
index 71580de..13097fe 100644
--- a/app/templates/threads/view.html
+++ b/app/templates/threads/view.html
@@ -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 %}
diff --git a/app/templates/users/user_profile_page.html b/app/templates/users/user_profile_page.html
index da9f8ca..8949189 100644
--- a/app/templates/users/user_profile_page.html
+++ b/app/templates/users/user_profile_page.html
@@ -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() }}
diff --git a/app/views/packages/__init__.py b/app/views/packages/__init__.py
index 827434f..a3a4198 100644
--- a/app/views/packages/__init__.py
+++ b/app/views/packages/__init__.py
@@ -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.")
diff --git a/requirements.txt b/requirements.txt
index 861526e..2564d6d 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -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