From 052fa400a2aaf4c452dc21c47789d0a10b99eed0 Mon Sep 17 00:00:00 2001
From: Omar Roth <omarroth@hotmail.com>
Date: Sun, 11 Mar 2018 12:05:56 -0500
Subject: [PATCH] Add padding for watch page
---
assets/css/custom.css | 12 ++++++++----
src/views/watch.ecr | 16 +++++++++++++---
2 files changed, 21 insertions(+), 7 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
index 7ff9a196..6c57f7ce 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,9 +1,13 @@
a {
- color: #333;
- text-decoration: none;
+ color: #333;
+ text-decoration: none;
}
a:hover,
a:active {
- color: #167ac6;
-}
\ No newline at end of file
+ color: #167ac6;
+}
+
+.l-box {
+ padding: 1em;
+}
diff --git a/src/views/watch.ecr b/src/views/watch.ecr
index 2df91664..e70e4029 100644
--- a/src/views/watch.ecr
+++ b/src/views/watch.ecr
@@ -6,11 +6,13 @@
<title><%= video.title %> - Invidious</title>
<% end %>
+<div class="l-box">
<% if listen %>
<%= render "src/views/player/audio.ecr" %>
<% else %>
<%= render "src/views/player/video.ecr" %>
<% end %>
+</div>
<script>
var options = {
@@ -72,6 +74,7 @@ function toggle(target) {
}
</script>
+<div class="l-box">
<h1>
<%= video.info["title"] %>
<% if listen %>
@@ -84,9 +87,11 @@ function toggle(target) {
</a>
<% end %>
</h1>
+</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-5">
+ <div class="l-box">
<p><i class="fa fa-eye" aria-hidden="true"></i> <%= number_with_separator(video.views) %></p>
<p><i class="fa fa-thumbs-up" aria-hidden="true"></i> <%= number_with_separator(video.likes) %></p>
<p><i class="fa fa-thumbs-down" aria-hidden="true"></i> <%= number_with_separator(video.dislikes) %></p>
@@ -94,8 +99,10 @@ function toggle(target) {
<p id="Rating">Rating : <%= rating.round(4) %> / 5</p>
<p id="Engagement">Engagement : <%= engagement.round(2) %>%</p>
</div>
+ </div>
<div class="pure-u-1 pure-u-md-3-5">
+ <div class="l-box">
<p>
<a href="https://youtube.com/channel/<%= video.info["ucid"] %>">
<h3><%= video.info["author"] %></h3>
@@ -104,12 +111,12 @@ function toggle(target) {
<p>
<b>Shared <%= video.published.to_s("%B %-d, %Y") %></b>
</p>
- <div style="margin-right:1em; overflow-wrap:break-word; word-wrap:break-word;">
+ <div style="overflow-wrap:break-word; word-wrap:break-word;">
<%= video.description %>
</div>
- <hr style="margin-right:1em;">
+ <hr style="margin-left:1em; margin-right:1em;">
<% if reddit_thread && !reddit_html.empty? %>
- <div style="margin-right:1em; overflow-wrap:break-word; word-wrap:break-word;">
+ <div style="overflow-wrap:break-word; word-wrap:break-word;">
<h3><%= reddit_thread.data.title %></h3>
<b>
<a target="_blank" href="https://reddit.com<%= reddit_thread.data.permalink %>">View more comments on Reddit</a>
@@ -118,8 +125,10 @@ function toggle(target) {
</div>
<% end %>
</div>
+ </div>
<div class="pure-u-1 pure-u-md-1-5">
+ <div class="l-box">
<% rvs.each do |rv| %>
<% if rv.has_key?("id") %>
<a href="/watch?v=<%= rv["id"] %>">
@@ -131,3 +140,4 @@ function toggle(target) {
<% end %>
</div>
</div>
+</div>