{% set page_title = 'Subscription Manager' %} {% extends "base.html" %} {% block style %} .import-export{ display: flex; flex-direction: row; padding-left: 10px; padding-top: 10px; } .subscriptions-import-form{ background-color: var(--interface-color); display: flex; flex-direction: column; align-items: flex-start; max-width: 300px; padding:10px; } .subscriptions-import-form h2{ font-size: 20px; margin-bottom: 10px; } .import-submit-button{ margin-top:15px; align-self: flex-end; } .subscriptions-export-links{ margin: 0px 0px 0px 20px; background-color: var(--interface-color); list-style: none; max-width: 300px; padding:10px; } .sub-list-controls{ background-color: var(--interface-color); padding:10px; } .tag-group-list{ list-style: none; margin-left: 10px; margin-right: 10px; padding: 0px; } .tag-group{ border-style: solid; margin-bottom: 10px; } .sub-list{ list-style: none; padding:10px; column-width: 300px; column-gap: 40px; } .sub-list-item{ display:flex; margin-bottom: 10px; break-inside:avoid; } .sub-list-item:not(.muted){ background-color: var(--interface-color); } .tag-list{ margin-left:15px; font-weight:bold; } .sub-list-item-name{ margin-left:15px; } .sub-list-checkbox{ height: 1.5em; min-width: 1.5em; // need min-width otherwise browser doesn't respect the width and squishes the checkbox down when there's too many tags } {% endblock style %} {% macro subscription_list(sub_list) %} {% for subscription in sub_list %} <li class="sub-list-item {{ 'muted' if subscription['muted'] else '' }}"> <input class="sub-list-checkbox" name="channel_ids" value="{{ subscription['channel_id'] }}" form="subscription-manager-form" type="checkbox"> <a href="{{ subscription['channel_url'] }}" class="sub-list-item-name" title="{{ subscription['channel_name'] }}">{{ subscription['channel_name'] }}</a> <span class="tag-list">{{ ', '.join(subscription['tags']) }}</span> </li> {% endfor %} {% endmacro %} {% block main %} <div class="import-export"> <form class="subscriptions-import-form" enctype="multipart/form-data" action="/youtube.com/import_subscriptions" method="POST"> <h2>Import subscriptions</h2> <input type="file" id="subscriptions-import" accept="application/json, application/xml, text/x-opml" name="subscriptions_file"> <input type="submit" value="Import" class="import-submit-button"> </form> <!--<ul class="subscriptions-export-links"> <li><a href="/youtube.com/subscriptions.opml">Export subscriptions (OPML)</a></li> <li><a href="/youtube.com/subscriptions.xml">Export subscriptions (RSS)</a></li> </ul>--> </div> <hr> <form id="subscription-manager-form" class="sub-list-controls" method="POST"> {% if group_by_tags %} <a class="sort-button" href="/https://www.youtube.com/subscription_manager?group_by_tags=0">Don't group</a> {% else %} <a class="sort-button" href="/https://www.youtube.com/subscription_manager?group_by_tags=1">Group by tags</a> {% endif %} <input type="text" name="tags"> <button type="submit" name="action" value="add_tags">Add tags</button> <button type="submit" name="action" value="remove_tags">Remove tags</button> <button type="submit" name="action" value="unsubscribe_verify">Unsubscribe</button> <button type="submit" name="action" value="mute">Mute</button> <button type="submit" name="action" value="unmute">Unmute</button> <input type="reset" value="Clear Selection"> </form> {% if group_by_tags %} <ul class="tag-group-list"> {% for tag_name, sub_list in tag_groups %} <li class="tag-group"> <h2 class="tag-group-name">{{ tag_name }}</h2> <ol class="sub-list"> {{ subscription_list(sub_list) }} </ol> </li> {% endfor %} </ul> {% else %} <ol class="sub-list"> {{ subscription_list(sub_list) }} </ol> {% endif %} {% endblock main %}