Switch Sorting System to Dropdown
This commit is contained in:
parent
da971f8680
commit
b1071e9579
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
@ -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'>
|
||||||
|
Loading…
Reference in New Issue
Block a user