7 ms·

Responsive Dashboard

242 points by tilt 12y ago

pan69 12y ago
Where's the Angular part? None of the links seem to work..
- bottled_poe 12y ago
  Or the responsive part for that matter. Nothing is working for me on Firefox 31.
  - IbJacked 12y ago
    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.
  - krat0sprakhar 12y ago
    Responsive for me on Chrome / Mac - http://drp.io/Rl http://drp.io/Rl
  - aliasell 12y ago
    Odd, will look into that... can't think of a reason it shouldn't.
- IbJacked 12y ago
  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."
  - OutThisLife 12y ago
    Could easily do this with media queries.
    - pyre 12y ago
      > managing a toggle cookie to keep the state the same when the page is reloaded ... with @media queries? Tell me more!
      - progx 12y ago
        And for this simple thing you need angular ???
IbJacked 12y ago
Here's the project's home on Github: https://github.com/Ehesp/Responsive-Dashboard https://github.com/Ehesp/Responsive-Dashboard
nikon 12y ago
Not really much AngularJS code?
- Wintamute 12y ago
  Yeah. There's really no reason to put Angular in the title at all.
itsbits 12y ago
its crap...whatz so angular in this? 45 points for this..really..!!!
- sehr 12y ago
  There really isn't anything at all special about this, the jQuery equivalent wouldn't have made it to 5.
kmfrk 12y ago
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 12y ago
  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.
  - kmfrk 12y ago
    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.
    - bshimmin 12y ago
      Take a deep breath, seriously. It seems likely you're way more upset about it all than the guy who wrote the original repo.
lelandriordan 12y ago
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 12y ago
  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.
marco1 12y ago
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 12y ago
  Thanks! That was the idea.
cpursley 12y ago
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!"
honr 12y ago
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.
cessor 12y ago
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 12y ago
  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 12y ago
    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 12y ago
This looks nice, but I do have some quibbles of a different nature. https://github.com/Ehesp/Responsive-Dashboard/blob/master/js/angular/bootstrap.js#L59 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/angular/bootstrap.js#L25 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.
- aliasell 12y ago
  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.
  - deleted 12y ago
    [deleted]
kaared 12y ago
If you want a quick overview of what this looks like on various devices: http://ami.responsivedesign.is/?url=http://ehesp.github.io/Responsive-Dashboard/ http://ami.responsivedesign.is/?url=http://ehesp.github.io/R...
- mobiplayer 12y ago
  Funnily enough that site looks terrible on an iPhone...!
aliasell 12y ago
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.
conradfr 12y ago
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 12y ago
  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.
Gepsens 12y ago
This looks EXACTLY like the Dashboard I've been building at my company fot the past 6 month, wtf ?
- aliasell 12y ago
  No idea :p
asdfologist 12y ago
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 12y ago
  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_queries 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/ http://getbootstrap.com/

242 points by tilt 12y ago

pan69 12y ago

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

bottled_poe 12y ago
Or the responsive part for that matter. Nothing is working for me on Firefox 31.
- IbJacked 12y ago
  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.
- krat0sprakhar 12y ago
  Responsive for me on Chrome / Mac - http://drp.io/Rl http://drp.io/Rl
- aliasell 12y ago
  Odd, will look into that... can't think of a reason it shouldn't.
IbJacked 12y ago
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."
- OutThisLife 12y ago
  Could easily do this with media queries.
  - pyre 12y ago
    > managing a toggle cookie to keep the state the same when the page is reloaded ... with @media queries? Tell me more!
    - progx 12y ago
      And for this simple thing you need angular ???

IbJacked 12y ago

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

nikon 12y ago

Not really much AngularJS code?

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

itsbits 12y ago

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

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

kmfrk 12y ago

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 12y ago
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.
- kmfrk 12y ago
  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.
  - bshimmin 12y ago
    Take a deep breath, seriously. It seems likely you're way more upset about it all than the guy who wrote the original repo.

lelandriordan 12y ago

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 12y ago
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.

marco1 12y ago

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 12y ago
Thanks! That was the idea.

cpursley 12y ago

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

honr 12y ago

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.

cessor 12y ago

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 12y ago
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 12y ago
  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 12y ago

This looks nice, but I do have some quibbles of a different nature. https://github.com/Ehesp/Responsive-Dashboard/blob/master/js/angular/bootstrap.js#L59 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/angular/bootstrap.js#L25 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.

aliasell 12y ago
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.
- deleted 12y ago
  [deleted]

kaared 12y ago

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

mobiplayer 12y ago
Funnily enough that site looks terrible on an iPhone...!

aliasell 12y ago

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.

conradfr 12y ago

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 12y ago
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.

Gepsens 12y ago

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

aliasell 12y ago
No idea :p

asdfologist 12y ago

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 12y ago
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_queries 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/ http://getbootstrap.com/