whmcsDNSManager/modules/addons/DNSManager2/templates/admin/main.tpl

<div class="mg-wrapper body" data-target=".body" data-spy="scroll" data-twttr-rendered="true">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=all" rel="stylesheet" type="text/css"/> 
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/simple-line-icons.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/uniform.default.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/components-rounded.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/jquery.dataTables.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/select2.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/onoffswitch.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/jquery-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/icheck/all.css"> 
    
    <link rel="stylesheet" type="text/css" href="{$assetsURL}/css/mg-style.css">
    {literal}
        <script data-cfasync="false" type="text/javascript">
            var bootstrap_src = "{/literal}{$assetsURL}{literal}/js/bootstrap.js";
            if (!window.jQuery) { 
                document.write('<script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"><\/script>'); 
                document.write('<script data-cfasync="false" src="' + bootstrap_src +'" type="text/javascript"><\/script>'); 
            } else {
                var sp = jQuery.fn.jquery.split(" ")[0].split(".");
                if(sp[0]<2 && sp[1]<9 || 1==sp[0] && 9==sp[1] && sp[2]<1)
                    document.write('<script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"><\/script>'); 
                jQuery(window).load(function () {
                    if(!jQuery.fn.modal)
                        jQuery('.mg-wrapper').prepend('<script data-cfasync="false" src="' + bootstrap_src +'" type="text/javascript"><\/script>'); 
                });
            }
        </script>
    {/literal}
    
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/bootsrap.tooltip.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/mgLibs.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/validator.js"></script>
    {*<script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/bootstrap.js"></script>*}
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/jquery.dataTables.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/dataTables.bootstrap.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/select2.min.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/bootstrap-hover-dropdown.min.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/jquery-ui.min.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/icheck.min.js"></script>
    <script data-cfasync="false" type="text/javascript" src="{$assetsURL}/js/customDatatablePagination.js"></script>    
    <script data-cfasync="false" type="text/javascript">
        JSONParser.create('{$JSONCurrentUrl}');
        {literal}
            jQuery(document).ready(function(){
                $( "input[data-datepicker]" ).datepicker({
                    dateFormat: 'yy-mm-dd'
                });
                $(".mg-wrapper [title]").bstooltip();
                
                //used to change positioning inside of module navbar
                var navbar_in_two_lines    = false;                
                var navbar_width_hide_names    = 0;
                var resized_logo    = false;
                var mg_logo         = jQuery('.logo-default').attr( "src" );
                var mg_logo_cog     = mg_logo.replace("mg-logo.png","mg-logo-cog.png");
                
                function NavigationSet() {
                    var navbar_height = jQuery('.page-header').height();
                    
                    if(jQuery('.page-header').width()<=(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width()+jQuery('.modulename > a').width()+40) && !navbar_in_two_lines) {
                        jQuery('.page-container').addClass('centered');
                        navbar_in_two_lines = true;
                    }
                    else if (jQuery('.page-header').width()>(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width()+jQuery('.modulename > a').width()+40) && navbar_in_two_lines && !navbar_width_hide_names && !resized_logo) {
                        jQuery('.page-container').removeClass('centered');
                        navbar_in_two_lines=false; 
                    }
                    
                    //check if short logo should be shown
                    if(jQuery('.line-separator').width()<=(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width())&&!resized_logo && !navbar_width_hide_names ){
                        jQuery('.logo-default').attr( "src", mg_logo_cog );
                        resized_logo=true;
                    //switch back logo to its full form
                    }else if(jQuery('.line-separator').width()>(jQuery('.nav-menu').width()+159)&&resized_logo && !navbar_width_hide_names  ){
                        jQuery('.logo-default').attr( "src", mg_logo ) ;
                        resized_logo=false;
                    }  
                    
                    //  hide page names from navigation bar
                    if(jQuery('.line-separator').width()<=(jQuery('.nav-menu').width()+jQuery('.modulename-logo').width())&&resized_logo ){
                        navbar_width_hide_names = jQuery('.page-header').width();
                        jQuery('.navbar-nav').addClass('short');
                    //  show page names from navigation bar                        
                    } else  if(navbar_width_hide_names < jQuery('.page-header').width() && navbar_width_hide_names!=0){
                        jQuery('.navbar-nav').removeClass('short');
                        navbar_width_hide_names = 0;
                    }
                  }
                  
                  $(document).ready(NavigationSet);
                  $(window).resize(NavigationSet);
            });
        {/literal}
            
    </script>
    
    <div class="full-screen-module-container">
        <div class="page-header">
            <div class="top-menu">
                <div class="page-container">
                    <div class="modulename">
                        <a href="{$mainURL}">{$mainName}</a>
                    </div>
                    <div class="line-separator"></div>
                    <div class="nav-menu">
                        <ul class="nav navbar-nav">
                            {foreach from=$menu key=catName item=category}
                                {if $category.submenu}
                                    <li class="menu-dropdown  {if $currentPageName eq $catName}active{/if}">
                                        <a {*href="{$category.url}"*} href="#"  class="dropdown-toggle" data-hover="dropdown"  data-toggle="dropdown" data-close-others="true">
                                            {if $category.icon}<i class="{$category.icon}"></i>{/if}
                                            {if $category.label}
                                                <span>{$subpage.label}</span>
                                            {else}
                                                <span>{$MGLANG->T('pagesLabels',$catName,'label')}</span>
                                            {/if}
                                            <i class="fa fa-angle-down dropdown-angle"></i>
                                        </a>
                                        <ul class="dropdown-menu pull-left">
                                            {foreach from=$category.submenu key=subCatName item=subCategory}
                                                <li>
                                                    <a {*href="{$subCategory.url}"*} href="#" data-act="{$subCatName}" data-seturlto="{$subCategory.url}">
                                                        {if $subCategory.icon}<i class="{$subCategory.icon}"></i>{/if} 
                                                        {if $subCategory.label}
                                                            {$subCategory.label}
                                                        {else}
                                                            {$MGLANG->T('pagesLabels',$catName,$subCatName)}
                                                        {/if}
                                                    </a>
                                                </li>
                                            {/foreach}
                                        </ul>
                                    </li>
                                {else}

                                    <li class="{if $currentPageName eq $catName}active{/if}">
                                        <a {*href="{$category.url}"*}  href="#" data-act="index{*{$catName}*}" data-seturlto="{$category.url}">
                                            {if $category.icon}<i class="{$category.icon}"></i>{/if} 
                                            {if $category.label}
                                                <span>{$subpage.label}</span>
                                            {else}
                                                <span>{$MGLANG->T('pagesLabels',$catName,'label')}</span>
                                            {/if}
                                        </a>
                                    </li>
                                {/if}
                            {/foreach}
                            <li>
                                <a href="http://www.docs.modulesgarden.com/DNS_Manager_For_WHMCS" target="_blank">
                                    <i class="glyphicon glyphicon-book"></i>
                                       <span>{$MGLANG->T('pagesLabels','documentation','label')}</span>
                                </a>
                            </li>
                            <li class="droddown dropdown-separator">
                                <span class="separator"></span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="modulename-logo">
                        <a href="https://www.modulesgarden.com" target="_blank"><img src="{$assetsURL}/img/mg-logo.png" alt="logo" class="logo-default"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>              
        <div class="page-container">
            <div class="row-fluid" id="MGAlerts">
                {if $error}
                    <div class="note note-danger">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <p><strong >{$error}</strong></p>
                    </div>
                {/if}
                {if $success}
                    <div class="note note-success">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <p><strong>{$success}</strong></p>
                    </div>
                {/if}
                <div style="display:none;" data-prototype="error">
                    <div class="note note-danger">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <strong></strong>
                        <a style="display:none;" class="errorID" href=""></a>
                    </div>
                </div>
                <div style="display:none;" data-prototype="success">
                    <div class="note note-success">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <strong></strong>
                    </div>
                </div>
                <div style="display:none;" data-prototype="warning">
                    <div class="note note-warning">
                        <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
                        <strong></strong>
                    </div>
                </div>
            </div>
            <div id="MGModal">

            </div> 
            <div id="MGConfirmationModal" class="modal" style="z-index: 1055; margin: 30vh auto;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">{$MGLANG->T('confirmation_close')}</span></button>
                            <h4 class="modal-title"></h4>
                            <span style="display: none" class="default-title">{$MGLANG->T('confirmation_default_title')}</span>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">{$MGLANG->T('confirmation_close')}</button>
                            <button type="button" class="btn btn-danger btn-inverse" data-dismiss="modal" data-confirm="">{$MGLANG->T('confirmation_confirm')}</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div> 
            <div class="page-content" id="MGPage{$currentPageName}">
                <div class="container-fluid" id="mg-container">
                    {$content}
                </div>
            </div>
        </div>
    </div>
    <div id="MGLoader" style="display:none;" >
        <div>
            <img src="{$assetsURL}/img/ajax-loader.gif" alt="Loading ..." />
        </div>
    </div>   
</div>