tubearchivist
/
tubearchivist-frontend
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

restructure html to allow for non boxed-content classes within content blocks, #98

This commit is contained in:
simon 2021-12-06 18:05:25 +07:00
parent 8c5bb0bc1f
commit e2238c16f5
10 changed files with 898 additions and 876 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tubearchivist/home/templates/home/about.html
View File

@ -1,17 +1,19 @@
{% extends "home/base.html" %}
{% load static %}
{% block content %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>About The Tube Archivist</h1>
</div>
<div class="about-section">
</div>
<div class="about-section">
<h2>Useful Links</h2>
<p>This project is in active and constant development, take a look at the <a href="https://github.com/bbilly1/tubearchivist#roadmap" target="_blank">roadmap</a> for a overview.</p>
<p>For any questions on what a button or a function does, You can find the up-to-date user documentation on <a href="https://github.com/bbilly1/tubearchivist/wiki" target="_blank">Github</a>.</p>
<p>All contributions are welcome: Open an <a href="https://github.com/bbilly1/tubearchivist/issues" target="_blank">issue</a> for any bugs and errors, start a <a href="https://github.com/bbilly1/tubearchivist/discussions" target="_blank">discussion</a> for anything that will require a more indepth look. The <a href="https://github.com/bbilly1/tubearchivist/blob/master/CONTRIBUTING.md" target="_blank">contributing</a> page is a good place to get started.</p>
</div>
<div class="about-section">
</div>
<div class="about-section">
<h2>Donate</h2>
<p>Here are <a href="https://github.com/bbilly1/tubearchivist#donate" target="_blank">some links</a>, if you want to buy the developer a coffee. Thank you for your support!</p>
</div>
</div>
{% endblock content %}

4
tubearchivist/home/templates/home/base.html
View File

@ -20,6 +20,7 @@
<script type="text/javascript" src="{% static 'script.js' %}"></script>
</head>
<body>
<div class="main-content">
<div class="boxed-content">
<div class="top-banner">
<a href="{% url 'home' %}">
@ -58,7 +59,9 @@
</a>
</div>
</div>
</div>
{% block content %}{% endblock %}
<div class="boxed-content">
<div class="pagination">
{% if pagination %}
{% if pagination.current_page > 1 %}
@ -100,6 +103,7 @@
{% endif %}
</div>
</div>
</div>
<div class="footer">
<div class="boxed-content">
<span>© 2021 The Tube Archivist v0.0.8 | <a href="https://github.com/bbilly1/tubearchivist" target="_blank">Github</a> | <a href="https://hub.docker.com/r/bbilly1/tubearchivist" target="_blank">Docker Hub</a></span>

20
tubearchivist/home/templates/home/channel.html
View File

@ -2,11 +2,12 @@
{% load static %}
{% load humanize %}
{% block content %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>Channels</h1>
</div>
<div id="notifications" data="channel"></div>
<div class="info-box info-box-2">
</div>
<div id="notifications" data="channel"></div>
<div class="info-box info-box-2">
<div class="icon-text">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<p>Subscribe to Channels</p>
@ -30,8 +31,8 @@
</datalist>
</form>
</div>
</div>
<div class="view-controls">
</div>
<div class="view-controls">
<div class="toggle">
<span>Show only subscribed channels:</span>
<div class="toggleBox">
@ -49,9 +50,9 @@
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="channel" data-value="list" alt="list view">
</div>
</div>
<h2>Total matching channels: {{ max_hits }}</h2>
<div class="channel-list {{ view_style }}">
</div>
<h2>Total matching channels: {{ max_hits }}</h2>
<div class="channel-list {{ view_style }}">
{% if channels %}
{% for channel in channels %}
<div class="channel-item {{ view_style }}">
@ -94,6 +95,7 @@
{% else %}
<h2>No channels found...</h2>
{% endif %}
</div>
</div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %}

28
tubearchivist/home/templates/home/channel_id.html
View File

@ -2,10 +2,11 @@
{% block content %}
{% load static %}
{% load humanize %}
<div class="channel-banner">
<div class="boxed-content">
<div class="channel-banner">
<a href="/channel/{{ channel_info.channel_id }}/"><img src="/cache/channels/{{ channel_info.channel_id }}_banner.jpg" alt="channel_banner"></a>
</div>
<div class="info-box info-box-3">
</div>
<div class="info-box info-box-3">
<div class="info-box-item">
<div class="round-img">
<a href="{% url 'channel_id' channel_info.channel_id %}">
@ -57,18 +58,18 @@
<a href="/playlist/?search={{ channel_info.channel_id }}" title="Show all playlists belonging to {{ channel_info.channel_name }}"><button>Show Playlists</button></a>
</div>
</div>
</div>
{% if channel_info.channel_description %}
</div>
{% if channel_info.channel_description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ channel_info.channel_description|linebreaks }}
</div>
</div>
{% endif %}
<div id="notifications" data="channel_id"></div>
<div id="player" class="video-player"></div>
<div class="sort">
{% endif %}
<div id="notifications" data="channel_id"></div>
<div id="player" class="video-player"></div>
<div class="sort">
<p>Sort by <span class="settings-current">{{ sort_by }}</span>
<select name="sort" id="sort" onchange="sortChange(this.value)">
<option value="" disabled selected> -- change sort by -- </option>
@ -90,8 +91,8 @@
{% endif %}
</select>
</p>
</div>
<div class="view-controls">
</div>
<div class="view-controls">
<div class="toggle">
<span>Hide watched videos:</span>
<div class="toggleBox">
@ -109,8 +110,8 @@
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div>
<div class="video-list {{ view_style }}">
</div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
@ -142,6 +143,7 @@
{% else %}
<h2>No videos found...</h2>
{% endif %}
</div>
</div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %}

26
tubearchivist/home/templates/home/downloads.html
View File

@ -1,12 +1,13 @@
{% extends "home/base.html" %}
{% load static %}
{% block content %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>Downloads</h1>
</div>
<div id="notifications" data="download"></div>
<div id="downloadControl"></div>
<div class="info-box info-box-3">
</div>
<div id="notifications" data="download"></div>
<div id="downloadControl"></div>
<div class="info-box info-box-3">
<div class="icon-text">
<img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon">
<p>Rescan subscriptions</p>
@ -26,8 +27,8 @@
</form>
</div>
</div>
</div>
<div class="view-controls">
</div>
<div class="view-controls">
<div class="toggle">
<span>Show only ignored videos:</span>
<div class="toggleBox">
@ -45,8 +46,8 @@
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
</div>
</div>
<div class="title-split">
</div>
<div class="title-split">
{% if show_ignored_only %}
<h2>Ignored from download</h2>
<button onclick="deleteQueue(this)" data-id="ignore" title="Delete all previously ignored videos from the queue">Delete all ignored</button>
@ -54,9 +55,9 @@
<h2>Download queue</h2>
<button onclick="deleteQueue(this)" data-id="pending" title="Delete all pending videos from the queue">Delete all queued</button>
{% endif %}
</div>
<h3>Total videos: {{ max_hits }}</h3>
<div class="dl-list {{ view_style }}">
</div>
<h3>Total videos: {{ max_hits }}</h3>
<div class="dl-list {{ view_style }}">
{% if all_video_hits %}
{% for video in all_video_hits %}
<div class="dl-item {{ view_style }}" id="dl-{{ video.youtube_id }}">
@ -87,6 +88,7 @@
</div>
{% endfor %}
{% endif %}
</div>
</div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %}

18
tubearchivist/home/templates/home/home.html
View File

@ -1,10 +1,11 @@
{% extends "home/base.html" %}
{% block content %}
{% load static %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>Recent Videos</h1>
</div>
<div class="info-box info-box-2">
</div>
<div class="info-box info-box-2">
<div class="sort">
<p>Sort by <span class="settings-current">{{ sort_by }}</span>
<select name="sort" id="sort" onchange="sortChange(this.value)">
@ -37,8 +38,8 @@
{{ search_form }}
</form>
</div>
</div>
<div class="view-controls">
</div>
<div class="view-controls">
<div class="toggle">
<span>Hide watched videos:</span>
<div class="toggleBox">
@ -56,9 +57,9 @@
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div>
<div id="player" class="video-player"></div>
<div class="video-list {{ view_style }}">
</div>
<div id="player" class="video-player"></div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
@ -91,5 +92,6 @@
{% else %}
<h2>No videos found...</h2>
{% endif %}
</div>
</div>
{% endblock content %}

18
tubearchivist/home/templates/home/playlist.html
View File

@ -1,11 +1,12 @@
{% extends "home/base.html" %}
{% load static %}
{% block content %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>Playlists</h1>
</div>
<div id="notifications" data="playlist"></div>
<div class="info-box info-box-2">
</div>
<div id="notifications" data="playlist"></div>
<div class="info-box info-box-2">
<div class="icon-text">
{% if running == "subscribing" %}
<p>Subscribing in progress, refresh.</p>
@ -31,8 +32,8 @@
{{ search_form }}
</form>
</div>
</div>
<div class="view-controls">
</div>
<div class="view-controls">
<div class="toggle">
<span>Show only subscribed playlists:</span>
<div class="toggleBox">
@ -50,8 +51,8 @@
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="list" alt="list view">
</div>
</div>
<div class="playlist-list {{ view_style }}">
</div>
<div class="playlist-list {{ view_style }}">
{% if playlists %}
{% for playlist in playlists %}
<div class="playlist-item {{ view_style }}">
@ -77,6 +78,7 @@
{% else %}
<h2>No playlists found...</h2>
{% endif %}
</div>
</div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %}

22
tubearchivist/home/templates/home/playlist_id.html
View File

@ -2,10 +2,11 @@
{% load static %}
{% load humanize %}
{% block content %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>{{ playlist_info.playlist_name }}</h1>
</div>
<div class="info-box info-box-3">
</div>
<div class="info-box info-box-3">
<div class="info-box-item">
<div class="round-img">
<a href="{% url 'channel_id' channel_info.channel_id %}">
@ -53,17 +54,17 @@
{% endif %}
</div>
</div>
</div>
{% if playlist_info.playlist_description %}
</div>
{% if playlist_info.playlist_description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ playlist_info.playlist_description|linebreaks }}
</div>
</div>
{% endif %}
<div id="player" class="video-player"></div>
<div class="view-controls">
{% endif %}
<div id="player" class="video-player"></div>
<div class="view-controls">
<div class="toggle">
<span>Hide watched videos:</span>
<div class="toggleBox">
@ -77,8 +78,8 @@
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
</div>
<div class="video-list {{ view_style }}">
</div>
<div class="video-list {{ view_style }}">
{% if videos %}
{% for video in videos %}
<div class="video-item {{ view_style }}">
@ -110,5 +111,6 @@
{% else %}
<h2>No videos found...</h2>
{% endif %}
</div>
</div>
{% endblock content %}

54
tubearchivist/home/templates/home/settings.html
View File

@ -1,9 +1,10 @@
{% extends "home/base.html" %}
{% block content %}
<div class="title-bar">
<div class="boxed-content">
<div class="title-bar">
<h1>User Configurations</h1>
</div>
<form action="/settings/" method="POST" name="user-update">
</div>
<form action="/settings/" method="POST" name="user-update">
{% csrf_token %}
<div class="settings-group">
<h2>Color scheme</h2>
@ -22,11 +23,11 @@
</div>
</div>
<button type="submit" name="user-settings">Update User Configurations</button>
</form>
<div class="title-bar">
</form>
<div class="title-bar">
<h1>Application Configurations</h1>
</div>
<form action="/settings/" method="POST" name="application-update">
</div>
<form action="/settings/" method="POST" name="application-update">
{% csrf_token %}
<div class="settings-group">
<h2 id="subscriptions">Subscriptions</h2>
@ -100,11 +101,11 @@
</div>
</div>
<button type="submit" name="application-settings">Update Application Configurations</button>
</form>
<div class="title-bar">
</form>
<div class="title-bar">
<h1>Scheduler setup</h1>
</div>
<form action="/settings/" method="POST" name="scheduler-update">
</div>
<form action="/settings/" method="POST" name="scheduler-update">
{% csrf_token %}
<div class="settings-group">
<div class="settings-item">
@ -134,48 +135,48 @@
</div>
</div>
<button type="submit" name="scheduler-settings">Update Scheduler Settings</button>
</form>
<div class="title-bar">
</form>
<div class="title-bar">
<h1>Actions</h1>
</div>
<div class="settings-group">
</div>
<div class="settings-group">
<h2>Manual media files import.</h2>
<p>Add files to the <span class="settings-current">cache/import</span> folder. Make sure to follow the instructions in the Github <a href="https://github.com/bbilly1/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>
<div id="manual-import">
<button onclick="manualImport()">Start import</button>
</div>
</div>
<div class="settings-group">
</div>
<div class="settings-group">
<h2>Embed thumbnails into media file.</h2>
<p>Set extracted youtube thumbnail as cover art of the media file.</p>
<div id="re-embed">
<button onclick="reEmbed()">Start process</button>
</div>
</div>
<div class="settings-group">
</div>
<div class="settings-group">
<h2>Backup database</h2>
<p>Export your database to a zip file stored at <span class="settings-current">cache/backup</span>.</p>
<div id="db-backup">
<button onclick="dbBackup()">Start backup</button>
</div>
</div>
<div class="settings-group">
</div>
<div class="settings-group">
<h2>Restore from backup</h2>
<p><span class="danger-zone">Danger Zone</span>: This will replace your existing index with the backup.</p>
<p>Add the backup zip file to the <span class="settings-current">cache/backup</span> folder.</p>
<div id="db-restore">
<button onclick="dbRestore()">Restore backup</button>
</div>
</div>
<div class="settings-group">
</div>
<div class="settings-group">
<h2>Rescan filesystem</h2>
<p><span class="danger-zone">Danger Zone</span>: This will delete the metadata of deleted videos from the filesystem.</p>
<p>Rescan your media folder looking for missing videos and clean up index. More infos on the Github <a href="https://github.com/bbilly1/tubearchivist/wiki/Settings" target="_blank">Wiki</a>.</p>
<div id="fs-rescan">
<button onclick="fsRescan()">Rescan filesystem</button>
</div>
</div>
{% if request.user.is_superuser %}
</div>
{% if request.user.is_superuser %}
<div class="title-bar">
<h1>Users</h1>
</div>
@ -184,5 +185,6 @@
<p>Access the admin interface for basic user management functionality like adding and deleting users, changing passwords and more.</p>
<a href="/admin/"><button>Admin Interface</button></a>
</div>
{% endif %}
{% endif %}
</div>
{% endblock content %}

18
tubearchivist/home/templates/home/video.html
View File

@ -2,15 +2,16 @@
{% block content %}
{% load static %}
{% load humanize %}
<div class="video-main">
<div class="boxed-content">
<div class="video-main">
<video
src="/media/{{ video.media_url }}"
poster="/cache/{{ video.vid_thumb_url }}" controls preload="false"
type='video/mp4' width="100%" playsinline>
</video>
<h1>{{ video.title }}</h1>
</div>
<div class="info-box info-box-3">
</div>
<div class="info-box info-box-3">
<div class="info-box-item">
<div class="round-img">
<a href="{% url 'channel_id' video.channel.channel_id %}">
@ -62,16 +63,16 @@
{% endif %}
</div>
</div>
</div>
{% if video.description %}
</div>
{% if video.description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ video.description|linebreaks }}
</div>
</div>
{% endif %}
{% if playlist_nav %}
{% endif %}
{% if playlist_nav %}
{% for playlist_item in playlist_nav %}
<div class="playlist-wrap">
<a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
@ -107,5 +108,6 @@
</div>
</div>
{% endfor %}
{% endif %}
{% endif %}
</div>
{% endblock content %}