I'm just thinking that I didn't see any notification on the demo.

I used to use this plugin, based on bootstrap 3, that could be a good idea to use in devoops.

https://github.com/ifightcrime/bootstrap-growl

What do you think?

As said, here it is.
But first, let me explain why I had to modify some parts of the original bootstro.js to work with your bootstrap theme (original demo here):

• bootstro-backdrop (dark overlay) was not working as expected, neither the highlighted overlay. I tried to fix it but since it was totally useless to me cos I didn't want to block all that wasn't highlighted, I get rid of it. So no dark overlay, just a popup with instructions.
• Popups were cut by the sidebar when part of it needed to get part of the sidebar to be displayed.
• Popups could not be created if the elements did not exist or were not visible. So there was no way to create a popup for an item inside a dropdown (like the ones from sidebar) and neither for dynamic content, like your ajax loaded pages.
• And some other small things.

The most desirable way to incorporate bootstro.js would be including the original bootstro.js and extend it with a new custom class adapted for your theme but I didn't. Anyway, most of it would have been rewritten.

So I forked bootstro.js here (read readme.md for docs and list of changes).

I've also forked your theme here adding an ugly sample of the modified bootstro.js

Which you can test it here (last item on sidebar). Also, a operating guided tour at TorrentzRSS (ctrl+f5 just in case).

And here the list of changes I've made to add bootstro.js to your theme. They're explained inline and in bootstro.js docs (from fork).

So, if you finally decide to add bootstro.js in devoops theme, the correct choice would be the original one, but it won't work in most cases.

NOTE: Among the different ways of using bootstro.js, I've only tested my changes when creating a guided tour from a json array of elements, as in here. Not tested when creating it from inline html data attributes.

Implementing bootstro.js was not so easy than growl alerts =D

Can you share preprocessor source files ?

Hi,

I noticed today after trying to use a default glyph that because the bootstrap css file is located in the /plugins/boostrap/ folder, the relative paths within the bootstrap.css that points to ../fonts is thus not referenced correctly. They would need to be changed to ../../fonts/ inside the bootstrap.css file

From a forward-compatibility issue, changing the core boostrap file is a mistake.

From a structure point of view, having 2 source areas at different levels will always cause problems.

I'm not sure what the solution is. It seems like so long as the plugins are broken out in their own folders, there will always be problems.

devoops.me
Failed to load page content

Can you add an option for that?

Hi,
This project looks really interesting, great work!. I was thinking that it might be better change the appearance of some buttons at the UI elements, like the buttons sizes, checkbox and radio (I don't get them both). The reason is just to improve the end-user navigation.

the following image should explain :)

thanks for the great work!

Attention, the home page link seems spoofed by a scam virus

Is there a demo link?

Great script, thanks first.

Is there any way or suggestions on how to fix left sidebar on top. As we scroll long pages, both navigation and breadcrumb goes away to top. And no way left to navigate.

When using the changeMonth and changeYear options to display the quick select drop-downs, the output is white on white, and thus not able to be seen to the user unless hovered.

example use case:

function AllTimePickers() could contain a listener such as:

$( "#mydatefield" ).datepicker({ changeMonth: true, changeYear: true });

and it ends up looking like:

It appears none of the examples use those options, so it was likely missed.

Hi, I'm not sure if this is an issue with the release, or an issue with my invocation. This method was working with v1, and now after updating to v2, it breaks.
There doesn't seem to be a documentation sample on modals (or i can't find it)

After opening a modal with the following:
a data-toggle="modal" data-target="#modalbox"> i class="fa fa-plus"> /i></a
(a few selected tags removed to get it to display)

The sample box from the index.html file does indeed 'go modal' since i targeted it by ID and takes over focus. Of course, I can't get any content into it this way. My understanding is that this invocation is the bootstrap default and wants it's own hidden div. I see there are different devoops functions for opening and closing modals via content pass through a listener.

So, given that, what is the correct way to invoke the devoops style modal?

I'm also finding that closing the modal leaves my main web page in 'disabled' state, even though the modal itself is removed from view.

Is there documentation on using these modals without creating a new eventListener for each modal box, and rather use the more generic default bootstrap style approach? I don't see any of the default blocks offering a cut/dry invocation of a generic modal.

Thanks for the great script.

While integrating the devoops theme into our own product, we ran into an issue where clicking the show / hide sidebar button navigated to #, which confused our logic for routing and background updating.

Changing the $('.show-sidebar').on('click') handler in devoops.js to return false fixes this.

This is scenario:
Click on "Messages" icon several times, than click on "Inbox" and see what is happening.

@devoopsme You can not load ajax-content the way you did here: every ajax-page which contains javascripts, will be executed on first load of .ajax-content, and every next load after that will result in re-execution of those scripts, which often lead to multiple load of plugins (i.e datatables, xchart...) and multiple script executions, and messing whole app. To fix this, one may use 3rd party script loader (RequireJS, YepNope) and rewrite your devoops.js ajax-loader. You must use conditional script loader instead of loading HTML DOM with jQuery $(selector).html("content");

There is also other approach without 3rd party JS plugins, but it would require switching to AngularJS, because this issue is result of jQuery limitations.

I'm using a data table plugin feature using the devoops invocation code:

function LoadDataTablesScripts(callback){
    function LoadDatatables(){
        $.getScript('plugins/datatables/jquery.dataTables.js', function(){
            $.getScript('plugins/datatables/ZeroClipboard.js', function(){
                $.getScript('plugins/datatables/TableTools.js', function(){
                    $.getScript('plugins/datatables/dataTables.bootstrap.js', callback);                    
                });
            });
        });
    }
    if (!$.fn.dataTables){
    LoadDatatables();
     }
         else {
       if (callback && typeof(callback) === "function") {       
        callback();
       }
      }
}   

So, all the JS gets loaded, but the style that comes with the direct download, jquery.dataTables.min.css is not even included in the plugins folder.

Was this done on purpose? overlooked? Can we simply use a get call (not getScript ?) to include the css as well ? I'd like to implement some of the table styles that come with the DT package.

UI tends to become heavily unresponsive in some environments (i.e slow networks) due to usage of synchronous XHR. Some browser even crashes, other stops executing thread due to timeout.

Request causing this symptom is located in main js

/js/devoops.js:1150

async: false


Switching this boolean to true actually can't solve the problem (in fact, nothing can return lost requests), but it helps a lot as at least let user interact with other UI elements, navigate away or send another XHR to call actions as logout for example.

When using Devoops on a smaller screen, for example 768px x 1024, the dropdown menu items are not showing. Screenshot attached.

For Example:
If i am in the page "Data Tables"

-Tables
----Data Tables

The left side menu gets active and it highlights the "Data Tables" Page
But if i refresh the "Data Tables" page it should highlight the same "Data Tables" Page in left side menu after Refreshing, but it is highlighting the Dashboard Page

Any way i corrected this issue in my project by getting the current link in jquery and adding the active class in css using jquery for Left Side Menu

If we fill out the input fields using autocomplete still it shows up the Bootstrap validation errors

For Example: though if the username is correct which i filled using autocomplete it still shows the error of the username validation

In forms_layouts.html under Validator Forms

normal modals like http://getbootstrap.com/javascript/#modals-examples,
are left behind a transparent div (

After searching for a while found that removing z-index on style.css (Line 78) modals work again but i dont know if this couse other problems !!

content {

position: relative;
z-index: 2000; -> removing THIS .
background: #ebebe

Hi there and thanks for devoops!
This is more of a request or question than an issue...

I've tried to stop the left menu sidebar from scrolling so that it remains visible on the page at all times, but can't quite manage without breaking everything. Are you able to help with this.. is it even possible?
Thanks heaps
Rob

I found that on dialog on long pages, the item appear on very bottom and not visible.
I found a JS workaround for this:
$( objectID ).click(function() {
$('html, body').animate({
scrollTop: $("#dialog-confirm-standard").offset().top
}, 2000);
$( "#dialog-confirm-standard" ).dialog({
... rest of code

This 'move' in proper place the dialog.

Showing access denied error in IE10. but working fine firefox

When expanding a multilevel menu on a narrow screen it keeps expanding to the right. This works reasonably ok for the first level, but not for second level or after. On full width lay-outs the menu expansion is much more compact. I think a similar approach would be suitable for narrow screens too.

First of all, thank you for the wonderful devoops theme!

I noticed an issue that the browser back button doesn't work as expected when navigating the devoops dashboard. After pressing back, the url is updated as expected e.g.:http://devoops.me/themes/devoops/#ajax/ui_grid.html ==> http://devoops.me/themes/devoops/#ajax/dashboard.html
but the page contents is not updated.

Tested on latest ie, chrome and firefox

I am using these toggle buttons.

<div class="toggle-switch toggle-switch-warning">
    <label>
        <input type="checkbox" checked="">
        <div class="toggle-switch-inner"></div>
        <div class="toggle-switch-switch"><i class="fa fa-check"></i></div>
    </label>
</div>

and i have 3 on the page. but when I click any of them, only the first button at the top toggles. So for example, if I try to click the second item, the first items toggles. I can't find any reasons it is doing this. And was hoping to get some input and how it should be used as I cannot really find any docs.

would be really nice if you could put #ajax links into the ajax loaded page content and have it reload the content.

Hi, your project looks really cool!

I was wondering if it is possible (or you could point me in the right direction) to use devoops from Symfony2. I am using Braincrafted Bootstrap Bundle.

I am new to Symfony and I guess Bundles are there in Symfony to make things easier, but I have the feeling I have to make independent bundles for each dependency library devoops use.

Any help will be appreciated, thanks!

It would be great if you could include the base .less bootstrap files. It would allow people to be able to really customize and would make this project better for the open source community.

it sort of works but...
i get an error from $( "div.box").not('.no-drop')
saying that .not is not a valid function, which in IE8 is true

anyone done any work making changes to support old browsers?

how to accept the form data?
Now when I send the data, then this link:

http://mydomain.com/index.php?formdata=this+is+send+the+form#site/formprocessing.php

in the index.php gets the data, and do not pass the formprocessing.php
as it should:
http://mydomain.com/index.php#site/formprocessing.php?formdata=this+is+send+the+form

how to send the form?

There are memleaks present in demo all aroud, which will cause this template to consume all remaining free memory over time.

Source of this memory leaks is random data generator used to generate example data for chars and dashboard.

Another memleak source is present because of console logging every single generated value.

Even after purifying code of demos and unneeded console logs, resources used by real-time charts need to be freed at some point of time when old ones becomes unneeded in order to improve memory management.

Hello,
I am experimenting devoops using firefox 34 on Ubuntu 14.04 from file://path/index.html
Almost everything looks fine.
However, when I reduce the size of the browser to test how things will look in iPhone, the fa-bars button stops working. Then if I restore the original size of the browser, it starts working again.
I don't see this happening when I run the demos hosted at http://devoops.me/
Is there an explanation for this?