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 %}