need help moving stuff around in the posting area, report to moderator, signatur

Started by shadav, September 06, 2019, 07:18:02 PM

Previous topic - Next topic

Kindred

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 */

Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antechinus

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. :)

Antechinus

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. :)

Antechinus

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. :)

shadav

 :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....

Antechinus

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.)

Antechinus

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. :)

Antechinus

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. :)

Advertisement: