atlanticbiomedical/website
1
0
Fork 0
mirror of https://github.com/atlanticbiomedical/website.git synced 2025-07-01 18:07:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updated details and layout

Browse Source
This commit is contained in:
Chris Sewell
2014-10-07 07:33:00 -04:00
parent 060fdbde29
commit 24bab3a7f5
5 changed files with 100 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
biomed-frontend/bower.json
View File

@ -11,6 +11,7 @@
"foundation": "5.4.2",
"masonry": "~3.1.5",
"angular-masonry": "~0.9.1",
"imagesloaded": "~3.1.8"
"imagesloaded": "~3.1.8",
"jquery-colorbox": "~1.5.14"
}
}

3
biomed-frontend/gulpfile.js
View File

@ -29,7 +29,8 @@ gulp.task('vendor', function() {
'vendor/lodash/dist/lodash.js',
'vendor/masonry/dist/masonry.pkgd.js',
'vendor/angular-masonry/angular-masonry.js',
'vendor/imagesloaded/imagesloaded.pkgd.js'
'vendor/imagesloaded/imagesloaded.pkgd.js',
'vendor/jquery-colorbox/jquery.colorbox.js'
])
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(concat('vendor.js'))

42
biomed-frontend/src/app/details.html
View File

@ -1,7 +1,37 @@
<img ng-show="post.image" ng-src="/images/{{post.image}}">
<div class="title">{{post.title}}</div>
<div ng-hide="post.details" class="preview">{{post.preview}}</div>
<div class="details">{{post.details}}</div>
<div class="images">
<img ng-repeat="image in gallery track by $index" ng-src="/images/{{image}}">
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
});
</script>
<div class="row">
<div class="small-8 small-centered columns">
<div class="title"><h1>{{post.title}}</h1></div>
</div>
</div>
<div class="row">
<div class="small-8 small-centered columns">
<img ng-show="post.image" ng-src="/images/{{post.image}}"><hr>
</div>
</div>
<div class="row">
<div class="small-7 small-centered columns">
<div ng-hide="post.details" class="preview"><p>{{post.preview}}</p></div>
<div class="details"><p>{{post.details}}</p></div>
</div>
</div>
<div class="row">
<div class="small-6 small-centered columns">
<div masonry>
<a class="group1" href="/images/{{image}}"><img class="large-4 large-centered columns masonry-brick" ng-repeat="image in gallery track by $index" ng-src="/images/{{image}}"></a>
</div>
</div>
</div>

8
biomed-frontend/src/app/layout.html
View File

@ -18,7 +18,7 @@
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>
<!--<li>
<a href="#" data-reveal-id="emailModal">Email us</a>
</li>
<li class="divider"></li>
@ -28,7 +28,7 @@
<li class="divider"></li>
<li>
<a href="#">Login</a>
</li>
</li>-->
</ul>
</section>
</nav>
@ -147,12 +147,12 @@
<li class="name">
<a href="#">Atlantic Biomedical</a>
</li>
<li>
<!--<li>
<a href="#">Home</a>
</li>
<li>
<a href="#" data-reveal-id="contactModal">Contact</a>
</li>
</li>-->
</ul>
<p class="copyright">©2014 Atlantic Biomedical. All rights reserved.</p>
</div>

58
biomed-frontend/src/styles/_biomed.scss
View File

@ -5,15 +5,68 @@
display: block;
text-indent: -9999px;
width: 220px;
height: 45px;
height: 50px;
background: url(http://portal.atlanticbiomedical.com/img/logo.svg);
background-size: 220px 45px;
background-size: 220px 50px;
background-repeat: no-repeat;
}
#contact {
display: table;
margin: 0 auto;
}
.top-bar {
height: 50px;
}
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
#cboxContent{margin-top:20px;background:#000;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
#cboxNext:hover{background-position:bottom right;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
#cboxClose:hover{background-position:bottom center;}
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ==========================================================================
@ -250,6 +303,7 @@ sub {
img {
border: 0;
border-radius: 16px;
}
/**