User talk:OOeyes

From 100% Orange Juice Wiki
Jump to: navigation, search

Media Queries[edit source]

Hello OOeyes, I hope it's possible to contact you through this Wiki. Are media queries supported on Gamepedia? We have a few set-up over at MediaWiki:September.css, mainly intended to make certain elements smaller below a set resolution, but they're not applying. I'm sure these work as I've tested them personally, but maybe Gamepedia applies them differently or is more strict in the way it does? —KidaJiwo (talk) 10:05, 3 September 2019 (UTC)

To my knowledge, the wiki software does not affect or sanitize media queries in any way. I use them regularly without any issue, and I see it's being dynamically added with a script anyway.
Okay, the media queries are invalid. The condition is being evaluated as "not all" because there's some funky invisible character(s) between the "1462" and the "px". I've removed them from the September CSS, but I don't know if that problem is lurking elsewhere. OOeyes (talk) 14:32, 3 September 2019 (UTC)
Oh my goodness sorry for the notification but thank you so much, it would have been years before I was able to notice it was that. As far as I'm aware, only that page had them not work and it was probably due to me noting down units in Notepad. Everything works beautifully now! —KidaJiwo (talk) 10:34, 4 September 2019 (UTC)

Better CharacterRoster and ChT[edit source]

Greetings OOeyes, we have not been acquainted before, so I will simply introduce myself as the former leader of the OJ wiki until I stepped down. That said, I still try to see to the further development of the wiki's styling. That said I recently contacted Pcj and he redirected me to you as apparently you are apparently my wiki manager (really wish they had told us the hierarchy of people we should contact for help when we moved from fandom as widow usually redirects but I digress). So here is the message I sent to him which is now the question I have for you which I believe actually relates to a similar convo above with Kida:

"Currently, I have been trying to fix the fact that that many of the customized items on the wiki cannot flex and proceed to overflow off the screen when the screen is smashed to a small size, which looks awful, especially as most wikis don't have this problem. One of the key offenders of this is Template:FP-CharacterRoster which has its elements manually positioned and inside MediaWiki:October.css we use code like

@media screen and (max-width: 1000px) {
		transform: scale(.6);
		top: -20px; /* Just having it fit better vertically */

to fix Template:FP-CharacterRoster inability to flex, but this is little more than a patch to a much larger problem with the code itself. I know it's a tall order, but is there any way you can make something like this but one that works properly when compressed: codepen attempt. I wasted many hours trying to get it to work and also to have the right distancing but it's simply way over my head and I don't think I really know what I'm doing. I have little training in code everything I have made is self-taught. I can't seem to adapt any diamond grid codes I have found, and I don't know who to ask since StackOverflow didn't solve my problem either.

Secondly, I was wondering if you could look into why Template:ChT bleeds over oddly on mobile. It has a tooltip that shows the card, but unlike the other tooltips, it shows the card picture shown in the tooltip when in mobile and blocks the text instead of staying in word form. It seems to be the only tooltip that has this issue from what I can tell. This is used on the card-co-op section for the boss cards.

I know this is a lot of stuff and I apologize. If there is any way you can help us I would be very grateful, as we really don't have many editors nor one with expert coding experience. We kinda throw crap at the wall until it sticks and these are the consequences."
Hopefully you can provide assistance and if not, all I can ask is if not you than who...
Shockbowlocke (talk)

I'll try to look at this over the weekend, but I'm not too optimistic. Game widow often tossed requests like this for this wiki my way before I was finally assigned to be the new wiki manager, and I've already considered the character roster problem a few times and couldn't think of a way to make it flex that didn't have a critical flaw, so I may not be much help on that. OOeyes (talk) 22:03, 30 October 2019 (UTC)
Thank you for the response, and, I see, so this is a tougher nut to crack. At the very least the template ChT problem should at least be easier. If we cannot find a flex fix, perhaps we can add even more @media screens to fix the problem. Here is another code that may be less weird than mine that was an attempt to make the table with code. I could perhaps ask the developer how they make the grid, but given its probably in c++ it probably wouldn't be all that useful. Ultimate, I would like to fix all our botched templates and then add an alternate main page on mobile like the Fire Emblem Heroes Wiki, but one miracle at a time. I wish I was a better coder, but hey, I'm trying. Please keep me posted as to the outcomes of these 2 issues. Thanks for your help. Shockbowlocke (talk) 22:44, 30 October 2019 (UTC)
I'm gonna butt in as always to mention that I created ChT for Co-op cards to prevent having to create a page for every single Co-op boss card to have them display with our current tooltip, as there were many and it would take a bunch of time; because of it, it uses a different type of tooltip which is technically embedded on the site, just hidden. Seems however that Jaspersprite has taken his time to create a page for all of them, so the template can be replaced by the normal Ci template wherever needed. —KidaJiwo (talk) 04:24, 31 October 2019 (UTC)
Alright, I misunderstood what you meant when you said flex. This is scaling, so the only problem was in not scaling the padding on the shorter rows. You need to be able to use a percentage for that, so you need to use actual padding, not transparent borders, and in this case, the correct size is 55 divided by 786, which gives you this:
.flex-container.s-row {
    padding: 0 6.997455%;
And that's a pretty elegant solution compared to what I was thinking, but it still fails to solve one big problem: mobile view. There are a few options I can think of for this:
  1. Just hide the character roster entirely using the nomobile class and make the Characters page mobile friendly. Changing from table to flexbox would be one option; there's no reason that page needs a fixed number of characters per row.
  2. Hide the current main page character roster on mobile with nomobile, but provide alternate mobile navigation using a block with the mobileonly class. It's important to remember you can't rely on the tooltips to identify the character names on mobile; hover isn't a thing on touchscreen devices.
  3. Setting the divs for the rows and icons to inline or inline-block might work fine on mobile, though it'd still be a good idea to do something to fix the names.
I think option 1 might be best. That's a lot of characters for the main page on mobile. OOeyes (talk) 20:27, 3 November 2019 (UTC)