heckyel/yt-local
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout: Make downloads click-to-show instead of hover-to-show using <details> element

Browse Source
This commit is contained in:
James Taylor 2019-08-24 14:25:11 -07:00
parent d9fbf82bb2
commit 943e1cd751
1 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
youtube/templates/watch.html
View File

@ -75,11 +75,12 @@
justify-self:end; justify-self:end;
} }
.video-info > .download-dropdown{ .video-info > .download-dropdown{
grid-column:1; grid-column:1 / span 2;
grid-row: 5; grid-row: 6;
} }
.video-info > .checkbox{ .video-info > .checkbox{
justify-self:end; justify-self:end;
align-self: start;
grid-row: 5; grid-row: 5;
grid-column: 2; grid-column: 2;
@ -91,11 +92,11 @@
min-width: 0; min-width: 0;
word-wrap: break-word; word-wrap: break-word;
grid-column: 1 / span 2; grid-column: 1 / span 2;
grid-row: 6; grid-row: 7;
} }
.music-list{ .music-list{
grid-row:7; grid-row:8;
grid-column: 1 / span 2; grid-column: 1 / span 2;
background-color: #dadada; background-color: #dadada;
} }
@ -145,35 +146,42 @@
} }
.download-dropdown{
z-index:1;
justify-self:start;
min-width:0px;
height:0px;
}
.download-dropdown-label{ .download-dropdown-label{
background-color: #e9e9e9; background-color: #dadada;
border-style: outset; border-style: outset;
border-width: 2px; border-width: 2px;
font-weight: bold; font-weight: bold;
padding-bottom: 2px;
}
.download-dropdown-label:hover{
text-decoration: underline;
} }
.download-dropdown-content{ .download-dropdown-content{
display:none; background-color: #dadada;
background-color: #e9e9e9; padding: 10px;
list-style: none;
margin: 0px;
} }
.download-dropdown:hover .download-dropdown-content { li.download-format{
display: grid; margin-bottom: 7px;
grid-auto-rows:30px;
padding-bottom: 50px;
} }
.download-dropdown-content a{ .format-attributes{
list-style: none;
padding: 0px;
margin: 0px;
display: flex;
flex-direction: row;
}
.format-attributes li{
white-space: nowrap; white-space: nowrap;
display:grid;
grid-template-columns: 60px 90px auto;
max-height: 1.2em; max-height: 1.2em;
} }
.format-ext{
width: 60px;
}
.format-res{
width:90px;
}
{% endblock style %} {% endblock style %}
{% block main %} {% block main %}
@ -203,18 +211,22 @@
<time datetime="$upload_date">Published on {{ upload_date }}</time> <time datetime="$upload_date">Published on {{ upload_date }}</time>
<span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span> <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span>
<div class="download-dropdown"> <details class="download-dropdown">
<button class="download-dropdown-label">Download</button> <summary class="download-dropdown-label">Download</summary>
<div class="download-dropdown-content"> <ul class="download-dropdown-content">
{% for format in download_formats %} {% for format in download_formats %}
<a href="{{ format['url'] }}"> <li class="download-format">
<span>{{ format['ext'] }}</span> <a class="download-link" href="{{ format['url'] }}">
<span>{{ format['resolution'] }}</span> <ol class="format-attributes">
<span>{{ format['note'] }}</span> <li class="format-ext">{{ format['ext'] }}</li>
<li class="format-res">{{ format['resolution'] }}</li>
<li class="format-note">{{ format['note'] }}</li>
</ol>
</a> </a>
</li>
{% endfor %} {% endfor %}
</div> </ul>
</div> </details>
<input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox"> <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">