User:Zoombie/GW stuff

From GodWiki
Jump to navigation Jump to search

Welp! I guess I've gotten myself deep into things now that I'd need some list to remind myself of stuff

Nested collapsible toggle button bug

  • Link to sandbox: Sandbox
  • Screenshots: Default state Closed Reopened
  • Current Findings: In a nested collapsible, the child collapsible's toggle state follows the parent collapsible's toggle state regardless of its own toggle state. What happens is if the parent collapsible is by default expanded and the child collapsible is collapsed, when the parent collapsible is collapsed then expanded again, the child collapsible's toggle will show collapse even if it isn't expanded. See Sandbox or screenshots above for illustration.
This seems to be an issue due to the old MediaWiki version GodWiki is using. Relevant link
  • Possible Solution(s): Report to devs. Can't do anything on this end.
  • Status: Reported to devs. Fixed now by the wiki version update.

Zoombie:

Hello, devs! Someone told me you might be interested in this. I was tinkering with making nested collapsibles in GodWiki a while back. I notice that there's a bug in how the collapse/expand toggle is displayed. What happens is if the parent collapsible is collapsed, the child collapsibles all inherit the parent's toggle state regardless of their own toggle states. If I click the parent collapsible to collapse and then expand again, the parent collapsible's toggle should display 'collapse' and the child collapsible should display whatever toggle state they are in but this is not happening. The child collapsible also displays 'collapse' even if it should display 'expand'. This happens whether I use tables or divs for my collapsibles. I did some research and it says that this could be due to having an old version of MediaWiki. I have a working sample on my wiki sandbox that you can check. There's also a link there to the help topic regarding wrong toggle states in nested collapsible. Here is the link to my sandbox: https://wiki.godvillegame.com/User:Zoombie/Sandbox This might just be a tiny cosmetic visual bug but I'm still reporting this because this is really easy to overlook and this might have been going on for a long time. Also, the current MediaWiki version that GodWiki is running on is about to reach its end-of-life. Link: https://www.mediawiki.org/wiki/Version_lifecycle The next lifetime support version (1.35.x) has the VisualEditor extension bundled which I hear some people have been asking for. Thanks for taking the time to read this.

Update: Got a reply.

Godville:

Yes, we do plan to update Godwiki the next LTS version sometime in the future and hope it will address the "collapsible" issue you mentioned as well. Thanks for the detailed feedback!

What does {{Spacer}} do?

  • Link to sandbox: None yet. Effect can be seen in this page. See screenshot below and Help thread for more details.
  • Screenshots: Screenshot
  • Current Findings:
Stumbled upon this while trying to fix the layout on the top part of my Userpage. Documentation states that it is for layout purposes for floating elements. Currently, it is attached at the end of the Infobox template as seen in this screenshot. Might need to find out which other templates use this.
Update: Found a lead here: Talk:Main_Page/Archive#Fixes_for_mobile_content_layout but I have no idea what to do with it.
Update: I think it might be fulfilling the same purpose as a clearfix. Relevant links: [1] [2] [3].
This is a bit worrying since {{Spacer}} is deeply embedded. It is transcluded/embedded on {{Infobox}}. {{Infobox}} is then used as a base for {{Usergod}} and using {{Usergod}} on a page provides no way (that I can find) to access {{Spacer}}. And I am reluctant to touch templates right now.
I guess the question now becomes: Is {{Spacer}} still necessary to have in the templates it is in? (Answer: Yes. I just don't need it on my page because I am using flexbox and my page is structured in an unconventional way.) There is {{Clear}} that seems to have a similar function. What is the difference between the two other than width? (Answer: Both of them basically brute force the layout to behave properly and act as a buffer between floated elements and other page elements. They essentially make sure floated elements play nice with other page elements and doesn't invade their space and vice versa. The difference can really only be seen on wider screens. {{Clear}} takes up the whole width of the screen and pushes other page elements below it. It basically makes sure any other page elements after it do not take up any space beside the element it is attached to. {{Spacer}} doesn't take up the whole width of the screen and instead takes up only part of it (i.e. the width of the Infobox it is part of) so that other page elements can still exist beside the floated element (i.e. Infobox). Using {{Clear}} on Infobox would break page layout on desktop.)
More stuff that might shed some light on this problem: [4] [5]
I feel like this is an issue with the way the jquery bundled with the mediawiki software handles collapsibles. Hopefully, the update will fix this issue.
  • Possible Solution(s):
    • Remove {{Spacer}} from Infobox template. (This might break the whole site)
      Update: It did. It broke a lot of things. (β€’βŒ“β€’ ) Not gonna do this again.
    • Rewrite templates that use {{Spacer}} to remove the need for it. (This might be a better approach and this might lessen technical debt for future contributors to inherit. This is a lot of work though and I've yet to grasp wikicode to read and edit templates properly.)
    • Just hardcode everything here. (This gives me a lot of control in my page but will do nothing for anyone who might have this same problem in the future.)
  • Status: Partially fixed on my page with this. It's still there (screenshot) but the extra <div> is containing it so it doesn't mess with the flexbox. This is how it's supposed to look like without {{Spacer}}.
Need to see now if it can be implemented site-wide so that there's no need for {{Spacer}}.
Completely fixed on this page now. I substituted the template and added | spacer = no to the generated code. This added a lot of wikicode that I don't really need to my page though so maybe hardcoding this might be a better move instead. πŸ˜…

Main Page layout alignment

There seems to be an alignment issue regarding contents of the Featured Article section and the Introduction to the Godwiki section. (Please see screenshots above.) Sandbox version has manual line breaks <br> inserted between each section header and their content to force the contents one line down in order to not overlap with the span containing the collapsible toggle. Deployed version does not have those manual line breaks. Regardless, there is some strange alignment going on. This is not noticeable much on mobile as the sections are stacked. Laying down findings here to make it easier to organize my thoughts.
This looks like a margin issue. Section headers in wikis use the <h2> tag which has the property margin: 1em. The unit em depends on the font size of the element being styled. (See this link for more info on px, em, and rem. It also has interactive examples to play around.) (See also this link for default CSS properties of headings.)
  • Possible Solution(s):
    • Adjust the font size of the section header in the Featured Article section and match it to the font size of the paragraph in the Introduction to the Godwiki section. Simply changing or removing the margin property in the section header in the Featured Article section unless the margin property of the first paragraph in the Introduction to the Godwiki section is also modified. (See the following screenshots for attempts via Chrome DevTools: [6] [7]. Note how the contents of both sections still do not align when only the margin property of the section header in the Featured Article section is modified.)
    • Alternatively, calculate how much the margin for the section header in the Featured Article section should be adjusted to. (Not sure how feasible this is or if it is going to be accurate.)
  • Status: Solved. Possible solutions written above were not entirely correct. Changed ==Title== to <h2 style = margin: 0;>Title</h2> to remove margin from h2 and added the extra blank line on start of Featured Article content to match the code on Introduction to the Godwiki.

Pages Needin' Fixin'

  • Link to sandbox: Sandbox2
  • What is this?: This is a list of pages that needs some fixes done. Fixes mostly consist of missing templates, missing categories, and some typos and formatting. It will not include stubs or articles needing pictures or any such categories as those are already listed somewhere. Most fixes here are minor so this list could be useful for teaching newbies how to format and edit things in the wiki and give them some real hands-on experience on those things.

Collapsible diary entry

  • Link to sandbox: Sandbox
  • What is this?: I'm developing a way to make the diary template collapsible. See Sandbox for comparison between current design and my design. There are also a lot of options for the collapse / expand toggle in that sandbox.

Ideabox template

  • Link to sandbox: Sandbox and the template
  • What is this?: Just a template for simulating the ideabox look in GW. This is just me messing around with wikicode and feeling my way through making templates. Features include strict variable checking so any non-numerical input on the votes will not show up, and the idea and category is included in the layout. More info available on the template page.
  • Notes on usage: Include <nowiki></nowiki> when passing an argument to text for ideabox variables (specifically gender variations) to render properly.

Moving pages issue

  • Current Findings:
WardPhoenix brought up this link when I asked about moving pages. I also encountered it when trying to fix 101 Headed Dalmation to 101 Headed Dalmatian. The note on the move page states:

Note that the page will not be moved if there is already a page at the new title, unless it is a redirect and has no past edit history. This means that you can rename a page back to where it was renamed from if you make a mistake, and you cannot overwrite an existing page.

So I checked the history of 101 Headed Dalmatian and it's not empty. There are 4 entries in it. It seems that the contents of the page's history did not move to the new page. The same thing happened with One-And-A-Halfling and One-and-a-Halfling. I don't know if there are other pages with the same problem and I could be wrong about this but based on the dates of previous moves of the pages mentioned, this seems to happen to pages moved before 2016.
Possible Solution(s): Ask devs to delete the old page so we can have a fresh start so to speak?
  • Status: Unsolved

CSS triangles

  • Link to sandbox: Sandbox
  • What's this?: Some test on making triangles using pure CSS. Handy for decorations.
  • Notes on the design and code: The number of triangles in my page right now is the maximum number that can fit in a single line I think. (It takes up the whole line in my desktop and mobile. Not sure if it's the same for other people's devices.) The size of the triangles also automatically adjusts to the size of the screen (i.e. the triangles are smaller on mobile and bigger on desktop) because I'm making CSS do math stuff. If the triangles start wrapping to the next line, you can remove some of them and they'll automatically adjust so that they're always evenly spaced. Shadows, highlights and gradients don't work. The triangles can also be used for links or buttons though it does not support text inside it and making text appear beside it is more work that it is worth it.

Wiki News

  • What's this?: A Wiki News idea I had while I was thinking about how to make an announcement on the Wiki so that people are aware of the new Projects page.
Taken from the Main Discussion

The Wiki News section (New Articles, New User Pages, New Images) will need a bit more work before it can be deployed. It will be best if it has a curator (or curators) who can create nice blurbs for articles and stuff since the auto-generated stuff looks terrible. (Something like this would be nice. It's linked to the homepage that looks like this.) If someone wants to take that on as a project, they are free to do so. At the very least, the list can be auto-generated easily (I can teach people how to modify the code so that it will only show a certain period of time.), which should make things easier as they wouldn't need to sift through Recent changes.

The following is from the Sandbox: Just realized that we can create a banner every time there's a new development that says: " Wiki News: We now have insert new development here. insert brief explanation." that looks similar to how the message notification looks. This should make it highly visible. It's similar to the event banner that was used on JanuWiki and SummerWiki except shorter.
Testing banners:
Wiki News: We now have a Projects page! Come check it out and see what the community is up to!
The Projects page is now up and running! Come check it out and see how you can help!
Expanding on the idea above, a wiki news of recent new pages/articles at the bottom of the Main Page might be a future feature. I mean, who doesn't like seeing their work recognized? (See this link and this link for more details.)
Testing the wiki news for new pages idea: (collapsed because it turned out to be long)
New Articles for the month of March
New User Pages for the month of March
New Images for the month of March
  • Notes on transclusion code:
{{Special:Newpages|namespace=0|offset=20210301000000|dir=prev|limit=100}} means show up to 100 (limit=100) (The default number of entries is 50. This can be increased if need be, up to 5000.) new pages created in the main namespace (namespace=0)(This is the place where most of the wiki articles reside.) from March 1, 2021 up to the current day (offset=20210301000000) (date format is yyyymmddhhmmss). dir=prev is added to make sure it shows the entries made after the offset. Without this, it will show entries before the offset.
{{Special:Newpages|namespace=2|offset=20210301000000|dir=prev|limit=100}} means show up to 100 (limit=100) (The default number of entries is 50. This can be increased if need be, up to 5000.) new pages created in the User namespace (namespace=2)(This is the place where User pages reside.) from March 1, 2021 up to the current day (offset=20210301000000) (date format is yyyymmddhhmmss). dir=prev is added to make sure it shows the entries made after the offset. Without this, it will show entries before the offset.
{{Special:Newfiles|offset=20210301000000|dir=prev|limit=100}} means show up to 100 (limit=100) (The default number of entries is 50. This can be increased if need be, up to 5000.) new files uploaded from March 1, 2021 up to the current day (offset=20210301000000) (date format is yyyymmddhhmmss). dir=prev is added to make sure it shows the entries made after the offset. Without this, it will show entries before the offset.

Projects page

  • What's this?: A Projects page to collate and consolidate wiki development effort. Right now, different people are working on different things on their own and making notes in their own user pages. This is disorganized and user pages cannot be edited by others. This also means that individual projects are not very visible and it is difficult to figure out what has happened and what is happening in wiki development. See this talk thread for the proposal. This will also hopefully give newcomers an idea of what else can be done aside from making new articles and uploading photos, and give them a place where they can try out different ways of contributing to the wiki from making minor edits to copyediting to making rewrites, etc.
  • Construction Notes:
Initial Page Layout
  • Explanation of what the Projects page is about
  • Instructions on how to start a new project
  • Links to sections of the page for the benefit of mobile users who have no TOC with a brief description of each section
  • Section 1: Permanent Projects
    • This section is for wiki-wide maintenance projects that are open ended and will go on indefinitely. Projects in this section will mostly be a compilation or list of tasks, and wiki articles and files/images that need to be fixed one way or another. Examples would be: a list of pages that need formatting and SPaG fixes, a list of pages that needed to be marked (deletion, stub, picture needed, rewrite), a list of pages that need to be moved or redirected, data gathering projects, etc.
  • Section 2: Ongoing Projects
    • This section is for one-off projects that can be completed at a reasonable amount of time. Projects here may be long or short and may be done by either a single contributor or multiple contributors. Examples would be: a new template, a new category, a content drive, a rewrite project, an interlinking project so that articles are linked to some other article, etc.
    • Projects here may be abandoned and tagged as such with the reason for it's abandonment indicated. Abandoned projects will be moved to the bottom of the list (or maybe in a separate table) and may then be picked up by another contributor at a later time or may remain abandoned permanently if the project is deemed unnecessary.
    • Completed projects will be moved to the Completed Projects section.
  • Section 3: Completed Projects
    • This section is for completed projects. This section is for archival purposes to show what has been developed in GW and hopefully give future contributors an idea on what direction to take in developing GW. If this section gets too long, past projects can be archived.
About the main Projects page and How it will work
  • The Projects page will be housed under the GodWiki namespace, not the main namespace since this is not a wiki encyclopedic article. It's mainly a list of ongoing wiki maintenance and development works and tasks. The GodWiki namespace is the Project namespace. (See this link for more info.)
  • Each section will contain a collapsible table where projects are listed. Proposed table headers: project title (the name of the project; should be descriptive of what the project is about at first glance), project description (short description of the project to give possible contributors an idea of what it is about), status (ongoing, abandoned, completed). Sub-headers or subsections may be created if the list gets too complicated and disorganized.
About individual project pages
  • Every project page will be a subpage of the main Projects page. Project pages can also have subpages and a sandbox if the scope is wide like a grand wiki rewrite or a content drive like JanuWiki and SummerWiki. This is to keep these pages off the main namespace and to tie them into a single page for easier organization.
  • Ideally, a project page will contain an overview of the goal of the project, detailed instructions and tasks to achieve the project's goal, and, if applicable, a link or list of links to the focus of the project (if it pertains to existing articles) or a link to the project's sandbox (if it pertains to the creation of a new thing). Additionally, a list of contributors may be included at the bottom of the project page.
  • Project contributors are expected to maintain and update the projects they work on.
  • Discussions of the project should remain in the project's talk page.
Miscellaneous notes

Links and other resources

  • Recommendations for mobile-friendly wiki articles [14]
  • Advance wiki typesetting / text formatting [15]
  • Collapsible elements on MediaWiki [16]
  • CSS tricks for CSS examples and tips and tricks [17]
  • W3schools for some basic stuff and list of CSS properties [18]
  • MDN Web Docs for more reference on CSS properties [19]
  • caniuse for support tables for CSS properties [20]
  • nifty one line layouts [21]
  • codepen for playing around with front-end (HTML, CSS, JS) coding [22]
  • typography stuff [23]

Random Notes

  • Confirmation of Motorcyclops' existence: screenshot
  • Use min-width: 7em for buttons when they are in columns to prevent borders from overlapping when viewed on narrow screens.
  • Just realized how much GW is tied to the game. It's possible they even use the same database. At the very least, GW database is linked to the one the game uses. How else would you explain the fact that only monsters with GW articles have blue links in the diary while those with no GW articles don't get blue links? This may be wrong. I assumed that the game automatically links to GW. This does not seem to be the case.
  • Copied from wikipedia: [24]

    One way to inspect the core CSS and JS files is to inspect a page with Web development tools while loading any Wikipedia page with ?debug=true URL parameter (this will separate different CSS files, prevent minification and preserve comments).

  • APIs are fun and interesting.
  • How the browser loads a table: [25]

    When a web browser displays a table, it looks for the opening <table> tag and closing </table> tag. Nothing will be rendered on the screen until the browser finds the closing </table> tag. As a result, if you put all your web content into a big table, no matter how many tables you have inside that big table, users will not be able to see anything displayed until browser reads all the way to that big table's </table> tag.

  • On buttons in GW:
Images as buttons:
Pros:
  • Easiest to use. Making an image point to a link is built-in. No need for complicated codes.
Cons:
  • Not really customizable with coding only. You'll have to remake and re-upload the image if you want to change something.
  • Heavy file size
Emojis as buttons:
Pros:
  • Also very easy to use. Emojis are basically texts. Removing the underline that comes with links is achievable with a little bit of code.
  • Lightest file size. It's a single character of text.
Cons:
  • Not really customizable with coding either.
  • Some emojis don't render on mobile.
Pure HTML and CSS buttons:
Pros:
  • Lighter file size than images.
  • Can be customized with coding only. Images and emojis can also be incorporated in the design if necessary. It's technically the backbone of wikicode.
Cons:
  • Requires coding skills. Can get complicated real fast depending on the design.
  • Quick note: collapsible does not work on mobile now. D: Update: Found a lead. Mobile uses collapsible-heading and collapsible-block class instead of mw-collapsible and mw-collapsible-content, respectively to auto collapse sections if you don't have Expand all sections turned on in the settings. Not sure if this can be applied to desktop or we'll all be forced to use the Minerva Neue skin just to keep things consistent.

Dark Mode Experiment

  • What is this?: Just an experiment with making dark mode and changing wiki layout using Userscripts.
  • Updates:
7 March 2021: Removed everything, left only the content (screenshot)
2 April 2021: Approaching from a different angle, moving stuff first before darkifying everything (screenshot)

What have I gotten myself into? (β€’βŒ“β€’ )