From 014236a7222ab80a2429367e7d8e5d4636cd084d Mon Sep 17 00:00:00 2001 From: Junwei Zhao Date: Sat, 5 Oct 2024 19:39:15 +1000 Subject: [PATCH] Update style of custom link page --- data/db.sqlite3 | Bin 192512 -> 192512 bytes links/models.py | 4 ++ links/templates/links/custom_link.html | 86 +++++++++++++++++++++++++ links/templates/links/link_form.html | 44 ++++++++++--- links/templates/links/link_list.html | 14 +++- links/views.py | 30 ++++++++- new_theme/static/css/dist/styles.css | 18 ++++++ url_manager/urls.py | 4 ++ 8 files changed, 187 insertions(+), 13 deletions(-) create mode 100644 links/templates/links/custom_link.html diff --git a/data/db.sqlite3 b/data/db.sqlite3 index b64fbf22cab0938b37912da3a8f765230cfcc92f..98f72e1d3998d383ca3444805a09a340e3ce01bb 100644 GIT binary patch delta 725 zcmcIh&ubGw6rOpzZko-eQ=7(ijhJln)Jt@gb4z?t9h1!BA z6TDeaYtTLGK~JKR!zu_~`UmLAYef*O2l1c?vEXDW81U@C_wnYP{-R zrLrRP$N@t)XeO&?^t_@M?3`{>s#3E+v-7Bvo?sDpFk;>|tbT+^X)bFBK_m{la9Acw zi1f%0@{PPDUGj`PBJar;@`=1APl@L%BX9u7Qg>2UNnGFnqmI0f!&sQ`*V6DXdW7Zv zB;U!`U`&AzB##i9ZSU{1$7pVW(aa2^{t+0CG8|{n7%~hh!?8fo;UkHO6?9iDBJrG9 z^raFs{2L{B&WkOv)pbS^(J7G|hpdsKdDIavBC&6x`$Jr!??judkQme!AU=kp{)!5A za&Iz!b?el$f;UyD;DEmdyF|bhG=(<&hzpK@cF+d1PrFd8U1}$yXnfXjqH-$yQLC@5 zUiVhC@G>~maO_52&E*Yhng6_m3$dt0%NNcso;fwGga!N^7pgpKxEh?i46lX*z6HP2 zQk;2!@QBn2&({2F_~w7^qb;{bMU+I2GbFb|ZG!?V+xJ{Jm@*2sp{u4zbJX0EF|C|9 QyQomlf9yi#$qOj`0lQPT zTprVT9GJ2hqo%E}5Ji5ZF0cdTdf znEtAODUKz&QGj#1Pa)F|zU?dtOn>>eGd3{&m*?ODI*CDmfdS1q=A0}ryFamR58S}C G-W~uAvS&^J diff --git a/links/models.py b/links/models.py index 76df526..3b6dad2 100644 --- a/links/models.py +++ b/links/models.py @@ -1,5 +1,6 @@ from django.db import models from django.utils.translation import gettext_lazy as _ +from django.urls import reverse class Link(models.Model): class LinkType(models.TextChoices): @@ -21,6 +22,9 @@ class Link(models.Model): def __str__(self): return self.alias + def get_absolute_url(self): + return reverse('link_detail', kwargs={'pk': self.pk}) + class ClickLog(models.Model): link = models.ForeignKey(Link, on_delete=models.CASCADE) clicked_at = models.DateTimeField(auto_now_add=True) diff --git a/links/templates/links/custom_link.html b/links/templates/links/custom_link.html new file mode 100644 index 0000000..fb5482d --- /dev/null +++ b/links/templates/links/custom_link.html @@ -0,0 +1,86 @@ + + + + + + {{ link.alias }} + + + + + +
+
+ {{ rendered_text|safe }} +
+
+ + diff --git a/links/templates/links/link_form.html b/links/templates/links/link_form.html index 8350dff..d35d09a 100644 --- a/links/templates/links/link_form.html +++ b/links/templates/links/link_form.html @@ -46,14 +46,14 @@ {% for field in form %} {% if field.name != 'link_type' %} -
+
{% if field.name == 'text' %} - {% if is_custom %} + {% if is_custom or is_new %} {{ field }} {% endif %} {% elif field.name == 'original_url' %} @@ -123,6 +123,8 @@ const linkDescription = document.getElementById('link-description'); const customDescription = document.getElementById('custom-description'); const linkTypeInput = document.getElementById('id_link_type'); + const textField = document.querySelector('.custom-field'); + let simplemde; function showLinkFields() { linkTab.classList.add('text-blue-600', 'border-blue-600'); @@ -131,15 +133,23 @@ customTab.classList.add('text-gray-500', 'border-transparent'); linkFields.forEach(field => { field.classList.remove('hidden'); - field.querySelector('label').classList.remove('hidden'); + const label = field.querySelector('label'); + if (label) label.classList.remove('hidden'); }); customFields.forEach(field => { field.classList.add('hidden'); - field.querySelector('label').classList.add('hidden'); + const label = field.querySelector('label'); + if (label) label.classList.add('hidden'); }); linkDescription.classList.remove('hidden'); customDescription.classList.add('hidden'); linkTypeInput.value = 'LINK'; + if (simplemde) { + //simplemde.toTextArea(); + simplemde = null; + + } + textField.classList.add('hidden'); } function showCustomFields() { @@ -149,15 +159,28 @@ linkTab.classList.add('text-gray-500', 'border-transparent'); customFields.forEach(field => { field.classList.remove('hidden'); - field.querySelector('label').classList.remove('hidden'); + const label = field.querySelector('label'); + if (label) label.classList.remove('hidden'); }); linkFields.forEach(field => { field.classList.add('hidden'); - field.querySelector('label').classList.add('hidden'); + const label = field.querySelector('label'); + if (label) label.classList.add('hidden'); }); customDescription.classList.remove('hidden'); linkDescription.classList.add('hidden'); linkTypeInput.value = 'CUSTOM'; + initializeSimpleMDE(); + textField.classList.remove('hidden'); + } + + function initializeSimpleMDE() { + if (!simplemde) { + var textArea = document.getElementById('id_text'); + if (textArea) { + simplemde = new SimpleMDE({ element: textArea }); + } + } } linkTab.addEventListener('click', showLinkFields); @@ -170,10 +193,11 @@ showLinkFields(); } - // Initialize SimpleMDE for custom links - var textArea = document.getElementById('id_text'); - if (textArea) { - var simplemde = new SimpleMDE({ element: textArea }); + // Check if we're creating a new link + const isNewLink = {{ form.instance.pk|yesno:"false,true" }}; + if (isNewLink) { + // Hide text field by default for new links + textField.classList.add('hidden'); } }); diff --git a/links/templates/links/link_list.html b/links/templates/links/link_list.html index 62cb13d..5371e04 100644 --- a/links/templates/links/link_list.html +++ b/links/templates/links/link_list.html @@ -51,6 +51,9 @@ {% endif %} + + {% trans "Type" %} + {% trans "Original URL" %} @@ -94,6 +97,15 @@ {{ link.alias }} + + + {% if link.link_type == 'LINK' %} + + {% else %} + + {% endif %} + +
{{ link.original_url }} @@ -114,7 +126,7 @@ {% empty %} - {% trans "No links available" %} + {% trans "No links available" %} {% endfor %} diff --git a/links/views.py b/links/views.py index 62fbb04..7d252b4 100644 --- a/links/views.py +++ b/links/views.py @@ -74,6 +74,11 @@ class LinkCreateView(CreateView): initial['alias'] = alias return initial + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + context['is_new'] = True + return context + def form_valid(self, form): form.instance.alias = form.instance.alias.lower() alias = form.cleaned_data.get('alias').lower() @@ -83,6 +88,11 @@ class LinkCreateView(CreateView): if Link.objects.filter(alias=alias).exists(): form.add_error('alias', _("This alias is already in use. Please choose another one.")) return self.form_invalid(form) + + # Set original_url for custom links + if form.cleaned_data.get('link_type') == Link.LinkType.CUSTOM: + form.instance.original_url = f'/custom/{alias}' + return super().form_valid(form) def is_valid_alias(self, alias): @@ -92,7 +102,6 @@ class LinkUpdateView(UpdateView): model = Link form_class = LinkForm template_name = 'links/link_form.html' - success_url = reverse_lazy('link_list') def get_initial(self): initial = super().get_initial() @@ -115,7 +124,9 @@ class LinkUpdateView(UpdateView): if Link.objects.filter(alias=alias).exclude(pk=self.object.pk).exists(): form.add_error('alias', _("This alias is already in use. Please choose another one.")) return self.form_invalid(form) - return super().form_valid(form) + response = super().form_valid(form) + # Redirect to the link detail page after successful update + return redirect(reverse('link_detail', kwargs={'pk': self.object.pk})) def form_invalid(self, form): for field, errors in form.errors.items(): @@ -299,3 +310,18 @@ def export_links(request): response = HttpResponse(json.dumps(formatted_data, indent=2), content_type='application/json') response['Content-Disposition'] = 'attachment; filename="links_export.json"' return response + +class CustomLinkView(DetailView): + model = Link + template_name = 'links/custom_link.html' + context_object_name = 'link' + + def get_object(self, queryset=None): + alias = self.kwargs.get('alias').lower() + return get_object_or_404(Link, alias=alias, link_type=Link.LinkType.CUSTOM) + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + # Render markdown text as HTML + context['rendered_text'] = markdown.markdown(self.object.text) + return context diff --git a/new_theme/static/css/dist/styles.css b/new_theme/static/css/dist/styles.css index 4c0c221..9a06326 100644 --- a/new_theme/static/css/dist/styles.css +++ b/new_theme/static/css/dist/styles.css @@ -733,6 +733,10 @@ video { margin-right: 0.25rem; } +.mt-10 { + margin-top: 2.5rem; +} + .block { display: block; } @@ -825,6 +829,10 @@ video { max-width: none; } +.max-w-3xl { + max-width: 48rem; +} + .flex-grow { flex-grow: 1; } @@ -1335,6 +1343,16 @@ video { color: rgb(22 101 52 / var(--tw-text-opacity)); } +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} + +.text-green-500 { + --tw-text-opacity: 1; + color: rgb(34 197 94 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } diff --git a/url_manager/urls.py b/url_manager/urls.py index 117abea..8705d68 100644 --- a/url_manager/urls.py +++ b/url_manager/urls.py @@ -3,10 +3,14 @@ from django.urls import path, include from django.conf.urls.i18n import i18n_patterns from django.conf import settings from django.conf.urls.static import static +from links.views import LinkDetailView, LinkUpdateView, CustomLinkView urlpatterns = [ path('i18n/', include('django.conf.urls.i18n')), path('search/', include('links.search_urls')), + path('link//', LinkDetailView.as_view(), name='link_detail'), + path('link//edit/', LinkUpdateView.as_view(), name='link_update'), + path('custom//', CustomLinkView.as_view(), name='custom_link'), ] urlpatterns += i18n_patterns(