أنا أحب هذه الفكرة! سأكون سعيدًا جدًا بمراجعة ودمج طلب السحب (PR) الذي يطبق هذه الميزة ![]()
أعجبني هذا الفكرة جدًا
لذا جربتها قليلًا للتو. أعتقد أن هناك طريقة أفضل بكثير لتنفيذها، لكن حاليًا تعمل بشكل جيد جدًا على موقعي. ![]()
أستخدم كود القالب الخاص بمكون الرأس الكبير - الرأس الصغير في قسم </head> لتحقيق ذلك.
لسوء الحظ، توجد قيود على iPhone لأن شريط التنقل السفلي (footer-nav) يحجب شريط علامات التبويب الخاص بـ Discourse تمامًا. لذا قمت بإخفائه.
قمت بتحديث هذا الكود!
الآن سأشارك الكود هنا فقط (غير متأكد مما إذا كان قابلاً للدمج):
ضع هذا في قسم <head> الخاص بالجوال:
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
var lastScrollTop = 0;
var body = $("body");
var scrollMax = 30;
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
body.addClass("tab-bar-hidden");
} else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
body.removeClass("tab-bar-hidden");
}
lastScrollTop = scroll;
});
});
</script>
ضع هذا في قسم CSS الخاص بالجوال:
html:not(.anon) {
#topic-progress-wrapper,
#reply-control.draft {
bottom: 49px;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .1s ease-out;
}
.posts-filtered-notice {
transition: all .1s ease-out;
bottom: 49px;
}
}
body.tab-bar-hidden {
.d-tab-bar {
bottom: -49px;
transition: all .2s ease-in;
}
#topic-progress-wrapper:not(.docked),
#reply-control.draft {
bottom: 0;
transition: all .2s ease-in;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .2s ease-in;
}
.posts-filtered-notice {
transition: all .2s ease-in;
bottom: 0;
}
}
.d-tab-bar {
transition: all .1s ease-out;
}
body:not(.footer-nav-ipad) .footer-nav {
display: none;
}
معاينة
شيء رائع صنعته!
مكوّن صغير ومفيد - شكرًا لك!
هل توجد طريقة للمستخدمين الأفراد لتخصيصه أو إخفاؤه تمامًا؟
هذا رائع يا @Don، شكرًا لك! لقد قمت للتو بدفع الكود الخاص بك (مع تعديلات طفيفة) إلى المكون.
لا توجد خيار مدمج يسمح للمستخدمين الأفراد بتخصيص المكون أو إخفاؤه، ولكن هناك حل بديل في جوهر Discourse يمكنك استخدامه للسماح للمستخدمين الأفراد بإخفاء المكون: يمكنك إنشاء نسخة من نسقك الرئيسي لا تتضمن هذا المكون، ثم جعل هذه النسخة متاحة للمستخدمين للاختيار من خلال التفضيلات → الواجهة.
إليك كيف سيبدو الأمر:
يمكن للمستخدمين الذين لا يرغبون في هذا المكون اختيار Grey Amber (w/o Tab Bar)، وهي مُهيأة تمامًا مثل Grey Amber ولكن لا يتم تضمين مكون شريط التبويب فيها.
فكرة رائعة! شكراً لك!
شكرًا لك يا @Osama، هذا رائع! ![]()
لاحظت مشكلة واحدة في CSS. شريط تبويبات Discourse يمكنه التنشيط ودفع محرر الكتابة للأعلى.
أعتقد أنه يجب أن يتم التنشيط فقط عند #reply-control.draft وليس على #reply-control بالكامل.
حسنًا، يجب أن يكون الأمر مُصلَحًا الآن. شكرًا لك على إخباري! ![]()
فقط أردت أن أقول شكراً جزيلاً لك، إضافة رائعة لأي موقع Discourse. @discoverearth هل تمكنت من جعل هذا يظهر بشكل دائم لجميع المستخدمين؟
أحاول تكوين هذا النظام للنقر على علامات التبويب أثناء تنقل المستخدم في المنصة. في هذه الحالة، أهدف إلى إعداد أزرار تفتح علامات التبويب الخاصة بإضافات Kanban و Calendar و Voting.
Kanban:
إذا كنت داخل فئة أو فئة فرعية وأضفت ‘?board=default’ إلى الرابط، فإن ذلك ينقلك إلى علامة تبويب Kanban (Board)، لذا يبدو الأمر ممكنًا. المشكلة تكمن في أن هذه الإضافة تستخدم المسار النسبي من الجذر، وليس من المسار الذي يتواجد فيه المستخدم حاليًا.
(سأضطر أيضًا إلى إيجاد حل بديل للصفحة الرئيسية، حيث أن منطق الروابط فيها مختلف).
Calendar:
يتطلب تبويب Calendar إضافة ‘/l/calendar’ إلى نهاية الرابط.
يبدو ذلك ممكنًا، لكنه يتطلب أيضًا حذف أي نص في الرابط يقع فوق الفئة أو الفئة الفرعية التي يتواجد فيها المستخدم. على سبيل المثال، إذا تنقل المستخدم إلى ‘latest’ أو ‘kanban’، فيجب إزالة هذا الجزء من الرابط قبل إضافة ‘/l/calendar’ إلى نهايته.
هل لدى أي شخص أفكار حول كيفية تحقيق ذلك؟ سيكون ذلك مذهلاً إذا أمكن استخدام هذا النظام مع هذه الإضافات. فمحدد علامات التبويب مخفي تقريبًا على الأجهزة المحمولة حاليًا، وهو أمر غير جيد للمواقع التي تعتمد بشكل كبير على مكونات مثل Kanban أو Calendar.
هذه إضافة رائعة، لكنها لا يمكن استخدامها مع DiscourseHub (على أي حال مع iPhone) لأنها تخفي شريط التنقل في نفس الموقع. وبالتالي، لا يمكن تغيير المنتدى.
لذلك، تكون هذه الإضافة مفيدة فقط للمنتديات التي لا تسمح بطريقة ما باستخدام DiscourseHub أو التي تعطل تجربة المستخدم بشكل كبير، مما يضطر المستخدم إلى إغلاق التطبيق تمامًا بعد زيارة المنتدى ![]()
بالطبع، يمكن لأي شخص يجيد البرمجة إظهار شريط الأزرار هذا فقط عند استخدام متصفح… لكن تعليم المستخدم واجهة مستخدم مختلفة على نفس الجهاز فكرة سيئة جدًا.
مع هذا المكون:
وعند استخدام DiscourseHub فقط:
هل تعرف أي منتدى هو؟ أنا معجب جداً بواجهة المستخدم! ![]()
أود حقًا أن أتمكن من إضافة مؤشر الإشعارات الحمراء على زر الإشعارات، مثلما يظهر في زر القائمة العلوي في النسخة الافتراضية. هل يمكنك إرشادي إلى كيفية فعل ذلك؟ لستُ ماهرًا في البرمجة.
@nildarar، هل تمكنت من إظهار عدد الإشعارات على الزر؟ شكرًا لك.
مرحبًا! أعجبتني هذه الفكرة. شكرًا لك.
سؤال واحد: أفضّل استخدام إصدار الأيقونات من FontAwesome المخطط بدلاً من الإصدارات الممتلئة، لتكون أكثر اتساقًا مع مناطق أخرى في موقعي الإلكتروني.
هل هناك طريقة لتحديد ذلك؟ عادةً، عند استخدام الاسم الكامل للأيقونة — مثل far fa-star (بدلاً من مجرد star) — يتم التمييز بين النمطين. لكن كلما حاولت إدخال الاسم الكامل للأيقونة بهذه الطريقة، لا يعرض المكون أي شيء مكانها.
هل هناك طريقة لجعل ذلك يحدث؟
يبدو هذا رائعًا حقًا. هل هناك طريقة لإنشاء علامة تبويب لعرض موجز المتابعة؟ بهذه الطريقة يمكن للمستخدم رؤية موجز لجميع الأشخاص الذين يتابعهم بسهولة.
هل من الممكن أيضًا لصفحة معينة
.user-main .about {
margin-bottom: 0;
color: var(--secondary);
display: none;
}
فقط لصفحة الموجز؟
للتأكيد فقط، هل تشير إلى موجز المتابعة الخاص بـ Discourse Follow إذا كان الأمر كذلك، فقم بتعيين feed كمسار (القطعة الثالثة) في إعداد علامة التبويب التي تريد إعادة توجيهها إلى موجز المتابعة.
نعم أنا كذلك. شكراً لك!
أعتقد أنه سيكون من الجيد لو أمكننا إضافة زر “موضوع جديد” في منتصف الشريط مباشرة. ![]()
يُعد Reddit مثالاً رائعًا.
بالتأكيد يمكنك ذلك. جرب ما يلي في الإعداد الثالث أو الرابع لتحقيق التأثير الأوسط.
New, plus, /new-topic




