From 3c58fc495314469f90942cb06c7e9720b825223a Mon Sep 17 00:00:00 2001
From: Art4 <art4@wlabs.de>
Date: Wed, 13 Sep 2017 14:40:56 +0200
Subject: [PATCH] improve Web UI

---
 css/custom.css         |  4 ++--
 templates/getvideo.php | 33 ++++++++++++---------------------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/css/custom.css b/css/custom.css
index cf59cf6c..b81af8c7 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -21,8 +21,8 @@ body {
 	margin-bottom: 8px;
 }
 .btn-type {
-	min-width: 125px;
+	min-width: 175px;
 }
 .btn-download {
-	min-width: 190px;
+	min-width: 100px;
 }
diff --git a/templates/getvideo.php b/templates/getvideo.php
index f79648e0..b6d06390 100644
--- a/templates/getvideo.php
+++ b/templates/getvideo.php
@@ -30,18 +30,14 @@
 	<ul class="dl-list">
 <?php foreach($this->get('streams', []) as $format) { ?>
 		<li>
+			<a class="btn btn-default btn-type disabled" href="#"><?php echo $format['type']; ?> - <?php echo $format['quality']; ?></a>
 <?php if ($format['show_direct_url'] === true) { ?>
-			<a class="btn btn-default btn-type" href="<?php echo $format['direct_url']; ?>" class="mime"><?php echo $format['type']; ?></a>
-<?php }
-else
-{ ?>
-			<span class="mime"><?php echo $format['type']; ?></span>
+			<a class="btn btn-default btn-download" href="<?php echo $format['direct_url']; ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Direct</a>
 <?php } ?>
-
 <?php if ($format['show_proxy_url'] === true) { ?>
-			<a class="btn btn-primary btn-download" href="<?php echo $format['proxy_url']; ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Download - <?php echo $format['size']; ?></a>
+			<a class="btn btn-primary btn-download" href="<?php echo $format['proxy_url']; ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Proxy</a>
 <?php } ?>
-			<div class="label label-warning">quality: <?php echo $format['quality']; ?></div>
+			<div class="label label-warning"><?php echo $format['size']; ?></div>
 		</li>
 <?php } ?>
 	</ul>
@@ -49,34 +45,29 @@
 	<h2>Separated video and audio format</h2>
 	<ul class="dl-list">
 <?php foreach($this->get('formats', []) as $format) { ?>
-		<li>
+	<li>
+		<a class="btn btn-default btn-type disabled" href="#"><?php echo $format['type']; ?> - <?php echo $format['quality']; ?></a>
 <?php if ($format['show_direct_url'] === true) { ?>
-			<a class="btn btn-default btn-type" href="<?php echo $format['direct_url']; ?>" class="mime"><?php echo $format['type']; ?></a>
-<?php }
-else
-{ ?>
-			<span class="mime"><?php echo $format['type']; ?></span>
+		<a class="btn btn-default btn-download" href="<?php echo $format['direct_url']; ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Direct</a>
 <?php } ?>
-
 <?php if ($format['show_proxy_url'] === true) { ?>
-			 <a class="btn btn-primary btn-download" href="<?php echo $format['proxy_url']; ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Download - <?php echo $format['size']; ?></a>
+		<a class="btn btn-primary btn-download" href="<?php echo $format['proxy_url']; ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Proxy</a>
 <?php } ?>
-			<div class="label label-warning">quality: <?php echo $format['quality']; ?></div>
-		</li>
+		<div class="label label-warning"><?php echo $format['size']; ?></div>
+	</li>
 <?php } ?>
 	</ul>
 <?php if ($this->get('showMP3Download', false) === true) { ?>
 	<h2>Convert and Download to .mp3</h2>
 	<ul class="dl-list">
 		<li>
-			<a class="btn btn-default btn-type disabled" href="#" class="mime">audio/mp3</a>
+			<a class="btn btn-default btn-type disabled" href="#" class="mime">audio/mp3 - <?php echo $this->get('mp3_download_quality'); ?></a>
 			<a class="btn btn-primary btn-download" href="<?php echo $this->get('mp3_download_url'); ?>" class="mime"><i class="glyphicon glyphicon-download-alt"></i> Convert and Download</a>
-			<div class="label label-warning">quality: <?php echo $this->get('mp3_download_quality'); ?></div>
 		</li>
 	</ul>
 <?php } ?>
 	<hr />
-	<p><small>Note that you initiate download either by clicking video format link or click "download" to use this server as proxy.</small></p>
+	<p><small>Note that you initiate download either by clicking "Direct" to download from the origin server or by clicking "Proxy" to use this server as proxy.</small></p>
 <?php if ($this->get('showBrowserExtensions', false) === true) { ?>
 	<p><a href="ytdl.user.js" class="userscript btn btn-mini" title="Install chrome extension to view a 'Download' link to this application on Youtube video pages."> Install Chrome Extension </a></p>
 <?php } ?>