Summary

Add Student Sonar frontend code.

Review Request #6897 — Created Feb. 3, 2015 and submitted Feb. 9, 2015, 5:02 p.m.

Information

Owner

david

Repository

student-sonar

Branch

master

Bugs

Depends On

Commit

719c2fb...

Reviewers

Groups

student-sonar

People

Description

The frontend is architected using the new hotness of ES6 and web components.
There are two custom elements currently in use: x-student card, which provides
a small clickable avatar + name, and x-student-view, which is a full-page view
showing the student's name/school/email/avatar, and contains the different
analytics for each student.

At the moment, we show their participation on Slack using a github-like heatmap
calendar, and a list of their review requests on Review Board. Future
improvements will show code reviews, status reports, and links to their notes.

There's a lot still to be improved here, but this is a good start.

Testing Done

Files

Issues

Description	From	Last Updated
Blank line between these.	brennie	Feb. 6, 2015, 3:19 p.m.
Blank line between these.	brennie	Feb. 6, 2015, 3:20 p.m.
Nit - double-quotes for href and rel	mike_conley	Feb. 8, 2015, 8:05 p.m.
As mentioned in Slack, we'll need the shim-shadowdom attribute set here to activate the polyfills for things like /deep/.	mike_conley	Feb. 8, 2015, 8:05 p.m.
While this is ocurring, would it be worth displaying a spinner or loading message instead of just a blank page?	mike_conley	Feb. 8, 2015, 8:10 p.m.
innerText is non-standard. We should use textContent here.	mike_conley	Feb. 8, 2015, 8:07 p.m.
So I think I've found a cross-browser solution that allows us to avoid adding the template <style> rules to style.css. …	mike_conley	Feb. 8, 2015, 8:07 p.m.
I assume, reading the rest of these rules, that an updated CSS spec says that we don't need a semi-colon …	mike_conley	Feb. 8, 2015, 8:09 p.m.
Nit - spaces after :	mike_conley	Feb. 8, 2015, 8:09 p.m.

Tool: Pyflakes
Ignored Files:
    index.html
    lib/frontend/x-student-view.js
    lib/frontend/main.js
    lib/frontend/x-student-card.js
    lib/frontend/components.js
    style.css
    README.md



Tool: PEP8 Style Checker
Ignored Files:
    index.html
    lib/frontend/x-student-view.js
    lib/frontend/main.js
    lib/frontend/x-student-card.js
    lib/frontend/components.js
    style.css
    README.md

lib/frontend/x-student-view.js (Diff revision 1)
The issue has been resolved. Show all issues
```
Blank line between these.
```
lib/frontend/x-student-view.js (Diff revision 1)
The issue has been resolved. Show all issues
```
Blank line between these.
```

Change Summary:


Make requested fixes.
Use browser history API to enable the back button, get rid of the hacky "back" link.
Load webcomponents.js as a normal <script> tag.
Tweak some cal-heatmap options.

Commit:

62634fa863e56cbcc721578779bb81f944ff8121

79d79fabf387f50ee8e8eaa1c13be8355b4d8ff3

Diff:

Revision 2 (+494 -4)

Show changes

	README.md
	index.html
	style.css
	lib/frontend/components.js
	lib/frontend/main.js
	lib/frontend/x-student-card.js
	lib/frontend/x-student-view.js

Tool: PEP8 Style Checker
Ignored Files:
    index.html
    lib/frontend/x-student-view.js
    lib/frontend/main.js
    lib/frontend/x-student-card.js
    lib/frontend/components.js
    style.css
    README.md



Tool: Pyflakes
Ignored Files:
    index.html
    lib/frontend/x-student-view.js
    lib/frontend/main.js
    lib/frontend/x-student-card.js
    lib/frontend/components.js
    style.css
    README.md

index.html (Diff revision 2)
The issue has been resolved. Show all issues
```
Nit - double-quotes for href and rel
```

index.html (Diff revision 2)

The issue has been resolved. Show all issues

As mentioned in Slack, we'll need the shim-shadowdom attribute set here to activate the polyfills for things like /deep/.

lib/frontend/main.js (Diff revision 2)

The issue has been dropped. Show all issues

While this is ocurring, would it be worth displaying a spinner or loading message instead of just a blank page?

david Feb. 8, 2015, 8:10 p.m.

Maybe theoretically, but in practice it loads quite quickly. I'll add a TODO.

lib/frontend/x-student-card.js (Diff revision 2)
The issue has been resolved. Show all issues
```
innerText is non-standard. We should use textContent here.
```

lib/frontend/x-student-card.js (Diff revision 2)

The issue has been resolved. Show all issues

So I think I've found a cross-browser solution that allows us to avoid adding the template <style> rules to style.css.
Add a cssAdded boolean to the list of module variables at the top, then in createdCallback, after creating the clone:


        if (Platform.ShadowCSS && !cssAdded) {
            let style = clone.querySelector('style');
            let cssText = Platform.ShadowCSS.shimCssText(
                style.textContent, tagName);
            Platform.ShadowCSS.addCssToDocument(cssText);
            cssAdded = true;
        }


You can probably do it before the clone by querying template.content too, but I didn't try that.

david Feb. 8, 2015, 8:10 p.m.
```
Awesome!
```

style.css (Diff revision 2)

The issue has been resolved. Show all issues

I assume, reading the rest of these rules, that an updated CSS spec says that we don't need a semi-colon after the last rule... right?

If so, I guess we don't need the semi-colon after block.

david Feb. 8, 2015, 8:10 p.m.

This was all adapted from the cal-heatmap CSS, so I didn't even notice this. I prefer semicolons after each line because it's easier to maintain that way.

style.css (Diff revision 2)
The issue has been resolved. Show all issues
```
Nit - spaces after :
```

Commit:

79d79fabf387f50ee8e8eaa1c13be8355b4d8ff3

719c2fbda2d918ed82a8173c12a57cb5b2d59929

Diff:

Revision 3 (+511 -4)

Show changes

	README.md
	index.html
	style.css
	lib/frontend/components.js
	lib/frontend/main.js
	lib/frontend/x-student-card.js
	lib/frontend/x-student-view.js

Tool: PEP8 Style Checker
Ignored Files:
    index.html
    lib/frontend/x-student-view.js
    lib/frontend/main.js
    lib/frontend/x-student-card.js
    lib/frontend/components.js
    style.css
    README.md



Tool: Pyflakes
Ignored Files:
    index.html
    lib/frontend/x-student-view.js
    lib/frontend/main.js
    lib/frontend/x-student-card.js
    lib/frontend/components.js
    style.css
    README.md

Description:: The frontend is architected using the new hotness of ES6 and web components.
~ Unfortunately this means that we're limited to Chrome right now (theoretically,
~ There are two custom elements currently in use: x-student card, which provides
- Firefox should be supported because we're pulling in webcomponents.js, but even
- with that there are some major issues right now; perhaps a Firefox developer
- might be interested in looking at the problems).
-
-
There are two custom elements currently in use: x-student card, which provides
a small clickable avatar + name, and x-student-view, which is a full-page view
showing the student's name/school/email/avatar, and contains the different
analytics for each student.

At the moment, we show their participation on Slack using a github-like heatmap
calendar, and a list of their review requests on Review Board. Future
improvements will show code reviews, status reports, and links to their notes.

There's a lot still to be improved here, but this is a good start.

Ship it!

Let's get this stuff landed and start dogfooding.

Great job on this.

Status:: Completed
Change Summary:: Pushed to master (c459dda)

		The frontend is architected using the new hotness of ES6 and web components.
~		Unfortunately this means that we're limited to Chrome right now (theoretically,
	~	There are two custom elements currently in use: x-student card, which provides
-		Firefox should be supported because we're pulling in webcomponents.js, but even
-		with that there are some major issues right now; perhaps a Firefox developer
-		might be interested in looking at the problems).
-
-		There are two custom elements currently in use: x-student card, which provides
		a small clickable avatar + name, and x-student-view, which is a full-page view
		showing the student's name/school/email/avatar, and contains the different
		analytics for each student.

		At the moment, we show their participation on Slack using a github-like heatmap
		calendar, and a list of their review requests on Review Board. Future
		improvements will show code reviews, status reports, and links to their notes.

		There's a lot still to be improved here, but this is a good start.