اقتراحي لزر التيمات/المكونات (CSS داخلية)

تجربة المستخدم
1

لم أكن من أشد المعجبين بلوحة السمات/المكونات القديمة (https://forum.alltiago.com/admin/customize/components)، لكنها كانت جيدة بما يكفي من حيث المساحة وكيف تم تنظيمها (نوعًا ما). لكن الجديدة هي فوضى حقيقية، في رأيي.

إليك البديل الخاص بي للانتقال من هذا:

SCR-20250324-ihkz
SCR-20250324-ihkz979×712 60.5 KB

… لست من محبي الصندوق الصغير والضيق على اليسار، وإخفاء كلمة المكونات (ربما هذه مجرد مشكلة في شاشتي مقاس 13 بوصة، ولكن ربما يواجه آخرون نفس المشكلة؟)، وسلوك التمرير…

… إلى هذا:

SCR-20250324-igwu
SCR-20250324-igwu969×1427 72.6 KB

image
image977×513 29.7 KB

مساحة أكبر، لا توجد أشرطة تمرير، المكونات المعطلة أسهل في الرؤية مع الخلفية الحمراء. عندما تمر فوقها، تصبح أفتح قليلاً:

SCR-20250324-ihsg
SCR-20250324-ihsg965×150 6.92 KB

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

image
image558×211 11.8 KB

إليك CSS:

/* Admin - wider theme/component panel */
.desktop-view .admin-customize .themes-list,
.desktop-view .admin-customize .show-current-style{
    width: 98%;
}

/* Admin - margin top component's content */
.desktop-view .admin-customize .show-current-style {
    margin-top: 3rem;
}

/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

/* Admin - hide H1, Install button, image */
.admin-contents.admin-customize.admin-customize-themes .content-wrapper h1,
.admin-contents.admin-customize.admin-customize-themes .content-wrapper div.create-actions,
.admin-contents.admin-customize.admin-customize-themes img {
    display: none;
}

/* Admin - adjust bottom links */
.admin-contents.admin-customize.admin-customize-themes .admin-intro {
    margin: 2rem 0 0;
}

.admin-contents.admin-customize.admin-customize-themes .admin-intro .content-wrapper {
    width: 100%;
}

/* Admin - unused components' background (red) */
.admin-customize .themes-list-container__item.inactive-theme {
    background-color: #3f2525;
}

.admin-customize .themes-list-container__item.inactive-theme:hover {
    background-color: #573535;
}

أنا لست مهتمًا جدًا بـ CSS، لذلك لا أعرف ما إذا كان هذا جيدًا أم لا، لكنه يعمل. طلبت من ChatGPT هذا الجزء:

/*Admin - remove scroll on components' container */
.admin-customize .themes-list-container {
    overflow-y: visible;
    max-height: none;
    height: auto;
}

إذا كان هناك أي شيء مكرر أو ما شابه ذلك، فلا تتردد في مشاركته حتى أتمكن من تحديث الكود.

إعجابَين (2)
2

هذا في الواقع عكس ذلك،

التخطيط القديم (شبكة المستطيلات) الذي تشير إليه هو في الواقع ما سيكون الجديد، ولكن كانت هناك ملاحظات تفيد بأنه لم يكن جاهزًا تمامًا بعد - لذلك عدنا إلى القديم. سيتم استبدال الإصدار الذي تراه حاليًا بمجرد إضافة بعض الميزات المفقودة إلى الإصدار الجديد. من المفهوم أن يكون الأمر مربكًا بعض الشيء.

إعجابَين (2)
3

كانت تعريفاتي “القديمة” و “الجديدة” مرتبطة بشكل أكبر بالجدول الزمني. “جديد” بمعنى “ما هو مرئي الآن”، على الرغم من أنني كنت على علم بأنها النسخة القديمة. لم أكن أرغب في جعل الأمر أكثر إرباكًا لشخص لم يكن على علم بذلك.

إعجابَين (2)