From 426617e292db2584cdfc16be8462236f0b3d8a87 Mon Sep 17 00:00:00 2001
From: Neylor Ohmaly
Date: Wed, 5 Feb 2014 17:24:56 -0200
Subject: Improved the README.md text.

---
 README.md            | 138 +++++++++++++++++++++++++++++++++++++++++++++++++--
 example/index.css    |  13 ++++-
 example/index.html   |   2 +-
 example/index.js     |  21 ++++++++
 sass/ns-popover.scss |  13 ++++-
 5 files changed, 180 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 8f9e067..b74d986 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,136 @@
-nsPopover
-=========
+# nsPopover
 
-Popover dialogs for angularjs applications.
+nsPopover is a simple component for angularjs applications that adds small overlays of content, like those on the
+iPad, to any element for housing secondary information.. It has only angularjs as dependency.
+
+### [Example] (http://nohros.com/nsPopover)
+
+## Install
+
+You can download all necessary nsPopover files manually or install it with bower:
+
+```bash
+bower install nsPopover
+npm install
+grunt compile
+```
+
+## Usage
+
+You need only to include the ``nsPopover.js`` (as minimal setup) to your project and then you can
+start using the ``nsPopover`` directives.
+
+### Directive
+
+```javascript
+angular
+  .module('nsPopoverExample', [
+   'nsPopover'
+  ])
+
+  .controller('MainCtrl', function($scope) {
+    $scope.items = [{
+      name: "Action"
+    }, {
+      name: "Another action"
+    }, {
+      name: "Something else here"
+    }];
+  });
+```
+
+``` html
+<script type="text/ng-template" id="popover">
+  <ul>
+    <li ng-repeat="item in items"><a>{{item.name}}</a></li>
+  </ul>
+</script>
+
+<button ns-popover
+  ns-popover-template="popover"
+  ns-popover-trigger="click"
+  ns-popover-placement="bottom">
+    Popover
+</button>
+```
+
+### Attributes
+
+``nsPopover`` defines a simple set of attributes that can be used to customize the popover behavior.
+
+### ``ns-popover-template {String}``
+
+The id of the template that contains the popover content. The content will be loaded through the
+angular ``$http`` service and cached (The content will not be loaded if it is already in ``$templateCache``). It
+can be loaded throug ``path`` to external html template or ```<script>`` tag with ``text\ng-template``.
+
+```javascript
+<script type="text\ng-template" id="templateId">
+  <h1>Template heading</h1>
+  <p>Some content</p>
+</script>
+```
+
+Also it is possible to use simple strings as template together with ``ns-popover-plain`` option.
+
+### ``ns-popover-plain {Boolean}``
+
+A flag that indicates if the ``ns-popover-template`` is a plain string or not, default: ``false``.
+
+### ``ns-popover-trigger``
+
+The ``ns-popover-trigger`` specify how the popover is triggered. This can be any event that the associated
+DOM element can trigger.
+
+### ``ns-popover-placement``
+
+Specifies how to position the popover relative to the triggering element - top | bottom | left | right.
+
+### Themes
+
+You can customize the ``nsPopover`` through themes. You can use the ``nsPopover`` to create your own theme, like so.
+
+```scss
+.ns-popover-custom-theme {
+  ul, .list {
+  }
+
+  li, .list-item {
+    list-style-type: none;
+
+    a {
+      &:hover {
+      }
+    }
+  }
+}
+```
+
+and them specify this them on the HTML
+
+```html
+  <button ns-popover
+    ns-popover-template="popover"
+    ns-popover-theme="ns-popover-custom-theme">
+      Popover
+  </button>
+```
+
+## License
+
+MIT Licensed
+
+Copyright (c) 2013, nohros.com contact@nohros.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/example/index.css b/example/index.css
index 3792232..1544c6d 100644
--- a/example/index.css
+++ b/example/index.css
@@ -24,13 +24,24 @@ button:active {
   border: solid 1px #0081b8;
 }
 
-section {
+body > section {
   position: relative;
   width: 100%;
+  max-width: 62.5em;
+  margin: 0 auto;
+  padding: 0 1.5em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 article {
   position: relative;
   margin: 0 auto;
   float: left;
+}
+
+h1 {
+  border-bottom: solid 1px #b9b8bb;
+  padding-bottom: .5em;
 }
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index a08c885..9c7f01a 100644
--- a/example/index.html
+++ b/example/index.html
@@ -20,7 +20,7 @@
 </head>
 <body ng-controller="MainCtrl">
 
-<section>
+<section viewport-width>
   <h1> Popovers </h1>
   <article>
     <button ns-popover
diff --git a/example/index.js b/example/index.js
index 6315168..c742c1e 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,5 +1,6 @@
 angular
   .module('nsPopoverExample', ['nsPopover'])
+
   .controller('MainCtrl', function($scope) {
     $scope.items = [{
       name: "Action"
@@ -8,4 +9,24 @@ angular
     }, {
       name: "Something else here"
     }];
+  })
+
+  .directive('viewportWidth', function() {
+    return {
+      link: function(scope, elm, attrs) {
+        function getViewport() {
+          var e = window, a = 'inner';
+          if (!('innerWidth' in window)) {
+            a = 'client';
+            e = document.documentElement || document.body;
+          }
+          return {
+            width : e[a + 'Width'] ,
+            height : e[a + 'Height']
+          };
+        }
+
+        elm.css('maxWidth', getViewport().width + 'px');
+      }
+    };
   });
\ No newline at end of file
diff --git a/sass/ns-popover.scss b/sass/ns-popover.scss
index e4fe2a9..3161121 100644
--- a/sass/ns-popover.scss
+++ b/sass/ns-popover.scss
@@ -5,13 +5,22 @@
   z-index: 100;
   background-color: #fff;
 
-  ul {
+  ul, .list {
     padding: 0;
     margin: 0.625rem 0;
+    display: block;
   }
 
   li, .list-item {
     list-style-type: none;
-    padding: 0.1875rem 1.25rem;
+
+    a {
+      padding: 0.1875rem 0.625rem;
+      display: block;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
   }
 }
\ No newline at end of file
-- 
cgit v1.2.3