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

View File

@ -4,22 +4,14 @@
{% block head %} {% block head %}
<title>{% block title %}Libreddit{% endblock %}</title> <title>{% block title %}Libreddit{% endblock %}</title>
<meta http-equiv="Referrer-Policy" content="no-referrer"> <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="description" content="View on Libreddit, an alternative private front-end to Reddit.">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
{% block sortstyle %}
<style>
#sort > #sort_{{ sort }} {
background: aqua;
color: black;
}
</style>
{% endblock %}
{% endblock %} {% endblock %}
</head> </head>
<body> <body style="visibility: hidden;">
{% block navbar %} {% block navbar %}
<nav> <nav>
<a href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a> <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" %} {% extends "base.html" %}
{% block content %} {% block content %}
<div id="sort"> <form>
<div id="sort_hot"><a href="?sort=hot">Hot</a></div> <select id="sort" name="sort">
<div id="sort_top"><a href="?sort=top">Top</a></div> <option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<div id="sort_new"><a href="?sort=new">New</a></div> <option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<div id="sort_rising"><a href="?sort=rising">Rising</a></div> <option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
</div> <option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="→">
</form>
{% for post in posts %} {% for post in posts %}
<div class="post"> <div class="post">
<div class="post_left"> <div class="post_left">

View File

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

View File

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

View File

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