Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: shadav on September 06, 2019, 07:18:02 PM

Title: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 06, 2019, 07:18:02 PM
so it's a modified curve theme, 2.0.15

I would like to do a few things

1. move the report to moderator button and the ip button to below the signature (as well as add some other buttons there (merge posts, split topics, ban user....more admin/mod type buttons than user type buttons)

2. I would like for these and the signature to always be at the bottom of the post

image to explain
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antes on September 06, 2019, 07:46:16 PM
https://github.com/Antes/RDD/blob/master/Display.template.php#L562-L622 - This should give you the idea.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 08, 2019, 02:01:58 PM
thank you, I tried but I keep getting template errors

so then I tried moving the buttons to the top with the others and adding the code in the css for the quicklinks (whatever it's called) but the images wouldn't show up
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 08, 2019, 10:11:50 PM
What you want to do is a bit tricky, because the moderation buttons (meaning the ones in the strip at lower left of the posts page, including the "merge topic" button) are not intended to have multiple instances in every post. Recoding them so they worked that way would be a bit of a mission.

Simply moving the report links and some of the quickbuttons to below the posts is easy enough, if you'll settle for that. Basically, anything that is already inside a post wrapper can be moved pretty much anywhere inside said wrapper. Anything outside it is probably more hassle than you want to know about.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 09, 2019, 12:29:03 PM
thank you

ok so well let's tackle my biggest ocd issue at the moment ;)
aligning the signature to always be at the bottom of the post

lol you have no idea how much that is annoying me   :P

the rest I can play around with later, it's just a minor layout issue but the signature is a bit on my nerves
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 09, 2019, 05:18:24 PM
Congratulations! You have auspiciously selected one of the traditionally gnarliest issues in CSS!

It should be possible now that flex and grid are available, but having been reminded of this issue I took a brief look at some flex tutorials yesterday. No joy. They have code for "sticky footers", which is basically what is wanted here, but although they work on the html/body elements they don't appear to work inside posts. Someone else may know how to get that working (I've barely played with flex coding yet).

Same applies to CSS grid. Haven't done anything with it yet, so at the moment do not know how.

Edit: Well there is one surefire way of getting it to work, but the catch is it relies on having a pre-determined height for the sig/footer content. Which is not usually what's wanted in a forum post context.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 09, 2019, 07:06:33 PM
 :laugh: leave to me to always be difficult  :P just like a woman  ;)

anyways thank you

my question, would it be possible to create a new div? one that goes below the poster info and post information but still within the posting area? would that not work?

I'm assuming the forumposts is the main div, so something like....

<div id="forumposts">
<div class="poster">
</div>
<div class="postarea">
</div>
<div class="signature">
</div>
</div>

where the signature would then span both poster and postarea div
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 09, 2019, 07:20:17 PM
Oh sure, that will work. It can  even be done without an extra div. All you need to do is set clear: both; on .moderatorbar. The thing is it will make some posts a lot taller than they really need to be, so people tend not to like that solution.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 09, 2019, 08:27:01 PM
thank you, that's at least better
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 09, 2019, 08:37:37 PM
Oh yeah, just remembered. There's an alternative simple trick you can try. Leave .moderatorbar alone, and set a min-height: 200px; on the .inner divs. Adjust the number to whatever suits best. This has the advantage that it will take up less height on short posts.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 09, 2019, 09:36:09 PM
thank you... that does look a bit better using the .inner instead
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 14, 2019, 10:37:58 AM
Just had a go at this, since I figured with modern CSS tricks there has to be a way to make it work. And there is. Got it working perfectly.

There's a catch though. It works perfectly on my custom template, but I can't get it working on a default SMF template. The default pile of crud* splits things up into awkward chunks (separate .postarea and .moderatorbar stacked vertically) so you can't just throw flexbox at it and have it work.

It works on my custom template because I wrapped all the postarea divs (.keyinfo, .post and .moderatorbar) inside .postarea, with .poster sitting next to that, so effectively there are two chunks sitting inside the outer post wrapper. I did this just because it made sense for other aspects of coding, but it turns out to work with sticky post footers too.

So the default template would have to be re-jigged a bit, but it's not a difficult thing to do. It's basically just a case of stuffing .moderatorbar inside .postarea, getting rid of a couple of superfluous divs and crap that will just get in the way, then applying something like this:

#forumposts .windowbg, #forumposts .windowbg2 {
display: flex;
padding: 11px 1em;
border: 2px solid blue;
}
.poster {
width: 12em;
flex: 0 0 auto;
border: 2px solid red;
}
.postarea {
flex: 1 1 auto;
display: flex;
flex-direction: column;
border: 2px solid purple;
}
.post {
flex: 1 1 auto;
border: 2px solid green;
}
.keyinfo, .quickbuttons, .moderatorbar {
flex: 0 0 auto;
background: #0002;
}


In English, setting flex on the outer divs makes .poster and .postarea fill the available space on both axes. The set width on .poster, and the 0 0 auto flex setting make .poster stay at the desired width, while .postarea will fill the rest of the space.

The tricky bit, which I hadn't figured out before, is that you then apply display: flex on .postarea and set the direction to column. That makes everything inside stack nice and flexy. Use 0 0 auto to keep the ones you want at their standard height from misbehaving, and set the .post itself to 1 1 auto to fill the remaining height.

The screenshot shows the result, with the gruesome borders and translucent grey overlay just being to show which bits are which. The grey elements are the ones set to 0 0 auto so they don't change height. The green one (.post) is the one that does the pushing.

And now that Ive figured this out I'm going to have to use it. :D

*I'm allowed to say this, because I coded parts of it. :P
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on September 18, 2019, 02:02:13 PM
thank you for all of your help
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Diego Andrés on September 18, 2019, 10:42:14 PM
Quote from: Antechinus on September 14, 2019, 10:37:58 AM
..quickbuttons

I fixed typo
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on October 05, 2019, 01:28:55 AM
Turns out this doesn't work consistently anyway. Works perfectly in Pale Moon, Chrome, and Opera. Blows to pieces in Firefox.

Firefox is the new IE. :P
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 01, 2021, 03:51:32 AM
Hey, A funny thing happened on the way to the forum. Turns out you can do this sticky-at-the-bottom sig trick on default phpBB markup. Someone asked about it, so I gave it a bit of thought and whipped up a proof of concept. It works. Should even work with Firefox (when I can be bothered testing it).

No can do on default SMF markup, but changing it so you can is a piece of cake. All it needs is an extra couple of divs wrapping the default .postarea and .moderatorbar (IOW, the two nested parent divs wrap everything except .poster).

Set .post_wrapper to display: flex; and get rid of the floats and margins on .poster, ,postearea, etc. New parent #1 sits beside .poster (define widths to whatever you like) and gets position: relative; added to its CSS.

Then position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; on #1>#2. Then all you have to do is set .postarea to flex: 1 0 auto; and .moderatorbar to flex: 0 0 auto;

Hey presto, sig sticky at the bottom. :)

Will knock up an SMF example when I can be bothered, if nobody is enterprising enough to try it themselves first. :P
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: GigaWatt on February 01, 2021, 04:18:30 AM
Yeah, but... the mod buttons are above the sig :o... am I the only one that finds this weird ???.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 01, 2021, 04:26:09 AM
Say what? Which "mod buttons"?
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 01, 2021, 04:43:59 AM
Oh nvm. I'm not talking about the OP. I'm talking about the thing she wanted to do after she gave up on the idea in the OP.
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on February 01, 2021, 11:00:28 AM
 :laugh: I forgot about this

yeah I gave up trying to split up the quickbuttons, so instead just threw everything into the quickbuttons  :laugh:

but the signature floating about mid post drives my ocd crazy  :laugh:
a signature should be stuck to the bottom of the post  :P
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Kindred on February 01, 2021, 01:42:15 PM
well, your problem is that your "post-bit" (the poster information to the left) is really quite large - so a short post highlights the floatiness of the signature block.

If you note, that's only really noticeable with a single line post here on SM.org...   "P

However, that's still easy.

Code (in index.css, find) Select

.post {

Code (add this) Select

min-height=11em;  /* Set to the proper height needed to match your left-side post-bit */

Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 01, 2021, 04:27:16 PM
That's the easy way of more or less doing it on default markup. What we were after was a way of doing it exactly regardless of .poster content, so that it works if the member has an avatar or doesn't, and regardless of avatar size, and of whether they have filled in various profile fields or not. It's possible too. It just requires a slight markup change and appropriate CSS. :)
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 02, 2021, 05:18:58 PM
Ay up. Here's a modified Display.template.php to drop into a vanilla Curve, and a smallish chunk of CSS to go on the end of index.css. This just does sticky-at-the-bottom sigs. Everything else is standard.

I've checked it in Pale Moon, Firefox, Opera, Chrome, Edge and IE11. Works as it should in the first 5. Sig isn't sticky in IE11, but it doesn't seem to break anything. Haven't done RTL yet either, but with the CSS using flex now RTL should mostly take care of itself.

Note that this is just a trial for Display,template.php, so PersonalMessage.template.php still has default behaviour.

Anyway, CSS:
Code (Add to end of index.css) Select

#forumposts .post_wrapper {
display: flex;
}
#forumposts .poster {
flex: 0 0 auto;
float: none;
}
#forumposts .postarea {
flex: 1 1 auto;
max-width: calc(100% - 15em);
margin: 0;
}
.postarea_child {
display: flex;
flex-direction: column;
min-height: 100%;
}
.postarea_child>div {
flex: 0 0 auto;
}
.postarea_child>.post {
flex: 1 0 auto;
position: relative;
overflow: hidden;
}
.postarea_child>.post>.inner {
margin: 0 1em 2em 0;
overflow: auto;
}
.post>.modifybutton {
position: absolute;
right: 0;
bottom: 0;
}
.moderatorbar {
margin: 0;
}


ETA: Come to think of it, this may be possible on standard markup by using grid. I'll play with that too and see how it goes. :)
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 02, 2021, 06:37:43 PM
Hey this is even better. I just tried my first experiment ever with CSS grid. Us old farts are like that. Welcome to 1893. :P

Anyway, cool thing is you can get sticky-at-the-bottom sigs on standard markup by using grid, and as long as you add some gruesome -ms-prefix shiz for IE11 it will even work in IE11. Also works in Edge, Firefox, Opera, Chrome and Pale Moon, of course.

So, all you need is this added to the end of a bog standard index.css:

#forumposts .post_wrapper {
float: none;
width: auto;
display: -ms-grid;
display: grid;
grid-template-areas: "poster postarea" "poster moderatorbar";
-ms-grid-columns: 15em 1fr;
grid-template-columns: 15em 1fr;
-ms-grid-rows: 1fr auto;
grid-template-rows: 1fr auto;
}
#forumposts .poster {
float: none;
width: 15em;
-ms-grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row-span: 3;
grid-area: poster;
}
#forumposts .postarea {
margin: 0;
overflow: hidden;
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row-span: 1;
grid-area: postarea;
}
#forumposts .postarea>.post {
margin-right: 1em;
}
#forumposts .moderatorbar {
margin: 0;
-ms-grid-row: 2;
-ms-grid-column: 2;
-ms-grid-row-span: 1;
grid-area: moderatorbar;
}


Now this still doesn't work on personal messages, because 2.0.x stupidly has different markup on that template, even though it displays the same content for personal messages as it does for standard forum posts. So, options for sticky sigs on PM's are a/ revamp markup so it isn't stupid or b/ add more convoluted CSS to deal with the stupid standard markup.

Either a/ or b/ will work, but IMO a/ probably makes more sense. :)
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: shadav on February 02, 2021, 07:30:13 PM
 :laugh: look at you go....

thank you, I'll be trying this out a bit later

working on redoing a forum, it's just out of hand...a lot of things I don't really need on it....
and nearly impossible to upgrade due to everything I did to it....
funnily enough it's the one that started this topic  :laugh:

the pms would be nice but I can live with those, it's not something that's going to be used/seen as often as the boards....
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on February 02, 2021, 09:35:49 PM
Funny thing here is that, although you can do this stuff easily on default 2.0.x markup, you can't on 2.1 markup. The markup in 2.1 screws this completely, which is amusing.

With the way CSS is these days, and assuming nobody in their right mind is going to support anything earlier than IE11, it would actually make sense to strip out the .postarea div from 2.1 and just have .poster, .keyinfo, .post, .attachments, .under_message, and .moderatorbar all directly inside .post_wrapper.*

That way this same grid stuffz would do sticky sigs in 2.1 with a standard post presentation, and it would also allow much more scope for non-standard post presentation with grid (because everything would be separate children directly inside the grid parent).

RC4 may be a bit late for making that change in the repo, but it really would make a lot of sense. It would certainly be worth doing in any custom template. The CSS alterations required aren't a big deal, even taking responsive and RTL into account.

*In fact you could even scrap .postwrapper, or turn it into a second class on the main .windowbg(2) for each post. There's no real need for an extra div there.

(Obligatory postscript grumble: beats me why the .under_message div is necessary when there's a perfectly usable ul holding the buttons anyway, which AFAICT would do the same job. :P )

(Obligatory extra grumble coz I can: beats me why the template is still using floats too, when even basic flex would make RTL easier.)
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 07, 2021, 07:44:27 AM
Hey I think I have a solution for this. Works in Firefox anyway (which exploded last time I tried it). Have not tried in Chrome or on mobile yet (it's late and I just thought this up). This is on default 2.1 RC4 markup, with just CSS changes.

Code goes like this:
/* -------------------- */
/* Grid parent element. */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px 1fr;
    grid-auto-rows: 1fr min-content;
}
/* ---------------------- */
/* You need to kill this! */
.post_wrapper::after {
    display: none;
}
/* ----------------- */
/* First grid child. */
.poster {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
/* ------------------ */
/* Second grid child. */
.postarea {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;  /* Set to flex parent. */
    flex-direction: column;
    margin: 0;      /* Override RC4 CSS. */
}
/* ----------------- */
/* Third grid child. */
.moderatorbar {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;      /* Override RC4 CSS. */
}
/* --------------------- */
/* 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. */
/* Changed position. */
.postarea > .under_message {
    order: 3;
}
/* ------------------ */
/* Fourth flex child. */
/* Now under buttons. */
.postarea > .attachments {
    order: 4;
    margin: 0;
}
/* ------------------ */
/* End flex children. */
/* ------------------ */

The deal is you use CSS grid for the initial arrangement of the three main chunks: .poster, .postarea and .moderatorbar. The columns are set to 175px and 1fr to duplicate the default layout, The rows are set to 1fr  min-content; so that  .moderatorbar will always be scrunched to minimum height.

You then set .postarea to flex-direction: column; and set most of its children to flex: none; - the exception is .post, which you set to flex-grow 1 so it pushes the others around. This keeps the other children of .postarea shoved up against the top and the bottom.

I also changed the order of things so the quickbuttons are straight after the post, instread of being under the attachments. I like this better, but it's easy to have it either way.

Code is heavily commented, so should be easy to follow. Try it and see how it goes. :)
Title: Re: need help moving stuff around in the posting area, report to moderator, signatur
Post by: Antechinus on September 08, 2021, 06:00:57 PM
Found a bug in this, and a fix for it. This:
/* -------------------- */
/* Grid parent element. */
.post_wrapper {
    display: grid;
    grid-template-columns: 175px 1fr;
    grid-auto-rows: 1fr min-content;
}

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

The minmax for the second column needs to be set to the 100% of .windowbg parent width, minus the parent's side padding. Without this, overflow: auto; elements (like .bbc_code) will break out of the layout. The column needs a defined width to force horixontal overlfow on child elements. :)