Vertical list subscriptions.

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 {

templates/base.html

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

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 %}
 
 <!-- OPEN COMMENT MACRO -->

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

templates/settings.html

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

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

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

templates/utils.html

@@ -40,15 +40,17 @@
 {% endfor %}
 {%- endmacro %}
 
-{% macro sub_list(current) -%}
+{% macro sub_list(current, width) -%}
 {% 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 %}
 {%- endmacro %}

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