Forum:New Design 2024

Forums: Village pump → New Design 2024

Greetings readers and editors of Warcraft Wiki! As you may see, the design for the wiki had a makeover, just a bit for desktop but definitely does look much different for smaller screens. Well this is all due to an effort to actually make the wiki look much better for tablets and especially mobile. My goal here was to keep the desktop feeling the same but also have some consistency with mobile, tablet and desktop. I didn't want to ruin what we all love and appreciate about the desktop feel, especially as its one of the pain points we had brought up many of times in the past, especially on other... platforms. We all love Vector after all so let's keep that feel for it no matter what. Let's just bring the mobile experience up to par with desktop.

So with that out of the way, as you can already tell, there are some distinct differences. This is where this forum post comes in. Feedback and issues. What was missed? What could be improved? What is broken? Found some legacy code that should be looked into? Help us make Warcraft Wiki the best it can be! — SurafbrovWarcraft Wiki administrator T / C 03:03, 15 January 2024 (UTC)

• 
• 
• 
• 
• 

Alternatively, if you are part of the Discord server, feel free to share the feedback or issues there instead of here. Discord server link: https://discord.gg/gnGQcAk

Feedback

Any feedback regarding the look and feel of the site. It does not have to pertain to just the skin, talk about everything like how tables are designed, infoboxes, Amboxes, etc. If there is something that we can improve on, share it here.

• Could the background of the "More" tab be changed to a darker color or maybe even turn it black like the other tabs. It's kinda disturbing the eye. Mordecay (talk) 07:38, 15 January 2024 (UTC)

  Went ahead with this change. I can bring this back as a gadget if a lot of others prefer this style or we could start something like Project:Gallery of user styles again. — SurafbrovWarcraft Wiki administrator T / C 08:07, 15 January 2024 (UTC)

• From User:Zeal via Discord: "Something I'd like to see for mobile is ambox and infobox full width; they're both needlessly thin. Navbox needs some big changes too for mobile, but that's a lot more work."

  Infobox definitely has been on my mind, and ambox could also use some work too. Will look into those. Navboxes, however, is a bit of a gray area. — SurafbrovWarcraft Wiki administrator T / C 15:44, 15 January 2024 (UTC)

• Is there a way for my .css to hide/change the golden borders and the white underline on link hover? I don't like those changes. -- Alayea (talk) 19:12, 15 January 2024 (UTC)

Fixed the white underline on link hover in the top navs. As for the gold borders, I assume the border color around the entire content area, nav tabs and search? If that is the case, you can use the following to replace those colors to something you like. Something like a grey color (e.g. #555) could make it more muted/less noticeable. If you use light theme, just change it to "theme-light" and #bbb could be a good choice there. — SurafbrovWarcraft Wiki administrator T / C 19:33, 15 January 2024 (UTC)

html.theme-dark {
	--theme-accent-color: #555;
}

Thank you. -- Alayea (talk) 21:43, 15 January 2024 (UTC)

• The alignment of the navigation menu labels, menu items, and their reactive areas across multiple layouts could use some work. I've not fully tested all together, but this seems better:

Remove:

#mw-panel.collapsible-nav .portal.persistent .vector-menu-heading { padding-left: 0.7em }
#mw-panel.collapsible-nav .portal.persistent .vector-menu-content { margin-left: 0.5em }
#mw-panel.collapsible-nav .portal .vector-menu-content { margin: 0 0 0 1.25em }

Add:

#mw-panel.collapsible-nav .portal .vector-menu-content { margin: 0 0 0 0.75em }
@media screen and (max-width: 1365px) #mw-panel .portal { margin: 0 0.75rem }
@media screen and (max-width: 720px) #mw-panel .portal { margin: 0 }
@media screen and (max-width: 1365px) #mw-panel.collapsible-nav .portal .vector-menu-heading { padding: 4px 0 3px }
@media screen and (max-width: 720px) #mw-panel.collapsible-nav .portal .vector-menu-heading { padding: 4px 0 3px 1.5em }
@media screen and (max-width: 1365px) #mw-panel.collapsible-nav .portal .vector-menu-content { margin: 0 }

— Zeal (🧔💬📜) 𝅋👁️🢓👁️𝅍 21:05, 15 January 2024 (UTC)

Looking into it. — SurafbrovWarcraft Wiki administrator T / C 15:15, 17 January 2024 (UTC)

• When editing, in the "Advanced" editing box menu (where the Bold, Italics, etc are), there are the Search and replace button and the Images and media button. When the Images and media button is clicked and the new window is open, there is white background and the page behind the window becomes non-responsive, whereas with the window of the Replace button, there is no white layer and the page remains responsive. Hopefully understandable :D Is it possible for you to change the white background and responsiveness of the Images and media button window to function/appear like the Search and replace button, or is that out of your reach? Mordecay (talk) 15:03, 17 January 2024 (UTC)

  I see what you mean. It is also true with the "Link" button. Might be something with MediaWiki doing this and just being inconsistent, but I'll see what I can. — SurafbrovWarcraft Wiki administrator T / C 15:15, 17 January 2024 (UTC)

Cool. Also the Table button. Mordecay (talk) 15:18, 17 January 2024 (UTC)

• The talk tab icon is always the normal link colour, even if no talk page exists yet. It should be red like the text label on desktop.

Add:

#mw-head .vector-menu-tabs .mw-list-item.new a::before { background-color: #f05048 }

— Zeal (🧔💬📜) 𝅋👁️🢓👁️𝅍 21:34, 9 February 2024 (UTC)

Issues

Any issues/bugs you've encountered since the new design was implemented, please share it here. We'll get to it asap.

• From Discord: Mobile nav missing background color. Thanks to multiple editors!
• From Discord: Logo placement at 962px. Thanks Kd3!
• From Discord: Desktop sidebar logo placement not centered. Thanks Kd3! (Note, this will be fixed as cache catches up as some code was part of Theme-dark.css)
• The top navigation menus (as per screenshots 2 and 3 layout) randomly pop open and sometimes stay open on page load —The preceding unsigned comment was added by Zeal (talk · contr).
• The navigation sub-menus overflow the viewport between 720px and 900px (the menu alignment feedback CSS changes fix this issue) —The preceding unsigned comment was added by Zeal (talk · contr).
• The first navigation menu is missing above 720px and below 1365px. Increasing the 720px breakpoint to 760px and adding the following will fix: —The preceding unsigned comment was added by Zeal (talk · contr).

@media screen and (max-width: 1365px) #mw-panel.collapsible-nav .portal.first .vector-menu-heading { display: flex }
@media screen and (max-width: 760px) #mw-panel.collapsible-nav .portal.first .vector-menu-heading { display: none }

Looking into these as well! — SurafbrovWarcraft Wiki administrator T / C 15:15, 17 January 2024 (UTC)