

Responsive Dashboard - tilt
http://ehesp.github.io/Responsive-Dashboard/

======
marco1
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.

~~~
aliasell
Thanks! That was the idea.

------
cessor
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!

~~~
aliasell
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.

~~~
Gepsens
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

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

[https://github.com/Ehesp/Responsive-
Dashboard/blob/master/js...](https://github.com/Ehesp/Responsive-
Dashboard/blob/master/js/angular/bootstrap.js#L59) \- 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...](https://github.com/Ehesp/Responsive-
Dashboard/blob/master/js/angular/bootstrap.js#L25) 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.

~~~
aliasell
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.

------
aliasell
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.

------
cpursley
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!"

------
IbJacked
Here's the project's home on Github: [https://github.com/Ehesp/Responsive-
Dashboard](https://github.com/Ehesp/Responsive-Dashboard)

------
kaared
If you want a quick overview of what this looks like on various devices:
[http://ami.responsivedesign.is/?url=http://ehesp.github.io/R...](http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-
Dashboard/)

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

------
honr
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.

------
lelandriordan
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?

~~~
tomasien
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.

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

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

~~~
IbJacked
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.

------
conradfr
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 ...

~~~
aliasell
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.

------
nikon
Not really much AngularJS code?

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

------
asdfologist
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"?

~~~
valar_m
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...](https://developer.mozilla.org/en-
US/docs/Web/Guide/CSS/Media_queries)

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

[http://getbootstrap.com/](http://getbootstrap.com/)

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

~~~
aliasell
No idea :p

------
kmfrk
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.

~~~
bshimmin
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.

~~~
jnbiche
>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.

~~~
bshimmin
> 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.

~~~
lewi
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.

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

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

