Allow to select an example on the front page by wilzbach · Pull Request #1777 · dlang/dlang.org

wilzbach · 2017-06-27T19:34:53Z

Marking this as "needs work" as I will to rebase this once we agree on #1775

dlang-bot · 2017-06-27T19:34:54Z

Thanks for your pull request, @wilzbach!

Bugzilla references

Your PR doesn't reference any Bugzilla issue.

If your PR contains non-trivial changes, please reference a Bugzilla issue or create a manual changelog.

wilzbach · 2017-06-27T21:48:13Z

Alrighty, finally thanks to the minimal solution in #1775 this should be ready.

CyberShadow · 2017-06-27T23:07:05Z

First: Diff looks great! Thanks for not giving up.

Dropdown looks a bit weird for me, any idea why?

wilzbach · 2017-06-28T02:30:38Z

Okay, I think we can fix this by providing our own selector symbol from FontAwesome.
However, there are still UI differences:

Chrom(ium):

Firefox:

CyberShadow · 2017-06-28T06:14:43Z

Alright, but why is that necessary? Why isn't the browser rendering the arrow?

wilzbach · 2017-06-28T09:50:49Z

Alright, but why is that necessary? Why isn't the browser rendering the arrow?

Without it looked really ugly in my Firefox:

CyberShadow · 2017-06-28T09:52:44Z

Without it looked really ugly in my Firefox:

That's because we're setting the background color. If we exclude that block from having its color and background color set, it should use the native styling... with the downside that it will look a little weird to people who have their browsers set to have a light-on-dark color theme by default. I don't think we need to worry about that, as long as the website is not unusable to them.

CyberShadow · 2017-06-28T09:53:30Z

I guess either way works, but if possible, I think it would be better to not rely on font-awesome for the front page.

wilzbach · 2017-06-28T09:57:44Z

If we exclude that block from having its color and background color set, it should use the native styling... with the downside that it will look a little weird to people who have their browsers set to have a light-on-dark color theme by default. I don't think we need to worry about that, as long as the website is not unusable to them.

That wouldn't look good:

I actually tried to be close to styling of the "Install X" boxes.

I guess either way works, but if possible, I think it would be better to not rely on font-awesome for the front page.

FWIW we already rely on it:

AFAICT it's the only way to ensure a consistent experience across different browsers.

CyberShadow · 2017-06-28T10:00:05Z

That wouldn't look good:

No, that's not right. You're trying to undo the background rule with another background rule, right? That's not going to work. There must be no background rule in effect at all.

CyberShadow · 2017-06-28T10:00:28Z

FWIW we already rely on it:

Ah, that's right.

CyberShadow · 2017-06-28T13:53:16Z

Seb do you want to try the no-CSS approach or should we go forward with the current FontAwesome version?

wilzbach · 2017-06-28T14:03:13Z

Seb do you want to try the no-CSS approach or should we go forward with the current FontAwesome version?

Hmm, the no-CSS approach would look like this:

or should we go forward with the current FontAwesome version?

I am fine with both ways (slight preference on FontAwesome because it keeps the styling consistent).

CyberShadow · 2017-06-28T17:49:25Z

Needs some tweaking for mobile:

andralex · 2017-06-30T01:58:30Z

index.dd

    EXAMPLE=$(TAG2 a, id="a$1-control" class="example-control", )$(TAG2 div, id="a$1" class="example-box", $(RUNNABLE_EXAMPLE $2))
-    EXTRA_EXAMPLE=<div class="your-code-here-extra" style="display:none">$(RUNNABLE_EXAMPLE $0)</div>
+    EXTRA_EXAMPLE=<div class="your-code-here-extra" style="display:none">
+        <div class="your-code-here-title">$1</div>


wilzbach · 2017-06-30T02:15:13Z

Needs some tweaking for mobile:

Thanks. I came to the conclusion that tip box hasn't been used much over the last years and especially users on their phone most likely won't post an example, so imho the best solution is also the simplest here: hiding the tip box on devices with a narrow layout.

CyberShadow · 2017-06-30T07:35:14Z

Still broken for very narrow widths:

wilzbach · 2017-06-30T15:06:31Z

Still broken for very narrow widths:

I can't really reproduce this in Chrome or FF, but I added max-width: 100% which should fix things even for these tiny layouts:

@CyberShadow does it work for you now?

CyberShadow · 2017-06-30T15:21:17Z

@CyberShadow does it work for you now?

Looks perfect, thanks!

CyberShadow · 2017-06-30T15:22:53Z

index.dd

+        examples[rouletteIndex].style.display = "none";
+        rouletteIndex = sel.selectedIndex;
+        examples[rouletteIndex].style.display = "block";
+    });


The event handler could have been added later in the main JS file, but it's just 3 lines so no matter.

CyberShadow · 2017-06-30T15:51:28Z

tip box hasn't been used much over the last years

Forgot to post this earlier, but I think you simply found a bug in the forum search (or SQLite indexing). I know I fixed one yesterday (regarding deleted posts), but that search and its variations is still producing inconsistent results with some variations of it (for one, the query needs to search the subject, not body).

wilzbach added the Needs Work label Jun 27, 2017

wilzbach force-pushed the example-selecting branch from bac4908 to 8e10920 Compare June 27, 2017 21:45

wilzbach removed the Needs Work label Jun 27, 2017

wilzbach force-pushed the example-selecting branch from 8e10920 to 4a87735 Compare June 27, 2017 21:46

wilzbach force-pushed the example-selecting branch from 4a87735 to 034b889 Compare June 28, 2017 02:22

Allow to select an example on the front page

034b889

CyberShadow mentioned this pull request Jun 30, 2017

Add example from the DLang Tour to the example roulette #1755

Merged

andralex reviewed Jun 30, 2017

View reviewed changes

<div class=""> -> $(DIVC

b81f15c

PetarKirov mentioned this pull request Jun 30, 2017

Add example about std.process #1761

Merged

wilzbach force-pushed the example-selecting branch from 2c2f326 to e295c23 Compare June 30, 2017 15:04

Hide tip box on narrow layouts

e295c23

CyberShadow approved these changes Jun 30, 2017

View reviewed changes

CyberShadow reviewed Jun 30, 2017

View reviewed changes

CyberShadow added the auto-merge label Jun 30, 2017

dlang-bot merged commit 1ca1706 into dlang:master Jun 30, 2017

wilzbach deleted the example-selecting branch December 18, 2017 06:01

Uh oh!

Comments

Conversation

wilzbach commented Jun 27, 2017

Uh oh!

dlang-bot commented Jun 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bugzilla references

Uh oh!

wilzbach commented Jun 27, 2017

Uh oh!

CyberShadow commented Jun 27, 2017

Uh oh!

wilzbach commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

wilzbach commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

wilzbach commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

wilzbach commented Jun 28, 2017

Uh oh!

CyberShadow commented Jun 28, 2017

Uh oh!

andralex Jun 30, 2017

Choose a reason for hiding this comment

Uh oh!

wilzbach commented Jun 30, 2017

Uh oh!

CyberShadow commented Jun 30, 2017

Uh oh!

wilzbach commented Jun 30, 2017

Uh oh!

CyberShadow commented Jun 30, 2017

Uh oh!

CyberShadow Jun 30, 2017

Choose a reason for hiding this comment

Uh oh!

CyberShadow commented Jun 30, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dlang-bot commented Jun 27, 2017 •

edited

Loading

CyberShadow commented Jun 30, 2017 •

edited

Loading