Move the subs list into the navbar.
This commit is contained in:
parent
449899962a
commit
8cc01c58f3
@ -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 {
|
||||||
|
@ -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>
|
{% block subscriptions %}{% endblock %}
|
||||||
</p>
|
</div>
|
||||||
{% block search %}{% endblock %}
|
{% block search %}{% endblock %}
|
||||||
<a id="code" href="https://github.com/spikecodes/libreddit">code</a>
|
<div id="links">
|
||||||
|
<a id="settings_link" href="/settings">settings</a>
|
||||||
|
<a id="code" href="https://github.com/spikecodes/libreddit">code</a>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{% block subscriptions %}{% endblock %}
|
|
||||||
|
|
||||||
<!-- MAIN CONTENT -->
|
<!-- MAIN CONTENT -->
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
@ -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 -->
|
||||||
|
@ -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 %}
|
||||||
|
@ -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 %}
|
||||||
|
@ -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">
|
||||||
|
@ -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 %}
|
||||||
|
Loading…
Reference in New Issue
Block a user