Merge pull request #436 from freezy-sk/doc-skins

Updated list of skins with skin switch and removed whitespace from end of lines

documentation/build/include/adminlte-options.html

@@ -21,7 +21,7 @@
   };
 </script>
 &LT;script src='dist/js/app.js' type='text/javascript'>&LT;/script></code></pre>
-  
+
   <h3>Available AdminLTE Options</h3>
   <pre class='prettyprint'><code class='javascript'>{
   //Add slimscroll to navbar menus

documentation/build/include/components.html

@@ -465,7 +465,7 @@
   these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
   <p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
   to place it right after the footer.</p>
-  <p class="lead">Dark Sidebar Markup</p>  
+  <p class="lead">Dark Sidebar Markup</p>
 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 &LT;aside class="control-sidebar control-sidebar-dark">
   &LT;!-- Content of the sidebar goes here -->
@@ -473,8 +473,8 @@
 &LT;!-- The sidebar's background -->
 &LT;!-- This div must placed right after the sidebar for it to work-->
 &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
-  
-  <p class="lead">Light Sidebar Markup</p>  
+
+  <p class="lead">Light Sidebar Markup</p>
 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 &LT;aside class="control-sidebar control-sidebar-light">
   &LT;!-- Content of the sidebar goes here -->

documentation/build/include/implementations.html

@@ -2,14 +2,14 @@
   <h2 class="page-header"><a href="#implementations">Implementations</a></h2>
   <p class="lead">Thanks to many of AdminLTE users, there are multiple implementations of the template
   for easy integration with back-end frameworks. The following are some of them:</p>
-  
+
   <ul class="">
     <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
     <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
-    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>    
+    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
     <li><a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a></li>
   </ul>
-  
+
   <p><b class="text-red">Note:</b> these implementations are not supported by Almsaeed Studio. However,
     they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release
     of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://almsaeedstudio.com">website</a></p>

documentation/build/include/layout.html

@@ -10,7 +10,7 @@
   <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>  
+  </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
@@ -27,12 +27,18 @@
   <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>
-  <ul class="bring-up">
-    <li><code>skin-blue</code></li>
-    <li><code>skin-yellow</code></li>
-    <li><code>skin-purple</code></li>
-    <li><code>skin-green</code></li>
-    <li><code>skin-red</code></li>
-    <li><code>skin-black</code></li>
+  <ul id="layout-skins-list" class="bring-up">
+    <li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
   </ul>
 </section>

documentation/build/index.html

@@ -13,7 +13,7 @@
     <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
     <!-- Theme style -->
     <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
+    <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
     <link href="style.css" rel="stylesheet" type="text/css" />
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -70,7 +70,7 @@
                 <li><a href='#component-main-header'>Main Header</a></li>
                 <li><a href='#component-sidebar'>Sidebar</a></li>
                 <li><a href='#component-control-sidebar'>Control Sidebar</a></li>
-                <li><a href='#component-info-box'>Info Box</a></li>                
+                <li><a href='#component-info-box'>Info Box</a></li>
                 <li><a href='#component-box'>Boxes</a></li>
                 <li><a href='#component-direct-chat'>Direct Chat</a></li>
               </ul>
@@ -181,7 +181,7 @@ include "license.html"
     <!-- Bootstrap 3.3.2 JS -->
     <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <!-- FastClick -->
-    <script src='../plugins/fastclick/fastclick.min.js'></script>    
+    <script src='../plugins/fastclick/fastclick.min.js'></script>
     <!-- AdminLTE App -->
     <script src="../dist/js/app.min.js" type="text/javascript"></script>
     <!-- SlimScroll 1.3.0 -->

documentation/docs.js

@@ -51,4 +51,10 @@ $(function () {
       }, 500);
     }
   });
+  //Skin switcher
+  $('#layout-skins-list a').click(function(e) {
+    e.preventDefault();
+    var skinName = $(this).siblings('code').text();
+    $('body').attr('class', skinName + ' fixed');
+  });
 });

documentation/index.html

@@ -13,7 +13,7 @@
     <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
     <!-- Theme style -->
     <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
+    <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
     <link href="style.css" rel="stylesheet" type="text/css" />
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -70,7 +70,7 @@
                 <li><a href='#component-main-header'>Main Header</a></li>
                 <li><a href='#component-sidebar'>Sidebar</a></li>
                 <li><a href='#component-control-sidebar'>Control Sidebar</a></li>
-                <li><a href='#component-info-box'>Info Box</a></li>                
+                <li><a href='#component-info-box'>Info Box</a></li>
                 <li><a href='#component-box'>Boxes</a></li>
                 <li><a href='#component-direct-chat'>Direct Chat</a></li>
               </ul>
@@ -217,7 +217,7 @@ AdminLTE/
   <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>  
+  </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
@@ -234,13 +234,19 @@ AdminLTE/
   <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>
-  <ul class="bring-up">
-    <li><code>skin-blue</code></li>
-    <li><code>skin-yellow</code></li>
-    <li><code>skin-purple</code></li>
-    <li><code>skin-green</code></li>
-    <li><code>skin-red</code></li>
-    <li><code>skin-black</code></li>
+  <ul id="layout-skins-list" class="bring-up">
+    <li><code>skin-blue</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-blue-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-yellow-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-purple-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-green-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-red-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black</code> <a href="#"><i class="fa fa-eye"></i></a></li>
+    <li><code>skin-black-light</code> <a href="#"><i class="fa fa-eye"></i></a></li>
   </ul>
 </section>
 
@@ -269,7 +275,7 @@ AdminLTE/
   };
 &LT;/script>
 &LT;script src='dist/js/app.js' type='text/javascript'>&LT;/script></code></pre>
-  
+
   <h3>Available AdminLTE Options</h3>
   <pre class='prettyprint'><code class='javascript'>{
   //Add slimscroll to navbar menus
@@ -835,7 +841,7 @@ AdminLTE/
   these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
   <p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
   to place it right after the footer.</p>
-  <p class="lead">Dark Sidebar Markup</p>  
+  <p class="lead">Dark Sidebar Markup</p>
 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 &LT;aside class="control-sidebar control-sidebar-dark">
   &LT;!-- Content of the sidebar goes here -->
@@ -843,8 +849,8 @@ AdminLTE/
 &LT;!-- The sidebar's background -->
 &LT;!-- This div must placed right after the sidebar for it to work-->
 &LT;div class="control-sidebar-bg">&LT;/div></code></pre>
-  
-  <p class="lead">Light Sidebar Markup</p>  
+
+  <p class="lead">Light Sidebar Markup</p>
 <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
 &LT;aside class="control-sidebar control-sidebar-light">
   &LT;!-- Content of the sidebar goes here -->
@@ -2014,14 +2020,14 @@ AdminLTE/
   <h2 class="page-header"><a href="#implementations">Implementations</a></h2>
   <p class="lead">Thanks to many of AdminLTE users, there are multiple implementations of the template
   for easy integration with back-end frameworks. The following are some of them:</p>
-  
+
   <ul class="">
     <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
     <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
-    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>    
+    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
     <li><a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a></li>
   </ul>
-  
+
   <p><b class="text-red">Note:</b> these implementations are not supported by Almsaeed Studio. However,
     they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release
     of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://almsaeedstudio.com">website</a></p>
@@ -2121,7 +2127,7 @@ AdminLTE/
     <!-- Bootstrap 3.3.2 JS -->
     <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
     <!-- FastClick -->
-    <script src='../plugins/fastclick/fastclick.min.js'></script>    
+    <script src='../plugins/fastclick/fastclick.min.js'></script>
     <!-- AdminLTE App -->
     <script src="../dist/js/app.min.js" type="text/javascript"></script>
     <!-- SlimScroll 1.3.0 -->