New design! #5

thehydroimpulse · 2014-06-01T06:16:54Z

Refactored the JavaScript to be cleaner and more reusable.
Implemented a simple design.
Added dropdown arrow
Changed ace theme (to be more rustic)
Added Rust logo
New style-able dropdowns. Default select tags are damn near impossible to completely style. So going with a custom solution is the way to go.

The results panel could use some work. I don't have a linux machine right now to try out all the options.

This is still a WIP. Still things I wish to change.

thehydroimpulse · 2014-06-01T06:18:17Z

thestinger · 2014-06-01T06:27:08Z

@thehydroimpulse: I love the look of the buttons along the top, and I do like having the result window side-by-side when the window size is large. However, I think it would be nicer to have the code on the left and the results on the right. It would be really nice to have the results panel move below the code editor when the window is narrow too.

The JSON API exposed by http://playtest.rust-lang.org/ supports CORS, so it can be used without hosting the backend.

thestinger · 2014-06-01T06:29:46Z

static/web.css

+    margin-bottom: 20px;
+    text-decoration: none;
+    color: #333;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;


It would be nice to use a consistent open-source font here as well. If we're using Source Code Pro for monospace, using Source Sans Pro for the sans-serif font would be nice as they're designed to be used together.

http://www.google.com/fonts/specimen/Source+Sans+Pro

I agree. Helvetica Neue is only available if you bought the font or you're on a mac, so not really good to use.

alan-andrade · 2014-06-02T18:39:53Z

I think I'd be great if we can keep the style for the buttons that we have on the homepage.

This is awesome \o/

brson · 2014-06-02T21:16:02Z

Thanks for picking this up @thehydroimpulse.

I agree with @alan-andrade that I would rather the buttons match those on www, and @thestinger that the page should use different layouts for small screens.

thehydroimpulse · 2014-06-03T03:18:36Z

@brson No worries!

Yep, I'm working on some new changes that'll address those.

brson · 2014-06-04T21:17:35Z

@thehydroimpulse @SergioBenitez I pulled rust-lang/prev.rust-lang.org#26 for www today, which adds a live editor to the example snippet. Now we also need to make sure these two editors are consistent.

brson · 2014-06-04T21:20:01Z

FWIW I think the color scheme used for the code on www could be more attractive.

thehydroimpulse · 2014-06-05T03:52:48Z

Sounds good. I'll get the changes done this weekend!

thestinger · 2014-06-05T14:01:37Z

There's now syntax highlighting for the assembly and LLVM IR output, and I switched to the GitHub theme because it was available for both Ace and Pygments. Since it's the theme anyone looking at the source on GitHub will see, that's a nice form of consistency.

adrientetar · 2014-06-05T16:25:55Z

Would be nice to get the syntax highlighting scheme we have currently into Ace.

thehydroimpulse · 2014-06-08T23:54:39Z

Here's the latest screenshot. Still working on the header/color combos. The current logo is super hard to make it everything look good with. Using the color scheme that @bjz came up with (https://kuler.adobe.com/Rust-color-theme-2709677/)

Note: I'm working on the layout, so nothing is properly aligned and there are hidden elements that I haven't styled yet.

brson · 2014-06-08T23:58:13Z

Can we deploy this as it stands and keep improving?

thehydroimpulse · 2014-06-09T01:58:55Z

Yep. I'll get what I have working again and push my changes.

thehydroimpulse · 2014-06-09T04:10:33Z

@brson Just pushed the changes. This can now be landed in it's current state.

brson · 2014-06-09T04:31:49Z

Thanks! I'll leave it to @thestinger to decide.

thestinger · 2014-06-09T15:06:56Z

It's hard for me to review this because there's so much going on in the same few commits, and parts are being undone in the most recent commit. The JavaScript is going from 137 lines to 572 so there's a lot more than style changes mixed in here. If this was split into much more incremental commits, then I could accept some and we could discuss the ones I have concerns about.

thestinger · 2014-06-09T15:28:52Z

static/web.html

+                  </div>
+                </div>
+        </div>
+        <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" charset="utf-8"></script>


I don't think these should be moved down here. It's not going to speed up the load time.

http://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document

That being said, the HTML5 async attribute can work there too.

There's nothing useful on the page before the JavaScript DOMContentLoaded handler triggers. I don't think the editor is even sized correctly before then.

This is needed for the JavaScript. Otherwise, the code needs to run on the DOMContentLoaded event.

It's also best practice to put the JavaScript at the bottom, then you don't have to worry about blocking or loading events.

Using DOMContentLoaded and async is faster than this, if that's the goal. I don't know why you would consider it to be the best practice.

thestinger · 2014-06-09T16:20:50Z

static/app.js

+});
+
+
+function handleResult(result) {


This isn't a very robust way of detecting a compilation error. It would need to distinguish between compiler output and output from the program, which is going to require modification of the backend.

I agree. This was taken from rust-www.

I agree as well. See https://github.com/rust-lang/rust-www/blob/gh-pages/js/editor.js#L87.

I don't want to include something that's known to be broken. It doesn't really matter if it's freshly written code or taken from another project. @huonw has a pull request open related to this issue but it's not quite ready to merge. The necessary JSON API should be added before the frontend gains support for it, and it would be better if it wasn't tied to other changes.

This has now been changed to take advantage of the new separate_output.

brson · 2014-06-16T20:32:47Z

It looks like this has stalled a bit. What do we need to do to move forward?

thehydroimpulse · 2014-06-16T20:37:57Z

I think we were blocking on a server-side patch for better error detection. Most of this PR's code bloat is because of that.

thestinger · 2014-06-16T21:18:50Z

@brson: @huonw has a pull request splitting the compiler output from the output of the program, but I haven't decided if it's the best way to move forwards. It would also be very helpful if this pull request was split up into independent or at least incremental changes.

thehydroimpulse · 2014-06-16T21:35:16Z

@thestinger Would it be easier if I removed all the error handling and just dump the results under the text editor? That'll reduce the code bloat by quite a bit.

cburgdorf · 2014-07-10T11:02:53Z

I was just about to make small fine tuning to the look of the playpen because the share button just doesn't stand out which I think might have an impact on the way people engage and spread examples etc. Then I found this PR and it seems to be such a huge step forward. Unfortunately it seems work has stopped. What's the state of this?

brson · 2014-07-10T23:51:38Z

Now that #10 is merged I believe there are no more blockers to continuing here.

thehydroimpulse · 2014-07-11T00:21:57Z

@cburgdorf @brson I'll split the PR up into smaller chunks. That'll get things moving.

* Refactored the JavaScript to be cleaner and more reusable. * Implemented a simple design. * Added dropdown arrow * Changed ace theme (to be more rustic) * Added Rust logo

* Integrated the awesome error reporting that landed in rust-www. * Cleaner Design. * The extra options are hidden by default. * New "More Options" button that toggles the extra options. * Modified the button styles. * New evaluate button!

thehydroimpulse · 2014-08-05T17:12:02Z

@brson Sorry for taking so long. Just rebased the PR. I haven't taken the #10 into consideration yet, so that'll probably need to happen before merging.

thehydroimpulse · 2014-08-05T17:24:44Z

Updated to use the new separate_output from #10

New design!

brson · 2014-08-05T17:42:13Z

@thehydroimpulse thanks for persevering!

@thestinger How does play.rust-lang.org get updated?

alexcrichton · 2014-08-05T17:58:52Z

I updated play.rust-lang.org

alexcrichton · 2014-08-05T18:00:27Z

@thehydroimpulse, was the share button accidentally removed? On http://play.rust-lang.org/ I'm also unable to get assembly/IR output. Did I update it incorrectly?

thehydroimpulse · 2014-08-05T18:03:00Z

@alexcrichton I just noticed the share button. I think they were added after my PR started. mmm, the assembly/IR worked locally, I'll check it out and get it fixed.

sinistersnare · 2014-12-04T07:39:20Z

What happened here? The new design was so nice, why did this very reverted?

thestinger · 2014-12-04T14:18:30Z

@sinistersnare: It was based on an older revision of master and lost many improvements. I also don't want the code to be completely rewritten based on subjective style preferences. I don't want a long list of half working hacks like parsing rustc output either. Finally, the current layout needs to be preserved for narrow browser windows. It makes sense to use flexbox to put the panels side-by-side for a wide browser window but it becomes unusable for me if it's that wide.

Inspiravetion · 2014-12-04T20:26:21Z

@thestinger why couldn't we just use media queries and change the layout based off the width of your window?...then everybody is happy

thestinger · 2014-12-04T22:16:31Z

It could be done that way, but the current vertical layout really needs the newer layout model. The alternative is fixing the output panel scaling issue with JavaScript - which I don't want to do.

Inspiravetion · 2014-12-04T22:55:58Z

Yeah I agree. That would be ugly to write plus then you have issues of the output panel infringing on the editor space. If nobody jumps on this in the next few weeks and I make enough headway on my projects I might take a crack at it. There has got to be someone in the community that could whip this up in no time though.

thestinger · 2014-12-04T23:13:38Z

I would love it if someone submitted a patch to fix the output panel to scale to the bottom of the screen. AFAIK, the only way to do this is via JavaScript or the flexbox model as long as it's not using custom button / select elements with a hardcoded size. It would be great if there was a wide model with the panels side by side but the window really has to be quite wide for that and it needs to make sure each panel has at least 80-100 columns based on the font size.

tomjakubowski · 2014-12-05T00:08:44Z

CSS3 has the new ch unit which could be helpful. It even seems to works in media queries like @media screen (min-width: 160ch) in Chromium and Firefox. I believe it would mean that the font on the html element would need to be set to 1em monospace.

thehydroimpulse changed the title ~~New design!~~ [WIP] New design! Jun 1, 2014

thestinger reviewed Jun 1, 2014
View reviewed changes

huonw mentioned this pull request Jun 3, 2014

Style play.rust-lang.org similarly to www.rust-lang.org, etc. rust-lang/rust#14575

Closed

thehydroimpulse changed the title ~~[WIP] New design!~~ New design! Jun 9, 2014

thestinger reviewed Jun 9, 2014
View reviewed changes

renato-zannon mentioned this pull request Jun 18, 2014

share button #4

Closed

brson mentioned this pull request Jul 21, 2014

adding button styling #31

Merged

thehydroimpulse added 3 commits August 5, 2014 11:06

New design!

f618199

* Refactored the JavaScript to be cleaner and more reusable. * Implemented a simple design. * Added dropdown arrow * Changed ace theme (to be more rustic) * Added Rust logo

Renamed

51c6f17

Refactored everything.

bb2edd7

* Integrated the awesome error reporting that landed in rust-www. * Cleaner Design. * The extra options are hidden by default. * New "More Options" button that toggles the extra options. * Modified the button styles. * New evaluate button!

thehydroimpulse added 2 commits August 5, 2014 11:13

Forgot to remove the extra js file

8017aba

Updated to use the new separate_output option

e8a995c

brson added a commit that referenced this pull request Aug 5, 2014

Merge pull request #5 from thehydroimpulse/master

4af297e

New design!

brson merged commit 4af297e into rust-lang:master Aug 5, 2014

		});


		function handleResult(result) {

New design! #5

New design! #5

Conversation

thehydroimpulse commented Jun 1, 2014

thehydroimpulse commented Jun 1, 2014

thestinger commented Jun 1, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alan-andrade commented Jun 2, 2014

brson commented Jun 2, 2014

thehydroimpulse commented Jun 3, 2014

brson commented Jun 4, 2014

brson commented Jun 4, 2014

thehydroimpulse commented Jun 5, 2014

thestinger commented Jun 5, 2014

adrientetar commented Jun 5, 2014

thehydroimpulse commented Jun 8, 2014

brson commented Jun 8, 2014

thehydroimpulse commented Jun 9, 2014

thehydroimpulse commented Jun 9, 2014

brson commented Jun 9, 2014

thestinger commented Jun 9, 2014

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brson commented Jun 16, 2014

thehydroimpulse commented Jun 16, 2014

thestinger commented Jun 16, 2014

thehydroimpulse commented Jun 16, 2014

cburgdorf commented Jul 10, 2014

brson commented Jul 10, 2014

thehydroimpulse commented Jul 11, 2014

thehydroimpulse commented Aug 5, 2014

thehydroimpulse commented Aug 5, 2014

brson commented Aug 5, 2014

alexcrichton commented Aug 5, 2014

alexcrichton commented Aug 5, 2014

thehydroimpulse commented Aug 5, 2014

sinistersnare commented Dec 4, 2014

thestinger commented Dec 4, 2014

Inspiravetion commented Dec 4, 2014

thestinger commented Dec 4, 2014

Inspiravetion commented Dec 4, 2014

thestinger commented Dec 4, 2014

tomjakubowski commented Dec 5, 2014