General planning and discussion.

[Megalomaniak]

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.

[TwistedTwigleg]

Good question and to be honest, I do not know.

---

When I was prototyping the theme I just set out to make the color scheme the same. However, when I was initially prototyping I found the color scheme at GodotEngine.org didn't really provide enough colors to go by. That's why I primarily use the darker purple/blue in the prototype, because that way the lighter blues would contrast better.

That said, GodotEngine.org doesn't follow that color scheme, at least not everywhere. I primarily tried to copy the look of the main page, as I figured that would be the page most would be familiar with.

So, I really do not know to be honest, sorry. I didn't really have a vision in mind when I started working on the theme, other than using GodotEngine.org as a reference.

---

Perhaps we should view it like this: Follow the GodotEngine.org theme as a reference, but if we agree that something else looks/feels/etc better but doesn't follow GodotEngine.org, then we add it anyway.

That way we can make changes that make the forums unique that allows it to not be a carbon copy while still being similar enough that it will hopefully be familiar.

For example: The buttons being rounded, instead of rectangular like in GodotEngine.org, were just part of the theme I modified. If we like the rounded look better than the rectangular, then I see no reason to change it just because it doesn't follow the style set in GodotEngine.org.

That said, if no one has a preference either way and someone wants to change it to be more in line with the reference, then that's fine too.

(BTW: I'm just using the buttons as an example. Personally I like the rounded look slightly better than the rectangular look, but not enough that I'd care either way. I'm just trying to think of an example off the top of my head)

The only problem I can see with this method is what happens when there is a disagreement on what should be added? Say someone worked on adding something cool and a small handful of people really like it (maybe including one/both of us), but the majority doesn't?

In that situation, it would be good to have something to point to and use as a guide so we can hopefully avoid getting feelings hurt if we need/have-to reject a change.

I dunno. What are your thoughts on the matter? I'm cool with most anything really, whether that be something like I wrote above, trying to replicate GodotEngine.org exactly, or something else entirely.

[Megalomaniak]

As far as the button shape I'm in favor of copying the website and making them rectangular, however that is mostly because I think that if we are going to replicate an element we might as well replicate it fully.

As far as adding new things to the theme, if necessary(/functionally useful) yes, we should consider doing so.

The only problem I can see with this method is what happens when there is a disagreement on what should be added? Say someone worked on adding something cool and a small handful of people really like it (maybe including one/both of us), but the majority doesn't?

In that situation, it would be good to have something to point to and use as a guide so we can hopefully avoid getting feelings hurt if we need/have-to reject a change.

The way I see it godotengine website would be the reference/guide so if there is a precedent in there , we should probably follow it. If there is nothing in there to offer guidance then we should just try to add something new so that it would fit thematically and be as consistent as possible, beyond that it probably shouldn't be an issue.

Ultimately there may well be a case that we just can't anticipate and we will just have to try and figure out then.

[Megalomaniak]

Also I probably should have written in OP that I'm mostly wondering about what to replicate just for the "launch theme" if that makes sense. Any longer term plans than that would probably be a waste of time at this stage.

That is to say a well defined target would probably be best to have, but we should limit the scope for now as much as we can.

[Megalomaniak]

Basically for our "style-guide" the pages I would pick are: Buttons and panels: https://godotengine.org/download/windows

Discussion opening post: https://godotengine.org/article/godot-3-1-released This one has got some code tags: https://godotengine.org/article/simplex-noise-lands-godot-31 etc.

in case we chose to implement some plugin for projects/gallery listing: https://godotengine.org/community

I feel the last one is a good example of what should be left as a potential future development and cut out of initial release targets so as to limit scope.

[TwistedTwigleg]

As far as the button shape I'm in favor of copying the website and making them rectangular, however that is mostly because I think that if we are going to replicate an element we might as well replicate it fully.

Sounds good to me!

The way I see it godotengine website would be the reference/guide so if there is a precedent in there , we should probably follow it. If there is nothing in there to offer guidance then we should just try to add something new so that it would fit thematically and be as consistent as possible, beyond that it probably shouldn't be an issue.

Ultimately there may well be a case that we just can't anticipate and we will just have to try and figure out then.

Good idea. That works for me. I just brought it up because I thought it could be an issue, and so I figured it was better to mention it while I was thinking about it. It is probably unlikely we will encounter any issues like I mentioned, at least in the short term.

---

I’ll take a closer look once I’m able, but here’s my thoughts as I quickly looked at the links/reference-pages:

For the buttons, which ones? The dark blue ones (32/64 bit buttons) or the “also available” on Steam/Itch.io buttons? Or should we use both? Also, what about the tabs at the top of the website?

For the panels, I’m cool with the white on the slightly gray background like in the link you posted.

I’m confused on the discussion opening post, or rather I’m confused on what to be looking for. By discussion opening post, do you mean the initial post in a user made topic/discussion? If so, I am not 100% sure we can change just the opening post of a discussion style-wise. I’d have to double check to be sure though. We could make all topic posts though.

The code tags should be easy enough to replicate. I think the forums is using a plugin for styling code if I remember correctly. We might need to disable it or see if it has CSS we can modify.

For the projects/gallery, I agree on both that it would be a good reference, and that we should probably leave something more complex like that for later.

All in all, I think the pages you picked are good references that we should use. As I mentioned above, I’ll take a closer look once I’m able and I’ll see if I can find some posts containing other elements we may want/need to use as reference.

[Megalomaniak]

For the buttons, which ones? The dark blue ones (32/64 bit buttons) or the “also available” on Steam/Itch.io buttons? Or should we use both? Also, what about the tabs at the top of the website?

They are both stylistically the same, just sizes are different, I'd say the size makes the "also available" a special case though(and technically it is just a href link where the download buttons are divs rendered as buttons. In actuality for the sake of supporting accessibility divs shouldn't be used as buttons at all, since that can be an issue for screen-readers for an example).

I’m confused on the discussion opening post, or rather I’m confused on what to be looking for. By discussion opening post, do you mean the initial post in a user made topic/discussion? If so, I am not 100% sure we can change just the opening post of a discussion style-wise. I’d have to double check to be sure though. We could make all topic posts though.

See the prototype theme.

The code tags should be easy enough to replicate. I think the forums is using a plugin for styling code if I remember correctly. We might need to disable it or see if it has CSS we can modify.

Should be no problem, the plugin just deals with the syntax highlighting IIRC, which is desirable IMO.

[TwistedTwigleg]

They are both stylistically the same, just sizes are different, I'd say the size makes the "also available" a special case though(and technically it is just a href link where the download buttons are divs rendered as buttons. In actuality for the sake of supporting accessibility divs shouldn't be used as buttons at all, since that can be an issue for screen-readers for an example).

Ah okay, that makes sense. I did not realize they are more or less the same.

In theory once we have one of the buttons done, we have the other with some minor CSS. Though I think if we add a style like the “also available” buttons, we should avoid using divs if possible to better support screen-readers. Perhaps we can get around using divs with CSS.

See the prototype theme.

Will do!

Should be no problem, the plugin just deals with the syntax highlighting IIRC, which is desirable IMO.

Cool! I definitely try to keep syntax highlighting if possible, since it makes code much more readable in my opinion.

[Megalomaniak]

I know we agreed that we should try and limit scope, but I wonder if we should try to port a wordpress plugin to vanilla so we could implement the patreon tracking widget for the header to further bring the top nav in line with godotengine.org?

I'd say this is something we should leave as an optional last task, call it a bonus round perhaps? Certainly would be awesome to achieve that though. Plus the plugin would likely be of interest to other vanilla users too.

I think this might be what they use for the godotengine.org wordpress: https://wordpress.org/plugins/goal-tracker-for-patreon/

but there are also other plugins: https://wordpress.org/plugins/tags/patreon/

[Megalomaniak]

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. As far as discord link goes you could then decide for yourself if you'd rather place a link somewhere in the new theme/layout or if you wish to investigate some sort of embed opportunities for it too..? I don't know if there actually are any though.

[TwistedTwigleg]

I know we agreed that we should try and limit scope, but I wonder if we should try to port a wordpress plugin to vanilla so we could implement the patreon tracking widget for the header to further bring the top nav in line with godotengine.org?

Certainly could be interesting. I wonder if we can talk to Akien and get the source for the plugin/widget they are using directly. It might be easier that way.

Regardless, I cannot imagine it would be too difficult to port a plugin over, especially depending on which plugin we decide to port. It is definitely something to look into.

I have to admit, after my experience with Patreon I’m a little hesitant, but if we are trying to replicate the site then adding the plugin/widget would make sense.

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.

Porting those links is probably a good idea. I have no idea on the Discord channel, though I could find out. I have an account I can use, it would just be a matter of doing it.

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

Interesting. Definitely could be interesting to look into.

@TwistedTwigleg I'd be willing to take the kiwi irc as my task if you are OK with taking the discord as yours. As far as discord link goes you could then decide for yourself if you'd rather place a link somewhere in the new theme/layout or if you wish to investigate some sort of embed opportunities for it too..? I don't know if there actually are any though.

Sure! If you are cool with it, then I’m cool with it.

I’ll look into seeing if it is possible to embed discord first and if there is no viable embedding opportunities then I’ll use a link instead.

---

In the future we may want to look into making a ‘chat’ panel with tabs or something if we embed both Kiwi and Discord. Otherwise I’m not 100% sure how we’ll fit them both on the site without making it seem cluttered.

That said, we can deal with that if/when we get there.

[Megalomaniak]

In the future we may want to look into making a ‘chat’ panel with tabs or something if we embed both Kiwi and Discord. Otherwise I’m not 100% sure how we’ll fit them both on the site without making it seem cluttered.

That said, we can deal with that if/when we get there.

Sure, deal with it when we get there, these too can remain lower priority for now. And probably should. But it was worth bringing up, and better now rather than forget about them later.

[TwistedTwigleg]

As far as Discord stuff goes, it looks like it is possible to embed a Discord chat room though a service/platform called TitenEmbeds. It appears how it works is that it uses a bot and their servers to provide the functionality.

However, using TitenEmbeds would require the people running the Discord channel to allow the bot, along with some other requirements (I think). It also means we’d have to rely on their servers working, as I think they host the bots (or if we need to host the bot, I cannot do it on my server, as it does not support Python).

I found a nice custom Discord iframe widget that we could use, but we’d still need the a key from whoever runs the Discord. Personally, I think this might be the way to go, especially since all we’d need is a key and we wouldn’t have to rely on a 3rd party service. Unfortunately, the widget doesn’t really work nicely on mobile.

Regardless of which embedding method used, it will require some help from the Discord owner. I suppose the next thing to look into is seeing if I can find who runs the Discord, and ask for their assistance.

[Megalomaniak]

I found a nice custom Discord iframe widget that we could use, but we’d still need the a key from whoever runs the Discord. Personally, I think this might be the way to go, especially since all we’d need is a key and we wouldn’t have to rely on a 3rd party service. Unfortunately, the widget doesn’t really work nicely on mobile.

Yes, that seems preferable. Worth considering if we can find out who runs the discord and if they seem reliable. No point putting the work/time investment into it otherwise.

Not sure how well iframes work on mobile anyways, considering that iframes are actually deprecated anyways. edit: seems I misrecall. HTML5 did retain support with a few new features added to them even. https://caniuse.com/#search=iframe

[Megalomaniak]

Right and one thing I had noticed was that the link from forums is different from the discord link on the godotengine.org community page. That's a bit odd to say the least, but with the amount of fracturization within the godot community it is not really surprising if there's more than one.

[Megalomaniak]

Right so I don't know what the supposed mobile issue with the discord embed on mobile is, but looks like the widget uses css animation and it could be done more optimally: https://www.youtube.com/watch?v=N5EW4HnF6FU

I'm guessing the actual issue though is that the widget seems to make use of mouse hover, which is obviously an issue on mobile, so either we would use media queries to not render the widget on mobile, or we could implement some js tapping function to expand the widget on mobile. or we could even use the media queries so that on mobile it would simply be expanded in the first place.

The only issue with the last one media queries I can think of is that some mobile devices(tablets for an example) would possibly have large enough display resolution to be a problem anyways.

[TwistedTwigleg]

Right and one thing I had noticed was that the link from forums is different from the discord link on the godotengine.org community page. That's a bit odd to say the least, but with the amount of fracturization within the godot community it is not really surprising if there's more than one.

Huh. I wonder which we should add then. I suppose we could add both, or maybe have one embedded and have the other just a link... hmm, something to think about.

Right so I don't know what the supposed mobile issue with the discord embed on mobile is, but looks like the widget uses css animation and it could be done more optimally: https://www.youtube.com/watch?v=N5EW4HnF6FU

I'm guessing the actual issue though is that the widget seems to make use of mouse hover, which is obviously an issue on mobile, so either we would use media queries to not render the widget on mobile, or we could implement some js tapping function to expand the widget on mobile. or we could even use the media queries so that on mobile it would simply be expanded in the first place.

The issue is the mouse hover. It makes it impossible to select anything on mobile.

As for the css/ media queries, I do not know what would be best. I’m not too worried about the animation side, we could probably just disable it, but getting it to work on mobile might be harder. Maybe we could make it expand on a tap/button-press instead of a mouse hover.

Discord provides a widget that, I believe, shows how many are online and maybe even the names of each chat room. I think there are less features than the widget I linked above, but that might be a good thing. I will have to experiment. Worse case we just use some good old links instead.

I might make my own Discord group for testing purposes, that way I can play around with different options. I’ll also need to find who is in charge of each Godot Discord and see if I can get their permission and widget key.

The only issue with the last one media queries I can think of is that some mobile devices(tablets for an example) would possibly have large enough display resolution to be a problem anyways.

Yeah. There might be a way to tell whether a browser is viewing the mobile version of a site, which we might be able to use. If not, then perhaps we could have the widget fully expanded if the site is under a certain size, or just a normal button until the screen is big enough to almost certainly be a desktop.

Right now I plan to get something working on desktop (medium/big screen) and then figure out what’s needed for mobile. I’m probably over complicating things. 😅

[TwistedTwigleg]

Okay, I think I got the Discord embed working, more or less. Now all I need to do is get permission from the Discord owner(s) and the widget iFrame URL. I guess I need to write to Akien? I dunno, but I'll find out.

To get around the hover issue, I found this article https://css-tricks.com/touch-devices-not-judged-size/ that shows how you can tell whether a device has the capability to hover or not. Using that, I was able to make it where the Discord widget is fully extended when the device cannot hover, and when the device can hover, it will expand.

I also removed the CSS animation, since I figured there was little reason for it to be there. The widget changing sizes when the cursor is hovering over doesn't really seem jarring or anything without the animation, so I left it out.

I'll commit the changes and push them to my working branch once I get the iFrame URL. I'm still not 100% sure what to do with the other Discord channel, the one the forums currently link to. Maybe I'll add a link or something under the embedded Discord widget.

[Megalomaniak]

OwO

Think I might have found it... https://www.patreondevelopers.com/t/support-me-on-patreon-button/102/5

[TwistedTwigleg]

OwO Think I might have found it... https://www.patreondevelopers.com/t/support-me-on-patreon-button/102/5

Nice! 👍 Definitely something to look into in the future.

---

Do you mind checking the Discord widget? I just pushed a commit that adds the widget and necessary CSS, but I'm not 100% sure on the widget placement. Right now it is above the Vanilla sidebar stuff, but I'm wondering if it would be better below instead.

I should probably make PR that merges the recent changes we've made into master at some point, but for now I want to wait until we are ready.

[Megalomaniak]

I'll look at how you have embedded it howerev worth pointing out that we could probably try to simply use vanilla's pockets for this.

Best solution however would likely be to turn the widget embed into an addon with a dashboard setting page where you can supply the channel key or whatever...

Meaning it would be separate from the theme addon then.

[Megalomaniak]

Ok, I think it should be fixed in my branch now, pull and test.

[Megalomaniak]

Mind I moved it to the end, but if you are browsing a discussion there's the whole categories list in the sidebar just in front of the discord widget now.

edit: we could probably create a button similar to the hamburger menu(that appears on mobile) to solve it. So it would open and collapse again on button press or so...

edit2: while at it, we could even implement a button to toggle the expansion and collapse of the discord widget with too. But perhaps this is over complicating it too much for now.

[TwistedTwigleg]

I'll look at how you have embedded it howerev worth pointing out that we could probably try to simply use vanilla's pockets for this. Best solution however would likely be to turn the widget embed into an addon with a dashboard setting page where you can supply the channel key or whatever...

Good idea. I'll look into it and see about moving it to a pocket instead.

In the picture you posted, is that what it looks like on your machine? If so, then I guess I need to dive into some CSS stuff and see if it is fixable.

Ok, I think it should be fixed in my branch now, pull and test.

Will do!

edit: we could probably create a button similar to the hamburger menu(that appears on mobile) to solve it. So it would open and collapse again on button press or so...

Good idea. I think we can probably use a method similar to what we're using for the navbar in the Godot header. It should be, relatively speaking, easy enough to accomplish. I'll play around with it and see what I can do.

edit2: while at it, we could even implement a button to toggle the expansion and collapse of the discord widget with too. But perhaps this is over complicating it too much for now.

Hmm, I might be able to figure this out. That said, and as you mentioned, that is probably over complicating things right now.

Ideally we just need to get the forum ready for migration first and foremost. We can always add stuff as we go along.

[TwistedTwigleg]

Okay, enabled the Pockets plugin and moved both the HTML and CSS for the Discord embed into custom pockets. That way they are easier to maintain, separate from the theme, and way easier to position.

I had to change the CSS a little bit because the & character seems to be a LESS specific feature. I made two pockets, both in test mode, to handle the discord embed in mobile and on desktop.

---

Now to see about collapsing the sidebar!

Edit: Okay! It is done.

It involved manually adding all of the models the panel asset normally adds in default.master.tpl, but with some careful if statements placed strategically, the categories and tag cloud modules are now in collapsible div elements! 😎

The code is a bit of a mess, but now there are buttons to toggle the visibility using the same method as the toggle for the navigation links on the header.

Also, I added the styling needed for the buttons, keeping them as close to the styles of each theme, and added box shadows to both the categories list and the tags in the tag cloud.

[Megalomaniak]

Mkay, I'll have to take your word for it since the buttons aren't working on my end. Unless you haven't pushed all the changes yet, I suppose. In which case of course it wouldn't work on my end yet.

And needless to say the pocket embed doesn't exist on my end since I can't magically pull it. A simple gist might work as a way to share it tho. ;)

---

Also, this discussion issue is getting a bit long and off-topic. Might want to open more issue specific discussions.

[TwistedTwigleg]

Mkay, I'll have to take your word for it since the buttons aren't working on my end. Unless you haven't pushed all the changes yet, I suppose. In which case of course it wouldn't work on my end yet.

Which buttons are not working? The ones for collapsing the categories and tags?

The buttons that hide/show the buttons and tags menu in the side bar work using data-toggle and data-target fields in the default.master.tpl file. In theory they should work so long as bootstrap is working, but theoretical and actual can be very different things.

Side note: I fixed the issue where the side panel wasn't appearing in discussions. Now it should be working everywhere.

And needless to say the pocket embed doesn't exist on my end since I can't magically pull it. A simple gist might work as a way to share it tho. ;)

You can find the pocket embed on the test forums (right now it is in test mode, so only Admins can see it). That said, sharing it through a GitHub gist is a good idea! That way others can help contribute as well.

Also, this discussion issue is getting a bit long and off-topic. Might want to open more issue specific discussions.

Sounds good. That way we can also close issues as we add things. I suppose we should close this issue then?

[Megalomaniak]

OK, I disable the testing toggle, the whole point of the testing server is for users to be able to test too, we have localhost for testing ourselves after all.

[Megalomaniak]

Right, so it seems to be the tags button only that isn't yet working. Ultimately I was thinking of moving the tags to the top of the content section, just below the title. And making it expandable/collapsible via an arrow before/next to the 'tags' label.

[TwistedTwigleg]

Right, so it seems to be the tags button only that isn't yet working. Ultimately I was thinking of moving the tags to the top of the content section, just below the title. And making it expandable/collapsible via an arrow before/next to the 'tags' label.

Strange. I wonder why only the tags are not working. As far as changing how and where the tags go, that sounds like a good idea.

I think I’m probably not going to be making any more changes today. Maybe tomorrow I’ll merge our work branches together and then merge that into master.

---

This is unrelated, but I’m not sure where else to put it: For the 1.0.0 forum milestone, can we change the finish date? Can we move it to another day, like maybe May 5th or April 27th? I’ve made commitments on the 4th of May and I cannot really change them and will be gone for the majority of the day.

[Megalomaniak]

Yeah, the date can be changed just fine, I just set it to something that should be sufficiently far away , if not even too far away. Hopefully we can make the actual move sooner!

[Megalomaniak]

So yeah, I keep wondering why the tags wont expand... I haven't yet installed the plugin. Keep forgetting to. Well, now I have a reminder I guess. For now will make my last commit of the day an head to sleep. Tomorrow I'll install the tags extended plugin and test if it works.