Grid layout for XFRM without Addon

xF2 Template Modification Grid layout for XFRM without Addon

Overview Reviews (2) Discussion (8)
GrimHackers

GrimHackers

GrimHackers.ME
Collaborate
Registered
Joined
Mar 26, 2019
Messages
137
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...
Click to expand...

Read more about this resource...
 
Pr0fesseur

Pr0fesseur

Moderator
Staff member
Moderator
+Lifetime VIP+
V.I.P Member
Collaborate
Registered
Joined
Nov 20, 2019
Messages
369
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

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
29,577
Points
823

Reputation:

Update!
 
MrIan

MrIan

Member
Registered
Joined
Mar 29, 2022
Messages
20
Points
13

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;
    }
  }
}
 
F

ForumFlake

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

Reputation:

MrIan said:
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;
    }
  }
}
Click to expand...
MrIanThis worked well, But the avatar part is huge or the image part is huge. would love to have it changed.
 
  • Like
Reactions: emz
You must log in or register to reply here.
Top