[3.0] Theme

[live627]

This is the new theme started by @TwitchisMental

I still need to convert several form grids to use CSS grids instead of floats. Also the grids abuse definition list markup, something tat has always annoyed me from the very beginning.

Submitting as a draft now to get early feedback.

[jdarwood007]

If we do this for the avatar image, shouldn't we use a alt text for the name?

[DiegoAndresCortes]

Should use href or url then.
Or should 'image' provide it by default? It would be good in case an external avatar is missing in other parts of the forum.

[jdarwood007]

I think either is valid. I believe it just needs something to be valid for screen readers. Since its a link to the users profile and we removed the name, the alt should have it.

[DiegoAndresCortes]

Then I think 'image' should provide the alt text by default. An external avatar could suddenly not load or disappear, would be good to have it.

[live627]

I notice that a few forms would disable textareas on submit, such as the posting form. I've changed this to do all forms by using the new HTML property to make the entire form inert.

[dragomano]

Icons in the admin area are not indented enough:

Unable to load the '' template at Forum Maintenance - Routine:

SCEditor doesn't have a dark theme?

Instead of "X Posts" and "Y Topics", maybe it would still be better to keep "Posts: X" and "Topics: Y" as it is now?

[DiegoAndresCortes]

Icons in the admin area are not indented enough:

I’m working on this

SCEditor doesn't have a dark theme?

Can be fixed later too, but also requires some tweaks.
Check this topic: https://www.simplemachines.org/community/index.php?topic=586626.0

Instead of "X Posts" and "Y Topics", maybe it would still be better to keep "Posts: X" and "Topics: Y" as it is now?

I don’t have a preference, we might discuss it later for sure.

[jdarwood007]

@live627 Can you rebase this or merge and fix conflicts?

[DiegoAndresCortes]

We have this pending
live627#44

Will start sending more in upcoming weeks, but it could be merged, rest of changes are more focused so can be in separated PR's

[live627]

Once I can get around to testing and merging that, I'll rebase this branch again

[dragomano]

checkeiv => checked?

[dragomano]

<label>...</div> => <label>...</label>?

[live627]

@jdarwood007 I moved some of the login javascript to its own file but don't know how to test cors requests.

[jdarwood007]

When this is closer to ready I can check it. You need to run 2 domains (or 2 subdomains) and have the forum on one and the script on another. A simple SSI page where you can open the user area popup is good enough for most things. Sending credentials such as on the login form may also need to be tested, but when you can open the user area, the CORS request works.

[Sesquipedalian]

Another partial review, this time about language strings.

I've added some suggestions for particular things. Beyond those, please also make sure to use Lang::getTxt() rather than using Lang::$txt directly. If there are situations where you need to check whether the string exists, please use Lang::txtExists() for that.

[Sesquipedalian]

The tt and heading buttons should be moved in this list to match the changes in 05664be.

Should also incorporate the changes to this list that were made in #8593 (i.e. buttons for the new spoiler and details commands).

[Sesquipedalian]

In order to make this work, the command for the tt button will also need to be changed.

However, it will take some effort to do that in a way that works well. I wrote the current code to use <font face="monospace">{0}</font> because using the font tag allowed me to use this.execCommand(), which provides nice and fluid behaviour for applying and/or removing the [tt] BBCode to arbitrary spans of text. You can see this code in the tt command's exec function:

				if (font === 'monospace') {
					this.execCommand('removeFormat');
				} else {
					this.execCommand('fontname', 'monospace');
				}

In order to use <code class="bbc_tt">{0}</code>, you will need to replace that with some other code to add and remove the <code> tags from around selected text. The following code from the spoiler command's exec function will get you part of the way there.

			// If we are currently inside an inline spoiler span, remove it.
			const spoilerElement = sceditor.dom.closest(this.currentNode(), '.bbc_inline_spoiler');

			if (spoilerElement) {
				const rangeHelper = this.getRangeHelper();
				rangeHelper.insertMarkers();
				rangeHelper.saveRange();
				spoilerElement.insertAdjacentHTML('beforebegin', spoilerElement.innerHTML);
				rangeHelper.restoreRange();
				spoilerElement.remove();
				return;
			}

			// Otherwise, insert it.
			this.insert('[spoiler]', '[/spoiler]');

However, this code doesn't fully emulate the behaviour of execCommand(). In the case of the spoiler BBCode that's fine and actually preferable. But in the case of tt, and particularly when removing tt from selected text, a full emulation of the behaviour of execCommand() is desirable.

[ThistleSifter]

This should be <ol

[Sesquipedalian]

There are also a couple of syntax errors that need to be fixed.

[Sesquipedalian]

Suggested change

	}
	?>
	}

We're no longer using closing PHP tags as of #8606.

[Sesquipedalian]

Phew. Okay, friends. This PR is huge. There's lots of great stuff in here. But it is unwieldy and all but impossible to review. Additionally, there are some parts of this that have been rendered obsolete by other changes in the meantime, and a few other parts that have issues of one sort or another.

For the sake of making the review process more manageable, I would really appreciate it if this could be broken up into a series of logically related parts and resubmitted as smaller PRs. For example, I see that @live627 has done a bunch of work to replace jQuery with native JavaScript. Perhaps most (all?) of that work can be combined into its own PR. Other ideas could be, say, revamping the Admin Control Panel as one PR, revamping the board index as another, revamping the message index as a third, revamping topic display as a fourth, etc.

@live627, do you think you can do that for us?

[sbulen]

I'm willing to take a peek at this.

A huge amount of the work here has been spent "3.0-izing", so we need it. One major problem is that 3.0 has been in flux, so now a lot of it needs to be "re-3.0-ized" & even "re-re-3.0-ized". It has just gone on too long without merging.

What I will do:

• Deal with merge issues; make it mergeable
• Review open change requests; attempt to resolve
• Experiment with ways to chunk it up in to 3-5 PRs
• If feasible, submit those
• Test

Splitting it up will be tough, because at this point it will be hard to isolate related changes across so many files, due to the layers upon layers of changes - not only in this PR, but also in the same files/lines of code outside this PR. Like mixing salt & pepper & then trying to separate them back out again.

But I'll see what I can do. It may end up that we cannot chunk it up into smaller logical pieces. (Groups of commits would be easy if we don't care about whether they are logically related... The PRs would appear a bit rando, though...)

At that point we can discuss a way to proceed with the review. I'll make a proposal.

Let me know if you'd like me to proceed.

[jdarwood007]

Any effort would be appreciated

[sbulen]

Any effort would be appreciated

I'll start working on this.

[Sesquipedalian]

Thank you, @sbulen!