initial code repo
[stor4nfv.git] / src / ceph / src / pybind / mgr / dashboard / static / AdminLTE-2.3.7 / documentation / build / include / layout.html
diff --git a/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/build/include/layout.html b/src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/documentation/build/include/layout.html
new file mode 100644 (file)
index 0000000..8e04626
--- /dev/null
@@ -0,0 +1,92 @@
+<section id="layout">
+  <h2 class="page-header"><a href="#layout">Layout</a></h2>
+  <p class="lead">The layout consists of four major parts:</p>
+  <ul>
+    <li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
+    <li>Main Header <code>.main-header</code>. Contains the logo and navbar.</li>
+    <li>Sidebar <code>.sidebar-wrapper</code>. Contains the user panel and sidebar menu.</li>
+    <li>Content <code>.content-wrapper</code>. Contains the page header and content.</li>
+  </ul>
+  <div class="callout callout-danger lead">
+    <h4>Tip!</h4>
+    <p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to start from scratch.</p>
+  </div>
+
+  <h3>Layout Options</h3>
+  <p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
+    to the body tag to get the desired goal.</p>
+  <ul>
+    <li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
+    <li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
+    <li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li>
+    <li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
+  </ul>
+  <p><b>Note:</b> you cannot use both layout-boxed and fixed at the same time. Anything else can be mixed together.</p>
+
+  <h3>Skins</h3>
+  <p class="lead">Skins can be found in the dist/css/skins folder.
+    Choose and the skin file that you want then add the appropriate
+    class to the body tag to change the template's appearance. Here is the list of available skins:</p>
+  <div class="box box-solid" style="max-width: 300px;">
+    <div class="box-body no-padding">
+      <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
+        <thead>
+          <tr>
+            <th style="width: 210px;">Skin Class</th>
+            <th>Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>skin-blue</code></td>
+            <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-blue-light</code></td>
+            <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-yellow</code></td>
+            <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-yellow-light</code></td>
+            <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-green</code></td>
+            <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-green-light</code></td>
+            <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-purple</code></td>
+            <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-purple-light</code></td>
+            <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-red</code></td>
+            <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-red-light</code></td>
+            <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-black</code></td>
+            <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-black-light</code></td>
+            <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.box-body -->
+  </div><!-- /.box -->
+</section>