Ресурсы в 2 столбика

hacker · 9 Июль 2022

Имеются две модификации шаблона extra.less
1. Оптимизирована под ПК
2. Оптимизирована под Девайсы.

Короче, голова кругом.

Дефолтный стиль

Темный модернизированный

Less:

.structItem--resource {
    background-color: Transparent !important;
    border-collapse: collapse;
    padding: 0px;
    width: 100%;
    min-height: 138px;
    height: 138px;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    max-height: 162px;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.structItem-cell--iconExpanded .structItem-iconContainer .avatar {
    width: 96px;
    height: 96px;
    font-size: 57.6px;
    margin-left: 3px;
    border-radius: 0px;
}
.structItem--resource .structItem-cell--main {
    width: 100%;
    height: 112px;
}
.structItem--resource .structItem-cell--resourceMeta {
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
}
span.avatar.avatar--s.avatar--separated.structItem-secondaryIcon {
    display: none;
}
.structItem--resource .ratingStarsRow--justified {
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 2px;
    padding-bottom: 2px;
}
.pairs.pairs--justified>dd {
    float: left;
    text-align: right;
    max-width: 100%;
}
.structItem--resource .structItem-metaItem--lastUpdate {
    float: right;
}
.structItem--resource .structItem-metaItem--downloads {
    float: left;
}
.structItem-cell.structItem-cell--icon.structItem-cell--iconExpanded {
    width: 120px;
}

@media (max-width: 1125px) {
  .structItem--resource {
    max-width: calc(95%) !important;
    }
}
@media (max-width: 650px) {
  .structItem--resource {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;
    }
}

.structItem-metaItem--lastUpdate dt,.structItem-metaItem--downloads dt{
  font-size:0px;
}
.structItem-metaItem--downloads dd{
  margin-left:18px;
}
.structItem-metaItem--downloads dt:before ,.structItem-metaItem--lastUpdate dt:before {
    font-family: FontAwesome;
    font-size: 14px;
    position: absolute;
}
.structItem-metaItem--downloads dt:before {
    margin-left: 0px;
  content: '\f019';
}
.structItem-metaItem--lastUpdate dt:before {
  content: '\f017';
  margin-left: -15px;
}

Less:

@media (min-width: 650px) {
  @supports (display: grid) {
    .block[data-type="resource"] .structItemContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      grid-gap: 10px;
      padding: 10px;
      background-color: Transparent !important;
    }
    .structItem--resource {
      background-color: Transparent !important;
      border-radius: 3px;
      box-shadow: 0 1px 4px rgba(29, 60, 80, 10);
      border-width: 0px;
      display: grid;
      grid-template-columns: 108px 1fr;
      grid-template-areas: "icon text" "stats stats";
    }
    .structItem--resource .structItem-cell--icon.structItem-cell--iconExpanded {
      width: auto;
      grid-area: icon;
    }
    .structItem--resource .structItem-cell--main {
      grid-area: text;
    }
    .structItem--resource .structItem-cell--resourceMeta {
      grid-area: stats;
      width: auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
    }
    .structItem-cell--iconExpanded .structItem-iconContainer .avatar {
        width: 96px;
        height: 96px;
        font-size: 57.6px;
        margin-left: 3px;
        border-radius: 0px;
    }
    .structItem--resource .structItem-secondaryIcon {
      display: none;
    }
    .structItem--resource .structItem-metaItem--rating {
      flex: 1 0 100%;
    }
    .structItem--resource .structItem-metaItem--downloads,
    .structItem--resource .structItem-metaItem--lastUpdate {
      flex: 0 1 auto;
    }
      
    .structItem--resource .ratingStarsRow--justified {
      border-bottom: 3px solid #0998b8;
      margin-bottom: 4px;
      padding-bottom: 4px;
    }
  }
}

baltun · 11 Июль 2022

Вот тут сделай так будет 2 блока:

CSS:

@media (min-width: 650px) {
  @supports (display: grid) {
    .block[data-type="resource"] .structItemContainer {
      /*display: grid;*/
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      grid-gap: 10px;
      padding: 10px;
      background-color: Transparent !important;
    }

hacker · 11 Июль 2022

@baltun, Упростил для себя. Поставил вместо значения 500 = 480. Так как установлен плагин [DCom] Sidebar Menu
Еще и такой код:

Less:

/************************************************* Расширить навигацию категорий ресурсов (боковая панель) */
@media (min-width: 900px) {
    .p-body-main--withSideNav .p-body-content {
        width: 75%;
    }
}
/***********************************************************************************************************/

Самый оптимальный, но не самый корректный код:

Less:

.structItem--resource {
    background-color: Transparent !important;
    border-collapse: collapse;
    padding: 0px;
    width: 100%;
    min-height: 138px;
    height: 138px;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    max-height: 162px;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.structItem-cell--iconExpanded .structItem-iconContainer .avatar {
    width: 96px;
    height: 96px;
    font-size: 57.6px;
    margin-left: 3px;
}
.structItem--resource .structItem-cell--main {
    width: 100%;
    height: 112px;
}
.structItem--resource .structItem-cell--resourceMeta {
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
}
span.avatar.avatar--s.avatar--separated.structItem-secondaryIcon {
    display: none;
}
.structItem--resource .ratingStarsRow--justified {
    border-bottom: 1px solid #dfdfdf;
    margin-bottom: 2px;
    padding-bottom: 2px;
}
.pairs.pairs--justified>dd {
    float: left;
    text-align: right;
    max-width: 100%;
}
.structItem--resource .structItem-metaItem--lastUpdate {
    float: right;
}
.structItem--resource .structItem-metaItem--downloads {
    float: left;
}
.structItem-cell.structItem-cell--icon.structItem-cell--iconExpanded {
    width: 120px;
}

@media (max-width: 1125px) {
  .structItem--resource {
    max-width: calc(95%) !important;
    }
}
@media (max-width: 650px) {
  .structItem--resource {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;
    }
}

Выводит похожие ресурсы и при создании ресурса в два столбика.

Ресурсы в 2 столбика

hacker

baltun

Вложения

hacker