evan/deemixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added animation to downloads tab

Browse Source
This commit is contained in:
Roberto Tonino 2020-04-24 22:18:18 +02:00
parent 987bbbe710
commit 83d5007470
2 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
public/css/modules/download-tab.css
View File

@ -1,12 +1,11 @@
/* Download tab section */
#download_tab_container { #download_tab_container {
min-width: 300px; width: 300px;
height: 100%; height: 100%;
background-color: var(--panels-background); background-color: var(--panels-background);
color: var(--panels-text); color: var(--panels-text);
display: block; display: block;
flex-direction: column; flex-direction: column;
transition: all 250ms ease-in-out;
} }
#toggle_download_tab { #toggle_download_tab {
@ -48,85 +47,105 @@
padding: 0px 2px; padding: 0px 2px;
} }
#download_list>.download_object { #download_list > .download_object {
padding-bottom: 8px; padding-bottom: 8px;
} }
#download_list>.download_object .download_info { #download_list > .download_object .download_info {
display: flex; display: flex;
align-items: center; align-items: center;
} }
#download_list>.download_object .download_info img { #download_list > .download_object .download_info img {
width: 75px; width: 75px;
height: 75px; height: 75px;
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
} }
#download_list>.download_object .download_info .download_line { #download_list > .download_object .download_info .download_line {
display: block; display: block;
} }
#download_list>.download_object .download_info .download_slim_separator { #download_list > .download_object .download_info .download_slim_separator {
display: none; display: none;
} }
#download_list>.download_object .download_info_data { #download_list > .download_object .download_info_data {
width: 100%; width: 100%;
margin-left: 8px; margin-left: 8px;
} }
#download_list>.download_object .download_info_status { #download_list > .download_object .download_info_status {
margin-left: 8px; margin-left: 8px;
width: 80px; width: 80px;
} }
#download_list.slim>.download_object .download_info img { #download_list.slim > .download_object .download_info img {
display: none; display: none;
} }
#download_list.slim>.download_object .download_info .download_line { #download_list.slim > .download_object .download_info .download_line {
display: inline-block; 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; display: inline-block;
} }
#download_list.slim>.download_object .download_info_data { #download_list.slim > .download_object .download_info_data {
width: calc(80% - 16px); width: calc(80% - 16px);
display: inline-block; display: inline-block;
padding-left: 0px; padding-left: 0px;
} }
#download_list.slim>.download_object .download_info_status { #download_list.slim > .download_object .download_info_status {
width: 20%; width: 20%;
display: inline-block; display: inline-block;
float: right; float: right;
} }
#download_list.slim>.download_object .download_info { #download_list.slim > .download_object .download_info {
display: block; display: block;
} }
.download_object>.download_bar>.queue_icon { .download_object > .download_bar > .queue_icon {
cursor: default;
margin-left: 8px; margin-left: 8px;
} }
.download_object>.download_bar { .download_object > .download_bar {
display: flex; display: flex;
align-items: center; align-items: center;
height: 24px; height: 24px;
} }
.download_object>.download_bar>.progress { .download_object > .download_bar > .progress {
margin: 0px; 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 ===== */ /* ===== Hidden tab styles ===== */
#download_tab_container.tab_hidden { #download_tab_container.tab_hidden {
min-width: 32px; width: 32px;
} }
#download_tab_container.tab_hidden #toggle_download_tab::before { #download_tab_container.tab_hidden #toggle_download_tab::before {
@ -146,7 +165,8 @@
} }
#download_tab_container.tab_hidden #queue_buttons { #download_tab_container.tab_hidden #queue_buttons {
display: none; opacity: 0;
visibility: hidden;
} }
#download_tab_container.tab_hidden #download_list { #download_tab_container.tab_hidden #download_list {
@ -154,5 +174,7 @@
} }
#download_tab_container.tab_hidden #download_tab_label { #download_tab_container.tab_hidden #download_tab_label {
display: inline; /* display: inline; */
opacity: 1;
visibility: visible;
} }

5
public/index.html
View File

@ -17,7 +17,7 @@
<body> <body>
<aside id="sidebar" role="navigation"> <aside id="sidebar" role="navigation">
<i class="material-icons side_icon">menu</i> <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 <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> 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 <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"> <div id="download_tab_container" class="tab_hidden">
<i id="toggle_download_tab" class="material-icons download_bar_icon"></i> <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="clean_queue" class="material-icons download_bar_icon">clear_all</i>
<i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i> <i id="cancel_queue" class="material-icons download_bar_icon">delete_sweep</i>
</div> </div>