twistedtwigleg / vanilla-bootstrap Goto Github PK

So this:

becomes something like this:

_{Note that the latter is just a quick mockup.}

• Re-position item
• Resize item
• Bonus task: look into implementing unique colors per category!
• Implement for other pages listing discussions from a variety of categories.

User profile page for an example. There might be others too, might have to try and look through every page, just to make sure. In some cases perhaps its not really necessary though. Would still need to validate that assumption!

Here is the link to the code used for to embed Discord using the Pockets plugin in Vanilla: https://gist.github.com/TwistedTwigleg/697892da0dfab96da88cf0519fce281f

Let me know what you think and leave feedback regarding the W.I.P Discord embed here.

I figure we'll close this issue once we're happy with how the Discord plugin is integrated. After that, I suppose we'll make new issues as we find problems/enhancements.

So I was making some edits to GodotDarkly and I realized we could change the color of the input boxes.

Right now they are white and it does provide nice contrast, but I wonder if it would be better to make the input boxes a darker color.

For example:

CSS:

// Make text areas gray with white text, just like how they will be when actually posted.
// (NOTE: Also effects the search bar.)
.InputBox
{
    background-color: @gray; //@gray-lighter;
    color: white;
}

Personally I think it still maintains a nice contrast, albeit not quite as strong, and it looks more like what the end result will look like when posted. It also effects the search bar, for better or for worse, but if we wanted we could probably make it only effect the posting input boxes.

I like either way, but in my opinion the gray is a little easier on the eyes than the white.
Thoughts?

The old Godot Developer forums used a Imgur plugin to handle image uploads, so the server hosting the forums wouldn't also host all of the images the forums uses. This reduces the file storage needed for the forums, with the caveat that these images had to be fetched from a different server.

However, as I mentioned in #13, I couldn't get the Imgur to work with the latest version of Vanilla, and even if the plugin was working, it would still need to be edited to work with the rich post editor.

This means that right now, any/all images uploaded to the forums will go straight to the server.

I doubt my server provider will have an issue for now, and supposedly I have 'unlimited' storage space, but potentially as the forums grow and more images are uploaded, they may have an issue with the amount of storage space the forums take.

That said, I doubt it will become an issue for quite awhile, or maybe it won't be an issue at all. If it becomes an issue, we can deal with it then, but I figure it is good to think ahead.

If anyone finds any alternatives, please post it here so we can look into it!

I just disabled the rich editor on my localhost, however the advanced editor is not showing up, just a plain text area and no buttons for formatting or anything. Trying to preview the message gives a invisible error message(white text on white background). Might have to open an issue to track it and try and fix that then.

Originally posted by @Megalomaniak in #19 (comment)

As mentioned in this thread on the Godot forums, the YAGA reaction icons make seeing the profile picture of the user who reacted difficult, especially for profile pictures with low contrast.

We could solve this by increasing the profile picture size slightly. For example:

In the picture above, the profile pictures are scaled to 36 pixels, which might be just a tad large. We could easily scale it down to 32 or 28 while still maintaining better visibility. A downside with increasing the profile size is that the YAGA reactions will take up a bit more space, though most posts/topics don't get too many reactions so I think the change would be minimal for most posts.

As you can see from the image in a post in #15 the issues with the theme now are:

• Fix: Topic title breaks into new line causing the list item to become taller.
• Fix: Topic metadata/details and tags are too lock breaking into new line...

Fix for topic title is simple, if it's too long: truncate and add ellipsis to the end. Should probably also make hover show the full title then as alt-text.

The other one is a bit more complex and has multiple potential fixes, will leave that for later discussion.

Originally posted by @Megalomaniak in #15 (comment)

• Choose placement
• Create plugin settings
• Implement the embed
• Theme it

From #4:

@Megalomaniak said:
Another point of interest, current live forum has the links in it's menu to some discord channel(I don't use discord myself so no clue what channel) and a link to kiwi irc webclient to connect users to the godot irc channel.

The latter allows to be embedded to sites to avoid community memebers having to follow a link to another site, basically to keep users on the community site...
https://kiwiirc.com/embedding

Might be worth investigating in future.

@TwistedTwigleg I'd be willing to take the kiwi irc as my task if you are OK with taking the discord as yours. ...

@Megalomaniak, do you still want to take this issue?

For an example do we want to replicate the buttons so that all buttons look the same as say the buttons on godotengine org download page? etc.

Perhaps something like what is described here:
https://nvie.com/posts/a-successful-git-branching-model/

Though I do thing it's not too pressing yet, it is probably good to start thinking about it.

I'm not sure that every collapsible menu needs the "Hamburger" icon. Easy enough to set display: none; on them but then could remove the image tags from the master template just as well. Either ways it's not too pressing right now and there is plenty of time to discuss and think about that.

Trying to use the button throws an error in developer console however for a user who doesn't know to look there it just seems to do nothing.

The error thrown:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.imgur.com/3/upload. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

MDN article for CORS:
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Just a quick note that moderators, and potentially other, member tags still need CSS styling. Not a huge deal by any means, but I wanted to write it down before I forgot.

So there are couple of issues with the code block worth bringing up in here.

First of all our current theme has a gray rounded box for the code block, which is actually not too dissimilar to the engine website:
https://godotengine.org/article/optional-typing-gdscript

But I feel that might fit better for the inline code bits like this, which currently is more pink/reddish rather than gray.

But more importantly the current code block only displays line numbers for every fifth line and it causes the empty lines to get cut off, which I think is a real issue. This could be considered an actual theme bug, but also should be pretty easy to fix I think. I've opened a separate issue for it(#28).

And then finally, last but not least I'm thinking it would be nice to look into adding a GDScript specific coloring to the code block and maybe try to emulate the color scheme of the godot editors code editor itself in our theme..?

Would need to investigate if this is best done in our theme or the codeblock addon(syntax prettifier), may even be best to maybe integrate the addon straight into our theme addon?

I do have my doubts about this last bit, but since we have multiple color themes to chose from within the theme addon, maybe a good way to go? Again, might have to investigate a bit to properly figure out the best way to go...

Then again, if we took the direction to modify the dark theme to follow godot editors color scheme, maybe the code block could have the same color theme for both lightly and darkly, hmm...

Anyways, thoughts?

Currently only every fifth line gets a line number displayed, causing empty lines in code to be cut out, which is a bit of a problem, but it should be an easy fix I think.

As reported by user fooon on the forum.

The input boxes for the login overlay panel can't be seen since it's just white on white background, fix is easy - PR about to be made.

Might be interesting to look into making use of vanillas promoted content module:
https://blog.vanillaforums.com/product/friday-theme-tip-promoted-content-module

I mean after we have called this current theme release "finished"?

Probably should rewrite a whole new theme from scratch anyways since bootstrap is built using some outdated concepts that are deprecated with replacements existing, or we could just try to refactor bootstrap fully, but that is probably a more difficult task.

either ways this should be a future consideration

See this forum post for details: Forum Post

Looking around on Google, the issue might be due to the theme. Apparently the Keystone theme (link) didn’t have the triggers setup correctly, which might be the issue we are having too.

A potentially simple solution would be just to force a browser refresh on a successful login, but I don’t know how difficult that would be to implement.

Since we are trying to stay consistent with the theme and style in GodotEngine.org, we should probably add the the Patreon widget/button to the forum's header. That way the forum's header and GodotEngine.org's current header would be exactly the same.

@Megalomaniak found this link, which should provide a good starting point: https://www.patreondevelopers.com/t/support-me-on-patreon-button/102/5
and for reference a wordpress plugin.

That said, this should probably be tackled later, once the more pressing and prominent things are dealt with first.

• Add a simple styled button/link.
• Implement a plugin.
• Replace basic button/link.
• Further styling.

One interesting idea I've been thinking of is maybe we could add gist embed to the forum.

just a few options I quickly looked up:

https://moebiusmania.github.io/gist-embed/
https://github.com/moebiusmania/gist-embed

https://github.blog/2008-07-24-embedded-gists/