More features

This commit is contained in:
Dobie Wollert
2015-02-02 00:31:11 -08:00
parent 6f2cc70181
commit 0ca77dd9b6
6 changed files with 144 additions and 498 deletions

View File

@ -12,8 +12,6 @@
<a href="http://atlanticbiomedical.com:8001/unsafe/{{image}}"><img ng-src="http://atlanticbiomedical.com:8001/unsafe/200x200/smart/{{image}}"></a>
</li>
</ul>
<div class="fb-comments" data-href="http://atlanticbiomedical.com/posts/{{post._id}}" data-numposts="5" data-colorscheme="light"></div>
</div>
<script>
$(document).foundation();
</script>
</div>

View File

@ -29,6 +29,7 @@ angular.module('biomed-frontend', [
var deferred = false;
var more = true;
var filter = undefined;
var loadNextPage = function() {
if (more && (!deferred || deferred.$resolved)) {
@ -39,6 +40,10 @@ angular.module('biomed-frontend', [
'skip': $scope.posts.length
};
if ($scope.filter) {
query['tags'] = $scope.filter;
}
deferred = Posts.query(query, function(posts) {
more = posts.length > 0;
@ -60,6 +65,18 @@ angular.module('biomed-frontend', [
$scope.addMoreItems = function() {
loadNextPage();
}
$scope.filterByTag = function(tag) {
$scope.filter = tag;
$scope.posts = [];
loadNextPage();
}
$scope.resetFilter = function() {
$scope.filter = undefined;
$scope.posts = [];
loadNextPage();
}
}
})
.state('site.details', {

View File

@ -1,15 +1,25 @@
<div class="filter-header" ng-show="filter" ng-click="resetFilter()">
<span class="fa fa-arrow-left"></span>
#{{filter}}
</div>
<div class="masonry-container" masonry preserve-order masonry-options="{isFitWidth: true}" infinite-scroll="addMoreItems()" infinite-scroll-distance="2">
<div ng-repeat="post in posts" class="masonry-brick">
<div class="box col3">
<div class="thumbnail">
<img class="img-rounded" ng-show="post.image" ng-src="http://atlanticbiomedical.com:8001/unsafe/280x0/{{post.image}}">
<div class="caption text-center">
<div class="col3">
<div class="post">
<div class="tags">
<div ng-repeat="tag in post.tags" class="tag">
<span class="border">&nbsp;</span>
<a ng-click="filterByTag(tag)">#{{tag}}</a>
</div>
</div>
<img ng-show="post.image" ng-src="http://atlanticbiomedical.com:8001/unsafe/280x0/{{post.image}}">
<div class="post-content">
<h3>{{post.title}}</h3>
<p ng-if="!post.previewHtml" ng-bind="post.preview"></p>
<div ng-if="post.previewHtml" ng-bind-html="post.previewHtml"></div>
<p>
<div class="caption">
<p ng-if="!post.previewHtml" ng-bind="post.preview"></p>
<div ng-if="post.previewHtml" ng-bind-html="post.previewHtml"></div>
<a ui-sref="site.details(post)" ng-show="showMore(post)" class="btn btn-default" role="button">Read More</a>
</p>
</div>
</div>
</div>
</div>

View File

@ -9,6 +9,14 @@
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<a href="javascript:;" id="return-to-top"><i class="icon-chevron-up"></i></a>
<div ui-view></div>
<script src="/vendor.js"></script>

View File

@ -498,491 +498,6 @@ table {
max-width: 80rem;
}
button, .button {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.btn.active:focus,
.btn:active:focus,
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px
}
.btn:focus,
.btn:hover {
color: #333;
text-decoration: none
}
.btn.active,
.btn:active {
outline: 0;
background-image: none;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
cursor: not-allowed;
pointer-events: none;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.btn-default.active,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open .dropdown-toggle.btn-default {
color: #333;
background-color: #ebebeb;
border-color: #adadad
}
.btn-default.active,
.btn-default:active,
.open .dropdown-toggle.btn-default {
background-image: none
}
.btn-default.disabled,
.btn-default.disabled.active,
.btn-default.disabled:active,
.btn-default.disabled:focus,
.btn-default.disabled:hover,
.btn-default[disabled],
.btn-default[disabled].active,
.btn-default[disabled]:active,
.btn-default[disabled]:focus,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default.active,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default:hover {
background-color: #fff;
border-color: #ccc
}
.btn-default .badge {
color: #fff;
background-color: #333
}
.btn-primary {
color: #fff;
background-color: #428bca;
border-color: #357ebd
}
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276b1;
border-color: #285e8e
}
.btn-primary.active,
.btn-primary:active,
.open .dropdown-toggle.btn-primary {
background-image: none
}
.btn-primary.disabled,
.btn-primary.disabled.active,
.btn-primary.disabled:active,
.btn-primary.disabled:focus,
.btn-primary.disabled:hover,
.btn-primary[disabled],
.btn-primary[disabled].active,
.btn-primary[disabled]:active,
.btn-primary[disabled]:focus,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary,
fieldset[disabled] .btn-primary.active,
fieldset[disabled] .btn-primary:active,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary:hover {
background-color: #428bca;
border-color: #357ebd
}
.btn-primary .badge {
color: #428bca;
background-color: #fff
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c
}
.btn-success.active,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.open .dropdown-toggle.btn-success {
color: #fff;
background-color: #47a447;
border-color: #398439
}
.btn-success.active,
.btn-success:active,
.open .dropdown-toggle.btn-success {
background-image: none
}
.btn-success.disabled,
.btn-success.disabled.active,
.btn-success.disabled:active,
.btn-success.disabled:focus,
.btn-success.disabled:hover,
.btn-success[disabled],
.btn-success[disabled].active,
.btn-success[disabled]:active,
.btn-success[disabled]:focus,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success,
fieldset[disabled] .btn-success.active,
fieldset[disabled] .btn-success:active,
fieldset[disabled] .btn-success:focus,
fieldset[disabled] .btn-success:hover {
background-color: #5cb85c;
border-color: #4cae4c
}
.btn-success .badge {
color: #5cb85c;
background-color: #fff
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #46b8da
}
.btn-info.active,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39b3d7;
border-color: #269abc
}
.btn-info.active,
.btn-info:active,
.open .dropdown-toggle.btn-info {
background-image: none
}
.btn-info.disabled,
.btn-info.disabled.active,
.btn-info.disabled:active,
.btn-info.disabled:focus,
.btn-info.disabled:hover,
.btn-info[disabled],
.btn-info[disabled].active,
.btn-info[disabled]:active,
.btn-info[disabled]:focus,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info,
fieldset[disabled] .btn-info.active,
fieldset[disabled] .btn-info:active,
fieldset[disabled] .btn-info:focus,
fieldset[disabled] .btn-info:hover {
background-color: #5bc0de;
border-color: #46b8da
}
.btn-info .badge {
color: #5bc0de;
background-color: #fff
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236
}
.btn-warning.active,
.btn-warning:active,
.btn-warning:focus,
.btn-warning:hover,
.open .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ed9c28;
border-color: #d58512
}
.btn-warning.active,
.btn-warning:active,
.open .dropdown-toggle.btn-warning {
background-image: none
}
.btn-warning.disabled,
.btn-warning.disabled.active,
.btn-warning.disabled:active,
.btn-warning.disabled:focus,
.btn-warning.disabled:hover,
.btn-warning[disabled],
.btn-warning[disabled].active,
.btn-warning[disabled]:active,
.btn-warning[disabled]:focus,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning,
fieldset[disabled] .btn-warning.active,
fieldset[disabled] .btn-warning:active,
fieldset[disabled] .btn-warning:focus,
fieldset[disabled] .btn-warning:hover {
background-color: #f0ad4e;
border-color: #eea236
}
.btn-warning .badge {
color: #f0ad4e;
background-color: #fff
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a
}
.btn-danger.active,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.open .dropdown-toggle.btn-danger {
color: #fff;
background-color: #d2322d;
border-color: #ac2925
}
.btn-danger.active,
.btn-danger:active,
.open .dropdown-toggle.btn-danger {
background-image: none
}
.btn-danger.disabled,
.btn-danger.disabled.active,
.btn-danger.disabled:active,
.btn-danger.disabled:focus,
.btn-danger.disabled:hover,
.btn-danger[disabled],
.btn-danger[disabled].active,
.btn-danger[disabled]:active,
.btn-danger[disabled]:focus,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger,
fieldset[disabled] .btn-danger.active,
fieldset[disabled] .btn-danger:active,
fieldset[disabled] .btn-danger:focus,
fieldset[disabled] .btn-danger:hover {
background-color: #d9534f;
border-color: #d43f3a
}
.btn-danger .badge {
color: #d9534f;
background-color: #fff
}
.btn-link {
color: #428bca;
font-weight: 400;
cursor: pointer;
border-radius: 0
}
.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none
}
.btn-link,
.btn-link:active,
.btn-link:focus,
.btn-link:hover {
border-color: transparent
}
.btn-link:focus,
.btn-link:hover {
color: #2a6496;
text-decoration: underline;
background-color: transparent
}
.btn-link[disabled]:focus,
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:focus,
fieldset[disabled] .btn-link:hover {
color: #999;
text-decoration: none
}
.btn-group-lg>.btn,
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px
}
.btn-group-sm>.btn,
.btn-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btn-group-xs>.btn,
.btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0
}
.btn-block+.btn-block {
margin-top: 5px
}
input[type=button].btn-block,
input[type=reset].btn-block,
input[type=submit].btn-block {
width: 100%
}
/**
* button
* --------------------------------------------------
*/
.btn {
color: white;
}
.btn, .btn.disabled, .btn[disabled] {
border-color: #aab2bd;
background-color: #aab2bd;
}
.btn:hover, .btn:focus, .btn:active, .btn.active {
color: white;
border-color: #ccd1d9;
background-color: #ccd1d9;
outline: none !important;
}
.btn:active, .btn.active {
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
}
.btn.disabled, .btn[disabled] {
opacity: 0.45;
filter: alpha(opacity=45);
}
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .btn-link.disabled, .btn-link[disabled] {
border-color: transparent;
background-color: transparent;
color: #3bafda;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.btn-link:hover, .btn-link:focus {
text-decoration: underline;
}
.btn-default {
color: #434a54;
border-color: #aab2bd !important;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
border-color: #ccd1d9;
background-color: #ccd1d9;
}
.btn-default, .btn-default.disabled, .btn-default[disabled] {
background-color: white;
}
.open .dropdown-toggle.btn-default {
border-color: #ccd1d9;
background-color: #ccd1d9;
}
.btn-primary, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
border-color: #3bafda;
background-color: #3bafda;
}
.btn-primary:hover, .btn-primary:focus {
border-color: #4fc1e9;
background-color: #4fc1e9;
}
.open .dropdown-toggle.btn-primary {
border-color: #4fc1e9;
background-color: #4fc1e9;
}
.btn-info, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
border-color: #37bc9b;
background-color: #37bc9b;
}
.btn-info:hover, .btn-info:focus {
border-color: #48cfad;
background-color: #48cfad;
}
.open .dropdown-toggle.btn-info {
border-color: #48cfad;
background-color: #48cfad;
}
.btn-success, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
border-color: #8cc152;
background-color: #8cc152;
}
.btn-success:hover, .btn-success:focus {
border-color: #a0d468;
background-color: #a0d468;
}
.open .dropdown-toggle.btn-success {
border-color: #a0d468;
background-color: #a0d468;
}
.btn-warning, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
border-color: #f6bb42;
background-color: #f6bb42;
}
.btn-warning:hover, .btn-warning:focus {
border-color: #ffce54;
background-color: #ffce54;
}
.open .dropdown-toggle.btn-warning {
border-color: #ffce54;
background-color: #ffce54;
}
.btn-danger, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled],
.btn-danger .open .dropdown-toggle.btn {
border-color: #da4453;
background-color: #da4453;
}
.btn-danger:hover, .btn-danger:focus {
border-color: #ed5565;
background-color: #ed5565;
}
.open .dropdown-toggle.btn-danger {
border-color: #ed5565;
background-color: #ed5565;
}
.row {
max-width: 4000px;
@ -1067,7 +582,7 @@ body {
height: 100%;
padding: 0;
margin: 0;
background: #ededed;
background: #f1f2f6;
font-family: "Trebuchet MS", "Arial", Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
@ -1204,3 +719,100 @@ h2 {
margin: 0 auto;
}
.filter-header {
background: #427fed;
color: white;
padding: 10px;
cursor: pointer;
}
.masonry-brick {
padding: 10px;
.post {
position:relative;
background: white;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
&:before, &:after {
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
box-shadow:0 0 20px rgba(0,0,0,0.2);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
h3 {
}
img {
border-radius: 0;
}
.post-content {
padding: 10px;
}
.tags {
font-size: 12px;
position: absolute;
margin: 28px 0 0;
right: 0;
top: 0;
}
.tag {
clear: both;
background-color: rgba(255, 255, 255, 0.8);
float: right;
height: 26px;
line-height: 26px;
a {
color: #555;
display: block;
float: right;
max-wdith: 130px;
overflow: hidden;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
background: #427fed;
color: white;
}
}
}
.border {
background-color: #427fed;
float: right;
height: 26px;
margin-right: -4px;
padding-right: 4px;
width: 0;
}
.caption {
a {
display: inline-block;
padding: 10px;
&:hover {
background: #427fed;
color: white;
}
}
}
}
}

View File

@ -24,7 +24,8 @@ var Post = new Schema({
gallery: [
{ type: String }
],
status: { type: String }
status: { type: String },
tags: [{ type: String }]
});
var PostModel = mongoose.model('Post', Post);