From 83d500747089264033eeea92f035e54572a02b2f Mon Sep 17 00:00:00 2001
From: Roberto Tonino <roberto.tonino5@gmail.com>
Date: Fri, 24 Apr 2020 22:18:18 +0200
Subject: [PATCH] added animation to downloads tab

---
 public/css/modules/download-tab.css | 68 +++++++++++++++++++----------
 public/index.html                   |  5 ++-
 2 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/public/css/modules/download-tab.css b/public/css/modules/download-tab.css
index 11a4896..d35d2ab 100644
--- a/public/css/modules/download-tab.css
+++ b/public/css/modules/download-tab.css
@@ -1,12 +1,11 @@
-/* Download tab section */
-
 #download_tab_container {
-	min-width: 300px;
+	width: 300px;
 	height: 100%;
 	background-color: var(--panels-background);
 	color: var(--panels-text);
 	display: block;
 	flex-direction: column;
+	transition: all 250ms ease-in-out;
 }
 
 #toggle_download_tab {
@@ -48,85 +47,105 @@
 	padding: 0px 2px;
 }
 
-#download_list>.download_object {
+#download_list > .download_object {
 	padding-bottom: 8px;
 }
 
-#download_list>.download_object .download_info {
+#download_list > .download_object .download_info {
 	display: flex;
 	align-items: center;
 }
 
-#download_list>.download_object .download_info img {
+#download_list > .download_object .download_info img {
 	width: 75px;
 	height: 75px;
 	display: inline-block;
 	flex-shrink: 0;
 }
 
-#download_list>.download_object .download_info .download_line {
+#download_list > .download_object .download_info .download_line {
 	display: block;
 }
 
-#download_list>.download_object .download_info .download_slim_separator {
+#download_list > .download_object .download_info .download_slim_separator {
 	display: none;
 }
 
-#download_list>.download_object .download_info_data {
+#download_list > .download_object .download_info_data {
 	width: 100%;
 	margin-left: 8px;
 }
 
-#download_list>.download_object .download_info_status {
+#download_list > .download_object .download_info_status {
 	margin-left: 8px;
 	width: 80px;
 }
 
-#download_list.slim>.download_object .download_info img {
+#download_list.slim > .download_object .download_info img {
 	display: none;
 }
 
-#download_list.slim>.download_object .download_info .download_line {
+#download_list.slim > .download_object .download_info .download_line {
 	display: inline-block;
 }
 
-#download_list.slim>.download_object .download_info .download_slim_separator {
+#download_list.slim > .download_object .download_info .download_slim_separator {
 	display: inline-block;
 }
 
-#download_list.slim>.download_object .download_info_data {
+#download_list.slim > .download_object .download_info_data {
 	width: calc(80% - 16px);
 	display: inline-block;
 	padding-left: 0px;
 }
 
-#download_list.slim>.download_object .download_info_status {
+#download_list.slim > .download_object .download_info_status {
 	width: 20%;
 	display: inline-block;
 	float: right;
 }
 
-#download_list.slim>.download_object .download_info {
+#download_list.slim > .download_object .download_info {
 	display: block;
 }
 
-.download_object>.download_bar>.queue_icon {
+.download_object > .download_bar > .queue_icon {
+	cursor: default;
 	margin-left: 8px;
 }
 
-.download_object>.download_bar {
+.download_object > .download_bar {
 	display: flex;
 	align-items: center;
 	height: 24px;
 }
 
-.download_object>.download_bar>.progress {
+.download_object > .download_bar > .progress {
 	margin: 0px;
 }
 
+#download_tab_container #queue_buttons {
+	position: absolute;
+	top: 0;
+	right: 0;
+	opacity: 1;
+	visibility: visible;
+	transition: all 250ms ease-in-out;
+}
+
+#download_tab_container #download_list {
+	width: 300px;
+}
+
+#download_tab_container #download_tab_label {
+	opacity: 0;
+	visibility: hidden;
+	transition: all 250ms ease-in-out;
+}
+
 /* ===== Hidden tab styles ===== */
 #download_tab_container.tab_hidden {
-	min-width: 32px;
+	width: 32px;
 }
 
 #download_tab_container.tab_hidden #toggle_download_tab::before {
@@ -146,7 +165,8 @@
 }
 
 #download_tab_container.tab_hidden #queue_buttons {
-	display: none;
+	opacity: 0;
+	visibility: hidden;
 }
 
 #download_tab_container.tab_hidden #download_list {
@@ -154,5 +174,7 @@
 }
 
 #download_tab_container.tab_hidden #download_tab_label {
-	display: inline;
-}
\ No newline at end of file
+	/* display: inline; */
+	opacity: 1;
+	visibility: visible;
+}
diff --git a/public/index.html b/public/index.html
index 24560d1..63940f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
 <body>
 	<aside id="sidebar" role="navigation">
 		<i class="material-icons side_icon">menu</i>
-		<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="home"><i class=""></i></span>
+		<span id="main_search_tablink" class="main_tablinks" role="link" aria-label="home"><i></i></span>
 		<span id="main_home_tablink" class="main_tablinks" role="link" aria-label="home"><i
 				class="material-icons side_icon">home</i><span class="main_tablinks_text">Home</span></span>
 		<span id="main_charts_tablink" class="main_tablinks" role="link" aria-label="home"><i
@@ -570,7 +570,8 @@ <h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="
 
 		<div id="download_tab_container" class="tab_hidden">
 			<i id="toggle_download_tab" class="material-icons download_bar_icon"></i>
-			<div id="queue_buttons" class="right">
+			<!-- <div id="queue_buttons" class="right"> -->
+			<div id="queue_buttons">
 				<i id="clean_queue" class="material-icons download_bar_icon">clear_all</i>
 				<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
 			</div>