مرحبًا،
لقد قمت ببعض التعديلات على CSS لـ إضافة ردود Discourse. لذا أصبحت تشبه أزرار ردود فيسبوك.
هذه لستة أزرار ردود بما في ذلك الافتراضي وهو الموجود على موقعي: 
.
عامة / SCSS
ضع هذا الكود في قسم CSS العام.
ملاحظة هامة: يمكنك تعديل الرموز التعبيرية فوق التسمية عن طريق تعديل الأسطر التي تحتوي على content: 'Love it!'، content: 'Beautiful'، إلخ…: بالطبع يمكنك استخدام أي ردود تريد. إنها مجرد تسمية فوق الردود.
.discourse-reactions-picker {
.discourse-reactions-picker-container {
width: 330px;
height: 50px;
max-width: calc(100vw - 2em);
border: 1px solid var(--primary-low) !important;
border-radius: 50px;
.pickable-reaction {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.pickable-reaction {
background: transparent !important;
.emoji {
height: 40px;
width: 40px;
padding: 0 !important;
transform: scale(0.9);
}
&.is-used {
transform: scale(1.3);
transform-origin: bottom;
border: none !important;
}
&:hover {
transform-origin: bottom;
}
&:hover:after {
position: absolute;
font-size: 10px;
top: -15px;
background: var(--secondary-low);
color: var(--secondary);
padding: 2px 5px;
border-radius: 20px;
}
&:first-child {
&:hover:after {
content: 'Love it!';
}
}
&:nth-child(2) {
&:hover:after {
content: 'Beautiful';
}
}
&:nth-child(3) {
&:hover:after {
content: 'Hug';
}
}
&:nth-child(4) {
&:hover:after {
content: 'Congrats!!';
}
}
&:nth-child(5) {
&:hover:after {
content: 'Hmm...';
}
}
&:nth-child(6) {
&:hover:after {
content: 'Wooow!';
}
}
}
}
الجوال
على الجوال، قمت بضبط موضع منتقي الردود ليكون ثابتًا (position: fixed).
هذه خيار ممكن لمنع هذا السلوك الغريب. 
تبدو هكذا
نفس الشيء يحدث مع لوحة الحالة على الجوال التي كانت موجودة في منتقي الردود، لذا استخدم أيضًا position: fixed.
الجوال / SCSS
.discourse-reactions-picker {
position: fixed;
.pickable-reaction {
&:hover:after {
font-size: 12px;
top: -8px;
}
&.is-used {
&:hover:after {
transform: scale(0.8);
top: -15px;
}
}
}
}
.discourse-reactions-state-panel {
position: fixed;
}
إخفاء قسم من أعجبهم الافتراضي
عامة / CSS
لقد أخفيت قسم “من أعجبهم” الافتراضي لأن لوحة حالة الردود تعرض أيضًا هذه المعلومات.
.who-liked {
display: none;
}
…
