Updated details and layout

biomed-frontend/bower.json

@@ -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"
   }
 }

biomed-frontend/gulpfile.js

@@ -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'))

biomed-frontend/src/app/details.html

@@ -1,7 +1,37 @@
-<img ng-show="post.image" ng-src="/images/{{post.image}}">
+<script>
-<div class="title">{{post.title}}</div>
+			$(document).ready(function(){
-<div ng-hide="post.details" class="preview">{{post.preview}}</div>
+				//Examples of how to assign the Colorbox event to elements
-<div class="details">{{post.details}}</div>
+				$(".group1").colorbox({rel:'group1'});
-<div class="images">
+				$(".callbacks").colorbox({
-	<img ng-repeat="image in gallery track by $index" ng-src="/images/{{image}}">
+					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>

biomed-frontend/src/app/layout.html

@@ -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>

biomed-frontend/src/styles/_biomed.scss

@@ -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;
 }
 
 /**