..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186 | {% if not request.user.mal_access_token %}
{% load static %}
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col justify-center">
<img loading="lazy" src="{% static 'images/added-to-list.gif' %}" alt="added to list" class="mx-auto"/>
<p class="text-gray-400 text-center mt-2 text-sm">
Your MAL list is not connected to your account yet. Connect your MAL account to see your list here.
</p>
<a href="{{ mal_auth_uri }}" class="text-white font-bold px-4 rounded-full inline-flex items-center gap-2 mt-4 mx-auto bg-blue-500 hover:bg-blue-700">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="2.4rem" width="2.4rem" xmlns="http://www.w3.org/2000/svg"><path d="M8.273 7.247v8.423l-2.103-.003v-5.216l-2.03 2.404-1.989-2.458-.02 5.285H.001L0 7.247h2.203l1.865 2.545 2.015-2.546 2.19.001zm8.628 2.069l.025 6.335h-2.365l-.008-2.871h-2.8c.07.499.21 1.266.417 1.779.155.381.298.751.583 1.128l-1.705 1.125c-.349-.636-.622-1.337-.878-2.082a9.296 9.296 0 0 1-.507-2.179c-.085-.75-.097-1.471.107-2.212a3.908 3.908 0 0 1 1.161-1.866c.313-.293.749-.5 1.1-.687.351-.187.743-.264 1.107-.359a7.405 7.405 0 0 1 1.191-.183c.398-.034 1.107-.066 2.39-.028l.545 1.749H14.51c-.593.008-.878.001-1.341.209a2.236 2.236 0 0 0-1.278 1.92l2.663.033.038-1.81h2.309zm3.992-2.099v6.627l3.107.032-.43 1.775h-4.807V7.187l2.13.03z"></path></svg>
<span>Connect with MAL</span>
</a>
</div>
{% else %}
<section class="flex flex-col lg:flex-row gap-2 justify-between my-4">
{% if prev_offset %}
<a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ prev_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
<span>Load Previous</span>
</a>
{% else %}
<a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
<span>Load Previous</span>
</a>
{% endif %}
<div class="flex flex-row">
<div class="flex flex-row items-center gap-2">
<span class="font-bold">Filter:</span>
<div class="relative w-64 custom-select text-sm" data-select="list_filter">
<div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="list_filter">
{% if filter == "completed" %}
completed
{% elif filter == "watching" %}
watching
{% elif filter == "on_hold" %}
on hold
{% elif filter == "dropped" %}
dropped
{% elif filter == "plan_to_watch" %}
plan to watch
{% else %}
all
{% endif %}
</div>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
</svg>
</div>
<div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden" id="list_filter_options">
<div class="py-1">
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="all">all</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="watching">watching</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="completed">completed</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="on hold">on hold</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="dropped">dropped</div>
<div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="plan to watch">plan to watch</div>
</div>
</div>
</div>
</div>
</div>
{% if next_offset %}
<a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ next_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
<span>Load Next</span>
</a>
{% else %}
<a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
<span>Load Next</span>
</a>
{% endif %}
</section>
<section class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp">
{% for anime in mal_list %}
<a href="{% url 'user_profile:user_profile' %}?category=update&mal_id={{ anime.node.id }}" class="w-1/2 lg:w-1/4 xl:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
<img loading="lazy" src="{{ anime.node.main_picture.large }}" alt="{{ anime.node.title }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
<div class="inline-flex gap-2 flex-wrap">
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1 capitalize">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
<path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
<path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
<path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
</svg>
{% if anime.node.my_list_status.status == "watching" %}
Watching
{% elif anime.node.my_list_status.status == "completed" %}
Completed
{% elif anime.node.my_list_status.status == "on_hold" %}
On Hold
{% elif anime.node.my_list_status.status == "dropped" %}
Dropped
{% elif anime.node.my_list_status.status == "plan_to_watch" %}
Plan to Watch
{% endif %}
</span>
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>
</svg>
{{ anime.node.my_list_status.num_episodes_watched }}
</span>
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
</svg>
{{ anime.node.my_list_status.score }}
</span>
</div>
<span class="text-sm font-bold flex gap-1 flex-row items-start">
{% if anime.status == "Ongoing" %}
<span class="text-green-500 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
{% elif anime.status == "Not yet aired" %}
<span class="text-yellow-500 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
{% else %}
<span class="text-blue-500 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
{% endif %}
<span>
{% if user.preferences.title_language == "english" and anime.node.alternative_titles and anime.node.alternative_titles.en %}
{{ anime.node.alternative_titles.en }}
{% elif user.preferences.title_language == "native" and anime.node.alternative_titles and anime.node.alternative_titles.ja %}
{{ anime.node.alternative_titles.ja }}
{% else %}
{{ anime.node.title }}
{% endif %}
</span>
</span>
</a>
{% endfor %}
</section>
<section class="flex flex-row justify-between my-4">
{% if prev_offset %}
<a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ prev_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
<span>Load Previous</span>
</a>
{% else %}
<a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
<span>Load Previous</span>
</a>
{% endif %}
{% if next_offset %}
<a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ next_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
<span>Load Next</span>
</a>
{% else %}
<a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
<span>Load Next</span>
</a>
{% endif %}
</section>
{% endif %}
{% block scripts %}
<script>
// On change of list_filter text content
const listFilter = document.getElementById('list_filter');
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'characterData' || mutation.type === 'childList') {
// console.log(listFilter.textContent);
const selectedOption = listFilter.textContent.trim().toLowerCase().replace(/\s/g, '_');
// refresh the page with the selected filter
const currentLocation = new URL(window.location.href);
currentLocation.searchParams.set('filter', selectedOption);
window.location.href = currentLocation.href;
}
});
});
observer.observe(listFilter, {
characterData: true,
childList: true,
subtree: true
});
</script>
{% endblock scripts %}
|
|
