git.roojs.org Git - roojs1/blob - examples/bootstrap/framed.html

   1 <!--
   2
   3 just a html scratch pad to see how the layout might look..
   4
   5 Conclusion
   6 Tab panels are ok in bootstrap - and we can use them
   7 however the layout stuff is pretty borked, as it was not really designed for a framed layout
   8
   9 looking at porting the roo code for this purpose..
  10
  11
  12 -->
  13
  14 <!DOCTYPE html>
  15 <html>
  16   <head>
  17     <title>Framed layouts for bootstrap</title>
  18     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19
  20     <!-- Bootstrap -->
  21     <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
  22
  23     <link rel="stylesheet" href="../../css-bootstrap/font-awesome.min.css">
  24     <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
  25
  26     <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
  27
  28
  29
  30
  31     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
  32     <!-- bootstrap js.. needs to compile it later.. -->
  33     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
  34
  35
  36     <style>
  37         /**
  38           css modifications that might be needed...
  39         */
  40
  41         body > .header {
  42             overflow: hidden;
  43         }
  44         .navbar ul.nav-tabs {
  45             margin-top: 9px;
  46             display: table;
  47         }
  48
  49     </style>
  50
  51
  52      <script type="text/javascript">
  53         Dashboard = {};
  54      </script>
  55
  56     <!-- test code -->
  57
  58   </head>
  59   <body id="body">
  60     <script type="text/javascript">
  61       Roo.onReady(function() {
  62           //Roo.XComponent.build();
  63           //Roo.bootstrap.Tooltip.init();
  64       });
  65     </script>
  66
  67     <header class=" header" id="roo-comp-1010">
  68         <a href="#" id="roo-comp-1012" class="logo">Example</a>
  69         <nav class="navbar navbar-default navbar-static-top" role="navigation" id="roo-comp-1014">
  70             <div class="navbar-header">
  71                 <button type="button" class="navbar-toggle" data-toggle="collapse" id="roo-gen23">
  72                     <span class="sr-only">Toggle navigation</span>
  73                     <span class="icon-bar"></span>
  74                     <span class="icon-bar"></span>
  75                     <span class="icon-bar"></span>
  76                 </button>
  77             </div>
  78             <div class="collapse navbar-collapse" id="roo-gen26">
  79                 <ul class="nav nav-tabs" role="tablist">
  80                     <li class="active"><a href="#home"">CRM</a></li>
  81                     <li ><a href="#profile" >Document manager</a></li>
  82                     <li ><a href="#messages">Content Manager</a></li>
  83                     <li ><a href="#settings">Accounts</a></li>
  84                     <li ><a href="#settings">Accounts</a></li>
  85                     <li ><a href="#settings">MTrack</a></li>
  86                     <li ><a href="#settings">Git</a></li>
  87                     <li ><a href="#settings">Admin</a></li>
  88                     <li ><a href="#settings">Logs</a></li>
  89                   </ul>
  90             </div>
  91             <div class="x-dlg-mask" id="roo-gen25" style="width: 1497px; height: 50px; display: none;"></div>
  92         </nav>
  93     </header>
  94
  95     <div class="tab-content">
  96         <div role="tabpanel" class="tab-pane active" id="home">
  97         <aside class=" left-side sidebar-offcanvas" id="roo-comp-1030"><div class="sidebar sidebar-nav" id="roo-comp-1032"><div class="x-dlg-mask" id="roo-gen40" style="width: 220px; height: 1px; display: none;"></div><ul class="dashboard-menu sidebar-menu" id="roo-comp-1034"><li class=" open x-open dropdown-toggle" id="roo-comp-1036"><a href="#" class="dropdown-toggle treeview"><i class="fa fa-bar-chart-o"></i><span>test</span><i class="glyphicon glyphicon-chevron-down pull-right"></i></a><ul class="treeview-menu" style="z-index:1000" id="roo-comp-1038"><li class="treeview-menu" id="roo-comp-1040"><a href="#" id="roo-gen46"><span>test</span></a></li><li class="treeview-menu" id="roo-comp-1042"><a href="#" id="roo-gen47"><span>test</span></a></li><li class="treeview-menu" id="roo-comp-1044"><a href="#" id="roo-gen48"><span>test aaa</span></a></li></ul></li><li class="" id="roo-comp-1046"><a href="#" class=""><span>test</span><span class="badge pull-right badge-default" id="roo-gen51">new</span></a></li></ul></div></aside>
  98         <!-- this is a sub module.... -->
  99         <header class=" header" id="roo-comp-1010">
 100              <nav class="navbar navbar-default navbar-static-top" role="navigation" id="roo-comp-1014">
 101
 102                 <div class="collapse navbar-collapse" id="roo-gen26">
 103                     <ul class="nav nav-tabs" role="tablist">
 104                         <li class="active"><a href="#home"">CRM</a></li>
 105                         <li ><a href="#profile" >Document manager</a></li>
 106                         <li ><a href="#messages">Content Manager</a></li>
 107                         <li ><a href="#settings">Accounts</a></li>
 108                         <li ><a href="#settings">Accounts</a></li>
 109                         <li ><a href="#settings">MTrack</a></li>
 110                         <li ><a href="#settings">Git</a></li>
 111                         <li ><a href="#settings">Admin</a></li>
 112                         <li ><a href="#settings">Logs</a></li>
 113                       </ul>
 114                 </div>
 115                 <div class="x-dlg-mask" id="roo-gen25" style="width: 1497px; height: 50px; display: none;"></div>
 116             </nav>
 117         </header>
 118
 119      </div>
 120
 121
 122
 123
 124
 125
 126
 127
 128
 129   </body>
 130 </html>