Responsive Dashboard | Hacker News Reader

Responsive Dashboard

ehesp.github.io

242 pointstilt48 comments

Compare this to any admin template from WrapBootstrap and you know why this is at the top.

If you look at a WrapBootstrap template, it generally looks nice -- but as soon as you look at the code, your opinion will change. They literally include any popular JavaScript library that exists, just to show off what's possible. And the code is not well-written, either. 70 HTTP requests and 5MB resources to load is the new normal there.

This one here, in contrast, is clean, polished, and shines due to its simplicity.

Thanks! That was the idea.

I like it, it looks really great!

However, the html offers a couple of great chances to use angular directives or some databinding. Especially the custom directives offer a great way to show the semantics or the intent of what the page is all about, so that in the end the dashboard could read somthing like:

   <overview>
     <users></users>
     <servers></servers>
     <documents></documents>
     <tickets></tickets>
   </overview>

   <server-list></server-list>
   <user-list></user-list>
   <extras></extras>
   <...></...>

Something like that; you get the idea.

Keep up the great work!

Hey, I'm the author of this and never knew this was posted on here.

I'm really a backend developer so my knowledge of Angular really isn't that great. I'll look into what you suggested, however I didn't want it to be too complex; quick and simple way to get up and running was the idea.

Hey aliasell, I'm actually developing a similar dashboard at my company. I'm a full stack developer, feel free to PM me github.com/Igosuki

This looks nice, but I do have some quibbles of a different nature.

https://github.com/Ehesp/Responsive-Dashboard/blob/master/js... - this is an expensive operation. It would be better to use window.matchMedia and do a $scope.$apply() only precisely when needed. https://github.com/Ehesp/Responsive-Dashboard/blob/master/js... is also expensive too, since getWidth is a function.

My other criticism is that it should avoid adding ngCookies as a requirement, as it is a not so great portion of angular.

I think some of the people criticizing this miss the point of something like this. It is a theme that is geared specifically towards people who use Angular & don't want to use jQuery. If you don't use Angular/want to use Angular, this isn't for you - or you can fork it and port it over.

Hey, thanks for the suggestions appreciated. I'll dig into the width and apply areas, my JS isn't my strongest area so the implementation came from a "what works" situation.

Thought I'd leave this here. I'm Elliot (owner of the repo).

The dashboard isn't intended to be driven by Angular, it's more of a basis of getting going on a project without messing about with the initial setup - however have a 'clean' boilerplate to work with without the masses of plugins all of these premium dashboards come with.

I'm also not a pro coder, and do it for a hobby so comments on improving are much appreciated. It's free, open source, I'm massively open to people improving my code so if you can please do. I'm currently learning Angular so appreciate it may not be coded to a specific standard I don't know about.

I for one have starred this. Instead of being assholes, create some PRs. The notification right at the top says:

"Feel free to create pull requests to improve the dashboard!"

Here's the project's home on Github: https://github.com/Ehesp/Responsive-Dashboard

If you want a quick overview of what this looks like on various devices: http://ami.responsivedesign.is/?url=http://ehesp.github.io/R...

Funnily enough that site looks terrible on an iPhone...!

Awesome dashboard and project! Bookmarked to come back to it and use it :-)

P.S.: Wish the title was not so poorly chosen. Remember that title really does matter when submitting anything to Hacker News.

While this looks good aesthetically, this is a prime example of needlessly using JavaScript for the hell of it. This is like an anti best practice. It loads 4 extra resources (Angular, Angular Cookie, Angular UI Bootstrap and the custom bootstrap.js) for no legitimate reason. And the CSS is inexplicably written using selectors like the following: "#page-wrapper:not(.active)". Why not target "#page-wrapper" and then "#page-wrapper.active" instead?

Your CSS quibble is a matter of taste, you have a legitimate complaint about the JS so I wouldn't muddy it with a taste based comment about CSS verbosity.

Where's the Angular part? None of the links seem to work..

I found this in the readme (there's also a jQuery branch, too, apparently):

"AngularJS is simply being used to power the sidebar toggle (side in and out). It does a combination of detecting the browser size and managing a toggle cookie to keep the state the same when the page is reloaded. Check out the js/angular/bootstrap.js file."

Could easily do this with media queries.

> managing a toggle cookie to keep the state the same when the page is reloaded

... with @media queries? Tell me more!

And for this simple thing you need angular ???

Or the responsive part for that matter. Nothing is working for me on Firefox 31.

It's responsive for me in FF 31 (OS X) and in Chrome. When the window size is reduced, the content boxes reflow from multi-column to single-column, and the navigation on the left goes from text+icon to icon only.

Responsive for me on Chrome / Mac - http://drp.io/Rl

Odd, will look into that... can't think of a reason it shouldn't.

Not to criticize this project specifically but I was task some weeks ago to implement a design with a unfoldable menu like that.

Clueless manager loved it (yeah animation !) but it's not great. In practice you never want to unfold it because it doesn't give you anything other than labels. So then you are asked to display labels on mouse hover when it's folded.

And then you must add submenu ...

Not at all. I know what you mean, however a tooltip is easy to add to the labels - issue is this won't solve the issue for mobile devices.

As for sub-menus, I never needed it for my project so never added it... and honestly didn't expect anyone else to see this. Will have a tinker with it though, see if I can make it look decent.

Not really much AngularJS code?

Yeah. There's really no reason to put Angular in the title at all.

Hey this is a dumb question, but what exactly does "responsive" mean here? Is this a technical HTML/Javascript term? Or does it mean simply "fast"?

Not a dumb question. Responsive design is a modern web development technique for building sites that adapt to the screen on which they are being viewed. The idea is to provide a good user experience on mobile, desktop, and tablet with only a single web site (as opposed to detecting mobile/tablet devices and redirecting to a mobile-only version).

To see it in action, go to the link in the OP and just resize your browser window down to tablet size, and then down to mobile.

This is accomplished primarily through CSS3 media queries and fluid layouts (using percentages for element widths instead of fixed widths). You can read about CSS3 media queries here:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media...

Perhaps the best resource for implementing responsive design is the Bootstrap framework:

http://getbootstrap.com/

This looks EXACTLY like the Dashboard I've been building at my company fot the past 6 month, wtf ?

No idea :p

God, these comments are why people hate Hacker News.

If you want to post an awesome project like this one, better do it somewhere else, if you want to be encouraged to keep working on it.

The design is absolutely gorgeous, for what it's worth.

I agree it looks fine (though it's not exactly April Zero...), but I think the comments below legitimately address some of the issues with the JavaScript (60 or so poorly formatted lines, using Angular for no reason at all) and the CSS - and probably people are confused as to why this frankly somewhat amateurish project is currently at the top of HN.

From the title, I think you'd expect something that's cleverly using Angular to pull in data dynamically from disparate sources and plotting pretty charts from it, rather than just some static HTML and CSS.

>people are confused as to why this frankly somewhat amateurish project is currently at the top of HN.

Probably the GP's irritation comes from the same place as mine: needlessly abrasive remarks instead of encouragement and constructive criticism that a community like this should provide.

And why do people care so much that this is at the top of HN, as opposed to the bottom?

>I think you'd expect something that's cleverly using Angular to pull in data dynamically from disparate sources and plotting pretty charts from it,

That part is relatively easy to add, given the nice template this provides. Really, for me, creating this kind of layout is the time-consuming part. Pulling in data from some REST api is a relatively quick task.

> And why do people care so much that this is at the top of HN, as opposed to the bottom?

Well, there are only so many hours in the day, and it's nice to see exciting and innovative projects (and articles) gravitate towards the top - that is, surely, how HN is supposed to work.

Well it is at the top. It's obvious that this is representative of the interests of HN, otherwise it wouldn't be there. Sorry it doesn't meet your standards.

You mention it being amateurish. A constructive response would be to take it, pull in some REST data and show everyone whats possible. Or you could just complain.

It's a weekend. Different stuff surface on the weekend.

You are visit /new and upvoting excellent articles?

>this frankly somewhat amateurish project

Any links to your frankly great professional projects?

This project is better than lots of dashboards I've seen, even for quite celebrated companies. And don't get me started on freakishly expensive enterprise services dashboards...

I think this guys comments are being unfairly downvoted. I also expected some interesting Angular stuff going on given the link title.

It does look nice though and I have bookmarked it for future reference.

    From the title, I think you'd expect something that's cleverly
    using Angular to pull in data dynamically from disparate
    sources and plotting pretty charts from it, rather than just
    some static HTML and CSS.

There's nothing to suggest the creator submitted the link - and Hacker News enforces the dumb <title> rule - so I don't see why that's a reason to get pissy in the comments.

We all have some random crap lying around on GitHub, and anyone can submit it arbitrarily one day. That still does not excuse the absurd mentality here from people who seem to never have made nor submitted anything of their own, since they don't know how obnoxious it is to read comments like these for your own project.

+ + +

    this frankly somewhat amateurish project

You are such an asshole for writing this. I rest my case.

I'm happy this project is at the top of Hacker News; it means there's a silent majority who are not represented by the people behind the comments on this thread.

Take a deep breath, seriously. It seems likely you're way more upset about it all than the guy who wrote the original repo.

I'm sorry, do you find it uncomfortable to receive criticism on the Internet?

Calling someone an asshole isn't criticism, it's an insult.

That was criticism.

> Calling someone an asshole isn't criticism, it's an insult.

It's both.

No need to apologise. Honestly, relax - it's Sunday, go spend some time with your friends and family instead of worrying about other people on the Internet. It's all going to be fine, I promise.

its crap...whatz so angular in this? 45 points for this..really..!!!

There really isn't anything at all special about this, the jQuery equivalent wouldn't have made it to 5.

Reply on news.ycombinator.com