diff --git a/biomed-frontend/bower.json b/biomed-frontend/bower.json index 955acb2..2ea137b 100644 --- a/biomed-frontend/bower.json +++ b/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" } } diff --git a/biomed-frontend/gulpfile.js b/biomed-frontend/gulpfile.js index 5a1bf7f..adba846 100644 --- a/biomed-frontend/gulpfile.js +++ b/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')) diff --git a/biomed-frontend/src/app/details.html b/biomed-frontend/src/app/details.html index 8d858a9..585cafc 100644 --- a/biomed-frontend/src/app/details.html +++ b/biomed-frontend/src/app/details.html @@ -1,7 +1,37 @@ - -
{{post.title}}
-
{{post.preview}}
-
{{post.details}}
-
- + + +
+
+

{{post.title}}

+
+
+
+
+
+
+
+
+

{{post.preview}}

+

{{post.details}}

+
+
+
+
+
+ +
+
+
\ No newline at end of file diff --git a/biomed-frontend/src/app/layout.html b/biomed-frontend/src/app/layout.html index 096378d..4c01e7a 100644 --- a/biomed-frontend/src/app/layout.html +++ b/biomed-frontend/src/app/layout.html @@ -18,7 +18,7 @@
@@ -147,12 +147,12 @@
  • Atlantic Biomedical
  • -
  • +
  • diff --git a/biomed-frontend/src/styles/_biomed.scss b/biomed-frontend/src/styles/_biomed.scss index 84d82d8..9524de0 100644 --- a/biomed-frontend/src/styles/_biomed.scss +++ b/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; } /**