Disabling automatic textarea resize, and moving login form.

[Gumboots]

Couple of things I'm curious about. Just a FYI: I can generally code, up to a point, but am not familiar with the phpBB way of doing things.

1/ The automatic resizing on textareas (quick reply and full reply forms) is not my personal preference. If I simply comment out this from template/ajax.js...

Code: Select all

$(function() {
	var $textarea = $('textarea:not(#message-box textarea, .no-auto-resize)');
	phpbb.resizeTextArea($textarea, { minHeight: 75, maxHeight: 250 });
	phpbb.resizeTextArea($('textarea', '#message-box'));
});

...I assume that will put things back to the browser default behaviour, with manual resize on the y-axis. Is this all that is required, or am I missing something? Will it have any knock-on effects I'm not aware of?

2/ Also not a particular fan of login forms in the site footer. My preference is up top somewhere handy when I arrive at the joint. The default form appears to be this:

Code: Select all

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
	<form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
	<h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a><!-- IF S_REGISTER_ENABLED -->&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF --></h3>
		<fieldset class="quick-login">
			<label for="username"><span>{L_USERNAME}{L_COLON}</span> <input type="text" tabindex="1" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" /></label>
			<label for="password"><span>{L_PASSWORD}{L_COLON}</span> <input type="password" tabindex="2" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" autocomplete="off" /></label>
			<!-- IF U_SEND_PASSWORD -->
				<a href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a>
			<!-- ENDIF -->
			<!-- IF S_AUTOLOGIN_ENABLED -->
				<span class="responsive-hide">|</span> <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" tabindex="4" name="autologin" id="autologin" /></label>
			<!-- ENDIF -->
			<input type="submit" tabindex="5" name="login" value="{L_LOGIN}" class="button2" />
			{S_LOGIN_REDIRECT}
			{S_FORM_TOKEN_LOGIN}
		</fieldset>
	</form>
<!-- ENDIF -->

I assume it would be possible to re-locate the whole shebang to anywhere else on the index page. Is it simply a matter of deleting that code from its current location and dropping it in somewhere else? Or is there some extra trickery required?

If "extra trickery" is just presentation tweaks that's not an issue. I'd expect that anyway.

[DTMWC]

You're right about the login box, just move the code up the index page and it will work.

[Gumboots]

Cool. I'll grab my chainsaw and start messing around on local.

[Gumboots]

Commenting out that js function seems to work nicely. Only catch is it has to be done for every installed style that has a copy of ajax.js, but that's not a big deal.

ETA: Oh if anyone doesn't like the default handling of hr's, defining them this way in admin > BBCodes works nicely, IMO.

Code: Select all

<hr style="color: {COLOR}; background-color: {COLOR}; border: 0; margin: 1em 0;" />

Or if you prefer the old "V groove effect" you can do things like this:

Code: Select all

<hr style="color: {COLOR}; background-color: {COLOR}; border: 0; margin: 1em 0; box-shadow: 0 1px 0 #fff;" />

Bit nasty using inline CSS like that, but it's the lazy man's way of nailing them for all installed styles in one hit.
Chasing down all the relevant declarations when you have several styles installed is a bit of a nuisance.

[3Di]

Commenting out that js function seems to work nicely.

Will it have any knock-on effects I'm not aware of?

It also affects PMs (private messages).

[Gumboots]

No worries. That suits me. My only real concern was obscure textareas in admin or wherever. Which I could obviously work around if necessary. I just wanted to be aware of all instances.

Actually, just looking at the textarea code a bit more, the CSS doesn't seem to make sense. It has this:

Code: Select all

.message-box textarea {
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	width: 450px;
	height: 270px;
	min-width: 100%;
	max-width: 100%;
	font-size: 1.2em;
	resize: vertical;
	outline: 3px dashed transparent;
	outline-offset: -4px;
	-webkit-transition: all .5s ease, height 1ms linear;
	-moz-transition: all .5s ease, height 1ms linear;
	-ms-transition: all .5s ease, height 1ms linear;
	-o-transition: all .5s ease, height 1ms linear;
	transition: all .5s ease, height 1ms linear;
}

But the only other CSS I can see for it is a change of border colour on hover or focus, which isn't really something it's worth having a half second transition on. A transition would make more sense on height, if you wanted to keep the auto-resize js operational. The existing 1ms is near enough to zero (far less than human reaction time) which is what makes the auto-resize seem so jerky. It might be worth playing with a 1em bottom padding on the textarea and a .3s transition on height to get a more pleasant effect.

[3Di]

ACP (admin) has a different JS

[Gumboots]

Fair enough. I'll find my way around eventually.

[3Di]

Moreover, if you feel you can contribute for a better code the best place is here: https://tracker.phpbb.com/

[Gumboots]

I wouldn't go so far as to make that claim yet. I'm still dipping my toes into this codebase. A lot of this stuff is personal preference anyway, so you can end up arguing about angels dancing on pinheads.

[3Di]

I will not argue about your personal preferences. Perhapsabout your future Pull Requests, if any.

[Gumboots]

Ha! No difference in a lot of cases. There's always more than one way of doing something, especially when you're talking about presentation.