From bc7982952d6428e68dd1d44d891d397ae361f993 Mon Sep 17 00:00:00 2001
From: Azareal <azareal@users.noreply.github.com>
Date: Sun, 19 Aug 2018 16:25:59 +1000
Subject: [PATCH] Making topics in the Nox Theme mobile friendly.

---
 templates/topic_alt.html       | 19 +++++++++++------
 templates/topic_alt_posts.html | 10 +++++----
 themes/cosora/public/main.css  |  4 ++++
 themes/nox/public/main.css     | 38 +++++++++++++++++++++++++++++++++-
 4 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/templates/topic_alt.html b/templates/topic_alt.html
index f667a91f..537f8206 100644
--- a/templates/topic_alt.html
+++ b/templates/topic_alt.html
@@ -29,10 +29,13 @@
 	{{if .Poll.ID}}
 	<form id="poll_{{.Poll.ID}}_form" action="/poll/vote/{{.Poll.ID}}?session={{.CurrentUser.Session}}" method="post"></form>
 	<article class="rowitem passive deletable_block editable_parent post_item poll_item top_post hide_on_edit">
+		{{/** TODO: De-dupe userinfo with a common template **/}}
 		<div class="userinfo" aria-label="{{lang "topic.userinfo_aria"}}">
 			<div class="avatar_item" style="background-image: url({{.Topic.Avatar}}), url(/static/white-dot.jpg);background-position: 0px -10px;">&nbsp;</div>
-			<a href="{{.Topic.UserLink}}" class="the_name" rel="author">{{.Topic.CreatedByName}}</a>
-			{{if .Topic.Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.Topic.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.Topic.Level}}</div><div class="tag_post"></div></div>{{end}}
+			<div class="user_meta">
+				<a href="{{.Topic.UserLink}}" class="the_name" rel="author">{{.Topic.CreatedByName}}</a>
+				{{if .Topic.Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.Topic.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.Topic.Level}}</div><div class="tag_post"></div></div>{{end}}
+			</div>
 		</div>
 		<div id="poll_voter_{{.Poll.ID}}" class="content_container poll_voter">
 			<div class="topic_content user_content">
@@ -60,8 +63,10 @@
 	<article {{scope "opening_post"}} itemscope itemtype="http://schema.org/CreativeWork" class="rowitem passive deletable_block editable_parent post_item top_post" aria-label="{{lang "topic.opening_post_aria"}}">
 		<div class="userinfo" aria-label="{{lang "topic.userinfo_aria"}}">
 			<div class="avatar_item" style="background-image: url({{.Topic.Avatar}}), url(/static/white-dot.jpg);background-position: 0px -10px;">&nbsp;</div>
-			<a href="{{.Topic.UserLink}}" class="the_name" rel="author">{{.Topic.CreatedByName}}</a>
-			{{if .Topic.Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.Topic.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.Topic.Level}}</div><div class="tag_post"></div></div>{{end}}
+			<div class="user_meta">
+				<a href="{{.Topic.UserLink}}" class="the_name" rel="author">{{.Topic.CreatedByName}}</a>
+				{{if .Topic.Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.Topic.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.Topic.Level}}</div><div class="tag_post"></div></div>{{end}}
+			</div>
 		</div>
 		<div class="content_container">
 			<div class="hide_on_edit topic_content user_content" itemprop="text">{{.Topic.ContentHTML}}</div>
@@ -97,8 +102,10 @@
 <div class="rowblock topic_reply_container">
 	<div class="userinfo" aria-label="{{lang "topic.your_information"}}">
 		<div class="avatar_item" style="background-image: url({{.CurrentUser.Avatar}}), url(/static/white-dot.jpg);background-position: 0px -10px;">&nbsp;</div>
-		<a href="{{.CurrentUser.Link}}" class="the_name" rel="author">{{.CurrentUser.Name}}</a>
-		{{if .CurrentUser.Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.CurrentUser.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.CurrentUser.Level}}</div><div class="tag_post"></div></div>{{end}}
+		<div class="user_meta">
+			<a href="{{.CurrentUser.Link}}" class="the_name" rel="author">{{.CurrentUser.Name}}</a>
+			{{if .CurrentUser.Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.CurrentUser.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.CurrentUser.Level}}</div><div class="tag_post"></div></div>{{end}}
+		</div>
 	</div>
 	<div class="rowblock topic_reply_form quick_create_form"  aria-label="{{lang "topic.reply_aria"}}">
 		<form id="quick_post_form" enctype="multipart/form-data" action="/reply/create/?session={{.CurrentUser.Session}}" method="post"></form>
diff --git a/templates/topic_alt_posts.html b/templates/topic_alt_posts.html
index d45f2c7d..f482250c 100644
--- a/templates/topic_alt_posts.html
+++ b/templates/topic_alt_posts.html
@@ -1,10 +1,12 @@
-{{range .ItemList}}<article {{scope "post"}} itemscope itemtype="http://schema.org/CreativeWork" class="rowitem passive deletable_block editable_parent post_item {{if .ActionType}}action_item{{end}}">
+{{range .ItemList}}<article {{scope "post"}} itemscope itemtype="http://schema.org/CreativeWork" class="rowitem passive deletable_block editable_parent post_item{{if .ActionType}} action_item{{end}}">
 	<div class="userinfo" aria-label="{{lang "topic.userinfo_aria"}}">
 		<div class="avatar_item" style="background-image: url({{.Avatar}}), url(/static/white-dot.jpg);background-position: 0px -10px;">&nbsp;</div>
-		<a href="{{.UserLink}}" class="the_name" rel="author">{{.CreatedByName}}</a>
-		{{if .Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.Level}}</div><div class="tag_post"></div></div>{{end}}
+		<div class="user_meta">
+			<a href="{{.UserLink}}" class="the_name" rel="author">{{.CreatedByName}}</a>
+			{{if .Tag}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag">{{.Tag}}</div><div class="tag_post"></div></div>{{else}}<div class="tag_block"><div class="tag_pre"></div><div class="post_tag post_level">{{lang "topic.level_prefix"}}{{.Level}}</div><div class="tag_post"></div></div>{{end}}
+		</div>
 	</div>
-	<div class="content_container" {{if .ActionType}}style="margin-left: 0px;"{{end}}>
+	<div class="content_container"{{if .ActionType}} style="margin-left: 0px;"{{end}}>
 		{{if .ActionType}}
 			<span class="action_icon" style="font-size: 18px;padding-right: 5px;" aria-hidden="true">{{.ActionIcon}}</span>
 			<span itemprop="text">{{.ActionType}}</span>
diff --git a/themes/cosora/public/main.css b/themes/cosora/public/main.css
index c23c6c82..911640a3 100644
--- a/themes/cosora/public/main.css
+++ b/themes/cosora/public/main.css
@@ -971,6 +971,10 @@ textarea {
 	/*overflow: hidden;
 	text-overflow: ellipsis;*/
 }
+.user_meta {
+	display: flex;
+	flex-direction: column;
+}
 .content_container {
 	width: 100%;
 	padding: 17px;
diff --git a/themes/nox/public/main.css b/themes/nox/public/main.css
index f3dc8185..41979149 100644
--- a/themes/nox/public/main.css
+++ b/themes/nox/public/main.css
@@ -265,6 +265,10 @@ h2 {
 .quick_create_form .quick_button_row button, .quick_create_form .quick_button_row label {
 	margin-right: 8px;
 }
+.quick_create_form #input_content {
+	width: 100%;
+	height: 100px;
+}
 
 .more_topic_block_initial {
 	display: none;
@@ -534,6 +538,10 @@ button, .formbutton, .panel_right_button {
 	display: flex;
 	flex-direction: column;
 }
+.user_meta {
+	display: flex;
+	flex-direction: column;
+}
 .avatar_item {
 	border-radius: 36px;
 	height: 58px;
@@ -598,7 +606,7 @@ button, .formbutton, .panel_right_button {
 .add_like:before, .remove_like:before {
 	content: "{{index .Phrases "topic.plus_one"}}";
 }
-.button_container .open_edit:after, .edit_item:after{
+.button_container .open_edit:after, .edit_item:after {
 	content: "{{index .Phrases "topic.edit_button_text"}}";
 }
 .delete_item:after {
@@ -644,6 +652,34 @@ button, .formbutton, .panel_right_button {
 	background-color: #444444;
 }
 
+@media(max-width: 500px) {
+	.sidebar {
+		display: none;
+	}
+	
+	.post_item, .topic_reply_container {
+		flex-direction: column;
+	}
+	.userinfo {
+		margin-right: 0px;
+		width: auto;
+		flex-direction: row;
+		margin-bottom: 12px;
+		padding: 18px;
+		padding-bottom: 14px;
+	}
+	.avatar_item {
+		height: 46px;
+		width: 46px;
+		margin-left: 0px;
+		margin-right: 0px;
+	}
+	.user_meta {
+		margin-left: 10px;
+		margin-top: -4px;
+	}
+}
+
 @media(max-width: 600px) {
 	nav.nav {
 		background: #2a2a2a;