هل يمكن القيام بذلك باستخدام CSS؟ تجميع الفئات في صفحة الفئات

[cosdesign (Cos)]

في وقت متأخر قليلاً ولكن ربما يحتاج شخص آخر إليها. يجب أن أذكر أن:

• ليس كل كود CSS مطلوبًا، خاصة الحدود وألوان الخلفية لصفوف الجدول، لذا لا تتردد في تعديلها كما تحب.
• كان عليّ تغيير التخطيط من الجدول العادي إلى flex لأنه لا يمكن استخدام الهوامش السالبة على صفوف الجدول ومشاكل تخطيط أخرى، وبشكل عام… هو أكثر مرونة
• استبدل Category Group 1 و Category Group 2 بأسماء مجموعات الفئات المطلوبة.
• في مثالتي استخدمت معرفات الفئات 2 و 4، لذا باستخدام أدوات مطوري Chrome لفحص العنصر (انظر الصورة أدناه)، ابحث عن معرف الفئة الصحيح واستبدل [data-category-id="2"] و [data-category-id="4"] في مثالتي بمعرفاتك.

الصق هذا داخل تبويب Common:

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

الصق هذا داخل تبويب Desktop:

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

وهذا داخل تبويب Mobile:

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

وهكذا يبدو الشكل على شاشات سطح المكتب والهاتف المحمول: