Makanyane: Created page with "Puts the resources/download entries [https://www.twcenter.net/resources/ here] into a responsive grid pattern instead of a list. Also applies to the ones seen in users profiles e.g. [https://www.twcenter.net/members/makanyane.9390/#resources here]

  // ***** START - SHOW RESOURCES AS A GRID ***** @resource-grid-gap: 10px; @resource-grid-width: 330px; @resource-grid-thumb: 108px;  @media (min-width: @xf-responsiveMedium){     @supports(display: grid){          .blo..."

2025-06-16T09:20:42Z

Created page with "Puts the resources/download entries [https://www.twcenter.net/resources/ here] into a responsive grid pattern instead of a list. Also applies to the ones seen in users profiles e.g. [https://www.twcenter.net/members/makanyane.9390/#resources here] <pre> // ***** START - SHOW RESOURCES AS A GRID ***** @resource-grid-gap: 10px; @resource-grid-width: 330px; @resource-grid-thumb: 108px; @media (min-width: @xf-responsiveMedium){ @supports(display: grid){ .blo..."

New page

Puts the resources/download entries [https://www.twcenter.net/resources/ here] into a responsive grid pattern instead of a list.

Also applies to the ones seen in users profiles e.g. [https://www.twcenter.net/members/makanyane.9390/#resources here]

<pre>

// ***** START - SHOW RESOURCES AS A GRID *****
@resource-grid-gap: 10px;
@resource-grid-width: 330px;
@resource-grid-thumb: 108px;

@media (min-width: @xf-responsiveMedium){
@supports(display: grid){

.block[data-type="resource"] .structItemContainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(@resource-grid-width, 1fr));
grid-gap: @resource-grid-gap;
padding: @resource-grid-gap;
background-color: @xf-contentAltBg;
}
.js-memberTabPanes, .block[data-type="resource"] .structItemContainer {
.structItem--resource {
background-color: @xf-contentBg;
border-radius: 3px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-width: 0px;
display: grid;
grid-template-columns: @resource-grid-thumb 1fr;
grid-template-areas: 'icon text' 'stats stats';

.structItem-cell--icon.structItem-cell--iconExpanded{
width: auto;
grid-area: icon;
}

.structItem-cell--main {
grid-area: text;
}

.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: 100%;
height: auto;
font-size: 56px;
}

.structItem-secondaryIcon {
display: none;
}

.structItem-metaItem--rating{
flex: 1 0 100%;
}

.structItem-metaItem--downloads,
.structItem-metaItem--lastUpdate{
flex: 0 1 auto;
}

.ratingStarsRow--justified {
border-bottom: 1px solid @xf-borderColorFaint;
margin-bottom: 4px;
padding-bottom: 4px;
}
}
}
}
}
// ***** END - SHOW RESOURCES AS A GRID *****
</pre>

[[Category:TWC XenForo extra less chunks]]

SHOW RESOURCES AS A GRID - Revision history