Switch Sorting System to Dropdown

This commit is contained in:
spikecodes 2020-12-20 21:49:31 -08:00
parent da971f8680
commit b1071e9579
6 changed files with 56 additions and 43 deletions

View File

@ -15,10 +15,12 @@
color: white;
font-family: sans-serif;
font-weight: normal;
outline: none;
}
body {
background: var(--background);
visibility: visible !important;
}
nav {
@ -126,11 +128,23 @@ a:not(.post_right):hover {
/* Sorting */
#sort {
max-width: 750px;
margin: 20px -10px;
display: flex;
justify-content: start;
padding: 0px 10px;
background: var(--outside);
box-shadow: var(--black-contrast);
border: 0px;
padding: 0px 15px;
margin: 20px 0px;
height: 40px;
font-size: 15px;
border-radius: 5px 0px 0px 5px;
appearance: none;
}
#sort_submit {
background: var(--highlighted);
border: 0px;
font-size: 15px;
height: 40px;
border-radius: 0px 5px 5px 0px;
}
#sort > div, footer > a {
@ -270,6 +284,7 @@ a:not(.post_right):hover {
border-radius: 5px;
display: flex;
font-size: 15px;
padding: 5px;
}
.comment_left, .comment_right {
@ -361,9 +376,8 @@ a:not(.post_right):hover {
color: aqua;
}
.reply {
margin-top: 0;
margin-left: 2em;
.replies > .comment {
margin-left: -20px;
}
.datetime {

View File

@ -4,22 +4,14 @@
{% block head %}
<title>{% block title %}Libreddit{% endblock %}</title>
<meta http-equiv="Referrer-Policy" content="no-referrer">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self'; frame-ancestors 'none';">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self';">
<meta name="description" content="View on Libreddit, an alternative private front-end to Reddit.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/style.css">
{% block sortstyle %}
<style>
#sort > #sort_{{ sort }} {
background: aqua;
color: black;
}
</style>
{% endblock %}
{% endblock %}
</head>
<body>
<body style="visibility: hidden;">
{% block navbar %}
<nav>
<a href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a>

View File

@ -1,11 +1,13 @@
{% extends "base.html" %}
{% block content %}
<div id="sort">
<div id="sort_hot"><a href="?sort=hot">Hot</a></div>
<div id="sort_top"><a href="?sort=top">Top</a></div>
<div id="sort_new"><a href="?sort=new">New</a></div>
<div id="sort_rising"><a href="?sort=rising">Rising</a></div>
</div>
<form>
<select id="sort" name="sort">
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="→">
</form>
{% for post in posts %}
<div class="post">
<div class="post_left">

View File

@ -13,8 +13,7 @@
<div class="line"></div>
</div>
<details class="comment_right" open>
<summary class="comment_data">
<a class="comment_author" href="/u/{{ item.author }}">u/{{ item.author }}</a>
<summary class="comment_data"><a class="comment_author" href="/u/{{ item.author }}">u/{{ item.author }}</a>
{% if item.flair.0 != "" %}
<small class="author_flair">{{ item.flair.0 }}</small>
{% endif %}
@ -55,13 +54,15 @@
<h4 class="post_body">{{ post.body }}</h4>
</div>
</div>
<div id="sort">
<div id="sort_confidence"><a href="?sort=confidence">Best</a></div>
<div id="sort_top"><a href="?sort=top">Top</a></div>
<div id="sort_new"><a href="?sort=new">New</a></div>
<div id="sort_controversial"><a href="?sort=controversial">Controversial</a></div>
<div id="sort_old"><a href="?sort=old">Old</a></div>
</div>
<form>
<select id="sort" name="sort">
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="controversial" {% if sort == "controversial" %}selected{% endif %}>Controversial</option>
<option value="old" {% if sort == "old" %}selected{% endif %}>Old</option>
</select><input id="sort_submit" type="submit" value="→">
</form>
{% for c in comments -%}
<div class="thread">

View File

@ -20,11 +20,13 @@
</div>
{% endif %}
<main>
<div id="sort">
<div id="sort_hot"><a href="?sort=hot">Hot</a></div>
<div id="sort_top"><a href="?sort=top">Top</a></div>
<div id="sort_new"><a href="?sort=new">New</a></div>
</div>
<form>
<select id="sort" name="sort">
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="→">
</form>
{% for post in posts %}
<div class="post">
<div class="post_left">

View File

@ -13,11 +13,13 @@
</div>
</div>
<main>
<div id="sort">
<div id="sort_hot"><a href="?sort=hot">Hot</a></div>
<div id="sort_top"><a href="?sort=top">Top</a></div>
<div id="sort_new"><a href="?sort=new">New</a></div>
</div>
<form>
<select id="sort" name="sort">
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="→">
</form>
{% for post in posts %}
{% if post.title != "Comment" %}
<div class='post'>