Add padding for watch page

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>