تقويم وفعاليات Discourse

لا تظهر أي أخطاء في وحدة التحكم. لكنني سجّلت فيديوً للرجوع إليه.
يحدث هذا في كروم وفايرفوكس وسفاري. أما في سفاري على الجوال فلا يحدث.

إعجاب واحد (1)

رابط الفيديو الخاص بك معطل!

عذراً، لم أفهم جيداً في الواقع، أنت محق فعلاً: عند النقر على تاريخ في التقويم، يُفتح نافذة إنشاء حدث، ولكن مع زر «هل تريد التخلي؟». نعم، في الواقع هناك خطأ صغير :sweat_smile:

إعجابَين (2)

للمعلومة، من جانبي، أضفت زرًا بعلامة «+» للمعلومات لمستخدمي الذين لا يفكرون في النقر على العنوان للوصول إلى الموضوع. استلهمت الفكرة من @nathank بشأن زر «إضافة إلى التقويم» الخاص به.

ضع السكربت في مكون السمة في القسم العام /head

<script>
(() => {
    const eventInfoSelector = ".event-header .event-info";
    const eventCardSelector = ".fc-popover, .event-preview, .discourse-post-event";
    // CSS محقون نظيف ومناسب لمواضيع Discourse (فاتح/داكن)
    const style = document.createElement("style");
    style.innerHTML = `
    .custom-topic-info-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40%; /* يأخذ العرض الكامل لمظهر نظيف تحت العنوان */
        box-sizing: border-box;
        margin: 12px 0 6px 0;
        padding: 10px 16px;
        
        /* استخدام متغيرات Discourse الأصلية */
        background-color: var(--tertiary) !important; /* لون مميز (مثل الأزرق) */
        color: var(--secondary) !important;          /* لون نص متباين */
        
        border-radius: 8px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s ease, transform 0.1s ease;
    }
    /* تأثير عند التمرير */
    .custom-topic-info-btn:hover {
        background-color: var(--tertiary-hover) !important;
        color: var(--secondary) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    /* تأثير عند النقر */
    .custom-topic-info-btn:active {
        transform: translateY(0);
    }
    /* تنسيق أيقونة SVG */
    .custom-topic-info-btn .btn-icon-svg {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    `;
    document.head.appendChild(style);
    const findTopicLink = (container) => {
        if (!container) return null;
        const links = [...container.querySelectorAll('a[href*="/t/"]')];
        if (links.length) return links[0].href;
        return null;
    };
    const createTopicInfoButton = () => {
        const eventInfo = document.querySelector(eventInfoSelector);
        if (!eventInfo || eventInfo.querySelector(".custom-topic-info-btn")) return;
        const card = eventInfo.closest(eventCardSelector) || document;
        const topicUrl = findTopicLink(card);
        if (!topicUrl) return;
        const button = document.createElement("a");
        button.className = "btn custom-topic-info-btn";
        button.title = "عرض الموضوع الكامل";
        button.href = topicUrl;
        
        // إضافة أيقونة معلومات SVG متناسقة
        button.innerHTML = `
            <svg class="btn-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V240h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h40c13.3 0 24 10.7 24 24v120h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/>
            </svg>
            <span class="d-button-label">مزيد من المعلومات</span>
        `;
        if (eventInfo.firstElementChild) {
            eventInfo.insertBefore(button, eventInfo.firstElementChild.nextSibling);
        } else {
            eventInfo.appendChild(button);
        }
    };
    const observer = new MutationObserver(() => createTopicInfoButton());
    observer.observe(document.body, { childList: true, subtree: true });
    createTopicInfoButton();
})();
</script>

إليك المعاينة

أو بدلاً من ذلك

هذا الكود

<script>
(() => {
    const eventCardSelector = ".fc-popover, .event-preview, .discourse-post-event";

    // CSS محقون لمظهر نظيف وعصري
    const style = document.createElement("style");
    style.innerHTML = `
    .custom-topic-info-wrapper {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--primary-low); /* خط فاصل خفيف */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .custom-topic-info-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 16px;
        
        /* نمط Outline أنيق */
        background-color: transparent !important;
        color: var(--tertiary) !important;
        border: 1px solid var(--tertiary) !important;
        
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none !important;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    /* تأثير التمرير: يمتلئ الزر */
    .custom-topic-info-btn:hover {
        background-color: var(--tertiary) !important;
        color: var(--secondary) !important;
        border-color: var(--tertiary) !important;
    }

    /* محاذاة شعار المعلومات */
    .custom-topic-info-btn .btn-icon-svg {
        margin-right: 8px;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    `;
    document.head.appendChild(style);

    const findTopicLink = (container) => {
        if (!container) return null;
        const links = [...container.querySelectorAll('a[href*="/t/"]')];
        if (links.length) return links[0].href;
        return null;
    };

    const createTopicInfoButton = () => {
        const cards = document.querySelectorAll(eventCardSelector);
        
        cards.forEach(card => {
            if (card.querySelector(".custom-topic-info-btn")) return;

            const topicUrl = findTopicLink(card);
            if (!topicUrl) return;

            const wrapper = document.createElement("div");
            wrapper.className = "custom-topic-info-wrapper";

            const button = document.createElement("a");
            button.className = "btn custom-topic-info-btn";
            button.title = "مراجعة الموضوع الكامل";
            button.href = topicUrl;
            
            // أيقونة "i" معلومات + نص جديد قابل للتنفيذ
            button.innerHTML = `
                <svg class="btn-icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V240h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h40c13.3 0 24 10.7 24 24v120h24c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-144a32 32 0 1 1 0-64 32 32 0 1 1 0 64z"/>
                </svg>
                <span class="d-button-label">مراجعة الموضوع</span>
            `;

            wrapper.appendChild(button);

            // التموضع فوق خيارات الرد (سأشارك، إلخ)
            const actionsContainer = card.querySelector(".status-and-options, .event-actions");
            const infoContainer = card.querySelector(".event-info");
            
            if (actionsContainer && actionsContainer.parentNode) {
                actionsContainer.parentNode.insertBefore(wrapper, actionsContainer);
            } else if (infoContainer) {
                infoContainer.appendChild(wrapper);
            } else {
                card.appendChild(wrapper);
            }
        });
    };

    const observer = new MutationObserver(() => createTopicInfoButton());
    observer.observe(document.body, { childList: true, subtree: true });

    createTopicInfoButton();
})();
</script>

معاينة النتيجة

لديك الخيار :rofl:

3 إعجابات

لقد حسّنتَ حقًا سهولة إنشاء حدث منذ آخر التحديثات :+1:

لكن، أودّ أن أعرف ما إذا كان هناك إعداد يمنع إنشاء حدث عند النقر على التقويم. ففي بعض الأحيان، بدلًا من النقر على الحدث نفسه، ينقر المستخدم بجانبه، مما يفتح نافذة منبثقة لإنشاء حدث :sweat_smile:

شكرًا لك

إعجابَين (2)

أعلم أنني مزعج، لكن لدي سؤال آخر أو اقتراح لتحسين الأحداث المنتهية. يمكن حذفها تلقائيًا لأنها لم تعد ذات فائدة، ويبدو أن إضافة «إيفنتس» كانت تفعل ذلك تلقائيًا.

حاليًا، أقوم بذلك يدويًا، لذا إذا كان هناك طريقة لتوفير الوقت :sweat_smile:

شكرًا للفريق

إعجاب واحد (1)

هل توجد أي طريقة لجعل الموقع في الحدث يقوم ببحث مشابه لما يُجرى في تقويم جوجل أو أحداث فيسبوك، وذلك: أ) لمساعدة المستخدم في اختيار الموقع، و ب) لجعل الموقع قابلاً للنقر لفتح تطبيق الخرائط؟

(لم أتمكن من العثور على أي حل عبر البحث، ولكن ربما لم تكن عبارات البحث التي استخدمتها جيدة)

إعجاب واحد (1)

يحتوي الرابط Locations Plugin 🌍 على هذا النوع من الوظائف، لكنه يتكامل فقط مع البديل Events Plugin 📅.

قد يكون المطور (@merefield) منفتحًا لدمجه مع الإضافة الرسمية، لكنني أتخيل أن ذلك سيتطلب جهدًا كبيرًا للإعداد والصيانة — لذا ستحتاج بالتأكيد إلى رعاية العمل لكي يحدث ذلك.

إعجاب واحد (1)

لقد حاولت البحث في إضافة الأحداث، لكنني تعثرت عند

لأن الموقع متوقف منذ أشهر.

قد يكون من الجدير تقديم طلب ميزة رسمي في قناة Contribute > Feature (الموسومة بـ calendar-and-events) للنظر فيه. أتخيل أن الأمر ممكن التحقيق - كما أنه يحمل إمكانات عالية القيمة للكثيرين.


لاحقًا…
قام @lou بذلك بالفعل هنا:

إعجاب واحد (1)

تم دمج منشور في موضوع موجود: دعم خريطة موقع الحدث