260 comments

The build and build-serve tasks do not work. I get an error stating that styles.css is missing. For some reason styles.css is not being created before it is minified. This is the case in both angularjs and angular-seed.

I also think the documentation on this theme is very slim. You have some extremely opinionated ways of coding an angular app with no explanation of why. You also have no explanation of how you would go about fitting your own application into your "theme" and have it be supportable going forward. It seems strange to me that I download a "theme" and that I have to inject my application into your theme. It seems that it should be the other way around. I should be applying your theme to my application.

Maybe I'm missing your intentions, but again, better documentation would certainly help.
Hello, the styles.css is never generated no matter what you do? or only happens after certain commands? Currently it's working fine but perhaps I'm missing something.
I will definitely improve the documentation. If you want to send me your inquiries about parts of the code that results confusing I can explain it better.
Thanks for your suggestions,
Great template. Good investment to learn different approaches to angular.
I also suggest to have a jade-free version for all the people who have other standards.

One question: I can't see the Dock -Horizontal Nav in the running site options and is not clear to me how to set it up in the serve dev or build process. From your docs i get that i should set appropriate ng-class in body, but it already has a bunch in it, and then we have in cache a template/settings, and moreover you also have a reference in routing. I get confused. What is the best approach to follow to get rid of the dinamic teplate choiches and activate the one you like? Sorry maybe it has to do with Jade doing things and I am non a jader.

One additional note. regarding John Papa's Best Practices for Angular, the project structure tends to be more module oriented than yours. Any consideration about this?

thanks Sergio
Hi Sergio, thanks for your kind words.
The dock layout is activated using the app-dock.html file as the main layout view. You can see how to use in the "app-dock" state of the routes configuration. It also needs the class layout-dock to know the theme has activated the dock layout. Of course this could more simple but the multiple layouts support make necessary to have this configuration options. If you need more details about this don't hesitate to write me.
Regarding to last note, that's right, the theme could be "modularized" a little more even, but I don't want to generate a too complex structure that hinders understanding. Please tell me if that's what you mean, or if there is something else.
Also, I'll try to include a build configuration for non jade users.

Thanks again
Regards
I like this theme, however reading the comments I'm slightly concerned this is more than a theme - it's an application. Ideally I'd like to include the less/sass/css, then include an angular module where I'm able to use your directives and build the application my own way, with my own routing approaches etc.

From what I read, it's quite tightly integrated.
Hi Alias, the theme is like a "working application" because it was created to "quick start up a new AngularJs application" with modules/plugin with customized styles, scripts, etc but no separated components like you can find in projects like AngularUI. Of course, you can include the modules in your app but you will need to remove the configuration made for the theme in order to work. It has a modular structure and it was organized to find components as easily as possible (less, js, jade/html)

Feel free to write me if you have questions
Thanks
Regards
Really like the Material design being implemented here. Do you have the front page version for this? Thanks!
Hi, not yet but I have it in plans.

Thanks
Regards
Do you have a version that uses SASS instead of LESS?
Hi, no, for the moment I'm only supporting LESS. I'll consider a migration in the future.
If you are interested, there are good results at google to convert less2css that I'll probably check when I do this. (https://www.google.com.ar/search?q=less+to+sass)

Thanks
Regards
Is there any documentation for this? Again, I thought it was a skin, not an application. I'm happy to learn but need something to start with.
Hi, there's a documentation included. I'll improve some points, but to start with this you need to learn angularJS first because it's an angularjs template based on Bootstrap.
There are many excellent guides around but make sure to read this at some point https://github.com/johnpapa/angular-styleguide

Cheers
Looks very nice.

Don't mean to be rough, but a couple comments:

1. It seems to me the navigation drawer in the template has way too much shadowing. The material design spec looks like no shadow is called for.
http://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-behavior

2. The layout does not behave in a responsive manner when the viewport is narrowed. For instance, select the "Boxed" Layout (or even do not) and narrow the viewport. You start to see that items get hidden (in a bad way) behind the navigation drawer. This behavior does not look like the intended behavior because the flow just feels incorrect.

3. Because we can't see the code without actually buying the template, it still would be nice to know how certain patterns for angular were used. Did you use John Papa's recommendation of 'controllerAs' and 'vm' instead of littering controllers with $scope?
https://github.com/johnpapa/angular-styleguide#controllers
I bought the template today and it contains a lot of $scope
lmaspoch PURCHASED
Also, as i'm sure you've read, the documentation is scarce and yes there's a lot of $scope. I'm trying to implement this theme to the HotTowel template and it's difficult to do since there's a tremendous amount of files and there's no description as to what they do. As a wish list, given that the author mentions HotTowel, it would be nice to have a walkthrough as to how implement the theme on a HotTowel application. This of course is out of the scope of a theme, hence "wish list" :)
Thank you all for the feedback! I will improve all those points for the next update and include more references in the documentation.

Best Regards
lmaspoch PURCHASED
Are there any updates on a version that is HTML based without Jade?
Not yet but almost ready for the next update. Since the code is based on jade most the gulp tasks are configured for such language so I'll include some changes and instructions to work without a precompiled language.
the ASP.NET MVC is too bare to get anyone started.
the documentation is also too shallow, it would have helped me get started after lacking proper a MVC sample.
MVC is a seed project, which means it's a start-point with the basics to run an app with the minimum styles and script . I think that it helps because it has the necessary setup to run AngularJSin a VS MVC environment so you save some time. I've used also almost the same structure for the main files so it's easy to implement (copy/paste) new features.

Thanks for your feedback
Regards
pilgrim PURCHASED
Hi,

This theme is what I was looking for. But one necessarily feature for us is the RTL and translation support. Do you have any plan for this?

Thanks
Hello pilgrim, the translation is currently included. You can change the language in demo by choosing it from the bottom dropdown in the right settings box.
The RTL support is pending for the moment and I don't have a specific date to include it. Anyway, I can suggest this tool which makes really easy to convert stylesheet to RTL https://github.com/necolas/rtlcss

Regards
pilgrim PURCHASED
Hi geedmo,

Do you know that https://github.com/necolas/rtlcss is capable of doing its job for all elements? Not only textboxes, labels but progress bars, table columns, widgets and remaining things?

We have a plan of production by the end of August so we have sligltly over 2 months time. Do you think that you can add this feature by then so that we can get the update?

Thanks
Hi pilgrim, I've plans to release the new version at the beginning of the next week. Currently I don't have RTL support included for this update but I can do it soon after release the new version (I don't want the delay it more)

Regards
pilgrim PURCHASED
Hi again,

When do you plan to relese the new updates? I'm waiting this theme.
Hi again, same as above, I've plans to release the new version at the beginning of the next week.
pilgrim PURCHASED
A few suggestions from me;
Tour plugin - http://bootstraptour.com/
File manager page - there are some themes who have this page template
Some javascript templating engine - I dont know very well I heard about swig
Sweet Alerts
Great! I'll include this features for the following update if possible (after the actual in progress)

Thanks!
pilgrim PURCHASED
more suggestions;
ngGrid - with crud functionality

The theme is excellent but it is just 2 months old. We want some more features :)

Regards
Same as above, thanks again pilgrim!
pilgrim PURCHASED
geedmo,

You are the developer of the Singular theme. And in that theme there is RTL support, moreover LTR and RTL ar combined in the same project. I'm sure you can add the same feature in a very short time to Naut. Everything fits us perfect, the "no jquery" feature is excellent. So please add this. We need that badly.
That's right, the RTL support is not really hard to implement for me but it needs some time to check/test and adapt to this new theme and the structure. Currently the hard job is to integrate the rtlcss tool as a gulp plugin and run the rtl conversion when building the source files.
Without too much detail I can give a macro estimate that this feature will be available in about two weeks.
Is there something wrong with v1.2 CSS? There is no space at the right side of arrows on the left sidebar. Some margin-right missing I think. I've looked with Chrome, Firefox, Safari and all of them was same.
Hi, do you see the same behavior on the demo? The right space is given with paddings on the "li > a" elements in the sidebar
Yes, I see the same behaviour on the demo. I can fix it but if it seems same for all users, probably you release a new version. I'm using Mac by the way.

You can find a screenshot below.

http://tinypic.com/r/13zubz6/8
Hi, found the issue only on safari mac (I haven't seen it before because Im on Windows). The issue happens because of the different browser behaviors (e.g. Chrome works fine).
The quick fix is to limit the size of LI items in the sidebar up to the sidebar width

.sidebar .nav > li {
max-width: 240px;
}

Just in case, this number is the same used to set the size of the parent aside element that contains the sidebar so it's not a hardcoded value.

Thanks
Regards
I faced this issue on Chrome, firefox and safari on mac but this CSS addition has fixed the issue, thanks.
Hello geedmo,

I'm facing a similar problem with v1.2 but the arrows are misaligned top-to-bottom. You can see a screenshot here http://www.screencast.com/t/4wziK79u6ym

The issue presents in Firefox but not in Chrome.

Thanks in advance for your support.
Hello @hozkarpatrick, that could be fixed by moving the <em> tag used for arrows as the first child of the anchor element. That's like a bug with floating elements.

<a ... >
<em class="sidebar-item-caret pull-right fa fa-angle-right"></em>
<em class="sidebar-item-icon ..."></em>
<span>Item Name</span>
</a>

Let me know if problem persists
Regards
FYI, I wrongly answered with another account.
Thanks for your answer, I will try the patch and let you know. Will it be fixed in next release?
I'll changed the order of the tags and everything is back to normal. Forget about the fix. Thanks a lot!
Hi @hozkarpatrick, sure it will be fixed and basically the fix will be add the tags in the right order so future versions doesn't need to deal with this.

Thanks
Regards
pilgrim PURCHASED
Hi geedmo,

We are back again. God bless your hands. The change log says that you've included the RTL support which was what we were expecting. But where is this feature in the demo? Is it possible to add a switch into the setting bar to make it RTL to LTR and vice versa?

And a questin about material design; Does this theme use Angular Material https://material.angularjs.org or is it custom made by you?

Btw. we noticed a little bug, we think it is about "Fix sidebar automatically goes offscreen on resize" on your change log.
Reproducing the bug : I use chrome. When I resize the browser to a smaller size, the side bar get disappered. This is ok, but when I return to a bigger size back the side bar is still invisible and cant get it back. (Only when I click the arrow on the top left) Besides this bug, as a suggestion may be when the screen size get small the side bar mini can be activated.

Regards
Hi pilgrim,

RTL: I made changes for gulp but no demo only because I didn't want to delay more the last release.
I can upload a demo of the RTL version if you want to see it working, will be the same but compiling the source with RTL flag on.
Angular Material: not included yet but working on it for the next update.
Sidebar bug: That's right, not really a bug but I can improve it. Main change will be adding a check block to set the sidebarOffscreen flag off when size is changing to desktops.

Thanks for all your suggestions.
Regards
pilgrim PURCHASED
Hi geedmo,

It will be nice if you can provie an RTL demo. In fact what we actually need is; when the user selects an RTL language from the language switcher the whole site gets RTL. Can you provide a demo for this? Or you may give some code to us to achieve this.

Regards
Hi pilgrim, the RTL version is uploaded here http://geedmo.com/themes/naut/v1.2/angularjs-rtl

I can share with you some ideas if you need to change between rtl/ltr dynamically. The easy way is with AngularJS, for example, using a link tag with ng-href="{{variable}}" so you update the variable content with the url of stylesheet depending on the current selected language. Or you can use two links tags (one for lrt and the other for rtl) and ng-if together with a flag variable to enable only the right stylesheet.

Regards
I found a problem, when you change the browser resolution to the size of the phone screen, and then restore the menu disappeared.
Material open
Hi, that's right, it remains hidden when go to mobile and come back to desktop again. That's a behavior by design but I'll change it in the following update.

Thanks
espratik PURCHASED
hi...i have purchased nauts admin theme for our one of php codeigniter application. Theme is very fabulous and awesome but i cant able to write my php codeigniter code using this theme... can you please guide me how i ca develop my php codeigniter application by using this awesome nauts theme..
Hi, you will have to adapt all pages to the CI structure.
For example, copying the assets folders (js, css, img, etc) to the project root, then copy all html pages to the application/views folders and so on. Once you have your CI structured, you will need to fix assets url using the base_url() function.
This are the minimum steps that came to my mind to migrate a code to CI, can't tell all the steps because I haven't tested but you can google a bit more for issues related with paths. The jQuery version will be more easy to implement in CI.

Regards
Dashboard chart links dont work in HTML version

But I like it, very nice
Hi, thanks!
what do you mean with chart links?
this is a fantastic theme with material design I been waiting for!
However when I gulp serve it in a development environment and change the file in src folder, the live reloading doesnt seem to work, I mean the page did automatically refresh but it didnt change anything.
Hi! Sorry for the long delay. I've sent you an email about this.

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$14
754Purchases

Licenses: Details »

Single application $14
Version:1.4
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: admin, angularjs, bootstrap, dashboard, gulp, html5, jade, less, material
Item#:WB0LX03F7
Released:2 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap
geedmo

geedmo

Signed up 4 years ago

Need a front-end theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: