Better menus for dlang.org #780

andralex · 2015-01-18T02:14:03Z

This diff introduces accordion navigation menu. See working demo at http://erdani.org/d/. I've also reorganized the top topics.

I took the menu code from http://cssmenumaker.com/menu/modern-jquery-accordion-menu. I changed it such that it degrades better when javascript is disabled.

What's not working now and I'd love some help with is current page tracking, i.e. keep the corresponding menu open when some page in a submenu is active. Thanks!

Geod24 · 2015-01-18T10:55:36Z

It looks like some JS is missing from your site (or at least, not where it's expected to be):

Failed to load resource: the server responded with a status of 404 (Not Found) http://erdani.com/js/codemirror-compressed.js 
Failed to load resource: the server responded with a status of 404 (Not Found) http://erdani.com/js/run-main-website.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://erdani.com/js/run.js

Which break the Show/Hide example of the front page. I think that's what people where refering to in the thread you posted.

Beside that, here's what I see ATM (Chrome 39.0 / Win8):

Nitpick about the style: The gray bar under the menu feels wrong, as well as the red line. It's just like C++: individually looks okay, together it's a meh ;)

I'm not a web designer / developper, so the other remarks are purely on the content:

Wouldn't a vertical navbar be more modern (and mobile friendly) ?
I like the drop-down sections (Documentation/Community) very much (menus needs to be concise IMO, around 6 large categories at most). But the order is odd. Bug tracker should be part of community. Feature / Language overview should be first in the list, closely followed by Download and FAQ. Possibly wrap that in a "Getting started" sections.
Contrary to the feedback you got on the post, I don't think the link to code.dlang.org should be so high in the list. We don't want newcomers to jump right out of the site thinking "let's see what I can do in D". At least not without an introduction about dub. It's a reference, not an explanation, so it's right to let it in the documentation section.
A bit OT: The abstract of the page should be on the upper left corner (where you start to read). Maybe the info about DConf should be moved.

andralex · 2015-01-19T05:00:58Z

@Geod24 thanks! I'll punt on the content issues for now. This update includes the javascript fixes. I'll post a screenshot so we keep track of what look corresponds to each commit.

andralex · 2015-01-19T05:02:45Z

State of affairs: http://imgur.com/zlXfj8I

Better menus for dlang.org

CyberShadow · 2015-01-19T23:05:36Z

Are accordion menus really better UX than what we have now?

CyberShadow · 2015-01-19T23:13:59Z

The new site is no longer navigable without JavaScript. This is pretty important for robots etc.

I took the menu code from http://cssmenumaker.com/menu/modern-jquery-accordion-menu.

This code has no license attached to it...

Why do we need this redesign again?

CyberShadow · 2015-01-19T23:19:12Z

js/cssmenu.js

+  var checkElement = $(this).next();
+  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
+    $(this).closest('li').removeClass('active');
+    checkElement.slideUp('normal');


Feels a little sluggish at the moment, can you try 'fast' instead of 'normal'? (slideDown 3 lines below too)

andralex · 2015-01-19T23:20:29Z

@CyberShadow please improve. Thanks!

CyberShadow · 2015-01-19T23:21:06Z

Wait, this is already merged? I feel like this was a little rushed...

andralex · 2015-01-19T23:21:31Z

@CyberShadow please also merge #786

CyberShadow · 2015-01-19T23:21:48Z

@CyberShadow please improve. Thanks!

You'd have to sell me the idea first. I'm not convinced this is a good change and I don't understand what problem this is trying to solve.

CyberShadow · 2015-01-19T23:24:10Z

The new thing also doesn't expand the current section, so you need two clicks to go to the next page within the same section...

andralex · 2015-01-19T23:25:15Z

@CyberShadow we discussed this a lot in the newsgroup. If you think of something better than accordion menus, please change cssmenu.css. If you want to make selection trackable, please implement. If you want better anymation speed, please update.

andralex · 2015-01-19T23:31:41Z

I think we do need to implement current page tracking before updating the site. @CyberShadow what difficulties are you experiencing without javascript?

CyberShadow · 2015-01-19T23:31:43Z

I liked the old thing, it worked and had none of the above problems. Can I make a pull request to revert to that?

I totally understand the "talk is cheap, pull requests get things done" thing. But I understand neither your goal nor motivation.

Breaking a bunch of things then asking people who complain to fix it themselves doesn't seem very nice either.

andralex · 2015-01-19T23:32:45Z

I liked the old thing, it worked and had none of the above problems. Can I make a pull request to revert to that?

No.

I totally understand the "talk is cheap, pull requests get things done" thing. But I understand neither your goal nor motivation.

Breaking a bunch of things then asking people who complain to fix it themselves doesn't seem very nice either.

We need a different styling for the website.

CyberShadow · 2015-01-19T23:34:41Z

IIRC, the current website was designed by someone who specializes in this. I'm not sure we can fare better.

Practical: can we implement the dynamic accordion menus on top of the previous existing HTML/CSS, to progressively add features to browsers with JS enabled, rather than do it the other way around and add crutches for browsers with JS disabled?

andralex · 2015-01-19T23:37:12Z

IIRC, the current website was designed by someone who specializes in this. I'm not sure we can fare better.

Apparently people in the forum like the change.

Practical: can we implement the dynamic accordion menus on top of the previous existing HTML/CSS, to progressively add features to browsers with JS enabled, rather than do it the other way around and add crutches for browsers with JS disabled?

I considered that, but the way the menus were implemented was quite difficult to work with.

The way I set things up is if there's no javascript all menus are opened by default. Does that not work for you?

CyberShadow · 2015-01-19T23:40:21Z

The way I set things up is if there's no javascript all menus are opened by default. Does that not work for you?

It does not. I've tried disabling JS in Opera and Fx (using YesScript). All it does is make the expandable sections non-expandable.

Edit: Assuming http://erdani.com/d/ has the latest version.

andralex · 2015-01-19T23:42:12Z

@CyberShadow take that back. I forgot a display:none in the css, update coming shortly. Are you on IRC and willing to help with the page tracking?

CyberShadow · 2015-01-19T23:42:38Z

Yes I'm on IRC.

joakim-noah · 2015-01-24T11:24:19Z

doc.ddoc

@@ -83,40 +85,45 @@ $(TRANSLATIONS)
 _=

 NAVIGATION=
-$(NAVBLOCK_HEADER $(TOCHEADERL index.html, D Programming Language, D $(LATEST)),
-    $(TOCENTRYTH download.html, Download a D compiler, $(SPANC emph,Download), $(CATEGORY_DOWNLOAD $(SUBNAV_DOWNLOAD)))


This change seems to have removed the download submenu, where users could click to read more about the compiler flags for their specific OS, from the main menu. Is this intentional?

ghost · 2015-01-25T11:48:24Z

One thing I think we need to fix: The "D 2.066.1" text. It seems really out of place. The text for a menu should be something easily understood (hell, even call it just a "Menu"). I'd rather we keep the "latest version" string somewhere else.

ghost · 2015-01-25T11:51:25Z

Does anyone else get weird placements for the scrollbars? See top-right here:

Edit: Using FF 35 on Win7.

CyberShadow · 2015-01-25T12:01:55Z

Yeah, I had to hard code them to a px width to work around a rendering weirdness. (Pull requests welcome.) Anyway, it should only look like that if you're not using the default font size.

ghost · 2015-01-25T12:04:11Z

Yeah, I had to hard code them to a px width to work around a rendering weirdness. (Pull requests welcome.) Anyway, it should only look like that if you're not using the default font size.

Ah, it only happens in text-zoom mode. (I have to use zoom on this laptop because the DPI is just way too high for this screen. :/).

CyberShadow · 2015-01-25T12:09:22Z

Ah, it only happens in text-zoom mode

What is that? Something different from the font size setting in the options dialog?

CyberShadow · 2015-01-25T12:11:14Z

BTW IE doesn't seem to expose a font size setting any more. Firefox and Chrome still do.

ghost · 2015-01-25T12:15:20Z

What is that? Something different from the font size setting in the options dialog?

It's an addon that allows switching between text-only or text+image zoom mode:

https://addons.mozilla.org/en-US/firefox/addon/default-fullzoom-level/

Anyway since this is a 3rd-party tool it might even be a bug in the tool itself, and not worth investigating from our side.

d-random-contributor · 2015-03-20T08:03:51Z

Text zoom is supported natively by FF: menu View - Zoom - Zoom text only.

andralex force-pushed the better-menus branch from 88f9dc8 to c06dddf Compare January 18, 2015 05:14

andralex added 2 commits January 18, 2015 20:56

Add dub link

e486d39

Better css, also ddoc'd

09c7a6f

andralex force-pushed the better-menus branch from e2d3609 to 09c7a6f Compare January 19, 2015 04:59

WalterBright added a commit that referenced this pull request Jan 19, 2015

Merge pull request #780 from andralex/better-menus

d65f8d7

Better menus for dlang.org

WalterBright merged commit d65f8d7 into dlang:master Jan 19, 2015

CyberShadow reviewed Jan 19, 2015
View reviewed changes

joakim-noah reviewed Jan 24, 2015
View reviewed changes

Uh oh!

Better menus for dlang.org #780

Better menus for dlang.org #780

Uh oh!

Conversation

andralex commented Jan 18, 2015

Uh oh!

Geod24 commented Jan 18, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

CyberShadow Jan 19, 2015

Choose a reason for hiding this comment

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

andralex commented Jan 19, 2015

Uh oh!

CyberShadow commented Jan 19, 2015

Uh oh!

joakim-noah Jan 24, 2015

Choose a reason for hiding this comment

Uh oh!

ghost commented Jan 25, 2015

Uh oh!

ghost commented Jan 25, 2015

Uh oh!

CyberShadow commented Jan 25, 2015

Uh oh!

ghost commented Jan 25, 2015

Uh oh!

CyberShadow commented Jan 25, 2015

Uh oh!

CyberShadow commented Jan 25, 2015

Uh oh!

ghost commented Jan 25, 2015

Uh oh!

d-random-contributor commented Mar 20, 2015

Uh oh!

Uh oh!