git.roojs.org Git - roojs1/blob - examples/bootstrap4/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      <link rel="stylesheet" type="text/css" href="../../css-bootstrap4/bootstrap.min.css">
  21     <link rel="stylesheet" type="text/css" href="../../css-bootstrap4/roojs-bootstrap.css">
  22     <link rel="stylesheet" type="text/css" href="../../css-bootstrap/font-awesome.css">
  23         <link href="../../../bootswatch/AdminLTE-master/css/AdminLTE.css" rel="stylesheet" type="text/css" />
  24
  25     <script type="text/javascript" src="../../roojs-debug.js"></script>
  26
  27     <!-- bootstrap js.. needs to compile it later.. -->
  28     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
  29
  30
  31     <style>
  32         /**
  33           css modifications that might be needed...
  34         */
  35
  36         body > .header {
  37             overflow: hidden;
  38         }
  39         .navbar ul.nav-tabs {
  40             margin-top: 9px;
  41             display: table;
  42         }
  43
  44     </style>
  45
  46
  47      <script type="text/javascript">
  48         Dashboard = {};
  49      </script>
  50
  51     <!-- test code -->
  52
  53   </head>
  54   <body id="body">
  55     <script type="text/javascript">
  56       Roo.onReady(function() {
  57           //Roo.XComponent.build();
  58           //Roo.bootstrap.Tooltip.init();
  59       });
  60     </script>
  61
  62     <header class=" header" id="roo-comp-1010">
  63         <a href="#" id="roo-comp-1012" class="logo">Example</a>
  64         <nav class="navbar navbar-default navbar-static-top" role="navigation" id="roo-comp-1014">
  65             <div class="navbar-header">
  66                 <button type="button" class="navbar-toggle" data-toggle="collapse" id="roo-gen23">
  67                     <span class="sr-only">Toggle navigation</span>
  68                     <span class="icon-bar"></span>
  69                     <span class="icon-bar"></span>
  70                     <span class="icon-bar"></span>
  71                 </button>
  72             </div>
  73             <div class="collapse navbar-collapse" id="roo-gen26">
  74                 <ul class="nav nav-tabs" role="tablist">
  75                     <li class="active"><a href="#home"">CRM</a></li>
  76                     <li ><a href="#profile" >Document manager</a></li>
  77                     <li ><a href="#messages">Content Manager</a></li>
  78                     <li ><a href="#settings">Accounts</a></li>
  79                     <li ><a href="#settings">Accounts</a></li>
  80                     <li ><a href="#settings">MTrack</a></li>
  81                     <li ><a href="#settings">Git</a></li>
  82                     <li ><a href="#settings">Admin</a></li>
  83                     <li ><a href="#settings">Logs</a></li>
  84                   </ul>
  85             </div>
  86             <div class="x-dlg-mask" id="roo-gen25" style="width: 1497px; height: 50px; display: none;"></div>
  87         </nav>
  88     </header>
  89
  90     <div class="tab-content">
  91         <div role="tabpanel" class="tab-pane active" id="home">
  92         <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>
  93         <!-- this is a sub module.... -->
  94         <header class=" header" id="roo-comp-1010">
  95              <nav class="navbar navbar-default navbar-static-top" role="navigation" id="roo-comp-1014">
  96
  97                 <div class="collapse navbar-collapse" id="roo-gen26">
  98                     <ul class="nav nav-tabs" role="tablist">
  99                         <li class="active"><a href="#home"">CRM</a></li>
 100                         <li ><a href="#profile" >Document manager</a></li>
 101                         <li ><a href="#messages">Content Manager</a></li>
 102                         <li ><a href="#settings">Accounts</a></li>
 103                         <li ><a href="#settings">Accounts</a></li>
 104                         <li ><a href="#settings">MTrack</a></li>
 105                         <li ><a href="#settings">Git</a></li>
 106                         <li ><a href="#settings">Admin</a></li>
 107                         <li ><a href="#settings">Logs</a></li>
 108                       </ul>
 109                 </div>
 110                 <div class="x-dlg-mask" id="roo-gen25" style="width: 1497px; height: 50px; display: none;"></div>
 111             </nav>
 112         </header>
 113
 114      </div>
 115
 116
 117
 118
 119
 120
 121
 122
 123
 124   </body>
 125 </html>