Grid layout for XFRM without Addon

[hemant_bhardwaj]

hemant_bhardwaj submitted a new resource:

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

hey, everyone. 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.

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

Read more about this resource...

 

[Neutral Singh]

Awesome!

 

[hemant_bhardwaj]

Awesome!

Welcome

 

[hemant_bhardwaj]

hemant_bhardwaj updated Grid layout for XFRM without Addon with a new update entry:

Font awesome Icon for download and update

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

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

Read the rest of this update entry...

 

[Ehren]

I've just recoded this with css grid to make the layout a little more flexible.. It also uses variables for easy configuration and theme settings instead of hard-coded hex colours to ensure the correct colour scheme is used.

Feel free to play around with it and see if it works correctly. It's shown on screens larger than the medium viewport width.

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

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

    }
}

 

[hemant_bhardwaj]

I've just recoded this with css grid to make the layout a little more flexible.. It also uses variables for easy configuration and theme settings instead of hard-coded hex colours to ensure the correct colour scheme is used.

Feel free to play around with it and see if it works correctly. It's shown on screens larger than the medium viewport width.

looks much responsive brother.

 

[Neutral Singh]

Can something like it be achived in Thread List Layout? Thank you

 

[ChrisTERiS]

Can something like it be achived in Thread List Layout? Thank you

+1

 

[hemant_bhardwaj]

+1

it's almost ready need some to test it

 

[ChrisTERiS]

it's almost ready need some to test it

Me I'm just installing my new forum. Will be available to test it in 4-5 hours.

 

[hemant_bhardwaj]

Me I'm just installing my new forum. Will be available to test it in 4-5 hours.

great thanks for the help now just fixing some issues with UI.X theme for default theme it's work well

 

[Neutral Singh]

Looks fabulous!

 

[Jordyn]

Sweet as mate thanks!!

 

[hemant_bhardwaj]

Sweet as mate thanks!!

Looks fabulous!

Me I'm just installing my new forum. Will be available to test it in 4-5 hours.

here you go please test it let me know
https://xenforo.com/community/threads/grid-layout-for-thread-without-addon.151354

 

[Jordyn]

I think theres a long title issue?
The date and time are pushed out the grid.

 

[hemant_bhardwaj]

I think theres a long title issue?
The date and time are pushed out the grid.

website link, please.

 

[Jordyn]

website link, please.

No go for that mate, im in the middle of the merge to XF2. I will get the other stuff done first and get back to you mate, thanks.

 

[Ehren]

I think theres a long title issue?
The date and time are pushed out the grid.

This happens because a height value is hard-coded. The code in post #5 should be flexible enough to deal with long titles.

 

[hemant_bhardwaj]

This happens because a height value is hard-coded. The code in post #5 should be flexible enough to deal with long titles.

yes I agree or even ch should work fine to by limiting character

 

[Jordyn]

Thanks guys, i tried both your codes now. Just not having much luck lol. I'll get back to this at some point thanks.