diff options
| author | James Taylor <user234683@users.noreply.github.com> | 2019-08-24 14:25:11 -0700 |
|---|---|---|
| committer | James Taylor <user234683@users.noreply.github.com> | 2019-08-24 14:25:11 -0700 |
| commit | 943e1cd7512799c217451b33118b72b66b95b1be (patch) | |
| tree | 3b302610f41c015466a91e767c5121d5e0f6dd93 /youtube/templates | |
| parent | d9fbf82bb23b848726eace7354444f16e17a36f8 (diff) | |
| download | yt-local-943e1cd7512799c217451b33118b72b66b95b1be.tar.lz yt-local-943e1cd7512799c217451b33118b72b66b95b1be.tar.xz yt-local-943e1cd7512799c217451b33118b72b66b95b1be.zip | |
Layout: Make downloads click-to-show instead of hover-to-show using <details> element
Diffstat (limited to 'youtube/templates')
| -rw-r--r-- | youtube/templates/watch.html | 90 |
1 files changed, 51 insertions, 39 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index a555882..3716d6f 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -75,11 +75,12 @@ justify-self:end; } .video-info > .download-dropdown{ - grid-column:1; - grid-row: 5; + grid-column:1 / span 2; + grid-row: 6; } .video-info > .checkbox{ justify-self:end; + align-self: start; grid-row: 5; grid-column: 2; @@ -91,11 +92,11 @@ min-width: 0; word-wrap: break-word; grid-column: 1 / span 2; - grid-row: 6; + grid-row: 7; } .music-list{ - grid-row:7; + grid-row:8; grid-column: 1 / span 2; background-color: #dadada; } @@ -145,35 +146,42 @@ } - .download-dropdown{ - z-index:1; - justify-self:start; - min-width:0px; - height:0px; + .download-dropdown-label{ + background-color: #dadada; + border-style: outset; + border-width: 2px; + font-weight: bold; + padding-bottom: 2px; + } + .download-dropdown-label:hover{ + text-decoration: underline; } - - .download-dropdown-label{ - background-color: #e9e9e9; - border-style: outset; - border-width: 2px; - font-weight: bold; - } - .download-dropdown-content{ - display:none; - background-color: #e9e9e9; - } - .download-dropdown:hover .download-dropdown-content { - display: grid; - grid-auto-rows:30px; - padding-bottom: 50px; + background-color: #dadada; + padding: 10px; + list-style: none; + margin: 0px; } - .download-dropdown-content a{ - white-space: nowrap; - display:grid; - grid-template-columns: 60px 90px auto; - max-height: 1.2em; + li.download-format{ + margin-bottom: 7px; } + .format-attributes{ + list-style: none; + padding: 0px; + margin: 0px; + display: flex; + flex-direction: row; + } + .format-attributes li{ + white-space: nowrap; + max-height: 1.2em; + } + .format-ext{ + width: 60px; + } + .format-res{ + width:90px; + } {% endblock style %} {% block main %} @@ -203,18 +211,22 @@ <time datetime="$upload_date">Published on {{ upload_date }}</time> <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span> - <div class="download-dropdown"> - <button class="download-dropdown-label">Download</button> - <div class="download-dropdown-content"> + <details class="download-dropdown"> + <summary class="download-dropdown-label">Download</summary> + <ul class="download-dropdown-content"> {% for format in download_formats %} - <a href="{{ format['url'] }}"> - <span>{{ format['ext'] }}</span> - <span>{{ format['resolution'] }}</span> - <span>{{ format['note'] }}</span> - </a> + <li class="download-format"> + <a class="download-link" href="{{ format['url'] }}"> + <ol class="format-attributes"> + <li class="format-ext">{{ format['ext'] }}</li> + <li class="format-res">{{ format['resolution'] }}</li> + <li class="format-note">{{ format['note'] }}</li> + </ol> + </a> + </li> {% endfor %} - </div> - </div> + </ul> + </details> <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox"> |