Sorting: add comments sort for comments and constantify sorts

files/helpers/const.py

@@ -34,6 +34,19 @@ ROLES={}
 
 THEMES = {"TheMotte", "dramblr", "reddit", "transparent", "win98", "dark", 
 			"light", "coffee", "tron", "4chan", "midnight"}
+SORTS_COMMON = {
+	"top": 'fa-arrow-alt-circle-up', 
+	"bottom": 'fa-arrow-alt-circle-down', 
+	"new": 'fa-sparkles', 
+	"old": 'fa-book', 
+	"controversial": 'fa-bullhorn',
+	"comments": 'fa-comments'
+}
+SORTS_POSTS = {
+	"hot": "fa-fire",
+	"bump": "fa-arrow-up"
+}
+SORTS_POSTS.update(SORTS_COMMON)
 
 IMGUR_KEY = environ.get("IMGUR_KEY").strip()
 PUSHER_ID = environ.get("PUSHER_ID", "").strip()

files/helpers/contentsorting.py

@@ -1,10 +1,15 @@
 import time
+from typing import Union
 
 from sqlalchemy.sql import func
+from sqlalchemy.orm import Query
 
+from files.classes.comment import Comment
+from files.classes.submission import Submission
 from files.helpers.const import *
 
 
+
 def apply_time_filter(objects, t, cls):
 	now = int(time.time())
 	if t == 'hour':
@@ -22,35 +27,37 @@ def apply_time_filter(objects, t, cls):
 	return objects.filter(cls.created_utc >= cutoff)
 
 
-def sort_objects(objects, sort, cls):
+def sort_objects(objects: Query, sort: str, cls: type[Union[Comment, Submission]]):
 	if sort == 'hot':
 		ti = int(time.time()) + 3600
-		return objects.order_by(
+		ordered = objects.order_by(
 			-100000
 				* (cls.upvotes + 1)
-				/ (func.power((ti - cls.created_utc) / 1000, 1.23)),
+				/ (func.power((ti - cls.created_utc) / 1000, 1.23)))
-			cls.created_utc.desc())
+	elif sort == 'bump' and cls is Submission:
-	elif sort == 'bump' and cls.__name__ == 'Submission':
+		ordered = objects.filter(cls.comment_count > 1).order_by(cls.bump_utc.desc())
-		return objects.filter(cls.comment_count > 1).order_by(
+	elif sort == 'comments':
-			cls.bump_utc.desc(), cls.created_utc.desc())
+		if cls is Submission:
-	elif sort == 'comments' and cls.__name__ == 'Submission':
+			ordered = objects.order_by(cls.comment_count.desc())
-		return objects.order_by(
+		elif cls is Comment:
-			cls.comment_count.desc(), cls.created_utc.desc())
+			ordered = objects.order_by(cls.descendant_count.desc())
+		else:
+			ordered = objects
 	elif sort == 'controversial':
-		return objects.order_by(
+		ordered = objects.order_by(
 			(cls.upvotes + 1) / (cls.downvotes + 1)
 				+ (cls.downvotes + 1) / (cls.upvotes + 1),
-			cls.downvotes.desc(), cls.created_utc.desc())
+			cls.downvotes.desc())
 	elif sort == 'top':
-		return objects.order_by(
+		ordered = objects.order_by(cls.downvotes - cls.upvotes)
-			cls.downvotes - cls.upvotes, cls.created_utc.desc())
 	elif sort == 'bottom':
-		return objects.order_by(
+		ordered = objects.order_by(cls.upvotes - cls.downvotes)
-			cls.upvotes - cls.downvotes, cls.created_utc.desc())
 	elif sort == 'old':
 		return objects.order_by(cls.created_utc)
-	else: # default, or sort == 'new'
+	else:
-		return objects.order_by(cls.created_utc.desc())
+		ordered = objects
+	ordered = ordered.order_by(cls.created_utc.desc())
+	return ordered
 
 
 # Presently designed around files.helpers.get.get_comment_trees_eager
@@ -65,6 +72,8 @@ def sort_comment_results(comments, sort):
 				/ (pow(((ti - c.created_utc) / 1000), 1.23)),
 			DESC - c.created_utc
 		)
+	elif sort == 'comments':
+		key_func = lambda c: DESC - c.descendant_count
 	elif sort == 'controversial':
 		key_func = lambda c: (
 			(c.upvotes + 1) / (c.downvotes + 1)

files/routes/settings.py

@@ -215,14 +215,14 @@ def settings_profile_post(v):
 
 	defaultsortingcomments = request.values.get("defaultsortingcomments")
 	if defaultsortingcomments:
-		if defaultsortingcomments in {"new", "old", "controversial", "top", "bottom"}:
+		if defaultsortingcomments in SORTS_ALL:
 			v.defaultsortingcomments = defaultsortingcomments
 			updated = True
 		else: abort(400)
 
 	defaultsorting = request.values.get("defaultsorting")
 	if defaultsorting:
-		if defaultsorting in {"hot", "bump", "new", "old", "comments", "controversial", "top", "bottom"}:
+		if defaultsorting in SORTS_POSTS:
 			v.defaultsorting = defaultsorting
 			updated = True
 		else: abort(400)

files/templates/changelog.html

@@ -1,4 +1,5 @@
 {% extends "settings2.html" %}
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 
 {% block pagetitle %}Changelog{% endblock %}
 
@@ -35,27 +36,7 @@
 				</div>
 
 				<div class="text-small font-weight-bold ml-3 mr-2">‎</div>
-				<div class="dropdown dropdown-actions">
+				{{sorting_time.sort_dropdown(false)}}
-					<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						{% if sort=="hot" %}<i class="fas fa-fire mr-1"></i>{% endif %}
-						{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-						{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-						{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-						{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-						{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-						{% if sort=="comments" %}<i class="fas fa-comments mr-1"></i>{% endif %}
-						{{sort | capitalize}}
-					</button>
-					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-						{% if sort != "hot" %}<a class="dropdown-item" href="?sort=hot&t={{t}}"><i class="fas fa-fire mr-2"></i>Hot</a>{% endif %}
-						{% if sort != "top" %}<a class="dropdown-item" href="?sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-						{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-						{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-						{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-						{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-						{% if sort != "comments" %}<a class="dropdown-item" href="?sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
-					</div>
-				</div>
 			</div>
 			{% endblock %}
 		</div>
@@ -72,13 +53,9 @@
 {% endif %}
 
 <div class="row no-gutters {% if listing %}mt-md-3{% elif not listing %}my-md-3{% endif %}">
-
 	<div class="col-12">
-
 		<div class="posts" id="posts">
-
 			{% include "submission_listing.html" %}
-
 		</div>
 	</div>
 </div>

files/templates/component/sorting_time.html

@@ -0,0 +1,12 @@
+{%- macro sort_dropdown(is_comment, extra_query) -%}
+<div class="dropdown dropdown-actions">
+	<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fas {{SORTS_POSTS[sort]}} mr-1"></i> {{sort|capitalize}}
+	</button>
+	{% for possible_sort in (SORTS_ALL if is_comment else SORTS_POSTS) %}
+		{%- if sort != possible_sort -%}
+			<a class="dropdown-item" href="?{{extra_query . '&' if extra_query else ''}}sort={{possible_sort}}&t={{t}}"><i class="fas {{SORTS_POSTS[possible_sort]}} mr-1"></i> {{possible_sort | capitalize}}</a>
+		{%- endif -%}
+	{% endfor %}
+</div>
+{%- endmacro -%}

files/templates/home.html

@@ -1,5 +1,5 @@
 {% extends "default.html" %}
-
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 {% block desktopBanner %}
 
 {% if v and environ.get("FP") %}
@@ -73,30 +73,8 @@
 						{% if t != "all" %}<a class="dropdown-item" href="?sort={{sort}}&t=all&ccmode={{ccmode}}"><i class="fas fa-infinity mr-2 "></i>All</a>{% endif %}
 					</div>
 				</div>
-
+				{% set ccmode_text = 'ccmode=' . ccmode %}
-				<div class="dropdown dropdown-actions ml-2">
+				{{sorting_time.sort_dropdown(false, ccmode_text)}}
-					<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-						{% if sort=="hot" %}<i class="fas fa-fire mr-2 "></i>{% endif %}
-						{% if sort=="bump" %}<i class="fas fa-arrow-up mr-2 "></i>{% endif %}
-						{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-2 "></i>{% endif %}
-						{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-2 "></i>{% endif %}
-						{% if sort=="new" %}<i class="fas fa-sparkles mr-2 "></i>{% endif %}
-						{% if sort=="old" %}<i class="fas fa-book mr-2 "></i>{% endif %}
-						{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-2 "></i>{% endif %}
-						{% if sort=="comments" %}<i class="fas fa-comments mr-2 "></i>{% endif %}
-						{{sort | capitalize}}
-					</button>
-					<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-						{% if sort != "hot" %}<a class="dropdown-item" href="?sort=hot&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-fire mr-2 "></i>Hot</a>{% endif %}
-						{% if sort != "bump" %}<a class="dropdown-item" href="?sort=bump&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-arrow-up mr-2 "></i>Bump</a>{% endif %}
-						{% if sort != "top" %}<a class="dropdown-item" href="?sort=top&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-arrow-alt-circle-up mr-2 "></i>Top</a>{% endif %}
-						{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-arrow-alt-circle-down mr-2 "></i>Bottom</a>{% endif %}
-						{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-sparkles mr-2 "></i>New</a>{% endif %}
-						{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-book mr-2 "></i>Old</a>{% endif %}
-						{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-bullhorn mr-2 "></i>Controversial</a>{% endif %}
-						{% if sort != "comments" %}<a class="dropdown-item" href="?sort=comments&t={{t}}&ccmode={{ccmode}}"><i class="fas fa-comments mr-2 "></i>Comments</a>{% endif %}
-					</div>
-				</div>
 			</div>
 			{% endblock %}
 		</div>
@@ -104,21 +82,14 @@
 </div>
 
 {% endblock %}
-
 {% block content %}
-
 <div class="row no-gutters {% if listing %}mt-md-3{% elif not listing %}my-md-3{% endif %}">
-
 	<div class="col-12">
-
 		<div class="posts" id="posts">
-
 			{% include "submission_listing.html" %}
-
 		</div>
 	</div>
 </div>
-
 {% endblock %}
 
 {% block pagenav %}

files/templates/home_comments.html

@@ -1,4 +1,5 @@
 {% extends "default.html" %}
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 
 {% block sortnav %}{% endblock %}
 
@@ -30,39 +31,17 @@
 			</div>
 
 			<div class="text-small font-weight-bold ml-3 mr-2">‎</div>
-			<div class="dropdown dropdown-actions">
+			{{sorting_time.sort_dropdown(true)}}
-				<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-					{{sort | capitalize}}
-				</button>
-				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-					{% if sort != "top" %}<a class="dropdown-item" href="?sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-					{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-					{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-					{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-					{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-				</div>
-			</div>
 		</div>
 	</div>
 
 	<div class="row no-gutters {% if listing %}mt-md-3{% elif not listing %}my-md-3{% endif %}">
-
 		<div class="col-12 px-3">
-
 			<div class="posts" id="posts">
-
 				{% include "comments.html" %}
-
 			</div>
 		</div>
 	</div>
-
-
 {% endblock %}
 
 {% block pagenav %}

files/templates/search.html

@@ -1,4 +1,5 @@
 {% extends "home.html" %}
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 
 {% block pagetype %}search{% endblock %}
 
@@ -30,25 +31,8 @@
 				</div>
 			</div>
 
-			<div class="dropdown dropdown-actions">
+			{% set query_text = 'q=' . query | urlencode %}
-				<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+			{{sorting_time.sort_dropdown(false, query_text)}}
-					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-					{% if sort=="comments" %}<i class="fas fa-comments mr-1"></i>{% endif %}
-					{{sort | capitalize}}
-				</button>
-				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-					{% if sort != "top" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-					{% if sort != "bottom" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-					{% if sort != "new" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-					{% if sort != "old" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-					{% if sort != "controversial" %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-					{% if sort != "comments" and "/posts/" in request.path %}<a class="dropdown-item" href="?q={{query | urlencode}}&sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
-				</div>
-			</div>
 		</div>
 	{% endif %}
 {% endblock %}
@@ -56,11 +40,8 @@
 {% block content %}
 
 <div class="row no-gutters my-md-3">
-
 	<div class="col">
-
 		<div class="card search-results">
-
 			<div class="card-header bg-white d-none">
 				<ul class="list-inline no-bullets mb-0">
 					<li class="list-inline-item active mr-4"><i class="fas fa-align-left text-gray-400"></i></li>
@@ -73,19 +54,16 @@
 					<br>
 					<div class="text-muted text-small mb-1">Showing {% block listinglength %}{{listing | length}}{% endblock %} of {{total}} result{{'s' if total != 1 else ''}} for</div>
 					<h1 class="h4 mb-0">{{query}}</h1>
-
 				</div>
 			</div>
 		</div>
 	</div>
-
 </div>
 
-
 {% if not '/users/' in request.path %}
 
 <div class="flex-row tab-bar d-none">
-
+	{# TODO: Constantify sorts #}
 	<ul class="nav post-nav mr-auto">
 		<li class="nav-item">
 			<a class="nav-link{% if sort=='top' %} active{% endif %}" href="?sort=top&q={{query | urlencode}}&t={{t}}"><i class="fas fa-arrow-alt-circle-up"></i>Top</a>
@@ -132,15 +110,11 @@
 	</div>
 
 	<div class="row no-gutters">
-
 		<div class="col-12">
-
 			<div class="posts" id="posts">
-
 				{% block listing_template %}
 					{% include "submission_listing.html" %}
 				{% endblock %}
-
 			</div>
 		</div>
 	</div>
@@ -150,14 +124,11 @@
 		<nav aria-label="Page navigation">
 			<ul class="pagination pagination-sm mb-0">
 				<li class="page-item{% if page==1 %} disabled{% endif %}">
-
 					<small><a class="page-link" href="?sort={{sort}}&q={{query | urlencode}}&t={{t}}&page={{page-1}}" tabindex="-1"{% if page==1 %} aria-disabled="true"{% endif %}>Back</a></small>
 				</li>
 				<li class="page-item{% if not next_exists %} disabled{% endif %}">
 					<small><a class="page-link" href="?sort={{sort}}&q={{query | urlencode}}&t={{t}}&page={{page+1}}">Next</a></small>
-
 				</li>
 			</ul>
 		</nav>
-
 	{% endblock %}

files/templates/settings_filters.html

@@ -1,24 +1,15 @@
 {% extends "settings.html" %}
-
 {% block pagetitle %}Profile Settings - {{SITE_TITLE}}{% endblock %}
-
 {% block content %}
-
-
 <div class="row">
-
 	<div class="col col-lg-8">
-
 		<div class="settings">
-
 			<h2 class="h5" name="referral">Frontpage Size</h2>
-
 			<div class="settings-section rounded">
 				<div class="d-lg-flex border-bottom">
 					<div class="title w-lg-25">
 						<label for="frontsize">Frontpage Size</label>
 					</div>
-
 					<div class="body w-lg-100">
 						<p>Change how many posts appear on every page.</p>
 						<div class="input-group mb2">
@@ -28,9 +19,7 @@
 							{% endfor %}
 						</select>
 						</div>
-
 					</div>
-
 				</div>
 			</div>
 
@@ -48,14 +37,12 @@
 							<p>Change the default sorting for comments.</p>
 							<div class="input-group mb2">
 								<select autocomplete="off" id='defaultsortingcomments' class="form-control" form="profile-settings" name="defaultsortingcomments" onchange="post_toast(this,'/settings/profile?defaultsortingcomments='+document.getElementById('defaultsortingcomments').value)">
-								{% for entry in ["new", "old", "top", "bottom", "controversial"] %}
+								{% for entry in SORTS_ALL %}
 									<option value="{{entry}}"{{' selected' if v.defaultsortingcomments==entry}}>{{entry}}</option>
 								{% endfor %}
 							</select>
 							</div>
-
 						</div>
-
 					</div>
 
 					<div class="d-lg-flex border-bottom">
@@ -67,21 +54,17 @@
 							<p>Change the default sorting for posts.</p>
 							<div class="input-group mb2">
 								<select autocomplete="off" id='defaultsorting' class="form-control" form="profile-settings" name="defaultsorting" onchange="post_toast(this,'/settings/profile?defaultsorting='+document.getElementById('defaultsorting').value)">
-								{% for entry in ["hot", "bump", "new", "old", "top", "bottom", "controversial", "comments"] %}
+								{% for entry in SORTS_POSTS %}
 								<option value="{{entry}}"{{' selected' if v.defaultsorting==entry}}>{{entry}}</option>
 								{% endfor %}
 							</select>
 							</div>
-
 						</div>
-
 				</div>
-
 					<div class="d-lg-flex border-bottom">
 						<div class="title w-lg-25">
 							<label for="defaulttime">Default Time Filter for Posts</label>
 						</div>
-
 						<div class="body w-lg-100">
 							<p>Change the default time filter for posts.</p>
 							<div class="input-group mb2">
@@ -91,34 +74,24 @@
 								{% endfor %}
 							</select>
 							</div>
-
 						</div>
-
 				</div>
-
 			</div>
 
 			<h2 class="h5">Tab Behaviour</h2>
 
 			<div class="settings-section rounded">
-
 				<div class="d-lg-flex border-bottom">
-
 					<div class="title w-lg-25">
 						<label for="newtab">Open Internal Links In New Tabs</label>
 					</div>
-
 					<div class="body w-lg-100">
-
 						<div class="custom-control custom-switch">
 							<input autocomplete="off" type="checkbox" class="custom-control-input" id="newtab" name="newtab"{% if v.newtab %} checked{% endif %} onchange="post_toast(this,'/settings/profile?newtab='+document.getElementById('newtab').checked);">
 							<label class="custom-control-label" for="newtab"></label>
 						</div>
-
 						<span class="text-small-extra text-muted">Enable if you would like to automatically open links to other pages in the site in new tabs.</span>
-
 					</div>
-
 				</div>
 
 
@@ -136,51 +109,34 @@
 						</div>
 
 						<span class="text-small-extra text-muted">Enable if you would like to automatically open links to other sites in new tabs.</span>
-
 					</div>
-
 				</div>
-
-
-
 			</div>
 
 
 			<h2 class="h5">Twitter Links</h2>
-
 			<div class="settings-section rounded">
-
 				<div class="d-lg-flex border-bottom">
-
 					<div class="title w-lg-25">
 						<label for="nitter">Use Nitter</label>
 					</div>
 
 					<div class="body w-lg-100">
-
 						<div class="custom-control custom-switch">
 							<input autocomplete="off" type="checkbox" class="custom-control-input" id="nitter" name="nitter"{% if v.nitter %} checked{% endif %} onchange="post_toast(this,'/settings/profile?nitter='+document.getElementById('nitter').checked);">
 							<label class="custom-control-label" for="nitter"></label>
 						</div>
-
 						<span class="text-small-extra text-muted">Enable if you would like to automatically convert twitter.com links to nitter.net links.</span>
-
 					</div>
-
 				</div>
-
 			</div>
 
-
 			<h2 class="h5">Reddit Links</h2>
-
 			<div class="settings-section rounded">
-
 				<div class="d-lg-flex border-bottom">
 					<div class="title w-lg-25">
 						<label for="reddit">Reddit Domain</label>
 					</div>
-
 					<div class="body w-lg-100">
 						<p>Change the domain you would like to view reddit posts in.</p>
 						<div class="input-group mb2">
@@ -190,28 +146,21 @@
 							{% endfor %}
 						</select>
 						</div>
-
 					</div>
-
 				</div>
 
 				<div class="d-lg-flex border-bottom">
-
 					<div class="title w-lg-25">
 						<label for="controversial">Sort by Controversial</label>
 					</div>
-
 					<div class="body w-lg-100">
 
 						<div class="custom-control custom-switch">
 							<input autocomplete="off" type="checkbox" class="custom-control-input" id="controversial" name="controversial"{% if v.controversial %} checked{% endif %} onchange="post_toast(this,'/settings/profile?controversial='+document.getElementById('controversial').checked);">
 							<label class="custom-control-label" for="controversial"></label>
 						</div>
-
 						<span class="text-small-extra text-muted">Enable if you would like to automatically sort reddit.com links by controversial.</span>
-
 					</div>
-
 				</div>
 			</div>
 

files/templates/submission.html

@@ -1,5 +1,5 @@
 {% extends "default.html" %}
-
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 
 {% if p.should_hide_score %}
 	{% set ups="" %}
@@ -447,28 +447,12 @@
 <div class="row border-md-0 comment-section pb-3">
 	<div class="col border-top">
 		<div class="comments-count py-3">
-			<div class="dropdown dropdown-actions">
+			{{sorting_time.sort_dropdown(true)}}
-				<button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-					{{sort | capitalize}}
-				</button>
-				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-					{% if sort != "top" %}<a class="dropdown-item" href="?sort=top"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-					{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-					{% if sort != "new" %}<a class="dropdown-item" href="?sort=new"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-					{% if sort != "old" %}<a class="dropdown-item" href="?sort=old"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-					{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-				</div>
 			{% if comment_info and p.comment_count >= 2%}
 			<pre></pre>
 			<div class="total"><a href="{{p.permalink}}">View entire discussion</a></div>
 			{% endif %}
 		</div>
-		</div>
 
 	{% if v %}
 		<div id="comment-form-space-{{p.fullname}}" class="comment-write mb-3">

files/templates/userpage.html

@@ -1,5 +1,5 @@
 {% extends "default.html" %}
-
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 
 {% block pagetype %}userpage{% endblock %}
 
@@ -593,25 +593,7 @@
 			</div>
 
 			<div class="text-small font-weight-bold ml-3 mr-2">‎</div>
-			<div class="dropdown dropdown-actions">
+			{{sorting_time.sort_dropdown(false)}}
-				<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-					{% if sort=="comments" %}<i class="fas fa-comments mr-1"></i>{% endif %}
-					{{sort | capitalize}}
-				</button>
-				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-					{% if sort != "top" %}<a class="dropdown-item" href="?sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-					{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-					{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-					{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-					{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-					{% if sort != "comments" %}<a class="dropdown-item" href="?sort=comments&t={{t}}"><i class="fas fa-comments mr-2"></i>Comments</a>{% endif %}
-				</div>
-			</div>
 		</div>
 	</div>
 {% endif %}

files/templates/userpage_comments.html

@@ -1,4 +1,5 @@
 {% extends "userpage.html" %}
+{%- import 'component/sorting_time.html' as sorting_time with context -%}
 
 {% block content %}
 
@@ -52,23 +53,7 @@
 			</div>
 
 			<div class="text-small font-weight-bold ml-3 mr-2">‎</div>
-			<div class="dropdown dropdown-actions">
+			{{sorting_time.sort_dropdown(true)}}
-				<button class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-					{% if sort=="top" %}<i class="fas fa-arrow-alt-circle-up mr-1"></i>{% endif %}
-					{% if sort=="bottom" %}<i class="fas fa-arrow-alt-circle-down mr-1"></i>{% endif %}
-					{% if sort=="new" %}<i class="fas fa-sparkles mr-1"></i>{% endif %}
-					{% if sort=="old" %}<i class="fas fa-book mr-1"></i>{% endif %}
-					{% if sort=="controversial" %}<i class="fas fa-bullhorn mr-1"></i>{% endif %}
-					{{sort | capitalize}}
-				</button>
-				<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 31px, 0px);">
-					{% if sort != "top" %}<a class="dropdown-item" href="?sort=top&t={{t}}"><i class="fas fa-arrow-alt-circle-up mr-2"></i>Top</a>{% endif %}
-					{% if sort != "bottom" %}<a class="dropdown-item" href="?sort=bottom&t={{t}}"><i class="fas fa-arrow-alt-circle-down mr-2"></i>Bottom</a>{% endif %}
-					{% if sort != "new" %}<a class="dropdown-item" href="?sort=new&t={{t}}"><i class="fas fa-sparkles mr-2"></i>New</a>{% endif %}
-					{% if sort != "old" %}<a class="dropdown-item" href="?sort=old&t={{t}}"><i class="fas fa-book mr-2"></i>Old</a>{% endif %}
-					{% if sort != "controversial" %}<a class="dropdown-item" href="?sort=controversial&t={{t}}"><i class="fas fa-bullhorn mr-2"></i>Controversial</a>{% endif %}
-				</div>
-			</div>
 		</div>
 	</div>
 {% endif %}