Grid layout for XFRM without Addon

xF2 Template Modification Grid layout for XFRM without Addon

GrimHackers

GrimHackers.ME
Collaborate
Registered
Joined
Mar 26, 2019
Messages
138
Points
73

Reputation:

GrimHackers submitted a new resource:

Grid layout for XFRM without Addon - Grid layout for resource manager

hey, everyone Hemant here. one of my client want to achieve grid view in resource layout like we have grid layout with [TH] NODE with 2 column.
So here a simple CSS that you need to place it in Extra.less that will give it what you looking for.
IF YOU LIKE IT PLEASE REVIEW IT

Code:
.structItem--resource {
   background-color: white !important;
   border-collapse: collapse;
   padding: 0px;
   width: 100%;
   min-height: 138px;
   height: 138px;
   height: auto;
   display: inline-block...

Read more about this resource...
 

Pr0fesseur

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
361
Points
103

Reputation:

I think it would be helpful to see what it looks like without having to install it :)
Can you post a screenshot plz?
 

ENXF NET

Administrator
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P.S Member
S.V.I.P Member
V.I.P Member
Collaborate
Registered
Joined
Nov 13, 2018
Messages
19,121
Points
823

Reputation:

Update!
 

MrIan

Member
Registered
Joined
Mar 29, 2022
Messages
20
Points
3

Reputation:

This didnt work well for my site but I managed to pull this from a site which has it working and it works well again.

Code:
@media (min-width: 650px) {
  @supports (display: grid) {
    .block[data-type="resource"] .structItemContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      grid-gap: 10px;
      padding: 10px;
      background-color: #353941;
    }
    .structItem--resource {
      background-color: #2d3037;
      border-radius: 3px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      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--resource
      .structItem-cell--iconExpanded
      .structItem-iconContainer
      .avatar {
      width: 100%;
      height: auto;
      font-size: 56px;
    }
    .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: 1px solid #424650;
      margin-bottom: 4px;
      padding-bottom: 4px;
    }
  }
}
 

ForumFlake

Well-known member
Registered
Joined
Feb 8, 2023
Messages
79
Points
8

Reputation:

This didnt work well for my site but I managed to pull this from a site which has it working and it works well again.

Code:
@media (min-width: 650px) {
  @supports (display: grid) {
    .block[data-type="resource"] .structItemContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
      grid-gap: 10px;
      padding: 10px;
      background-color: #353941;
    }
    .structItem--resource {
      background-color: #2d3037;
      border-radius: 3px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      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--resource
      .structItem-cell--iconExpanded
      .structItem-iconContainer
      .avatar {
      width: 100%;
      height: auto;
      font-size: 56px;
    }
    .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: 1px solid #424650;
      margin-bottom: 4px;
      padding-bottom: 4px;
    }
  }
}
MrIanThis worked well, But the avatar part is huge or the image part is huge. would love to have it changed.
 
  • Like
Reactions: emz
Top