SMF 2.1: Make sigs sticky at bottom of posts (CSS only)

Started by Antechinus, September 09, 2021, 05:52:25 PM

Previous topic - Next topic

Antechinus

This turns out to be easy. Like this:
/* ---------------------------------------------------- */
/* Adjust parent .windowbg for better looks of content. */
#forumposts .windowbg,
#forumposts .approvebg,
#personal_messages .windowbg {
padding: 0;
}

/* -------------------- */
/* Grid parent element. */
/* -------------------- */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px minmax(0,calc(100% - 175px));
    grid-auto-rows: 1fr min-content;
}

/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}

/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
width: 175px;
padding: 10px 0 10px 15px;
background: #fff5e5;
border-radius: 6px 0 0 6px;
}

/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin: 0;      /* Override RC4 CSS. */
padding: 10px 15px 0 10px;
}

/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;      /* Override RC4 CSS. */
padding: 0 15px 10px 10px;
}

/* ----------------------------------- */
/* Media queries, for smaller screens. */
/* ----------------------------------- */
@media screen and (max-width: 720px) {
    .post_wrapper {
        display: block;
    }
    .poster {
        width: auto;
min-height: 65px;
padding: 10px 10px 5px;
    }
    .poster h4, .poster .user_info {
margin-left: 60px;
    }
.poster li.avatar {
display: block !important;
float: left;
width: 50px;
margin: -1.4em 0 0 -60px;
text-align: center;
}
.poster img.avatar {
max-height: 50px !important;
max-width: 50px !important;
}
.poster li {
padding-right: 4px;
vertical-align: bottom;
}
.poster .blurb {
display: none;
}
}

Note: Will not support IE11, or earlier versions of IE. If anyone wants support for IE, you can add the required -ms-grid syntax and declarations. It's not difficult, but at the moment I can't be bothered. :D

See this article if you want to support IE11. ;)

landyvlad

Do you have a screenshot to demonstrate what this actually does?
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

Antechinus

Didn't, but do now. ;)

This is a thing that has been requested many times over the years: code for making a sig stay at the bottom of the post wrapper, regardless of how much content there is in the .poster section (avatar, blurb etc) and how little content there is in the post itself (so that collapses to a very small size). People used to try and fudge it several ways (min-height on the post, or clear: both on the sig, etc) but the fudges were always only fudges that only sort of worked.

With the CSS available these days it is now easy to do. The result is shown in the first screenshot. Even though there is quite a lot of content in the poster area, and hardly any in the post itself, the sig stays stuck to the bottom and it all looks tidy.

You cannot view this attachment.

Not only that, but doing it this way also enables you to do other tricks. The second screenshot shows the result when using it to meet the request in this thread: changing the background of the poster area, and having that full height at all times, but without changing the background of the other post content.

You cannot view this attachment.

It also works well for mobile. Simply using  a media query to declare .post_wrapper as display: block; insead of display: grid; makes all the content automatically stack neatly down the page, which is what you want on mobile. It also handles RTL languages automatically: the poster div goes to the right and everything sorts itself (apart from the quickbuttons and a couple of minor details, which are floated by default, but that could be fixed too).

So this is quite a versatile way of handling the CSS for posts. It covers a lot of bases. You can even extend it further. I haven't added it to this example, but you can also declare .postarea as display: flex; and that will enable you to change the stacking order of the elements within .postarea. I've used that to put the quickbuttons above the attachments, which I like better than the default (attachments above quickbuttons). Code for that looks like this:
/* ---------------------------------------------------- */
/* Adjust parent .windowbg for better looks of content. */
#forumposts .windowbg,
#forumposts .approvebg,
#personal_messages .windowbg {
    padding: 0;
}
/* -------------------- */
/* Grid parent element. */
/* -------------------- */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px minmax(0,calc(100% - 32px));
    grid-auto-rows: 1fr min-content;
}
/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}
/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 175px;
    padding: 10px 0 10px 15px;
}
/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    /* Set to flex parent. */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 10px 15px 0 10px;
}
/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;
    padding: 0 15px 10px 10px;
}
/* --------------------- */
/* End of grid children. */
/* --------------------- */
/* Start flex children. */
/* -------------------- */
/* General reset. */
.postarea > div {
    flex: none;
}
/* ------------------ */
/* Second flex child. */
.postarea > .post {
    flex: 1 0 auto;
}
/* ----------------- */
/* Third flex child. */
.postarea > .attachments {
    /* Changed position to #4. */
    /* Attachments are now beneath buttons. */
    order: 4;
    margin: 0;
}
/* ------------------ */
/* Fourth flex child. */
.postarea > .under_message {
    /* Changed position to #3. */
    /* Buttons are now above attachments. */
    order: 3;
}
/* ------------------ */
/* End flex children. */
/* ------------------ */

/* ----------------------------------- */
/* @todo - Responsive code for mobile. */
/* Post & PM templates, media queries. */
@media screen and (max-width: 720px) {
    .pagesection.top {
        display: block !important;
    }
    #forumposts #new::after {
        margin-left: calc(50% - 16px);
    }
    .post_wrapper {
        display: block;
    }
    .poster {
        width: auto;
        min-height: 65px;
        padding: 10px 10px 5px;
    }
    .poster::after {
        display: block;
        clear: both;
        content: '';
    }
    .poster h4, .poster .user_info {
        margin-left: 60px;
    }
    .poster li.avatar {
        display: block !important;
        float: left;
        width: 50px;
        margin: -1.4em 0 0 -60px;
        text-align: center;
    }
    .poster img.avatar {
        max-height: 50px !important;
        max-width: 50px !important;
    }
    .poster li {
        padding-right: 4px;
        vertical-align: bottom;
    }
    .poster .icons {
        padding: 0 4px 0 0;
    }
    .poster .blurb {
        display: none;
    }
}

shadav

thanks, I saw where you posted in my thread :) just haven't had a chance to play with it yet
this was one of my pet peeves in 2.0.x
2.1 so far seems to handle sigs a bit better to be at the bottom of the post, though that means that everything else is above it (ie moderation bar, attachments, etc) which is already ticking me off  :laugh: moved the attachments to below the sig on the theme I'm playing with

landyvlad

"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

Antechinus

Quote from: shadav on September 10, 2021, 12:28:15 AMthanks, I saw where you posted in my thread :) just haven't had a chance to play with it yet
this was one of my pet peeves in 2.0.x
2.1 so far seems to handle sigs a bit better to be at the bottom of the post, though that means that everything else is above it (ie moderation bar, attachments, etc) which is already ticking me off  :laugh: moved the attachments to below the sig on the theme I'm playing with
Yeah that still requires markup changes, but I like sig under attachments anyway so it doesn't bug me. :D

My 2c is sigs above attachments are ok if everyone has small and tidy sigs, but they get up my nose when they have banners and all sorts of whatnots*. Then I prefer them out of the way below the attachments. It's just sigs floating halfway up the post, and buttons under attachments, that bug me all the time.

But by using grid + flex for the basics you do all sorts of nifty tricks, regardless of how you do your markup. And really floats should be canned as much as possible. Too much of a PITA when you want to change things for mobile or RTL.

*I once made a huge sig banner that said "Humungous Sig Banner - because my ego is more important than your browsing experience".

landyvlad

Quote from: Antechinus on September 10, 2021, 12:57:01 AMI once made a huge sig banner that said "Humungous Sig Banner - because my ego is more important than your browsing experience".

ROFLMAO :D
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

Antechinus

I still have it stashed. :D

You cannot view this attachment.

shadav


TwitchisMental

Just wanted to say this trick and that poster wrapper trick just make things look so much better even on the default theme.

Thank you for sharing. I love your your dedication to doing things like this :).

Advertisement: