Compact Libreddit Posts on Mobile

src/utils.rs

@@ -124,11 +124,11 @@ pub fn param(path: &str, value: &str) -> String {
 
 // Direct urls to proxy if proxy is enabled
 pub fn format_url(url: String) -> String {
-	if url.is_empty() {
-		return String::new();
-	};
-
-	format!("/proxy/{}", encode(url).as_str())
+	if url.is_empty() || url == "self" || url == "default" {
+		String::new()
+	} else {
+		format!("/proxy/{}", encode(url).as_str())
+	}
 }
 
 // Rewrite Reddit links to Libreddit in body of text
@@ -185,12 +185,9 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 
 	let mut posts: Vec<Post> = Vec::new();
 
+	// For each post from posts list
 	for post in post_list {
-		let img = if val(post, "thumbnail").starts_with("https:/") {
-			format_url(val(post, "thumbnail"))
-		} else {
-			String::new()
-		};
+		let img = format_url(val(post, "thumbnail"));
 		let unix_time: i64 = post["data"]["created_utc"].as_f64().unwrap_or_default().round() as i64;
 		let score = post["data"]["score"].as_i64().unwrap_or_default();
 		let ratio: f64 = post["data"]["upvote_ratio"].as_f64().unwrap_or(1.0) * 100.0;
@@ -221,23 +218,22 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 				},
 			),
 			flags: Flags {
-				nsfw: post["data"]["over_18"].as_bool().unwrap_or(false),
-				stickied: post["data"]["stickied"].as_bool().unwrap_or(false),
+				nsfw: post["data"]["over_18"].as_bool().unwrap_or_default(),
+				stickied: post["data"]["stickied"].as_bool().unwrap_or_default(),
 			},
 			permalink: val(post, "permalink"),
 			time: Utc.timestamp(unix_time, 0).format("%b %e '%y").to_string(),
 		});
 	}
 
-	Ok((posts, res["data"]["after"].as_str().unwrap_or("").to_string()))
+	Ok((posts, res["data"]["after"].as_str().unwrap_or_default().to_string()))
 }
 
 //
 // NETWORKING
 //
 
-pub async fn error(message: String) -> HttpResponse {
-	let msg = if message.is_empty() { "Page not found".to_string() } else { message };
+pub async fn error(msg: String) -> HttpResponse {
 	let body = ErrorTemplate { message: msg }.render().unwrap_or_default();
 	HttpResponse::NotFound().content_type("text/html").body(body)
 }
@@ -246,26 +242,7 @@ pub async fn error(message: String) -> HttpResponse {
 pub async fn request(path: &str) -> Result<serde_json::Value, &'static str> {
 	let url = format!("https://www.reddit.com/{}", path);
 
-	// --- actix-web::client ---
-	// let client = actix_web::client::Client::default();
-	// let res = client
-	// 	.get(url)
-	// 	.send()
-	// 	.await?
-	// 	.body()
-	// 	.limit(1000000)
-	// 	.await?;
-
-	// let body = std::str::from_utf8(res.as_ref())?; // .as_ref converts Bytes to [u8]
-
-	// --- surf ---
-	// let req = get(&url).header("User-Agent", "libreddit");
-	// let client = client().with(Redirect::new(5));
-	// let mut res = client.send(req).await.unwrap();
-	// let success = res.status().is_success();
-	// let body = res.body_string().await.unwrap();
-
-	// --- reqwest ---
+	// Send request using reqwest
 	match reqwest::get(&url).await {
 		Ok(res) => {
 			// Read the status from the response
@@ -281,13 +258,15 @@ pub async fn request(path: &str) -> Result<serde_json::Value, &'static str> {
 						}
 					}
 				}
+				// If Reddit returns error, tell user Page Not Found
 				false => {
 					#[cfg(debug_assertions)]
 					dbg!(format!("{} - Page not found", url));
 					Err("Page not found")
 				}
 			}
-		},
+		}
+		// If can't send request to Reddit, return this to user
 		Err(e) => {
 			#[cfg(debug_assertions)]
 			dbg!(format!("{} - {}", url, e));

static/style.css

@@ -97,6 +97,11 @@ aside {
 	border: 1px solid var(--highlighted);
 }
 
+.dot {
+	font-size: 12px;
+	opacity: 0.5;
+}
+
 /* User & Subreddit */
 
 #user, #subreddit, #sidebar {
@@ -304,6 +309,10 @@ input[type="submit"]:hover { color: var(--accent); }
 	margin: 20px 0;
 }
 
+.post.highlighted > .post_right {
+	flex-direction: column;
+}
+
 .post:hover {
 	background: var(--foreground);
 }
@@ -314,7 +323,6 @@ input[type="submit"]:hover { color: var(--accent); }
 
 .post_left, .post_right {
 	display: flex;
-	flex-direction: column;
 	overflow-wrap: break-word;
 }
 
@@ -322,13 +330,13 @@ input[type="submit"]:hover { color: var(--accent); }
 	text-align: center;
 	background: var(--foreground);
 	border-radius: 5px 0 0 5px;
+	flex-direction: column;
 	min-width: 50px;
 }
 
 .post_score {
 	margin-top: 20px;
 	color: var(--accent);
-	font-size: 16px;
 }
 
 #post_footer {
@@ -356,12 +364,19 @@ input[type="submit"]:hover { color: var(--accent); }
 .post_title {
 	font-size: 16px;
 	line-height: 1.5;
+	margin-top: 10px;
+}
+
+.post_text {
+	padding: 15px 20px;
+	display: flex;
+	flex-direction: column;
 }
 
 .post_right {
-	padding: 15px 20px;
 	flex-grow: 1;
 	flex-shrink: 1;
+	justify-content: space-between;
 }
 
 .post_right > * {
@@ -381,13 +396,13 @@ input[type="submit"]:hover { color: var(--accent); }
 
 #post_url {
 	color: var(--accent);
+	margin-top: 10px;
 }
 
 .post_thumbnail {
 	object-fit: cover;
 	width: auto;
 	flex-shrink: 0;
-	margin: 10px;
 	border-radius: 5px;
 	border: 1px solid var(--foreground);
 	max-width: 20%;
@@ -477,7 +492,7 @@ input[type="submit"]:hover { color: var(--accent); }
 }
 
 .comment_data > * {
-	margin: 5px;
+	margin-right: 5px;
 }
 
 .comment_image {
@@ -515,7 +530,7 @@ input[type="submit"]:hover { color: var(--accent); }
 }
 
 .datetime {
-	opacity: 0.75;
+	opacity: 0.5;
 }
 
 .line {
@@ -597,22 +612,18 @@ td, th {
 		flex-direction: column-reverse;
 	}
 
+	.post_header {
+		font-size: 14px;
+	}
+
 	.post_left {
 		border-radius: 0 0 5px 5px;
 	}
 
-	.post_right {
-		padding: 20px;
-	}
-
 	.post_score {
 		margin: 5px 0;
 	}
 
-	.post_thumbnail {
-		max-width: initial;
-	}
-
 	.replies > .comment {
 		margin-left: -25px;
 		padding: 5px 0;

templates/post.html

@@ -25,7 +25,8 @@
 			{% if item.flair.0 != "" %}
 				<small class="author_flair">{{ item.flair.0 }}</small>
 			{% endif %}
-			&bull; <span class="datetime">{{ item.time }}</span>
+			<span class="dot">&bull;</span>
+			<span class="datetime">{{ item.time }}</span>
 		</summary>
 		<p class="comment_body">{{ item.body }}</p>
 {%- endmacro %}
@@ -45,35 +46,41 @@
 				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 			</div>
 			<div class="post_right">
-				<p class="post_header">
-					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-					&bull;
-					<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-					{% if post.author_flair.0 != "" %}
-						<small class="author_flair">{{ post.author_flair.0 }}</small>
+				<div class="post_text">
+					<p class="post_header">
+						<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
+						<span class="dot">&bull;</span>
+						<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+						{% if post.author_flair.0 != "" %}
+							<small class="author_flair">{{ post.author_flair.0 }}</small>
+						{% endif %}
+						<span class="datetime">{{ post.time }}</span>
+					</p>
+					<a href="{{ post.permalink }}" class="post_title">
+						{{ post.title }}
+						{% if post.flair.0 != "" %}
+							<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+						{% endif %}
+					</a>
+
+					<!-- POST MEDIA -->
+					{% if post.post_type == "image" %}
+					<img class="post_media" src="{{ post.media }}"/>
+					{% else if post.post_type == "video" %}
+					<video class="post_media" src="{{ post.media }}" controls autoplay loop>
+					{% else if post.post_type == "link" %}
+					<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
 					{% endif %}
-					<span class="datetime">{{ post.time }}</span>
-				</p>
-				<a href="{{ post.permalink }}" class="post_title">
-					{{ post.title }}
-					{% if post.flair.0 != "" %}
-						<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-					{% endif %}
-				</a>
-				{% if post.post_type == "image" %}
-				<img class="post_media" src="{{ post.media }}"/>
-				{% else if post.post_type == "video" %}
-				<video class="post_media" src="{{ post.media }}" controls autoplay loop>
-				{% else if post.post_type == "link" %}
-				<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
-				{% endif %}
-				<div class="post_body">{{ post.body }}</div>
-				<div id="post_footer">
-					<ul id="post_links">
-						<li><a href="/{{ post.id }}">permalink</a></li>
-						<li><a href="https://reddit.com/{{ post.id }}">reddit</a></li>
-					</ul>
-					<p>{{ post.upvote_ratio }}% Upvoted</p>
+
+					<!-- POST BODY -->
+					<div class="post_body">{{ post.body }}</div>
+					<div id="post_footer">
+						<ul id="post_links">
+							<li><a href="/{{ post.id }}">permalink</a></li>
+							<li><a href="https://reddit.com/{{ post.id }}">reddit</a></li>
+						</ul>
+						<p>{{ post.upvote_ratio }}% Upvoted</p>
+					</div>
 				</div>
 			</div>
 		</div>

templates/search.html

@@ -27,22 +27,25 @@
 				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 			</div>
 			<div class="post_right">
-				<p class="post_header">
-					<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-					&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-					{% if post.author_flair.0 != "" %}
-						<small class="author_flair">{{ post.author_flair.0 }}</small>
-					{% endif %}
-					<span class="datetime" style="float: right;">{{ post.time }}</span>
-				</p>
-				<p class="post_title">
-					{% if post.flair.0 != "" %}
-					<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-					{% endif %}
-					<a href="{{ post.permalink }}">{{ post.title }}</a>
-				</p>
+				<div class="post_text">
+					<p class="post_header">
+						<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
+						<span class="dot">&bull;</span>
+						<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+						{% if post.author_flair.0 != "" %}
+							<small class="author_flair">{{ post.author_flair.0 }}</small>
+						{% endif %}
+						<span class="datetime" style="float: right;">{{ post.time }}</span>
+					</p>
+					<p class="post_title">
+						{% if post.flair.0 != "" %}
+						<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+						{% endif %}
+						<a href="{{ post.permalink }}">{{ post.title }}</a>
+					</p>
+				</div>
+				<img class="post_thumbnail" src="{{ post.media }}">
 			</div>
-			<img class="post_thumbnail" src="{{ post.media }}">
 		</div>
 		{% else %}
 			<div class="comment">

templates/subreddit.html

@@ -34,22 +34,22 @@
 					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 				</div>
 				<div class="post_right">
-					<p class="post_header">
-						<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-						&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-						{% if post.author_flair.0 != "" %}
-							<small class="author_flair">{{ post.author_flair.0 }}</small>
-						{% endif %}
-						<span class="datetime">{{ post.time }}</span>
-					</p>
-					<p class="post_title">
-						{% if post.flair.0 != "" %}
-						<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-						{% endif %}
-						<a href="{{ post.permalink }}">{{ post.title }}</a>
-					</p>
+					<div class="post_text">
+						<p class="post_header">
+							<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
+							<span class="dot">&bull;</span>
+							<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
+							<span class="datetime">{{ post.time }}</span>
+						</p>
+						<p class="post_title">
+							{% if post.flair.0 != "" %}
+							<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+							{% endif %}
+							<a href="{{ post.permalink }}">{{ post.title }}</a>
+						</p>
+					</div>
+					<img class="post_thumbnail" src="{{ post.media }}">
 				</div>
-				<img class="post_thumbnail" src="{{ post.media }}">
 			</div>
 			{% endfor %}
 

templates/user.html

@@ -24,24 +24,25 @@
 					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
 				</div>
 				<div class="post_right">
-					<p class="post_header">
-						<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
-						&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
-						{% if post.author_flair.0 != "" %}
-							<small class="author_flair">{{ post.author_flair.0 }}</small>
-						{% endif %}
-						<span class="datetime" style="float: right;">{{ post.time }}</span>
-					</p>
-					<p class="post_title">
-						{% if post.flair.0 == "Comment" %}
-						{% else if post.flair.0 == "" %}
-						{% else %}
-							<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
-						{% endif %}
-						<a href="{{ post.permalink }}">{{ post.title }}</a>
-					</p>
+					<div class="post_text">
+						<p class="post_header">
+							<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
+							{% if post.author_flair.0 != "" %}
+								<small class="author_flair">{{ post.author_flair.0 }}</small>
+							{% endif %}
+							<span class="datetime" style="float: right;">{{ post.time }}</span>
+						</p>
+						<p class="post_title">
+							{% if post.flair.0 == "Comment" %}
+							{% else if post.flair.0 == "" %}
+							{% else %}
+								<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
+							{% endif %}
+							<a href="{{ post.permalink }}">{{ post.title }}</a>
+						</p>
+					</div>
+					<img class="post_thumbnail" src="{{ post.media }}">
 				</div>
-				<img class="post_thumbnail" src="{{ post.media }}">
 			</div>
 			{% else %}
 			<div class="comment">