Vertical list subscriptions.

This commit is contained in:
Matthew Crossman 2021-01-30 21:21:54 +11:00
parent ef5a1cd66e
commit dc2030e6f3
No known key found for this signature in database
GPG Key ID: C6B942B019794CC2
9 changed files with 58 additions and 27 deletions

View File

@ -84,7 +84,7 @@ nav {
font-size: 20px; font-size: 20px;
z-index: 1; z-index: 2;
top: 0; top: 0;
padding: 5px 15px; padding: 5px 15px;
min-height: 40px; min-height: 40px;
@ -256,28 +256,49 @@ aside {
/* Subscribed subreddit list */ /* Subscribed subreddit list */
#subscriptions { #subscriptions_container {
display: flex; display: flex;
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
align-items: center;
padding: 10px 20px; padding: 10px 20px;
} }
.wide #subscriptions { #subscriptions_container.narrow {
max-width: 750px;
}
.wide #subscriptions_container, .wide #subscriptions_container.narrow {
max-width: calc(100% - 40px); 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 { #sub_list {
position: absolute;
display: flex;
min-width: 100%;
border-radius: 5px; border-radius: 5px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
background: var(--outside); background: var(--outside);
display: flex; flex-direction: column;
overflow: auto; overflow: auto;
z-index: 1;
} }
#sub_list > a { #sub_list > a {
padding: 10px 20px; padding: 10px 20px;
transition: 0.2s background;
} }
#sub_list > .selected { #sub_list > .selected {
@ -285,6 +306,10 @@ aside {
color: var(--foreground); color: var(--foreground);
} }
#sub_list > a:not(.selected):hover {
background-color: var(--foreground);
}
/* Wiki Pages */ /* Wiki Pages */
#wiki { #wiki {
@ -505,10 +530,6 @@ a.search_subreddit:hover {
.post:not(:last-child) { margin-bottom: 10px; } .post:not(:last-child) { margin-bottom: 10px; }
.post.highlighted {
margin: 20px 0;
}
.post:hover { .post:hover {
background: var(--foreground); background: var(--foreground);
} }
@ -1022,9 +1043,16 @@ td, th {
width: calc(100% - 20px); width: calc(100% - 20px);
} }
#sub_list { #subscriptions_container {
padding: 10px; padding: 10px;
max-width: 100%; justify-content: center;
}
#subscriptions { position: unset; }
#sub_list {
left: 10px;
right: 10px;
min-width: auto;
} }
aside, #subreddit, #user { aside, #subreddit, #user {

View File

@ -23,11 +23,12 @@
<span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span> <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span>
<a id="settings_link" href="/settings">settings</a> <a id="settings_link" href="/settings">settings</a>
</p> </p>
{% block subscriptions %}{% endblock %}
{% block search %}{% endblock %} {% block search %}{% endblock %}
<a id="code" href="https://github.com/spikecodes/libreddit">code</a> <a id="code" href="https://github.com/spikecodes/libreddit">code</a>
</nav> </nav>
{% block subscriptions %}{% endblock %}
<!-- MAIN CONTENT --> <!-- MAIN CONTENT -->
{% block body %} {% block body %}
<main> <main>

View File

@ -14,7 +14,7 @@
{% endblock %} {% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list(post.community.as_str()) %} {% call utils::sub_list(post.community.as_str(), "narrow") %}
{% endblock %} {% endblock %}
<!-- OPEN COMMENT MACRO --> <!-- OPEN COMMENT MACRO -->

View File

@ -4,7 +4,7 @@
{% block title %}Libreddit: search results - {{ params.q }}{% endblock %} {% block title %}Libreddit: search results - {{ params.q }}{% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list("") %} {% call utils::sub_list("", "narrow") %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}

View File

@ -8,7 +8,7 @@
{% endblock %} {% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list("") %} {% call utils::sub_list("", "narrow") %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}

View File

@ -12,7 +12,7 @@
{% endblock %} {% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list(sub.name.as_str()) %} {% call utils::sub_list(sub.name.as_str(), "wide") %}
{% endblock %} {% endblock %}
{% block body %} {% block body %}

View File

@ -8,7 +8,7 @@
{% block title %}{{ user.name.replace("u/", "") }} (u/{{ user.name }}) - Libreddit{% endblock %} {% block title %}{{ user.name.replace("u/", "") }} (u/{{ user.name }}) - Libreddit{% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list("") %} {% call utils::sub_list("", "wide") %}
{% endblock %} {% endblock %}
{% block body %} {% block body %}

View File

@ -40,15 +40,17 @@
{% endfor %} {% endfor %}
{%- endmacro %} {%- endmacro %}
{% macro sub_list(current) -%} {% macro sub_list(current, width) -%}
{% if prefs.subs.len() > 0 %} {% if prefs.subs.len() > 0 %}
<details id="subscriptions"> <div id="subscriptions_container" class="{{ width }}">
<summary>subscribed</summary> <details id="subscriptions">
<div id="sub_list"> <summary>Subscriptions</summary>
{% for sub in prefs.subs %} <div id="sub_list">
<a href="/r/{{ sub }}" {% if sub == current %}class="selected"{% endif %}>{{ sub }}</a> {% for sub in prefs.subs %}
{% endfor %} <a href="/r/{{ sub }}" {% if sub == current %}class="selected"{% endif %}>{{ sub }}</a>
</div> {% endfor %}
</details> </div>
</details>
</div>
{% endif %} {% endif %}
{%- endmacro %} {%- endmacro %}

View File

@ -11,7 +11,7 @@
{% endblock %} {% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list(sub.as_str()) %} {% call utils::sub_list(sub.as_str(), "narrow") %}
{% endblock %} {% endblock %}
{% block body %} {% block body %}