exostring/new_vk_parser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: editor ui tweaks (resize textarea, gallery, filters)

Browse Source
This commit is contained in:
Your Name
2026-07-19 00:33:41 +05:00
parent 2d58dc9057
commit a2dcdf4aea
2 changed files with 65 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vk_parser_app/templates/editor_content.html
+2 -7
View File
@@ -2,12 +2,7 @@
<!-- Sidebar Filters -->
<aside class="w-full xl:w-72 flex-shrink-0">
<div class="card p-4 sticky top-6">
<form id="filter-form" hx-get="/editor" hx-target="#content-area" hx-push-url="true" hx-trigger="submit, change delay:300ms">
{% for item in preserved_query %}
{% if item.key != "per_page" and item.key != "sort" and item.key != "editorial_status" %}
<input type="hidden" name="{{ item.key }}" value="{{ item.value }}">
{% endif %}
{% endfor %}
<form id="filter-form" hx-get="/editor" hx-target="#content-area" hx-push-url="true" hx-trigger="submit">
<input type="hidden" name="editorial_status" value="{{ status_filter }}">
<div class="flex justify-between items-center mb-6">
@@ -53,7 +48,7 @@
<div class="bg-app-bg border border-app-border rounded-lg p-2 max-h-48 overflow-y-auto space-y-1">
{% for item in facets.sources %}
<label class="flex items-center gap-2 px-2 py-1 hover:bg-app-surfaceHover rounded cursor-pointer transition-colors group">
<input type="checkbox" name="source_id" value="{{ item.id }}" class="checkbox" {% if item.id|string in source_ids %}checked{% endif %} />
<input type="checkbox" name="source_id" value="{{ item.id }}" class="checkbox" {% if item.id in source_ids %}checked{% endif %} />
<span class="text-sm text-app-textMain flex-1 truncate group-hover:text-white" title="{{ item.name }}">{{ item.name }}</span>
<span class="badge badge-neutral bg-transparent border-none">{{ item.count }}</span>
</label>
src/vk_parser_app/templates/editor_post.html
+63 -19
View File
@@ -65,9 +65,69 @@
<!-- Right: Edit Area & Spoilers -->
<div class="flex-1 flex flex-col min-w-0 p-5">
<!-- Edit Area -->
<!-- Photos (Moved above text, larger preview, alpine modal gallery) -->
{% if p.media_items %}
{% set photo_urls = [] %}
{% for m in p.media_items %}
{% if m.type == 'photo' and m.url %}
{% set _ = photo_urls.append(m.url) %}
{% endif %}
{% endfor %}
<div class="mb-4" x-data="{ galleryOpen: false, activeIdx: 0, images: {{ photo_urls | tojson | forceescape }} }" @keydown.escape.window="galleryOpen = false">
<div class="flex flex-wrap gap-2">
{% for m in p.media_items %}
{% if m.type == "photo" and m.url %}
{% set photo_idx = photo_urls.index(m.url) %}
<div @click="activeIdx = {{ photo_idx }}; galleryOpen = true" class="block w-32 h-32 rounded-lg overflow-hidden border border-app-border hover:border-app-primary transition-colors cursor-pointer">
<img src="{{ m.url }}" class="w-full h-full object-cover" loading="lazy">
</div>
{% elif m.url %}
<a href="{{ m.url }}" target="_blank" class="w-32 h-32 rounded-lg bg-app-bg border border-app-border flex items-center justify-center hover:text-app-primary transition-colors text-app-textMuted">
<i data-lucide="play-circle" class="w-10 h-10"></i>
</a>
{% endif %}
{% endfor %}
</div>
<!-- Alpine Modal Gallery -->
<template x-if="galleryOpen">
<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm p-4">
<!-- Close button -->
<button @click.prevent="galleryOpen = false" type="button" class="absolute top-4 right-4 text-white hover:text-app-primary transition-colors p-2">
<i data-lucide="x" class="w-8 h-8"></i>
</button>
<!-- Previous -->
<button x-show="images.length > 1" @click.prevent="activeIdx = (activeIdx === 0) ? images.length - 1 : activeIdx - 1" type="button" class="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-app-primary p-2">
<i data-lucide="chevron-left" class="w-10 h-10"></i>
</button>
<!-- Image -->
<img :src="images[activeIdx]" class="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl">
<!-- Next -->
<button x-show="images.length > 1" @click.prevent="activeIdx = (activeIdx === images.length - 1) ? 0 : activeIdx + 1" type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-app-primary p-2">
<i data-lucide="chevron-right" class="w-10 h-10"></i>
</button>
<!-- Counter -->
<div x-show="images.length > 1" class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white font-mono text-sm bg-black/50 px-3 py-1 rounded-full">
<span x-text="activeIdx + 1"></span> / <span x-text="images.length"></span>
</div>
</div>
</template>
</div>
{% endif %}
<!-- Edit Area (Auto resize textarea) -->
<label class="block text-xs font-bold text-app-textMuted mb-2 uppercase tracking-wider">Финальный текст</label>
<textarea name="final_text" class="textarea w-full font-sans text-sm leading-relaxed resize-y p-3 bg-app-bg border border-app-border min-h-[150px]" placeholder="Напишите идеальный пост здесь...">{{ p.review_text }}</textarea>
<textarea name="final_text"
x-data="{ resize() { $el.style.height = 'auto'; $el.style.height = $el.scrollHeight + 'px' } }"
x-init="resize()"
@input="resize()"
class="textarea w-full font-sans text-sm leading-relaxed resize-none overflow-hidden p-3 bg-app-bg border border-app-border min-h-[150px]"
placeholder="Напишите идеальный пост здесь...">{{ p.review_text }}</textarea>
<!-- Meta Inputs row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
@@ -93,22 +153,6 @@
</div>
</div>
{% if p.media_items %}
<div class="mt-4 flex flex-wrap gap-2">
{% for m in p.media_items %}
{% if m.type == "photo" and m.url %}
<a href="{{ m.url }}" target="_blank" class="block w-16 h-16 rounded-lg overflow-hidden border border-app-border hover:border-app-primary transition-colors">
<img src="{{ m.url }}" class="w-full h-full object-cover" loading="lazy">
</a>
{% elif m.url %}
<a href="{{ m.url }}" target="_blank" class="w-16 h-16 rounded-lg bg-app-bg border border-app-border flex items-center justify-center hover:text-app-primary transition-colors text-app-textMuted">
<i data-lucide="play-circle" class="w-6 h-6"></i>
</a>
{% endif %}
{% endfor %}
</div>
{% endif %}
<!-- Original / AI Spoiler -->
<div class="mt-4">
<details class="group/details">
@@ -141,7 +185,7 @@
<div class="mt-5 pt-4 border-t border-app-border flex flex-wrap items-center justify-between gap-3">
<!-- Delete Button -->
<div>
{% if p.editorial_status in ['pending', 'ai_review', 'reviewing'] %}
{% if p.editorial_status != 'rejected' %}
<button class="btn btn-ghost btn-sm text-app-error hover:bg-app-errorBg hover:text-app-error" type="button"
hx-post="/editor/{{ p.id }}/reject" hx-target="#post-container-{{ p.id }}" hx-swap="outerHTML"
hx-vals='{"csrf_token": "{{ user.csrf_token }}"}'