Add padding to preferences page

1 files changed, 61 insertions, 59 deletions

diff --git a/src/invidious/views/preferences.ecr b/src/invidious/views/preferences.ecr
index 10c016af..370dfc0f 100644
--- a/src/invidious/views/preferences.ecr
+++ b/src/invidious/views/preferences.ecr
@@ -8,72 +8,74 @@ function update_value(element) {
 }
 </script>
 
-<form class="pure-form pure-form-aligned" action="/preferences?referer=<%= referer %>" method="post">
-    <fieldset>
-        <legend>Player preferences</legend>
+<div class="h-box">
+    <form class="pure-form pure-form-aligned" action="/preferences?referer=<%= referer %>" method="post">
+        <fieldset>
+            <legend>Player preferences</legend>
 
-        <div class="pure-control-group">
-            <label for="video_loop">Always loop: </label>
-            <input name="video_loop" id="video_loop" type="checkbox" <% if user.preferences.video_loop %>checked<% end %>>
-        </div>
+            <div class="pure-control-group">
+                <label for="video_loop">Always loop: </label>
+                <input name="video_loop" id="video_loop" type="checkbox" <% if user.preferences.video_loop %>checked<% end %>>
+            </div>
 
-        <div class="pure-control-group">
-            <label for="autoplay">Autoplay: </label>
-            <input name="autoplay" id="autoplay" type="checkbox" <% if user.preferences.autoplay %>checked<% end %>>
-        </div>
+            <div class="pure-control-group">
+                <label for="autoplay">Autoplay: </label>
+                <input name="autoplay" id="autoplay" type="checkbox" <% if user.preferences.autoplay %>checked<% end %>>
+            </div>
 
-        <div class="pure-control-group">
-            <label for="speed">Default speed: </label>
-            <select name="speed" id="speed">
-            <% [2.0, 1.5, 1.0, 0.5].each do |option| %>
-                <option <% if user.preferences.speed == option %> selected <% end %>><%= option %></option>
-            <% end %>
-            </select>
-        </div>
+            <div class="pure-control-group">
+                <label for="speed">Default speed: </label>
+                <select name="speed" id="speed">
+                <% [2.0, 1.5, 1.0, 0.5].each do |option| %>
+                    <option <% if user.preferences.speed == option %> selected <% end %>><%= option %></option>
+                <% end %>
+                </select>
+            </div>
 
-        <div class="pure-control-group">
-            <label for="quality">Preferred video quality: </label>
-            <select name="quality" id="quality">
-            <% ["hd720", "medium", "small"].each do |option| %>
-                <option <% if user.preferences.quality == option %> selected <% end %>><%= option %></option>
-            <% end %>
-            </select>
-        </div>
+            <div class="pure-control-group">
+                <label for="quality">Preferred video quality: </label>
+                <select name="quality" id="quality">
+                <% ["hd720", "medium", "small"].each do |option| %>
+                    <option <% if user.preferences.quality == option %> selected <% end %>><%= option %></option>
+                <% end %>
+                </select>
+            </div>
 
-        <div class="pure-control-group">
-            <label for="volume">Player volume: </label>
-            <input name="volume" id="volume" oninput="update_value(this);" type="range" min="0" max="100" step="5" value="<%= user.preferences.volume %>">
-            <span class="pure-form-message-inline" id="volume-value"><%= user.preferences.volume %></span>
-        </div>
+            <div class="pure-control-group">
+                <label for="volume">Player volume: </label>
+                <input name="volume" id="volume" oninput="update_value(this);" type="range" min="0" max="100" step="5" value="<%= user.preferences.volume %>">
+                <span class="pure-form-message-inline" id="volume-value"><%= user.preferences.volume %></span>
+            </div>
 
-        <legend>Visual preferences</legend>
-        <div class="pure-control-group">
-            <label for="dark_mode">Dark mode: </label>
-            <input name="dark_mode" id="dark_mode" type="checkbox" <% if user.preferences.dark_mode %>checked<% end %>>
-        </div>
+            <legend>Visual preferences</legend>
+            <div class="pure-control-group">
+                <label for="dark_mode">Dark mode: </label>
+                <input name="dark_mode" id="dark_mode" type="checkbox" <% if user.preferences.dark_mode %>checked<% end %>>
+            </div>
 
-        <legend>Subscription preferences</legend>
-        <div class="pure-control-group">
-            <label for="max_results">Number of videos shown in feed: </label>
-            <input name="max_results" id="max_results" type="number" value="<%= user.preferences.max_results %>">
-        </div>
+            <legend>Subscription preferences</legend>
+            <div class="pure-control-group">
+                <label for="max_results">Number of videos shown in feed: </label>
+                <input name="max_results" id="max_results" type="number" value="<%= user.preferences.max_results %>">
+            </div>
 
-        <div class="pure-control-group">
-            <label for="sort">Sort videos by: </label>
-            <select name="sort" id="sort">
-            <% ["published", "alphabetically", "alphabetically - reverse", "channel name", "channel name - reverse"].each do |option| %>
-                <option <% if user.preferences.sort == option %> selected <% end %>><%= option %></option>
-            <% end %>
-            </select>
-        </div>
+            <div class="pure-control-group">
+                <label for="sort">Sort videos by: </label>
+                <select name="sort" id="sort">
+                <% ["published", "alphabetically", "alphabetically - reverse", "channel name", "channel name - reverse"].each do |option| %>
+                    <option <% if user.preferences.sort == option %> selected <% end %>><%= option %></option>
+                <% end %>
+                </select>
+            </div>
 
-        <div class="pure-control-group">
-            <label for="latest_only">Only show latest video from channel: </label>
-            <input name="latest_only" id="latest_only" type="checkbox" <% if user.preferences.latest_only %>checked<% end %>>
-        </div>
+            <div class="pure-control-group">
+                <label for="latest_only">Only show latest video from channel: </label>
+                <input name="latest_only" id="latest_only" type="checkbox" <% if user.preferences.latest_only %>checked<% end %>>
+            </div>
 
-        <div class="pure-controls">
-            <button type="submit" class="pure-button pure-button-primary">Save preferences</button>
-        </div>
-    </fieldset>
-</form>
\ No newline at end of file
+            <div class="pure-controls">
+                <button type="submit" class="pure-button pure-button-primary">Save preferences</button>
+            </div>
+        </fieldset>
+    </form>
+</div>
\ No newline at end of file