Merge pull request digicorp#14 from digicorp/dev

Updated readme, package.json, modified all components example and snippets files, modifyed admin template, merged css files, and updated version info.

.npmignore

@@ -1,5 +1,6 @@
 archive
 assets
+templates
 components/*/snippets/**
 bower.json
 .npmignore

README.md

@@ -7,8 +7,7 @@
 
   <p align="center">
     A front-end responsive framework 
-    based on Google's Material Design Standards & Bootstrap.
-    It makes your website more attractive, consistent, and functionally powerful.
+    based on Google's Material Design Standards & Bootstrap.  
     <br>
     <a href="http://propeller.in/"><strong>Visit Propeller &raquo;</strong></a>
   </p>
@@ -31,35 +30,39 @@
 
 ## Key Features
 
-- Responsive Component Library which contains 25 UI elements
+- Library with 25 Responsive UI Components
 
 - Ready to use template which speeds up the Development process 
 
-- Detailed User Manual which provides step by step usage of propeller UI elements.
+- Detailed User Manual which provides step by step usage for every Propeller component.
 
 
 ## Quick start
 
-Several quick start options are available:
+There are different ways you can start using Propeller,
 
 - [Download the latest release.](https://github.com/digicorp/propeller/blob/master/archive/pmd-1.1.0.zip)
 - Clone the repo: `git clone https://github.com/propeller.git`
 - Install with Bower: `bower install propeller`
 - Install with npm: `npm install propellerkit`
+
+Using third party components:
+
 - Install Select2 with npm: `npm install propellerkit-select2`
 - Install range slider with npm: `npm install propellerkit-range-slider`
 - Install datetimepicker with npm: `npm install propellerkit-datetimepicker`
 - Install datatables with npm: `npm install propellerkit-datatables`
+- Install datatables with npm: `npm install propellerkit-custom-scrollbar`
 
 
-## Propeller Guideline
+## Propeller Guidelines
 
-Follow our [Guidelines](http://propeller.in/docs/index.php) and get familiar with the basic setup and structure of Propeller.
+Follow our [Guidelines](http://propeller.in/docs/index.php) and get familiar with the basic setup and structure.
 
 
 ## What's included
 
-Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
+ The downloaded folder will have following directories and files, with a logical grouping of common assets including both compiled and minified versions.
 
 ```
 Propeller/
@@ -92,13 +95,13 @@ Just copy the compiled CSS and JS files and the font files(created for icons) fr
 
 ## Bugs and feature requests
 
-Came over any bug or issue? Post them on [GITHUB](https://github.com/digicorp/propeller/issues).
+Found any bug or issue? Post them on [GITHUB](https://github.com/digicorp/propeller/issues).
 Have feedback, suggestions or Questions? Join [GITTER CHAT ROOM](https://gitter.im/Propeller-Material-Design-Bootstrap-Framework/Support).
 
 
 ## Community
 
-Get updates on Propeller's development and chat with the project maintainers and community members.
+Get updates on Propeller's development. Chat with the Product team and community members using Propeller.
 
 - Follow [@propellerkit on Twitter](https://twitter.com/PropellerKit).
 - Chat with fellow members on [GITTER](https://gitter.im/Propeller-Material-Design-Bootstrap-Framework/Support).
@@ -113,9 +116,9 @@ See [the Releases section of our GitHub project](https://github.com/digicorp/pro
 
 ## License
 
-Propeller v1.0.0 (http://propeller.in)
+Propeller v1.1.0 (http://propeller.in)
 © 2016-2017 [Digicorp Information Systems Pvt. Ltd.](https://www.digi-corp.com/)
-Licensed under [MIT](https://github.com/digicorp/propeller)
+Licensed under [MIT](https://github.com/digicorp/propeller/blob/master/LICENSE)
 
 
 ## Author

assets/css/propeller.css

@@ -3609,8 +3609,9 @@ Ttable Reflow
 
 .pmd-floating-action {
   position: fixed;
-  right: 0; 
+  right: 0;
   bottom: 0;
+  z-index: 1000;
   margin: 1em;
 }
 .pmd-floating-action-btn {
@@ -3670,9 +3671,11 @@ Ttable Reflow
   transition-delay: 300ms;
 }
 .pmd-floating-action:hover .pmd-floating-action-btn, .menu--floating--open .pmd-floating-action-btn {
+  position: relative;
+  bottom: auto; 
   opacity: 1;
   -ms-transform: none;
-      transform: none;/* position:relative; bottom:auto; */
+      transform: none;
 }
 .pmd-floating-action:hover .pmd-floating-action-btn:before, .menu--floating--open .pmd-floating-action-btn:before {
   opacity: 1;

components/alert/alerts.html

@@ -140,7 +140,7 @@ <h2>Propeller Alert</h2>
 				</div>
                 <p>Unlike other Propeller components Alert component is independent of Bootstrap HTML structure.</p>
                 <p>In Marterial Design language alert is known as <a href="https://material.google.com/components/snackbars-toasts.html#snackbars-toasts-usage" target="_blank">Snackbar and Toast</a>.</p>
-				<p>To specify the position of alert component use <strong>data-positionX</strong> (x-axis positioning with <code>left</code>, <code>right</code>, and <code>center</code> as values.) and <strong>data-positionY</strong> (y-axis positioning with <code>top</code> and <code>bottom</code> as values.) attributes.</p>
+				<p>To specify the position of alert component use <strong>data-positionX</strong> (x-axis positioning with <code>left</code>, <code>right</code>, and <code>center</code> as values.) and <strong>data-positionY</strong> (y-axis positioning with <code>top</code> and <code>bottom</code> as values.) attributes. To customize the visibility time of alert on screen use <strong>data-duration</strong> attribute with a numeric value.</p>
 			</div> <!-- Propeller Alert title and description end -->
 
 			<div class="col-md-9"> 
@@ -179,7 +179,7 @@ <h2>Propeller Alert</h2>
 
 				</div> <!-- alert code and example end-->
 			</div>
-		</section> <!-- Propeller Alert end -->
+		</section><!-- Propeller Alert end -->
 
 		<!-- Propeller alert with action -->
 		<section class="row component-section">
@@ -215,7 +215,7 @@ <h2>Propeller Alert with Action</h2>
 							<div class="pmd-card pmd-z-depth pmd-card-custom-form">
 								<div class="pmd-card-body text-center alert-custom"> 
 									<!--Alert Bottom Left -->
-									<button type="button" data-positionX="left" data-positionY="bottom" data-effect="fadeInDown" data-duration="3000" data-action="true" data-message="You have 4 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Left</button>
+									<button type="button" data-positionX="left" data-positionY="bottom" data-effect="fadeInDown" data-action="true" data-duration="3000" data-message="You have 4 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Left</button>
 									<!--Alert Bottom Center -->
 									<button type="button" data-positionX="center" data-positionY="bottom" data-effect="fadeInDown" data-action="true" data-duration="3000" data-message="You have 5 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Center</button>
 									<!--Alert Bottom Right -->
@@ -319,6 +319,11 @@ <h2>Configuration Options</h2>
 									<td data-title="Effect">Defines the action that needs to be performed.</td>
 									<td data-title="Value">Close, Refresh, Ok, etc.</td>
 								</tr>
+								<tr>
+									<td data-title="HTML Attributes"><code>data-duration</code></td>
+									<td data-title="Effect">Customize the visibility time of alert on the screen.</td>
+									<td data-title="Value">Numeric value</td>
+								</tr>
 							</tbody>
 						</table>
 						<!--table start --> 

components/alert/snippets/alert-behaviour-action.html

@@ -9,8 +9,9 @@
 
 <!-- Display Alert at the bottom-left position of the window  -->
 <button type="button" data-positionX="left" data-positionY="bottom" data-effect="fadeInDown" data-action="true" data-message="You have 4 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Left</button>
+
 <!-- Display Alert at the bottom-center position of the window -->
 <button type="button" data-positionX="center" data-positionY="bottom" data-effect="fadeInDown" data-action="true" data-message="You have 5 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Center</button>
-<!-- Display Alert at the bottom-right position of the window -->
-<button type="button" data-positionX="right" data-positionY="bottom" data-effect="fadeInDown" data-action="true" data-message="You have 6 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Right</button>
 
+<!-- Display Alert at the bottom-right position of the window -->
+<button type="button" data-positionX="right" data-positionY="bottom" data-effect="fadeInDown" data-action="true" data-message="You have 6 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Right</button>

components/alert/snippets/alert-behaviour.html

@@ -1,17 +1,17 @@
 <!-- Display alert at the top-left position of the window -->
-<button type="button" data-positionX="left" data-positionY="top" data-effect="fadeInUp" data-message="You have 1 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Top Left</button>
-							
+<button type="button"  data-positionX="left" data-positionY="top" data-effect="fadeInUp" data-message="You have 1 messages" data-duration="3000" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Top Left</button>
+
 <!-- Display alert at the top-center position of the window -->
-<button type="button"  data-positionX="center" data-positionY="top" data-effect="fadeInUp" data-message="You have 2 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Top Center</button>
-							
+<button type="button" data-positionX="center" data-positionY="top" data-effect="fadeInUp" data-message="You have 2 messages" data-duration="3000" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Top Center</button>
+
 <!-- Display alert at the top-right position of the window -->
-<button type="button" data-positionX="right" data-positionY="top" data-effect="fadeInUp" data-message="You have 3 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Top Right</button>
+<button type="button" data-positionX="right" data-positionY="top" data-effect="fadeInUp" data-message="You have 3 messages" data-duration="3000" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle"> Top Right</button>
 
 <!-- Display alert at the bottom-left position of the window -->
-<button type="button" data-positionX="left" data-positionY="bottom" data-effect="fadeInDown" data-message="You have 4 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Left</button>	
+<button type="button" data-positionX="left" data-positionY="bottom" data-effect="fadeInDown" data-message="You have 4 messages" data-duration="3000" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Left</button>
 
 <!-- Display alert at the bottom-center position of the window -->
-<button type="button" data-positionX="center" data-positionY="bottom" data-effect="fadeInDown" data-message="You have 5 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Center</button>
+<button type="button" data-positionX="center" data-positionY="bottom" data-effect="fadeInDown" data-message="You have 5 messages" data-duration="3000" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Center</button>
 
 <!-- Display alert at the bottom-right position of the window -->
-<button type="button" data-positionX="right" data-positionY="bottom" data-effect="fadeInDown" data-message="You have 6 messages" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Right</button>
+<button type="button" data-positionX="right" data-positionY="bottom" data-effect="fadeInDown" data-message="You have 6 messages" data-duration="3000" class="btn pmd-ripple-effect btn-default pmd-btn-raised pmd-alert-toggle">Bottom Right</button>

components/alert/snippets/alert-type.html

@@ -1,11 +1,11 @@
 <!-- Display an information alert at the top-left position of the window -->
-<button type="button" data-positionX="left" data-positionY="top" data-effect="fadeInUp" data-message="Heads up! This alert needs your attention, but it's not super important." data-type="information" class="btn pmd-ripple-effect btn-info pmd-btn-raised pmd-alert-toggle">Alert Information</button>
+<button type="button" data-positionX="left" data-positionY="top" data-duration="5000" data-effect="fadeInUp" data-message="Heads up! This alert needs your attention, but it's not super important." data-type="information"  data-revert="fadeOutUp" class="btn pmd-ripple-effect btn-info pmd-btn-raised pmd-alert-toggle">Alert Information</button>
 
 <!-- Display a warning alert at the top-center position of the window -->
-<button type="button" data-positionX="center" data-positionY="top" data-effect="fadeInUp" data-message=" Warning! Spyware detected on your system." data-type="warning" class="btn pmd-ripple-effect btn-warning pmd-z-depth pmd-alert-toggle">Alert Warning</button>
+<button type="button"  data-positionX="center" data-positionY="top" data-effect="fadeInUp" data-message="Warning! Spyware detected on your system." data-type="warning" class="btn pmd-ripple-effect btn-warning pmd-z-depth pmd-alert-toggle">Alert Warning</button>
 
 <!-- Display a success alert at the top-right position of the window -->
-<button type="button" data-positionX="right" data-positionY="top" data-effect="fadeInUp" data-message="Well done! You successfully read this important alert message." data-type="success" class="btn pmd-ripple-effect btn-success pmd-z-depth pmd-alert-toggle">Alert Success</button>
+<button type="button"  data-positionX="right" data-positionY="top"  data-duration="10000" data-effect="fadeInUp" data-message="Well done! You successfully read this important alert message." data-type="success" class="btn pmd-ripple-effect btn-success pmd-z-depth pmd-alert-toggle">Alert Success</button>
 
 <!-- Display an error alert at the top-right position of the window -->
-<button type="button" data-positionX="right" data-positionY="top" data-effect="fadeInUp" data-message="Oh snap! Change a few things up and try submitting again." data-type="error" class="btn pmd-ripple-effect btn-danger pmd-z-depth pmd-alert-toggle">Alert Error</button>
+<button type="button"  data-positionX="right" data-positionY="top" data-effect="fadeInUp" data-message="Oh snap! Change a few things up and try submitting again." data-type="error" class="btn pmd-ripple-effect btn-danger pmd-z-depth pmd-alert-toggle">Alert Error</button>

components/badge/badge.html

@@ -23,7 +23,7 @@
 
 	<!-- Google Icon Font -->
 	<link href="http://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" rel="stylesheet" /> 
-	<link href="http://propeller.in/components/icons/css/google-icons.css" />
+	<link href="css/google-icons.css" />
 
 	<!-- Propeller Button -->
 	<link href="http://propeller.in/components/button/css/button.css" type="text/css" rel="stylesheet" />

components/button/button.html

@@ -24,7 +24,7 @@
 
 	<!-- Google Icon Font -->
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<link href="http://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
+	<link href="css/google-icons.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller Button -->
 	<link href="css/button.css" type="text/css" rel="stylesheet" />
@@ -429,7 +429,7 @@ <h2>Button Sizes</h2>
 										<button class="btn btn-lg pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">add</i></button>
 									</div>
 									<div class="media-right media-middle">
-										<div class="type-info">Large button</div>
+										<div class="type-info text-nowrap">Large button</div>
 									</div>
 								</div>
 								<div class="media">
@@ -447,7 +447,7 @@ <h2>Button Sizes</h2>
 										<button class="btn pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">add</i></button>
 									</div>
 									<div class="media-right media-middle">
-										<div class="type-info">Medium button</div>
+										<div class="type-info text-nowrap">Medium button</div>
 									</div>
 								</div>
 								<div class="media">
@@ -465,7 +465,7 @@ <h2>Button Sizes</h2>
 										<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">add</i></button>
 									</div>
 									<div class="media-right media-middle">
-										<div class="type-info">Small button</div>
+										<div class="type-info text-nowrap">Small button</div>
 									</div>
 								</div>
 							</div>

components/card/card.html

@@ -15,7 +15,7 @@
 
 	<!-- Google Icon Font -->
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<link href="http://propeller.in/components/icons/css/google-icons.css" type="text/css" rel="stylesheet" />
+	<link href="css/google-icons.css" type="text/css" rel="stylesheet" />
 
 	<!-- Propeller typography -->
 	<link href="http://propeller.in/components/typography/css/typography.css" type="text/css" rel="stylesheet" />
@@ -41,7 +41,7 @@
 			<div class="col-md-4 col-sm-6">
 				<h3 class="text-muted">List with icon</h3>
 				<div class="pmd-card pmd-z-depth">
-					<ul class="list-group pmd-z-depth pmd-list pmd-card-list">
+					<ul class="list-group pmd-list pmd-card-list">
 						<li class="list-group-item"> 
 							<i class="material-icons media-left pmd-sm">mood</i> <span class="media-body">Cras justo odio</span> </li>
 						<li class="list-group-item"><i class="material-icons media-left media-middle">notifications</i>
@@ -390,6 +390,7 @@ <h2 class="pmd-card-title-text">Title goes here</h2>
 </div>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <script src="http://propeller.in/assets/js/propeller.js" language="javascript" type="text/javascript"></script>
 <script src="js/jquery.masonry.min.js" language="javascript" type="text/javascript"></script>
 <script>
@@ -423,7 +424,7 @@ <h2 class="pmd-card-title-text">Title goes here</h2>
 				//isAnimated: true,
 			});
 			$('#card-masonry').css({"opacity":"1"});
-			}, 1000);};
+			}, 300);};
 		$(window).resize(function(){
 			$('#card-masonry').masonry({
 				itemSelector: '#card-masonry > div',