From 7099e7ab33f54b310dd0ad169a4a2d932342da19 Mon Sep 17 00:00:00 2001
From: Daniel Valentine <Daniel-Valentine@users.noreply.github.com>
Date: Wed, 12 Oct 2022 16:58:24 -0600
Subject: [PATCH] (#28) minimalize post footer content on mobile (#35)

---
 static/style.css     | 15 +++++++++++++++
 templates/utils.html | 11 +++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/static/style.css b/static/style.css
index 356dec4..c6401c1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -830,6 +830,16 @@ a.search_subreddit:hover {
 	margin-right: 15px;
 }
 
+#post_links > li.desktop_item {
+	display: auto;
+}
+
+@media screen and (min-width: 480px) {
+	#post_links > li.mobile_item {
+		display: none;
+	}
+}
+
 .post_thumbnail {
 	border-radius: 5px;
 	border: var(--panel-border);
@@ -1411,4 +1421,9 @@ td, th {
 		padding: 7px 0px;
 		margin-right: -5px;
 	}
+
+	#post_links > li { margin-right: 10px }
+	#post_links > li.desktop_item { display: none }
+	#post_links > li.mobile_item { display: auto }
+	.post_footer > p > span#upvoted { display: none }
 }
diff --git a/templates/utils.html b/templates/utils.html
index 6a20bc7..66602e7 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -150,13 +150,16 @@
 	<div class="post_score" title="{{ post.score.1 }}">{{ post.score.0 }}<span class="label"> Upvotes</span></div>
 	<div class="post_footer">
 		<ul id="post_links">
-			<li><a href="{{ post.permalink }}">permalink</a></li>
+			<li class="desktop_item"><a href="{{ post.permalink }}">permalink</a></li>
+			<li class="mobile_item"><a href="{{ post.permalink }}">link</a></li>
 			{% if post.num_duplicates > 0 %}
-			<li><a href="/r/{{ post.community }}/duplicates/{{ post.id }}">duplicates</a></li>
+			<li class="desktop_item"><a href="/r/{{ post.community }}/duplicates/{{ post.id }}">duplicates</a></li>
+			<li class="mobile_item"><a href="/r/{{ post.community }}/duplicates/{{ post.id }}">dupes</a></li>
 			{% endif %}
-			<li><a href="https://reddit.com{{ post.permalink }}" rel="nofollow">reddit</a></li>
+			<li class="desktop_item"><a href="https://reddit.com{{ post.permalink }}" rel="nofollow">reddit</a></li>
+			<li class="mobile_item"><a href="https://reddit.com{{ post.permalink }}" rel="nofollow">reddit</a></li>
 		</ul>
-		<p>{{ post.upvote_ratio }}% Upvoted</p>
+		<p>{{ post.upvote_ratio }}%<span id="upvoted"> Upvoted</span></p>
 	</div>
 </div>
 {%- endmacro %}