Updated firefox extension to v0.3, focused on making the settings menu look nicer

5 years ago · aa80f52838
parent a5e1906196
commit aa80f52838
6 changed files with 53 additions and 20 deletions
--- a/chrome-extension/css/bootstrap.min.css
+++ b/chrome-extension/css/bootstrap.min.css
--- a/chrome-extension/js/bootstrap.min.js
+++ b/chrome-extension/js/bootstrap.min.js
--- a/chrome-extension/js/jquery-3.4.1.min.js
+++ b/chrome-extension/js/jquery-3.4.1.min.js
--- a/chrome-extension/js/popper.min.js
+++ b/chrome-extension/js/popper.min.js
--- a/chrome-extension/options.html
+++ b/chrome-extension/options.html
@ -1,28 +1,41 @@
 <!DOCTYPE html>
 <html>
-<head><title>YoutubeDL-Material Extension Options</title></head>
+<head>
+    <title>YoutubeDL-Material Extension Options</title>
+    <!-- Scripts -->
+    <script src="js/jquery-3.4.1.min.js"></script>
+    <script src="js/popper.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    
+    <!-- Cascading Style Sheets -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+</head>
 <body>

 <h2>Settings</h2>

-<div>
-    <h4>Frontend URL</h4>
-  <input placeholder="Frontend URL" type="text" id="frontend_url">
-</div>
-
-<br/>
+<div style="width: 95%; margin: 0 auto;">
+    <div class="form-group">
+    <label for="frontend_url">Frontend URL:</label>
+    <input class="form-control" type="text" id="frontend_url">
+    </div>

-<div>
-    <label>
-        <input type="checkbox" id="audio_only">
-        Audio only
-    </label>
-</div>
+    <div class="checkbox">
+        <label>
+            <input type="checkbox" id="audio_only">
+            Audio only
+        </label>
+    </div>

-<br/>
+    <div id="status"></div>
+    <button style="margin-bottom: 10px;" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" id="save">Save</button>

-<div id="status"></div>
-<button id="save">Save</button>
+    <div class="collapse" id="collapseExample">
+        <div class="card card-body">
+        Settings successfully saved!
+        </div>
+    </div>
+</div>

 <script src="options.js"></script>
 </body>
--- a/chrome-extension/options.js
+++ b/chrome-extension/options.js
@ -7,11 +7,10 @@ function save_options() {
        audio_only: audio_only
    }, function() {
      // Update status to let user know options were saved.
-      var status = document.getElementById('status');
-      status.textContent = 'Options saved.';
+      $('#collapseExample').collapse('show');
      setTimeout(function() {
-        status.textContent = '';
-      }, 750);
+        $('#collapseExample').collapse('hide');
+      }, 2000);
    });
  }