Update style

This commit is contained in:
2025-07-16 17:18:25 +10:00
parent df0cce3390
commit ef4edd427d
12 changed files with 75 additions and 76 deletions
@@ -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>
+1 -1
View File
@@ -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' %}"
+13 -13
View File
@@ -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"
+10 -10
View File
@@ -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) {
+2 -2
View File
@@ -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 %}
+15 -17
View File
@@ -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 %}
+6 -6
View File
@@ -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"/>
+8 -7
View File
@@ -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');
});
+1 -1
View File
@@ -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 -->
+11 -11
View File
@@ -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');
});
+6 -6
View File
@@ -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
View File
@@ -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">