Disabling automatic textarea resize, and moving login form.

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Mon Oct 14, 2019 1:50 am

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.

User avatar
Dan Stylez
Registered User
Posts: 278
Joined: Tue Jan 16, 2018 6:17 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Dan Stylez » Mon Oct 14, 2019 2:00 am

You're right about the login box, just move the code up the index page and it will work.
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Mon Oct 14, 2019 3:35 am

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

User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Mon Oct 14, 2019 10:39 pm

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.

User avatar
3Di
Former Team Member
Posts: 14477
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Disabling automatic textarea resize, and moving login form.

Post by 3Di » Mon Oct 14, 2019 11:08 pm

Gumboots wrote:
Mon Oct 14, 2019 10:39 pm
Commenting out that js function seems to work nicely.
Gumboots wrote:
Mon Oct 14, 2019 1:50 am
Will it have any knock-on effects I'm not aware of?
It also affects PMs (private messages).
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
✒️ Black Friday 2019 @ The Studio ▪️◾️

User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Mon Oct 14, 2019 11:57 pm

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.
Last edited by Gumboots on Tue Oct 15, 2019 12:06 am, edited 1 time in total.

User avatar
3Di
Former Team Member
Posts: 14477
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Disabling automatic textarea resize, and moving login form.

Post by 3Di » Tue Oct 15, 2019 12:00 am

ACP (admin) has a different JS
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
✒️ Black Friday 2019 @ The Studio ▪️◾️

User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Tue Oct 15, 2019 12:08 am

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

User avatar
3Di
Former Team Member
Posts: 14477
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Disabling automatic textarea resize, and moving login form.

Post by 3Di » Tue Oct 15, 2019 12:21 am

Moreover, if you feel you can contribute for a better code the best place is here: https://tracker.phpbb.com/
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
✒️ Black Friday 2019 @ The Studio ▪️◾️

User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Tue Oct 15, 2019 12:24 am

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.

User avatar
3Di
Former Team Member
Posts: 14477
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: Disabling automatic textarea resize, and moving login form.

Post by 3Di » Tue Oct 15, 2019 12:26 am

I will not argue about your personal preferences. Perhapsabout your future Pull Requests, if any. :P :)
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
✒️ Black Friday 2019 @ The Studio ▪️◾️

User avatar
Gumboots
Registered User
Posts: 210
Joined: Fri Oct 11, 2019 1:59 am

Re: Disabling automatic textarea resize, and moving login form.

Post by Gumboots » Tue Oct 15, 2019 12:29 am

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.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”