Move the subs list into the navbar.

This commit is contained in:
Matthew Crossman 2021-01-31 09:52:18 +11:00
parent 449899962a
commit 8cc01c58f3
No known key found for this signature in database
GPG Key ID: C6B942B019794CC2
7 changed files with 26 additions and 35 deletions

View File

@ -73,7 +73,7 @@ body {
nav { nav {
display: grid; display: grid;
grid-template-areas: "logo searchbox code"; grid-template-areas: "logo searchbox links";
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -95,11 +95,12 @@ nav {
nav * { color: var(--text); } nav * { color: var(--text); }
nav #reddit, #code { color: var(--accent); } nav #reddit, #code { color: var(--accent); }
nav #logo { grid-area: logo; } nav #logo { grid-area: logo; }
nav #code { grid-area: code; } nav #links { grid-area: links; }
nav #version { opacity: 50%; }
nav #version { opacity: 50%; vertical-align: -2px; }
nav #libreddit { vertical-align: -2px; }
#settings_link { #settings_link {
font-size: 18px;
margin-left: 10px; margin-left: 10px;
opacity: 0.8; opacity: 0.8;
} }
@ -257,27 +258,18 @@ aside {
/* Subscribed subreddit list */ /* Subscribed subreddit list */
#subscriptions_container { #subscriptions_container {
display: flex; display: inline-block;
max-width: 1000px; margin-left: 10px;
margin: 0 auto;
padding: 10px 20px;
}
#subscriptions_container.narrow {
max-width: 750px;
}
.wide #subscriptions_container, .wide #subscriptions_container.narrow {
max-width: calc(100% - 40px);
} }
#subscriptions { #subscriptions {
display: inline-block;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
border: var(--panel-border);
background-color: var(--outside); background-color: var(--outside);
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
font-size: 15px;
} }
#subscriptions > summary { #subscriptions > summary {
@ -1052,7 +1044,7 @@ td, th {
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
body { padding-top: 100px } body { padding-top: 120px }
main { main {
flex-direction: column-reverse; flex-direction: column-reverse;
@ -1062,15 +1054,13 @@ td, th {
} }
nav { nav {
grid-template-areas: 'logo code' 'searchbox searchbox'; grid-template-areas: 'logo links' 'searchbox searchbox';
padding: 10px; padding: 10px;
width: calc(100% - 20px); width: calc(100% - 20px);
} }
#subscriptions_container { #version { display: none; }
padding: 10px;
justify-content: center;
}
#subscriptions { position: unset; } #subscriptions { position: unset; }
#sub_list { #sub_list {

View File

@ -16,18 +16,19 @@
{% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}"> {% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}">
<!-- NAVIGATION BAR --> <!-- NAVIGATION BAR -->
<nav> <nav>
<p id="logo"> <div id="logo">
<a id="libreddit" href="/"> <a id="libreddit" href="/">
<span id="lib">lib</span><span id="reddit">reddit.</span> <span id="lib">lib</span><span id="reddit">reddit.</span>
</a> </a>
<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>
</p>
{% block search %}{% endblock %}
<a id="code" href="https://github.com/spikecodes/libreddit">code</a>
</nav>
{% block subscriptions %}{% endblock %} {% block subscriptions %}{% endblock %}
</div>
{% block search %}{% endblock %}
<div id="links">
<a id="settings_link" href="/settings">settings</a>
<a id="code" href="https://github.com/spikecodes/libreddit">code</a>
</div>
</nav>
<!-- MAIN CONTENT --> <!-- MAIN CONTENT -->
{% block body %} {% block body %}

View File

@ -14,7 +14,7 @@
{% endblock %} {% endblock %}
{% block subscriptions %} {% block subscriptions %}
{% call utils::sub_list(post.community.as_str(), "narrow") %} {% call utils::sub_list(post.community.as_str()) %}
{% 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("", "narrow") %} {% call utils::sub_list("") %}
{% endblock %} {% endblock %}
{% block content %} {% block content %}

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("", "wide") %} {% call utils::sub_list("") %}
{% endblock %} {% endblock %}
{% block body %} {% block body %}

View File

@ -40,9 +40,9 @@
{% endfor %} {% endfor %}
{%- endmacro %} {%- endmacro %}
{% macro sub_list(current, width) -%} {% macro sub_list(current) -%}
{% if prefs.subs.len() > 0 %} {% if prefs.subs.len() > 0 %}
<div id="subscriptions_container" class="{{ width }}"> <div id="subscriptions_container">
<details id="subscriptions"> <details id="subscriptions">
<summary>Subscriptions</summary> <summary>Subscriptions</summary>
<div id="sub_list"> <div id="sub_list">

View File

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