feat: Adjust comment styling
This commit is contained in:
parent
18260122bb
commit
82e435ddd8
SSH key fingerprint:
SHA256:Ks/MyhQYcPRQiwMKLAKquWCdCPe3JXlb1WttgnAoSeM
10 changed files with 18502 additions and 160 deletions
|
|
@ -138,6 +138,8 @@
|
|||
BDFR_BROWSER_BASE_DIRECTORY = "/Volumes/MediaScraper/Reddit";
|
||||
BDFR_BROWSER_REPO_USER = db-user;
|
||||
BDFR_BROWSER_REPO_HOST = db-host;
|
||||
RELEASE_DISTRIBUTION = "none";
|
||||
RELEASE_COOKIE = "no_dist_anyway";
|
||||
};
|
||||
|
||||
processes = {
|
||||
|
|
|
|||
|
|
@ -7,12 +7,8 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
plug :dispatch
|
||||
|
||||
get "/" do
|
||||
tpl_params = [
|
||||
subreddits: Subreddit.names() |> Repo.all()
|
||||
]
|
||||
|
||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/index.eex")
|
||||
content = EEx.eval_file(tpl_file, tpl_params)
|
||||
tpl_args = [subreddits: Subreddit.names() |> Repo.all()]
|
||||
content = render_template("index", tpl_args)
|
||||
|
||||
conn
|
||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||
|
|
@ -22,13 +18,12 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
get "/r/:subreddit" do
|
||||
subreddit_record = Repo.get_by(Subreddit, name: subreddit)
|
||||
|
||||
tpl_params = [
|
||||
tpl_args = [
|
||||
subreddit: subreddit,
|
||||
dates: subreddit_record |> Post.date_listing() |> Repo.all()
|
||||
]
|
||||
|
||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/subreddit.eex")
|
||||
content = EEx.eval_file(tpl_file, tpl_params)
|
||||
content = render_template("subreddit", tpl_args)
|
||||
|
||||
conn
|
||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||
|
|
@ -38,14 +33,13 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
get "/r/:subreddit/:date" do
|
||||
subreddit_record = Repo.get_by(Subreddit, name: subreddit)
|
||||
|
||||
tpl_params = [
|
||||
tpl_args = [
|
||||
subreddit: subreddit,
|
||||
date: date,
|
||||
posts: subreddit_record |> Post.during_month(date) |> Repo.all()
|
||||
]
|
||||
|
||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/subreddit_posts.eex")
|
||||
content = EEx.eval_file(tpl_file, tpl_params)
|
||||
content = render_template("subreddit_posts", tpl_args)
|
||||
|
||||
conn
|
||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||
|
|
@ -55,7 +49,7 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
get "/r/:subreddit/:date/:id" do
|
||||
post_record = Post |> Repo.get(id) |> Repo.preload(comments: :children)
|
||||
|
||||
tpl_params = [
|
||||
tpl_args = [
|
||||
subreddit: subreddit,
|
||||
date: date,
|
||||
post: post_record,
|
||||
|
|
@ -63,14 +57,27 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
comment_template: Application.app_dir(:bdfr_browser, "priv/templates/http/_comment.eex")
|
||||
]
|
||||
|
||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/post.eex")
|
||||
content = EEx.eval_file(tpl_file, tpl_params)
|
||||
content = render_template("post", tpl_args)
|
||||
|
||||
conn
|
||||
|> put_resp_header("content-type", "text/html; charset=utf-8")
|
||||
|> send_resp(200, content)
|
||||
end
|
||||
|
||||
get "/static/*path" do
|
||||
file_path = Application.app_dir(:bdfr_browser, Path.join("priv/static", path))
|
||||
|
||||
if File.exists?(file_path) do
|
||||
{:ok, file} = File.read(file_path)
|
||||
|
||||
conn
|
||||
|> put_resp_header("content-type", mime_from_ext(file_path))
|
||||
|> send_resp(200, file)
|
||||
else
|
||||
send_resp(conn, 404, "Not Found")
|
||||
end
|
||||
end
|
||||
|
||||
get "/media/*path" do
|
||||
base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
|
||||
joined_path = Path.join(path)
|
||||
|
|
@ -96,6 +103,12 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
|
||||
# Helper
|
||||
|
||||
defp render_template(name, args) do
|
||||
tpl_file = Application.app_dir(:bdfr_browser, "priv/templates/http/application.eex")
|
||||
embedded_tpl = Application.app_dir(:bdfr_browser, "priv/templates/http/#{name}.eex")
|
||||
EEx.eval_file(tpl_file, embedded_template: embedded_tpl, embedded_args: args)
|
||||
end
|
||||
|
||||
defp post_media(post, args) do
|
||||
base_directory = Application.fetch_env!(:bdfr_browser, :base_directory)
|
||||
post_dir = Path.join([base_directory | Keyword.fetch!(args, :paths)])
|
||||
|
|
@ -127,6 +140,8 @@ defmodule BdfrBrowser.HTTP.Plug do
|
|||
".png" -> "image/png"
|
||||
".gif" -> "image/gif"
|
||||
".mp4" -> "video/mp4"
|
||||
".js" -> "text/javascript"
|
||||
".css" -> "text/css"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
6314
priv/static/bootstrap.bundle.js
vendored
Normal file
6314
priv/static/bootstrap.bundle.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
12063
priv/static/bootstrap.css
vendored
Normal file
12063
priv/static/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,7 +1,7 @@
|
|||
<div style="padding-left: <%= level * 5 %>px;">
|
||||
<div style="padding-left: <%= level * 5 %>px; margin-bottom: 2px;">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<blockquote class="blockquote mb-0">
|
||||
<div class="card-body" style="padding: 8px;">
|
||||
<blockquote class="blockquote mb-0" style="font-size: 1rem;">
|
||||
<%= if comment.author == "AutoModerator" do %>
|
||||
<p><small>Hidden AutoModerator comment</small></p>
|
||||
<% else %>
|
||||
|
|
@ -15,7 +15,6 @@
|
|||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<%= for reply <- BdfrBrowser.Repo.preload(comment, :children).children do %>
|
||||
|
|
|
|||
18
priv/templates/http/application.eex
Normal file
18
priv/templates/http/application.eex
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
|
||||
<title>BDFR Browser</title>
|
||||
|
||||
<link href="/static/bootstrap.css" rel="stylesheet">
|
||||
<script src="/static/bootstrap.bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<%= EEx.eval_file(embedded_template, embedded_args) %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,26 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<h2>Archived Subreddits</h2>
|
||||
|
||||
<title>BDFR Browser</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2>Archived Subreddits</h2>
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="d-grid gap-2 col-12 mx-auto">
|
||||
<%= for subreddit <- subreddits do %>
|
||||
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>" role="button"><%= subreddit %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div class="row text-center">
|
||||
<div class="d-grid gap-2 col-12 mx-auto">
|
||||
<%= for subreddit <- subreddits do %>
|
||||
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>" role="button"><%= subreddit %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,48 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<h2><a href="<%= post.url %>"><%= post.title %></a></h2>
|
||||
|
||||
<title>BDFR Browser</title>
|
||||
<p>
|
||||
<small><a href="https://reddit.com/user/<%= post.author %>"><%= post.author %></a></small>
|
||||
-
|
||||
<small><%= DateTime.to_iso8601(post.posted_at) %></small>
|
||||
-
|
||||
<a href="https://reddit.com<%= post.permalink %>">Open reddit</a>
|
||||
</p>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2><a href="<%= post.url %>"><%= post.title %></a></h2>
|
||||
|
||||
<p>
|
||||
<small><a href="https://reddit.com/user/<%= post.author %>"><%= post.author %></a></small>
|
||||
-
|
||||
<small><%= DateTime.to_iso8601(post.posted_at) %></small>
|
||||
-
|
||||
<a href="https://reddit.com<%= post.permalink %>">Open reddit</a>
|
||||
</p>
|
||||
|
||||
<%= unless Enum.empty?(media.images) do %>
|
||||
<div id="carouselImages" class="carousel slide">
|
||||
<div class="carousel-inner">
|
||||
<%= for {img, i} <- Enum.with_index(media.images) do %>
|
||||
<div class="carousel-item <%= if i == 0, do: "active" %>">
|
||||
<img src="<%= img %>" class="d-block w-100">
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselImages" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselImages" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
<%= unless Enum.empty?(media.images) do %>
|
||||
<div id="carouselImages" class="carousel slide">
|
||||
<div class="carousel-inner">
|
||||
<%= for {img, i} <- Enum.with_index(media.images) do %>
|
||||
<div class="carousel-item <%= if i == 0, do: "active" %>">
|
||||
<img src="<%= img %>" class="d-block w-100">
|
||||
</div>
|
||||
<br>
|
||||
<% end %>
|
||||
|
||||
<%= unless Enum.empty?(media.videos) do %>
|
||||
<div class="row">
|
||||
<%= for video <- media.videos do %>
|
||||
<video controls loop>
|
||||
<source src="<%= video %>" type="video/mp4">
|
||||
</video>
|
||||
<% end %>
|
||||
</div>
|
||||
<br>
|
||||
<% end %>
|
||||
|
||||
<%= for comment <- post.comments do %>
|
||||
<div class="row">
|
||||
<%= EEx.eval_file(comment_template, comment: comment, level: 0, comment_template: comment_template) %>
|
||||
</div>
|
||||
<br>
|
||||
<% end %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselImages" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#carouselImages" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<br>
|
||||
<% end %>
|
||||
|
||||
<%= unless Enum.empty?(media.videos) do %>
|
||||
<div class="row">
|
||||
<%= for video <- media.videos do %>
|
||||
<video controls loop>
|
||||
<source src="<%= video %>" type="video/mp4">
|
||||
</video>
|
||||
<% end %>
|
||||
</div>
|
||||
<br>
|
||||
<% end %>
|
||||
|
||||
<%= for comment when is_nil(comment.parent_id) <- post.comments do %>
|
||||
<div class="row" style="margin-bottom: 4px;">
|
||||
<%= EEx.eval_file(comment_template, comment: comment, level: 0, comment_template: comment_template) %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,9 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<h2><%= subreddit %></h2>
|
||||
|
||||
<title>BDFR Browser</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2><%= subreddit %></h2>
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="d-grid gap-2 col-12 mx-auto">
|
||||
<%= for date <- dates do %>
|
||||
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>/<%= date %>" role="button"><%= date %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div class="row text-center">
|
||||
<div class="d-grid gap-2 col-12 mx-auto">
|
||||
<%= for date <- dates do %>
|
||||
<a class="btn btn-outline-secondary btn-lg" href="/r/<%= subreddit %>/<%= date %>" role="button"><%= date %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,16 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<h2><%= subreddit %></h2>
|
||||
|
||||
<title>BDFR Browser</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h2><%= subreddit %></h2>
|
||||
|
||||
<div class="row text-center">
|
||||
<div class="d-grid gap-2 col-12 mx-auto">
|
||||
<%= for post <- posts do %>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><a href="/r/<%= subreddit %>/<%= date %>/<%= post.id %>"><%= post.title %></a></h5>
|
||||
<h6 class="card-subtitle mb-2 text-body-secondary">
|
||||
<%= post.num_comments %> comment(s) - <%= DateTime.to_iso8601(post.posted_at) %>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="row text-center">
|
||||
<div class="d-grid gap-2 col-12 mx-auto">
|
||||
<%= for post <- posts do %>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title"><a href="/r/<%= subreddit %>/<%= date %>/<%= post.id %>"><%= post.title %></a></h5>
|
||||
<h6 class="card-subtitle mb-2 text-body-secondary">
|
||||
<%= post.num_comments %> comment(s) - <%= DateTime.to_iso8601(post.posted_at) %>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue