عادةً ما تبدو المواضيع بهذا الشكل. ليست كبيرة كما أريد.
لذلك، كتبت هذا الكود لزيادة العرض:
.topic-body {
width: 830px;
}
لتصبح تبدو هكذا:
لكن عندما تكون شاشتي أصغر، تبدو بهذا الشكل:
كيف يمكن تجنب ذلك؟
The position of the timeline is based on the default topic width, so that needs to be moved too… our default CSS is:
.timeline-container {
margin-left: 757px;
@media all and (min-width: 1140px) {
margin-left: 820px;
}
@media all and (min-width: 1250px) {
margin-left: 900px;
}
}
So I think you’d either want to reduce the topic width for smaller screens, or increase the margin-left of the timeline-container a bit.
Another difficulty you might run into is when we switch from the timeline to the progress bar at smaller browser widths… because that switch is determined in JS so it’s more involved than just updating the CSS.
I think eventually we’d want the layout to be more flexible so it would be in the right position automatically if the topic column width is different, but for now it’s a manual adjustment at a few breakpoints.
مرحبًا، صادفت هذا الطلب لأنه كان مطلبًا من مستخدمينا.
ألا يمكن أن نجرب استخدام نفس نوع القواعد على قاعدة topic.body؟
بدلاً من هذا:
.topic-body {
width: 830px;
}
هل يمكن أن يكون الأمر مثل هذا، على سبيل المثال:
.topic-body {
width: 727px;
@media all and (min-width: 1140px) {
width: 790px;
}
@media all and (min-width: 1250px) {
width: 870px;
}
}
بهذه الطريقة، سيتغير عرض الموضوع دائمًا ليتوافق مع عرض الهامش الزمني."}
أستخدم شاشة أوسع في قوالي. إنها ممزوجة مع مجموعة من الأشياء الأخرى، لكنني أعتقد أنني استخرجت كل ما يتعلق بالشاشة العريضة لصفحة منشورات المواضيع فقط إلى هذا المكون، والذي يجب أن يكون من السهل تحريره للحصول على أي عرض أقصى تريده.
إذا كنت تريد أن يبقى عرض الرأس ثابتًا ولا يتسع في صفحة منشورات المواضيع، فاحذف
, .archetype-regular .d-header .wrap من السطر 20
يستخدم صورًا رمزية بحجم 90 بكسل، لذا إذا كنت تريد 45 بكسل، فاحذف ملف head_tag.html وهذه الأسطر في نهاية ملف CSS:
.topic-avatar {
width: 90px;
.avatar {
width: 90px;
height: 90px;
}
}
.embedded-posts .topic-avatar {
width: 45px;
img.avatar {
width: 45px;
height: 45px;
}
}
لقد أنشأت مكونًا بسيطًا جدًا للسمة يوسع الموضوع فقط على سطح المكتب. تم إنشاؤه لموقعي الشخصي في تدوين الملاحظات/المدونة على Discourse في bawmedical.co.uk، وهو ليس متقدمًا جدًا ولا يستخدم استعلامات @media (بعد). لكنه قد يناسب حالات الاستخدام البسيطة. إذا استخدمها أي شخص ولديه ملاحظات، فيمكننا إنشاء موضوع جديد لمناقشته هنا على Meta، أو تقديم مشكلات أو طلبات سحب على GitHub.
(هذا بمثابة تذكير لي بنفسي بقدر ما هو أي شيء آخر، لأنه في $sometimeperiod سأكون قد نسيت كيف فعلت هذا وسأبحث عنه مرة أخرى على Meta!)
رائع، شكرًا لك!
أخبار سارة، هذا هو الحال الآن. في السمة، يمكن زيادة عرض محتوى الموضوع باستخدام بعض CSS:
:root {
--topic-body-width: 1000px;
}
هذا كل شيء! لا يوجد تداخل. لاحظ أن الحد الأقصى للعرض لا يزال مقيدًا بالحد الأقصى العام لـ Discourse، لذلك إذا كنت ترغب في الذهاب إلى أقصى حد والقيام بشيء مثل:
:root {
--topic-body-width: 2000px;
}
ستحتاج أيضًا إلى زيادة --d-max-width، والتي تكون افتراضيًا 1110 بكسل.
:root {
--d-max-width: 3000px;
--topic-body-width: 2000px;
}
شكراً @awesomerobot، سأقوم بتحديث مكون السمة وفقًا لذلك
لقد قمت الآن بتحديث TC وإضافة معلمة للسماح بالتحكم في عرض الموضوع في واجهة المستخدم المخصصة. وهي تعمل حيث يتم تغيير معلمة CSS ويمكنك رؤية ذلك عند فحص مصدر الصفحة. ومع ذلك، لا يبدو أن عرض جسم الموضوع الفعلي يتغير.
أهلاً بك، يسعدني رؤية هذه التطورات الأخيرة للمواضيع الأوسع، سيشكرني مستخدمي وشكراً لكم!
يبدو أن مكون السمة الخاص بـ pacharanero أنظف وأكثر حداثة من إصدار @Alex_P هنا؟ (موضوع مشابه: Increasing post width with CSS?) أنا حقاً أحب خيار @Alex_P لزيادة عرض محرر المشاركات إلى ملء الشاشة.
أود أيضاً جعل قوائم الصفحة الرئيسية الأحدث / الجديد / الفئات أوسع بكثير. للقيام بذلك، يبدو من المنطقي تقليل الهوامش القصوى اليسرى واليمنى، إن أمكن بنفس عرض عرض الموضوع للاتساق.
شكراً @rahim123 ويسعدني جداً العمل مع @Alex_P لجلب نفس الميزات لكليهما، أو إذا أراد أحدهم إعادة هيكلة كلتا حالتي الاستخدام معًا في حالة استخدام موحدة مع إضافة خيار عرض المحرر. أو طلب سحب (PR) على مستودعي. إنه مكون إضافي بسيط جدًا لذا ليس من الصعب فهمه، أنا مشغول جدًا في الوقت الحالي للقيام بذلك على الرغم من أنني قد أحصل على فرصة في الأسابيع القادمة ربما.
جربت هذا، جسم الموضوع أولاً، ثم أضفت --d-max-width، مما أدى إلى إعادة محاذاة الجسم إلى يمين الشاشة - غير متوقع!؟
إذًا حتى لو تم تعيين العرض على 1400 بكسل، فهل تقول إنه بدون --d-max-width المذكور أعلاه، فلن يتجاوز الافتراضي 1110 بكسل - هل هذا صحيح؟
حسناً، لقد قمت بتغييره إلى:
:root {
--topic-body-width: 100w;
--d-max-width:100w;
}
حيث 100w هو عرض النافذة