Improved mobile usability for Nox in the topic list, profiles, account manager and control panel. More to come.

Fixed a bug in the template generator where fragment indices would sometimes become negative.
Forum pages are now considered to be part of /forums/ instead of /topics/ in the menu tab highlighter.
Fixed a bug in the forum page in Nox where the forum options weren't aligned to the right.
Switched out a couple of {{if ne .CurrentUser.ID 0}}s for {{if .CurrentUser.Loggedin}}s
Moved the filter opt separator into it's own DOM node for easier styling.

Added the quick_topic.create_topic_button_short phrase.
Added the topic_list.moderate_short phrase.

common/templates/templates.go

@@ -377,6 +377,7 @@ func (c *CTemplateSet) compile(name string, content, expects string, expectsInt
 			c.detail("invisible")
 			continue
 		}
+		// TODO: What if the same template is invoked in multiple spots in a template?
 		skipBlock := skipped[frag.TemplateName]
 		skip := skipBlock.Frags[skipBlock.ClosestFragSkip]
 		_, ok := skipBlock.Frags[frag.Index]
@@ -385,7 +386,11 @@ func (c *CTemplateSet) compile(name string, content, expects string, expectsInt
 		}
 		c.detailf("skipblock %+v\n", skipBlock)
 		c.detail("skipping ", skip)
-		writeFrag(frag.TemplateName, frag.Index-skip, frag.Body)
+		index := frag.Index - skip
+		if index < 0 {
+			index = 0
+		}
+		writeFrag(frag.TemplateName, index, frag.Body)
 	}
 
 	fout = strings.Replace(fout, `))

langs/english.json

@@ -499,6 +499,7 @@
 		"quick_topic.content_placeholder":"Insert post here",
 		"quick_topic.add_poll_option":"Add new poll option",
 		"quick_topic.create_topic_button":"Create Topic",
+		"quick_topic.create_topic_button_short":"New Topic",
 		"quick_topic.add_poll_button":"Add Poll",
 		"quick_topic.add_file_button":"Add File",
 		"quick_topic.cancel_button":"Cancel",
@@ -506,6 +507,7 @@
 		"topic_list.create_topic_tooltip":"Create Topic",
 		"topic_list.create_topic_aria":"Create a topic",
 		"topic_list.moderate":"Moderate",
+		"topic_list.moderate_short":"Mod",
 		"topic_list.moderate_tooltip":"Moderate",
 		"topic_list.moderate_aria":"Moderate Posts",
 		"topic_list.what_to_do":"What do you want to do with these {0} topics?",

routes/forum.go

@@ -42,6 +42,7 @@ func ViewForum(w http.ResponseWriter, r *http.Request, user common.User, header
 		return common.NoPermissions(w, r, user)
 	}
 	header.Zone = "view_forum"
+	header.Path = "/forums/"
 
 	// TODO: Fix this double-check
 	forum, err := common.Forums.Get(fid)

templates/forum.html

@@ -4,13 +4,14 @@
 {{if ne .LastPage .Page}}<div id="nextFloat" class="next_button"><a class="next_link" aria-label="{{lang "paginator_next_page_aria"}}" rel="next" href="/forum/{{.Forum.ID}}?page={{add .Page 1}}">{{lang "paginator_greater_than"}}</a></div>{{end}}
 
 <main id="forumItemList" itemscope itemtype="http://schema.org/ItemList">
-	<div id="forum_head_block" class="rowblock rowhead topic_list_title_block{{if ne .CurrentUser.ID 0}} has_opt{{end}}">
+	<div id="forum_head_block" class="rowblock rowhead topic_list_title_block{{if .CurrentUser.Loggedin}} has_opt{{end}}">
 		<div class="rowitem forum_title">
 			<h1 itemprop="name">{{.Title}}</h1>
 		</div>
 		{{if .CurrentUser.Loggedin}}
 			<div class="optbox">
 				{{if .CurrentUser.Perms.CreateTopic}}
+				<div class="opt dummy_opt"></div>
 				<div class="pre_opt auto_hide"></div>
 				<div class="opt create_topic_opt" title="{{lang "topic_list.create_topic_tooltip"}}" aria-label="{{lang "topic_list.create_topic_aria"}}"><a class="create_topic_link" href="/topics/create/{{.Forum.ID}}"></a></div>
 				{{/** TODO: Add a permissions check for this **/}}

templates/topics.html

@@ -1,13 +1,14 @@
 {{template "header.html" . }}
 <main id="topicsItemList" itemscope itemtype="http://schema.org/ItemList">
 
-<div class="rowblock rowhead topic_list_title_block{{if ne .CurrentUser.ID 0}} has_opt{{end}}">
+<div class="rowblock rowhead topic_list_title_block{{if .CurrentUser.Loggedin}} has_opt{{end}}">
 	<div class="rowitem topic_list_title"><h1 itemprop="name">{{lang "topics_head"}}</h1></div>
 	{{if .CurrentUser.Loggedin}}
 		<div class="optbox">
 		{{if .ForumList}}
 			<div class="opt filter_opt">
-				<a href="#" class="filter_opt_label link_label" data-for="topic_list_filter_select"> / {{if eq .Sort.SortBy "mostviewed" }}{{lang "topic_list.most_viewed_filter"}}{{else}}{{lang "topic_list.most_recent_filter"}}{{end}} <span class="filter_opt_pointy">▾</span></a>
+				<a class="filter_opt_sep"> / </a>
+				<a href="#" class="filter_opt_label link_label" data-for="topic_list_filter_select">{{if eq .Sort.SortBy "mostviewed" }}{{lang "topic_list.most_viewed_filter"}}{{else}}{{lang "topic_list.most_recent_filter"}}{{end}} <span class="filter_opt_pointy">▾</span></a>
 				<div id="topic_list_filter_select" class="link_select">
 					<div class="link_option link_selected">
 						<a href="/topics/">{{lang "topic_list.most_recent_filter"}}</a>

themes/nox/public/acc_panel_common.css

@@ -37,4 +37,13 @@
 }
 .rowmenu .rowitem {
 	margin-bottom: 4px;
+}
+
+@media (max-width: 420px) {
+	.colstack {
+		display: block;
+	}
+	.colstack_left, .colstack_right {
+		width: auto !important;
+	}
 }

themes/nox/public/main.css

@@ -366,10 +366,10 @@ h2 {
 	content: "{{lang "topic_list.moderate" . }}";
 }
 
-.filter_opt {
+.filter_opt, .dummy_opt {
 	margin-right: auto;
 }
-.filter_opt_label {
+.filter_opt.opt a.filter_opt_label {
 	font-size: 18px;
 	margin-left: 5px;
 }
@@ -1011,7 +1011,7 @@ input[type=checkbox]:checked + label .sel {
 		margin-right: 0px;
 		width: auto;
 		flex-direction: row;
-		margin-bottom: 12px;
+		margin-bottom: 8px;
 		padding: 18px;
 		padding-bottom: 14px;
 	}
@@ -1027,6 +1027,18 @@ input[type=checkbox]:checked + label .sel {
 	}
 }
 
+@media(max-width: 460px) {
+	.topic_list_title, .filter_opt_sep {
+		display: none;
+	}
+	.topic_list_title_block .create_topic_opt a:before {
+		content: "{{lang "quick_topic.create_topic_button_short" . }}";
+	}
+	.topic_list_title_block .mod_opt a:before {
+		content: "{{lang "topic_list.moderate_short" . }}";
+	}
+}
+
 @media(max-width: 601px) {
 	ul {
 		padding-left: 14px;

themes/nox/public/panel.css

@@ -260,4 +260,12 @@ button, .formbutton, .panel_right_button:not(.has_inner_button), #panel_users .p
 
 #panel_debug .grid_stat:not(.grid_stat_head) {
 	margin-bottom: 5px;
+}
+
+@media (max-width: 1000px) {
+	#panel_settings.rowlist.bgavatars.micro_grid, .micro_grid {
+		grid-gap: 12px;
+		grid-row-gap: 4px;
+		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	}
 }

themes/nox/public/profile.css

@@ -85,4 +85,17 @@
 
 .footer .widget, .sidebar {
 	display: none;
+}
+
+@media(max-width: 500px) {
+	.colstack {
+		display: block;
+	}
+	#profile_left_lane {
+		margin-right: 0px;
+		margin-bottom: 12px;
+	}
+	.topBlock, .levelBlock, .passiveBlock {
+		width: auto;
+	}
 }