docs(demo): Created initial demo page in misc/demo

caitp · Sep 25, 2013 · 9ca3ec7 · 9ca3ec7
1 parent a883577
commit 9ca3ec7
Show file tree

Hide file tree

Showing 12 changed files with 797 additions and 0 deletions.
diff --git a/misc/demo/css/app.css b/misc/demo/css/app.css
@@ -0,0 +1,62 @@
+body {
+  padding-top: 50px;
+  opacity: 1;
+  -webkit-transition: opacity 1s ease;
+  -moz-transition: opacity 1s ease;
+  transition: opacity 1s;
+}
+
+.comment {
+  padding: .5em;
+  margin: .25em;
+}
+
+.comment > .comments {
+  margin-top: 1em;
+  margin-left: 2em;  
+}
+
+.comment > .page-header {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.jumbotron {
+  font-family: Arial, Helvetica, sans-serif;
+    position: relative;
+    padding: 40px 0;
+    color: #fff;
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
+    background: #020031;
+    background: -moz-linear-gradient(45deg, #020031 0%, #6d3353 100%);
+    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353));
+    background: -webkit-linear-gradient(45deg, #020031 0%,#6d3353 100%);
+    background: -o-linear-gradient(45deg, #020031 0%,#6d3353 100%);
+    background: -ms-linear-gradient(45deg, #020031 0%,#6d3353 100%);
+    background: linear-gradient(45deg, #020031 0%,#6d3353 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 );
+    -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+    box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+    border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    -o-border-radius: 0;
+}
+.jumbotron .btn, .pagination-centered .btn {
+    /*float: none;*/
+    font-weight: normal;
+}
+.jumbotron p {
+    margin: 1em 0;
+}
+.bs-docs-social {
+    margin-top: 1em;
+    padding: 15px 0;
+    text-align: center;
+    background-color: rgba(245,245,245,0.3);
+    border-top: 1px solid rgba(255,255,255,0.3);
+    border-bottom: 1px solid rgba(221,221,221,0.3);
+}
+
diff --git a/misc/demo/css/bootstrap.min.css b/misc/demo/css/bootstrap.min.css
diff --git a/misc/demo/css/font-awesome.min.css b/misc/demo/css/font-awesome.min.css
diff --git a/misc/demo/font/fontawesome-webfont.eot b/misc/demo/font/fontawesome-webfont.eot
diff --git a/misc/demo/font/fontawesome-webfont.ttf b/misc/demo/font/fontawesome-webfont.ttf
diff --git a/misc/demo/font/fontawesome-webfont.woff b/misc/demo/font/fontawesome-webfont.woff
diff --git a/misc/demo/index.html b/misc/demo/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html ng-app="commentsDemo">
+  <head>
+    <title>UI-Comments for AngularJS</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body ng-controller="DemoCtrl">
+    <header>
+      <nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
+        <div class="navbar-header">
+          <a href="#" class="navbar-brand" title="UI Comments">UI Comments</a>
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-list">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+        </div>
+        <div id="navbar-list" class="container collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li><a href="https://github.com/caitp/ui-comments" title="Code on Github" class="icon-2x icon-github"></a></li>
+            <li><a href="https://twitter.com/share" title="Share on Twitter" class="icon-2x icon-twitter" data-lang="en"></a></li>
+          </ul>
+        </div>
+      </nav>
+      <div class="jumbotron">
+        <div class="container">
+          <h1>UI Comments</h1>
+
+          <p>Nested, Reddit-style comments directives for <strong><a href="http://angularjs.org">AngularJS</a></strong></p>
+          <p>Customizable comment templates, customizable comment controllers, and built-in support for nesting and sorting comments. It's just lovely stuff, innit.</p>
+          <p class="btn-group">
+            <a class="icon icon-github btn btn-default" href="https://github.com/caitp/ui-comments">
+              Code on Github</a>
+            <a class="icon icon-download-alt icon-white btn btn-primary" href="https://github.com/caitp/ui-comments/tree/gh-pages">
+              Download <small>(<%= pkg.version%>)</small></a>
+          </p>
+        </div>
+      </div>
+    </header>
+    <div class="container">
+      <comments comment-data="data.comments"></comments>
+    </div>
+    <script src="js/jquery.min.js"></script>
+    <script src="js/angular.min.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/moment.min.js"></script>
+    <script src="ui-comments-<%=pkg.version%>.min.js"></script>
+    <script src="js/app.js"></script>
+    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+  </body>
+</html>