mirror of https://github.com/spikecodes/libreddit
Vertical list subscriptions.
This commit is contained in:
parent
ef5a1cd66e
commit
dc2030e6f3
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 -->
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue