Added markdown and scoll to top features

This commit is contained in:
Dobie Wollert
2015-02-01 20:45:45 -08:00
parent 257a12d746
commit 97a065b2b9
5 changed files with 85 additions and 12 deletions

View File

@ -3,7 +3,10 @@
<div class="title"><h1>{{post.title}}</h1></div>
<img class="mainimg" ng-show="post.image" ng-src="http://atlanticbiomedical.com:8001/unsafe/fit-in/500x500/smart/{{post.image}}"><hr>
<div ng-hide="post.details" class="preview"><p>{{post.preview}}</p></div>
<div class="details"><p>{{post.details}}</p></div>
<div class="details">
<p ng-if="!post.detailsHtml" ng-bind="post.details"></p>
<div ng-if="post.detailsHtml" ng-bind-html="post.detailsHtml"></div>
</div>
<ul class="clearing-thumbs small-block-grid-4" data-clearing>
<li ng-repeat="image in gallery track by $index">
<a href="http://atlanticbiomedical.com:8001/unsafe/{{image}}"><img ng-src="http://atlanticbiomedical.com:8001/unsafe/200x200/smart/{{image}}"></a>

View File

@ -27,12 +27,20 @@ angular.module('biomed-frontend', [
posts: function(Posts) {
return Posts.query({
'status': 'posted',
'sort': '-createdOn',
});
'sort': '-postedOn',
}).$promise;
}
},
controller: function($scope, posts, $timeout) {
$scope.posts = posts;
controller: function($scope, posts, $timeout, $sce, $location, $anchorScroll) {
$scope.posts = [];
angular.forEach(posts, function(post) {
if (post.previewHtml) {
post.previewHtml = $sce.trustAsHtml(post.previewHtml);
}
$scope.posts.push(post);
});
$scope.showMore = function(post) {
return post.details || post.gallery.length > 0;
@ -46,14 +54,31 @@ angular.module('biomed-frontend', [
post: function(Posts, $stateParams) {
return Posts.get({
'_id': $stateParams._id
});
}).$promise;
}
},
controller: function($scope, post) {
post.$promise.then(function() {
$scope.post = post;
$scope.gallery = post.gallery;
});
controller: function($scope, post, $sce) {
if (post.detailsHtml) {
post.detailsHtml = $sce.trustAsHtml(post.detailsHtml);
}
$scope.post = post;
$scope.gallery = post.gallery;
}
});
})
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
$('#return-to-top').click(function() {
$('body,html').animate({
scrollTop : 0
}, 500);
});

View File

@ -5,7 +5,8 @@
<img class="img-rounded" ng-show="post.image" ng-src="http://atlanticbiomedical.com:8001/unsafe/280x0/{{post.image}}">
<div class="caption text-center">
<h3>{{post.title}}</h3>
<p>{{post.preview}}</p>
<p ng-if="!post.previewHtml" ng-bind="post.preview"></p>
<div ng-if="post.previewHtml" ng-bind-html="post.previewHtml"></div>
<p>
<a ui-sref="site.details(post)" ng-show="showMore(post)" class="btn btn-default" role="button">Read More</a>
</p>

View File

@ -5,9 +5,11 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlantic Biomedical</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<a href="javascript:;" id="return-to-top"><i class="icon-chevron-up"></i></a>
<div ui-view></div>
<script src="/vendor.js"></script>
<script src="/app.js"></script>

View File

@ -1327,3 +1327,45 @@ h2 {
.masonry-container {
margin: 0 auto;
}
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1000;
}
#return-to-top i {
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
font-size: 19px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top:hover {
background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
color: #fff;
top: 5px;
}