More "modern" look

[Xyene]

Nicer text fields:

input[type=text],input[type=password]{
    padding: 4px 8px;
    font-size: 14px;
    color: #555;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #CCC;
    border-radius: 4px;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
      display: inline-block;
}

(Padding is love, padding is life.)

[quantum5]

Ah yes you managed it. I gave up last time.

[Xyene]

:)

The font between Filter and Random is different though...

[quantum5]

I suspect you can change Filter to a fake button instead of a notoriously hard-to-fake real button.

[Xyene]

Relevant styles impossible to post; DOM changes necessary.

This is a big change, should ask more people about their thoughts on it. It does have a couple of benefits though:

• Significantly smaller
• No duplicate Home click area
• Branding of the DMOJ logo
• Navbar slightly taller (by a few pixels): enough room to add some more meat to user-links

[quantum5]

I can't help but ask what you are planning for "mobile" friendliness.

[Xyene]

The same mobile style, for now.

[Xyene]

Mostly implemented the navbar.

Outstanding issues:

• Dropdown menus look horrible and work even worse Reverted to old style
• Mobile style is wrecked
• info-floats are not updated to the new height of the navbar
• For convenience I used the PNG logo and text DM::OJ instead of the SVG variants; they should be added back
• Contest timer is blocked now
• nav flickers while scrolling in Chrome

[Xyene]

Unblocked the timer with a new style.

[Xyene]

Mobile style is "working" again. It'll need a restyle to fit with the new theme, though.

[Xyene]

info-float scrolls properly again.

[Xyene]

New problem search form:

All inputs trigger form.submit(), making searching more streamlined. Would be cool if the problem table was Ajax'd as well, but there's only so much time in a day.

[Xyene]

Used a bit of media query magic to make the page scale better to large displays.

All content is capped to max-width: 1380px, with a light gray filling body. At the very least, this makes the Users page look a lot better: no more 20cm gap between Elo rating and usernames.

[Xyene]

Made a new logo SVG. It's unoptimized, but significantly smaller than a 1024x1024px PNG. Also needs a switch for when there's no SVG available (I'd suggest just using a PNG version, attached below).

[Xyene]

Implemented a 40px-height footer, with misc_config.footer controlling the content.

[Xyene]

Fixed login menu to work on small screens.

[Xyene]

Problem page tabs!

View as PDF will need a new home.

[WallE256]

This is how it looks in IE 8:

[Xyene]

@WallE256

• Logo doesn't show up due to lack of inline SVG support
  • Can be fixed with a switch, displaying a PNG logo where SVG is not supported
• Navbar/pagination not colored due to lack of CSS3 colors, namely rgba()
  • Can provide a fallback premultiplied color that looks like rgba(0, 0, 0, 0.77) on a white background (#3B3B3B looks visually identical)

[WallE256]

@Xyene Good to know! Anyway, according to http://www.w3schools.com/browsers/browsers_explorer.asp , IE 8 represents ~1% of web users, mainly XP computers, and usually school computers. :smile:

[FatalEagle]

The following figures are based on W3Schools' users, and are extracted from our Browser Statistics:

Most people who visit W3Schools wouldn't be using IE anyway.

[Xyene]

@WallE256 @FatalEagle

Stats from DMOJ analytics:

0.65% of users use IE. Of those that do...

14.81% of them use IE <= 8.

Conclusion: most people who visit DMOJ wouldn't be using IE anyway.

Anyways, the SVG fallback needs to be added regardless (web SVG is too new), and background color might as well also be since it only takes a couple of seconds.

[WallE256]

Coc Coc? This sounds nice :) But of course, we care about the 14.81% of the IE users.

[Xyene]

IE 8 doesn't honor noscript styling... properly.

[Xyene]

Perhaps the user list can be tabbed between Users and Organizations, removing a navbar item. The Organizations list can also be updated to look nicer, along with #18.

@FatalEagle?

[quantum5]

Some work-in-progress to do mobile menu without JS.

#nav-container:focus > #nav-list, #nav-container:active > #nav-list, #nav-container:hover > #nav-list {
  display: block !important;
  top: 36px;
}

[Xyene]

This issue is incredibly long, so long that Github omits over 200 commits by default. It's gotten to the point where it is impossible to really tell what is being done, so I'm closing this mega-ticket in favour of smaller ones to be created in the future.

The original goal, making DMOJ look less like a site from the 90s, has already been accomplished. UI bugs belong elsewhere.