mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-04 15:24:23 +01:00
152 lines
6.2 KiB
HTML
152 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="asideApp">
|
|
<head>
|
|
<link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
|
|
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
|
|
<link rel="stylesheet" href="src/styles/animate.css"/>
|
|
<link rel="stylesheet" href="src/styles/aside.css"/>
|
|
<style type="text/css">
|
|
/* Styles go here */
|
|
body {
|
|
padding: 30px 15px 0;
|
|
}
|
|
|
|
#downloadbtn {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.about-links {
|
|
color: #95a5a6;
|
|
}
|
|
.about-links a {
|
|
border-bottom: 1px dotted;
|
|
text-decoration: none;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.about-links li {line-height: 30px;}
|
|
.about-links li:hover, .about-links li:hover a { color: #666; }
|
|
.about-links .love:hover i { color: #e74c3c; }
|
|
.about-links .prospectus:hover i { color: #f39c12; }
|
|
.about-links .cypher:hover i { color: #16a085; }
|
|
.about-links .lab:hover i { color: #8e44ad; }
|
|
</style>
|
|
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
|
|
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.min.js"></script>
|
|
<script src="dist/js/angular-aside.min.js"></script>
|
|
<script>
|
|
angular.module('asideApp', ['ui.bootstrap', 'ngAside'])
|
|
.controller('MainCtrl', function($scope, $aside) {
|
|
$scope.openAside = function(position) {
|
|
$aside.open({
|
|
templateUrl: 'aside.html',
|
|
placement: position,
|
|
backdrop: true,
|
|
controller: function($scope, $modalInstance) {
|
|
$scope.ok = function(e) {
|
|
$modalInstance.close();
|
|
e.stopPropagation();
|
|
};
|
|
$scope.cancel = function(e) {
|
|
$modalInstance.dismiss();
|
|
e.stopPropagation();
|
|
};
|
|
}
|
|
})
|
|
}
|
|
});
|
|
</script>
|
|
<script type="text/ng-template" id="aside.html">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">ngAside</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
Look im in aside.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" ng-click="ok($event)">OK</button>
|
|
<button class="btn btn-warning" ng-click="cancel($event)">Cancel</button>
|
|
</div>
|
|
</script>
|
|
</head>
|
|
|
|
<body ng-controller="MainCtrl">
|
|
<div class="container">
|
|
<div class="jumbotron panel panel-default">
|
|
<h1>Angular Aside</h1>
|
|
<p>
|
|
Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.
|
|
</p>
|
|
<p>
|
|
<a href="https://github.com/dbtek/angular-aside" class="btn btn-primary btn-lg" id="downloadbtn">
|
|
<span class="glyphicon glyphicon-download"></span> Download
|
|
</a>
|
|
<br />
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://github.com/dbtek/angular-aside" data-via="dbtek">Tweet</a>
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=dbtek&repo=angular-aside&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="107" height="20"></iframe>
|
|
</p>
|
|
<div>
|
|
<ul class="text-center about-links list-inline">
|
|
<li class="love">
|
|
made with <i class="fa fa-heart"></i> by <a href="http://twitter.com/dbtek" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'View twitter account']);">@dbtek</a>
|
|
</li>
|
|
<li class="lab">
|
|
<i class="fa fa-flask"></i>
|
|
<a href="https://github.com/dbtek/angular-aside">github project</a>
|
|
</li>
|
|
<li class="cypher">
|
|
<i class="fa fa-code"></i>
|
|
<a href="http://opensource.org/licenses/MIT">license: MIT</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="jumbotron panel panel-default">
|
|
<h2>Demo</h2>
|
|
<p>
|
|
<span class="pull-left">
|
|
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
|
|
<span class="glyphicon glyphicon-align-justify"></span> Left
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('top')">
|
|
Up <span class="glyphicon glyphicon-arrow-down"></span>
|
|
</button>
|
|
</span>
|
|
<span class="pull-right">
|
|
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('bottom')">
|
|
Down <span class="glyphicon glyphicon-arrow-up"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-default btn-lg" ng-click="openAside('right')">
|
|
Right <span class="glyphicon glyphicon-align-justify"></span>
|
|
</button>
|
|
</span>
|
|
</p>
|
|
<div class="clearfix"></div>
|
|
<br />
|
|
<!-- plunk-hr -->
|
|
<div class="text-center">
|
|
<ins class="adsbygoogle text-center"
|
|
style="display:inline-block;width:320px;height:100px"
|
|
data-ad-client="ca-pub-7616772085785107"
|
|
data-ad-slot="4180012826"></ins>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-46512232-6', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
|
|
</body>
|
|
</html>
|