From dc2030e6f3c46a9f8af52d8f93a54dba4b6634b7 Mon Sep 17 00:00:00 2001
From: Matthew Crossman
Date: Sat, 30 Jan 2021 21:21:54 +1100
Subject: [PATCH] Vertical list subscriptions.
---
static/style.css | 50 +++++++++++++++++++++++++++++++---------
templates/base.html | 3 ++-
templates/post.html | 2 +-
templates/search.html | 2 +-
templates/settings.html | 2 +-
templates/subreddit.html | 2 +-
templates/user.html | 2 +-
templates/utils.html | 20 ++++++++--------
templates/wiki.html | 2 +-
9 files changed, 58 insertions(+), 27 deletions(-)
diff --git a/static/style.css b/static/style.css
index 9e57140..61c2e73 100644
--- a/static/style.css
+++ b/static/style.css
@@ -84,7 +84,7 @@ nav {
font-size: 20px;
- z-index: 1;
+ z-index: 2;
top: 0;
padding: 5px 15px;
min-height: 40px;
@@ -256,28 +256,49 @@ aside {
/* Subscribed subreddit list */
-#subscriptions {
+#subscriptions_container {
display: flex;
max-width: 1000px;
margin: 0 auto;
- align-items: center;
padding: 10px 20px;
}
-.wide #subscriptions {
+#subscriptions_container.narrow {
+ max-width: 750px;
+}
+
+.wide #subscriptions_container, .wide #subscriptions_container.narrow {
max-width: calc(100% - 40px);
}
+#subscriptions {
+ display: inline-block;
+ position: relative;
+ border-radius: 5px;
+ background-color: var(--outside);
+ align-items: center;
+ box-sizing: border-box;
+}
+
+#subscriptions > summary {
+ padding: 10px 20px 10px 15px;
+}
+
#sub_list {
+ position: absolute;
+ display: flex;
+ min-width: 100%;
border-radius: 5px;
box-shadow: var(--shadow);
background: var(--outside);
- display: flex;
+ flex-direction: column;
overflow: auto;
+ z-index: 1;
}
#sub_list > a {
padding: 10px 20px;
+ transition: 0.2s background;
}
#sub_list > .selected {
@@ -285,6 +306,10 @@ aside {
color: var(--foreground);
}
+#sub_list > a:not(.selected):hover {
+ background-color: var(--foreground);
+}
+
/* Wiki Pages */
#wiki {
@@ -505,10 +530,6 @@ a.search_subreddit:hover {
.post:not(:last-child) { margin-bottom: 10px; }
-.post.highlighted {
- margin: 20px 0;
-}
-
.post:hover {
background: var(--foreground);
}
@@ -1022,9 +1043,16 @@ td, th {
width: calc(100% - 20px);
}
- #sub_list {
+ #subscriptions_container {
padding: 10px;
- max-width: 100%;
+ justify-content: center;
+ }
+ #subscriptions { position: unset; }
+
+ #sub_list {
+ left: 10px;
+ right: 10px;
+ min-width: auto;
}
aside, #subreddit, #user {
diff --git a/templates/base.html b/templates/base.html
index 520b737..e333e05 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -23,10 +23,11 @@
v{{ env!("CARGO_PKG_VERSION") }}
settings
- {% block subscriptions %}{% endblock %}
{% block search %}{% endblock %}
code
+
+ {% block subscriptions %}{% endblock %}
{% block body %}
diff --git a/templates/post.html b/templates/post.html
index 619005e..a8db811 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -14,7 +14,7 @@
{% endblock %}
{% block subscriptions %}
- {% call utils::sub_list(post.community.as_str()) %}
+ {% call utils::sub_list(post.community.as_str(), "narrow") %}
{% endblock %}
diff --git a/templates/search.html b/templates/search.html
index 37edfc6..33e644a 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -4,7 +4,7 @@
{% block title %}Libreddit: search results - {{ params.q }}{% endblock %}
{% block subscriptions %}
- {% call utils::sub_list("") %}
+ {% call utils::sub_list("", "narrow") %}
{% endblock %}
{% block content %}
diff --git a/templates/settings.html b/templates/settings.html
index e0e3bf3..a2514ea 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -8,7 +8,7 @@
{% endblock %}
{% block subscriptions %}
- {% call utils::sub_list("") %}
+ {% call utils::sub_list("", "narrow") %}
{% endblock %}
{% block content %}
diff --git a/templates/subreddit.html b/templates/subreddit.html
index e3d550d..94c94d6 100644
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@@ -12,7 +12,7 @@
{% endblock %}
{% block subscriptions %}
- {% call utils::sub_list(sub.name.as_str()) %}
+ {% call utils::sub_list(sub.name.as_str(), "wide") %}
{% endblock %}
{% block body %}
diff --git a/templates/user.html b/templates/user.html
index c19a3ca..2f5f250 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -8,7 +8,7 @@
{% block title %}{{ user.name.replace("u/", "") }} (u/{{ user.name }}) - Libreddit{% endblock %}
{% block subscriptions %}
- {% call utils::sub_list("") %}
+ {% call utils::sub_list("", "wide") %}
{% endblock %}
{% block body %}
diff --git a/templates/utils.html b/templates/utils.html
index f8a0318..f036045 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -40,15 +40,17 @@
{% endfor %}
{%- endmacro %}
-{% macro sub_list(current) -%}
+{% macro sub_list(current, width) -%}
{% if prefs.subs.len() > 0 %}
-
- subscribed
-
- {% for sub in prefs.subs %}
-
{{ sub }}
- {% endfor %}
-
-
+
+
+ Subscriptions
+
+ {% for sub in prefs.subs %}
+
{{ sub }}
+ {% endfor %}
+
+
+
{% endif %}
{%- endmacro %}
diff --git a/templates/wiki.html b/templates/wiki.html
index 882f228..0a05fb3 100644
--- a/templates/wiki.html
+++ b/templates/wiki.html
@@ -11,7 +11,7 @@
{% endblock %}
{% block subscriptions %}
- {% call utils::sub_list(sub.as_str()) %}
+ {% call utils::sub_list(sub.as_str(), "narrow") %}
{% endblock %}
{% block body %}