mirror of
https://github.com/wahyd4/links.git
synced 2026-08-08 21:04:53 +10:00
Update style
This commit is contained in:
@@ -16,7 +16,7 @@
|
||||
<h3 class="text-lg leading-6 font-medium text-gray-900">
|
||||
{% trans "Delete Collection" %}
|
||||
</h3>
|
||||
<div class="mt-2">
|
||||
<div class=.think-panel"mt-2">
|
||||
<p class="text-sm text-gray-500">
|
||||
{% trans "Are you sure you want to delete this collection?" %}
|
||||
<span class="font-medium text-gray-700">{{ object.name }}</span>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 sm:py-8">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8 py-2 sm:py-8">
|
||||
<div class="flex justify-between items-center mb-4 sm:mb-6">
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-gray-900">{% trans "Image Collections" %}</h1>
|
||||
<a href="{% url 'collection-create' %}"
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="container mx-auto px-2 py-2">
|
||||
<div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
|
||||
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
|
||||
<div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-gray-900 flex items-center">
|
||||
{% trans "Link Details" %}
|
||||
{% if '{' in link.original_url and '}' in link.original_url %}
|
||||
@@ -23,13 +23,13 @@
|
||||
{% endif %}
|
||||
</h1>
|
||||
<div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
|
||||
<a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded text-sm sm:text-base inline-flex items-center justify-center">
|
||||
<a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-2 rounded text-sm sm:text-base inline-flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
|
||||
</svg>
|
||||
{% trans "Go to link" %}
|
||||
</a>
|
||||
<a href="{% url 'link_update' link.pk %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm sm:text-base inline-flex items-center justify-center">
|
||||
<a href="{% url 'link_update' link.pk %}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-2 rounded text-sm sm:text-base inline-flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
||||
</svg>
|
||||
@@ -37,7 +37,7 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="px-2 py-5 sm:p-6">
|
||||
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
|
||||
<div class="sm:col-span-1">
|
||||
<dt class="text-sm font-medium text-gray-500">{% trans "Alias" %}</dt>
|
||||
@@ -92,10 +92,10 @@
|
||||
|
||||
{% if link.link_type == 'CUSTOM' %}
|
||||
<div class="bg-white shadow-md rounded-lg overflow-hidden mb-8">
|
||||
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<h2 class="text-xl font-bold text-gray-900">{% trans "Custom Content" %}</h2>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="px-2 py-5 sm:p-6">
|
||||
<div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl max-w-none">
|
||||
{{ rendered_text|safe }}
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@
|
||||
{% endif %}
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
|
||||
<h2 class="text-xl font-bold text-gray-900">{% trans "Click Statistics" %} - {{ period_name }}</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@@ -123,7 +123,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="px-2 py-5 sm:p-6">
|
||||
<div style="height: 400px; position: relative;">
|
||||
<canvas id="clickChart"></canvas>
|
||||
</div>
|
||||
@@ -131,14 +131,14 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-white shadow-md rounded-lg overflow-hidden mt-8">
|
||||
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<div class="px-2 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
|
||||
<h2 class="text-xl font-bold text-gray-900">{% trans "URL Change History" %}</h2>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="px-2 py-5 sm:p-6">
|
||||
{% if change_logs %}
|
||||
<ul class="divide-y divide-gray-200">
|
||||
{% for log in change_logs %}
|
||||
<li class="py-4">
|
||||
<li class="py-2">
|
||||
<p class="text-sm text-gray-600">
|
||||
{% trans "URL changed at" %} {{ log.changed_at|date:"Y-m-d H:i" }}
|
||||
</p>
|
||||
@@ -172,7 +172,7 @@
|
||||
if (item.label) {
|
||||
return item.label;
|
||||
}
|
||||
|
||||
|
||||
const date = new Date(item.date);
|
||||
if (intervalDays === 1) {
|
||||
// Daily: show "Jan 15"
|
||||
|
||||
@@ -146,7 +146,7 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-gray-50 rounded-lg p-4 text-center">
|
||||
<div class="bg-gray-50 rounded-lg p-2 text-center">
|
||||
<p class="text-gray-600 text-sm">{% trans "No posts available yet" %}</p>
|
||||
<a href="{% url 'post-create' %}" class="inline-block mt-2 text-blue-600 hover:text-blue-800 font-medium text-sm">{% trans "Create your first post" %}</a>
|
||||
</div>
|
||||
@@ -406,13 +406,13 @@
|
||||
<tbody class="bg-white divide-y divide-gray-200" id="links-table-body">
|
||||
{% for link in links %}
|
||||
<tr class="link-row">
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap">
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap">
|
||||
<input type="checkbox" name="selected_links" value="{{ link.id }}" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
||||
</td>
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap">
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap">
|
||||
<a href="{% url 'redirect_to_original' link.alias %}" target="_blank" class="text-blue-600 hover:text-blue-900">{{ link.alias }}</a>
|
||||
</td>
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap hidden sm:table-cell">
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap hidden sm:table-cell">
|
||||
<span class="inline-flex items-center">
|
||||
{% if '{' in link.original_url and '}' in link.original_url %}
|
||||
<i class="fas fa-magic text-purple-500"></i>
|
||||
@@ -426,7 +426,7 @@
|
||||
{% endif %}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap hidden md:table-cell">
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap hidden md:table-cell">
|
||||
<div class="truncate max-w-xs" title="{{ link.original_url }}">
|
||||
<a href="{% url 'redirect_to_original' link.alias %}"
|
||||
class="text-blue-600 hover:text-blue-800 break-all"
|
||||
@@ -435,8 +435,8 @@
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap hidden sm:table-cell">{{ link.click_count }}</td>
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium">
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap hidden sm:table-cell">{{ link.click_count }}</td>
|
||||
<td class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap text-sm font-medium">
|
||||
<div class="flex space-x-2">
|
||||
<a href="{% url 'link_detail' link.id %}"
|
||||
class="p-1 text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded"
|
||||
@@ -469,13 +469,13 @@
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="6" class="px-3 py-2 sm:px-6 sm:py-4 whitespace-nowrap text-center text-gray-500">{% trans "No links available" %}</td>
|
||||
<td colspan="6" class="px-3 py-2 sm:px-6 sm:py-2 whitespace-nowrap text-center text-gray-500">{% trans "No links available" %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
|
||||
<div class="px-6 py-2 bg-gray-50 border-t border-gray-200">
|
||||
<button type="submit" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">{% trans "Delete Selected" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -513,7 +513,7 @@
|
||||
if (!noResultsRow) {
|
||||
const newRow = document.createElement('tr');
|
||||
newRow.id = 'no-results-row';
|
||||
newRow.innerHTML = `<td colspan="8" class="px-6 py-4 whitespace-nowrap text-center text-gray-500">{% trans "No matching links found" %}</td>`;
|
||||
newRow.innerHTML = `<td colspan="8" class="px-6 py-2 whitespace-nowrap text-center text-gray-500">{% trans "No matching links found" %}</td>`;
|
||||
tbody.appendChild(newRow);
|
||||
}
|
||||
} else if (noResultsRow) {
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-4 py-2">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">{% trans "Bookmark Pages" %}</h1>
|
||||
<a href="{% url 'page-create' %}" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700">
|
||||
@@ -103,7 +103,7 @@
|
||||
</div>
|
||||
</li>
|
||||
{% empty %}
|
||||
<li class="px-4 py-4 text-center text-gray-500">
|
||||
<li class="px-4 py-2 text-center text-gray-500">
|
||||
{% trans "No pages found." %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.think-header {
|
||||
@@ -299,6 +300,9 @@
|
||||
color: #374151;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.main-content {
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -334,15 +338,13 @@
|
||||
|
||||
|
||||
<!-- Main Content - Optimized Layout -->
|
||||
<div class="max-w-5xl mx-auto px-4 py-6">
|
||||
<div class="bg-white shadow-lg rounded-xl overflow-hidden">
|
||||
<!-- Header Section - Title with inline action buttons -->
|
||||
<div class="border-b border-gray-200 px-4 py-4"> <!-- Title and Actions - Responsive Layout -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-3">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 sm:flex-1">{{ post.title }}</h1>
|
||||
<div class="main-content max-w-5xl mx-auto px-2 py-2">
|
||||
<!-- Title and Actions - Responsive Layout -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 sm:flex-1">{{ post.title }}</h1>
|
||||
|
||||
<!-- Action Buttons - Responsive positioning -->
|
||||
<div class="flex items-center space-x-2 sm:flex-shrink-0">
|
||||
<!-- Action Buttons - Responsive positioning -->
|
||||
<div class="flex items-center space-x-2 sm:flex-shrink-0">
|
||||
<button onclick="toggleTTS()"
|
||||
class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-purple-700 hover:text-purple-800 bg-purple-50 hover:bg-purple-100 rounded-md transition duration-150">
|
||||
<svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -380,7 +382,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-3 mb-4">
|
||||
|
||||
{% if post.summary %}
|
||||
<div class="relative pl-3 border-l-4 border-gray-200">
|
||||
@@ -514,15 +516,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Section - Reduced padding, wider content -->
|
||||
<div class="px-4 py-4">
|
||||
<article class="prose max-w-none prose-lg">
|
||||
{{ post.content|markdown|safe }}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content Section - Full width, no containers -->
|
||||
<article class="prose max-w-none prose-lg">
|
||||
{{ post.content|markdown|safe }}
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="w-full px-4 py-4 sm:py-8 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<div class="w-full px-2 py-2 sm:py-8 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
||||
<h1 class="text-xl sm:text-2xl font-bold text-gray-900">{% trans "Posts" %}</h1>
|
||||
<a href="{% url 'post-create' %}"
|
||||
<a href="{% url 'post-create' %}"
|
||||
class="w-full sm:w-auto text-center bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition duration-150">
|
||||
{% trans "Add Post" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="bg-white shadow rounded-lg mb-6 p-4">
|
||||
<form method="get" class="flex flex-col gap-4 sm:flex-row sm:items-end">
|
||||
<div class="bg-white shadow rounded-lg mb-6 p-2">
|
||||
<form method="get" class="flex flex-col gap-4 sm:flex-row sm:items-end">
|
||||
<div class="flex-1">
|
||||
<label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">{% trans "From Date" %}</label>
|
||||
<input type="date" name="date_from" id="date_from"
|
||||
@@ -68,7 +68,7 @@
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
{% for tag in post.tags.all %}
|
||||
{% with number=forloop.counter %}
|
||||
<a href="{% url 'tag-detail' tag.slug %}"
|
||||
<a href="{% url 'tag-detail' tag.slug %}"
|
||||
class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition duration-150 {% if number|divisibleby:10 %}tag-10{% elif number|divisibleby:9 %}tag-9{% elif number|divisibleby:8 %}tag-8{% elif number|divisibleby:7 %}tag-7{% elif number|divisibleby:6 %}tag-6{% elif number|divisibleby:5 %}tag-5{% elif number|divisibleby:4 %}tag-4{% elif number|divisibleby:3 %}tag-3{% elif number|divisibleby:2 %}tag-2{% else %}tag-1{% endif %}">
|
||||
{{ tag.name }}
|
||||
</a>
|
||||
@@ -93,7 +93,7 @@
|
||||
{% trans "Updated" %}: {{ post.updated_at|date:"Y-m-d H:i" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 mt-3 sm:mt-0">
|
||||
<div class="flex items-center gap-2 mt-3 sm:mt-0">
|
||||
<a href="{% url 'post-update' post.pk %}" class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100 transition duration-150">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
|
||||
@@ -15,8 +15,9 @@
|
||||
border-radius: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.think-header {
|
||||
background-color: #f9fafb;
|
||||
padding: 1rem;
|
||||
@@ -27,28 +28,28 @@
|
||||
font-size: 1rem;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
|
||||
.think-header:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
|
||||
.think-content {
|
||||
padding: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out, padding 0.3s ease-out;
|
||||
}
|
||||
|
||||
|
||||
.think-content.expanded {
|
||||
padding: 1rem;
|
||||
max-height: 2000px; /* Adjust based on your needs */
|
||||
transition: max-height 0.5s ease-in, padding 0.3s ease-in;
|
||||
}
|
||||
|
||||
|
||||
.think-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
.think-icon.expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@@ -91,7 +92,7 @@
|
||||
const panel = this.parentElement;
|
||||
const content = panel.querySelector('.think-content');
|
||||
const icon = panel.querySelector('.think-icon');
|
||||
|
||||
|
||||
content.classList.toggle('expanded');
|
||||
icon.classList.toggle('expanded');
|
||||
});
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
<ul class="divide-y divide-gray-200">
|
||||
{% for result in results %}
|
||||
<li class="hover:bg-gray-50 transition-colors duration-150">
|
||||
<div class="px-4 py-4 sm:px-6">
|
||||
<div class="px-2 py-2 sm:px-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<!-- Show different content based on model type -->
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="container mx-auto px-2 py-8">
|
||||
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
|
||||
<!-- Tag Header -->
|
||||
<div class="bg-gradient-to-r from-blue-500 to-indigo-600 p-6 text-white">
|
||||
@@ -17,10 +17,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<a href="{% url 'tag-update' tag.slug %}" class="bg-white text-blue-600 hover:bg-blue-50 font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
|
||||
<a href="{% url 'tag-update' tag.slug %}" class="bg-white text-blue-600 hover:bg-blue-50 font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
|
||||
{% trans "Edit" %}
|
||||
</a>
|
||||
<a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out">
|
||||
<a href="{% url 'tag-delete' tag.slug %}" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-2 rounded-lg transition duration-150 ease-in-out">
|
||||
{% trans "Delete" %}
|
||||
</a>
|
||||
</div>
|
||||
@@ -30,16 +30,16 @@
|
||||
<!-- Resource Tabs -->
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="flex -mb-px overflow-x-auto" aria-label="Tabs">
|
||||
<button class="resource-tab text-blue-600 border-blue-500 whitespace-nowrap py-4 px-6 border-b-2 font-medium text-sm" data-target="links-section">
|
||||
<button class="resource-tab text-blue-600 border-blue-500 whitespace-nowrap py-2 px-6 border-b-2 font-medium text-sm" data-target="links-section">
|
||||
{% trans "Links" %} ({{ links|length }})
|
||||
</button>
|
||||
<button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 border-transparent font-medium text-sm" data-target="posts-section">
|
||||
<button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="posts-section">
|
||||
{% trans "Posts" %} ({{ posts|length }})
|
||||
</button>
|
||||
<button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 border-transparent font-medium text-sm" data-target="pages-section">
|
||||
<button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="pages-section">
|
||||
{% trans "Pages" %} ({{ pages|length }})
|
||||
</button>
|
||||
<button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-6 border-b-2 border-transparent font-medium text-sm" data-target="collections-section">
|
||||
<button class="resource-tab text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-6 border-b-2 border-transparent font-medium text-sm" data-target="collections-section">
|
||||
{% trans "Image Collections" %} ({{ image_collections|length }})
|
||||
</button>
|
||||
</nav>
|
||||
@@ -191,24 +191,24 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabs = document.querySelectorAll('.resource-tab');
|
||||
const sections = document.querySelectorAll('.resource-section');
|
||||
|
||||
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener('click', function() {
|
||||
// Hide all sections
|
||||
sections.forEach(section => {
|
||||
section.classList.add('hidden');
|
||||
});
|
||||
|
||||
|
||||
// Show the selected section
|
||||
const targetId = this.getAttribute('data-target');
|
||||
document.getElementById(targetId).classList.remove('hidden');
|
||||
|
||||
|
||||
// Update tab styles
|
||||
tabs.forEach(t => {
|
||||
t.classList.remove('text-blue-600', 'border-blue-500');
|
||||
t.classList.add('text-gray-500', 'border-transparent');
|
||||
});
|
||||
|
||||
|
||||
this.classList.remove('text-gray-500', 'border-transparent');
|
||||
this.classList.add('text-blue-600', 'border-blue-500');
|
||||
});
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
{% for tag in tags %}
|
||||
<a href="{% url 'tag-detail' tag.slug %}" class="block group">
|
||||
<div
|
||||
class="tag-card rounded-lg p-4 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
|
||||
class="tag-card rounded-lg p-2 h-full flex flex-col items-center justify-center text-center shadow-md hover:shadow-lg transition-all duration-200">
|
||||
<div class="mb-2">
|
||||
{% with icon_classes="w-8 h-8 mx-auto" %}
|
||||
{% if forloop.counter|divisibleby:5 %}
|
||||
@@ -129,7 +129,7 @@
|
||||
// Initialize ECharts instance
|
||||
const chartDom = document.getElementById('tag-cloud-container');
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
|
||||
// Prepare data for word cloud
|
||||
const tagCloudData = [];
|
||||
{% for tag in tag_cloud %}
|
||||
@@ -139,7 +139,7 @@
|
||||
slug: '{{ tag.slug }}'
|
||||
});
|
||||
{% endfor %}
|
||||
|
||||
|
||||
// Configure word cloud options
|
||||
const option = {
|
||||
series: [{
|
||||
@@ -174,10 +174,10 @@
|
||||
data: tagCloudData
|
||||
}]
|
||||
};
|
||||
|
||||
|
||||
// Set configuration and render chart
|
||||
myChart.setOption(option);
|
||||
|
||||
|
||||
// Add click event to navigate to tag detail page
|
||||
myChart.on('click', function(params) {
|
||||
const clickedTag = tagCloudData.find(tag => tag.name === params.name);
|
||||
@@ -185,7 +185,7 @@
|
||||
window.location.href = `/ui/tags/${clickedTag.slug}/`;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Make chart responsive
|
||||
window.addEventListener('resize', function() {
|
||||
myChart.resize();
|
||||
|
||||
+1
-1
@@ -217,7 +217,7 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mx-auto mt-20 p-4">
|
||||
<div class="container mx-auto mt-20 p-2">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="bg-{{ message.tags }}-100 bg-yellow-100 border border-{{ message.tags }}-400 text-{{ message.tags }}-700 border-yellow-500 text-yellow-700 px-4 py-3 rounded relative mb-4" role="alert">
|
||||
|
||||
Reference in New Issue
Block a user