Added video and video button (#133)

dockstore · Feb 17, 2017 · a91ddb8 · a91ddb8
1 parent ed1c673
commit a91ddb8
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 12 deletions.
diff --git a/app/index.html b/app/index.html
@@ -32,7 +32,7 @@
   <!-- build:css(.tmp) styles/main.css -->
   <link rel="stylesheet" href="styles/main.css">
   <link rel="stylesheet" href="styles/jquery.qtip.css">
-
+  <link rel="stylesheet" href="bower_components/jquery-colorbox/example1/colorbox.css"/>
   <!-- endbuild -->
 </head>
 <body ng-app="dockstore.ui">
@@ -107,6 +107,7 @@
   <script src="bower_components/angular-highlightjs/build/angular-highlightjs.js"></script>
   <script src="bower_components/clipboard/dist/clipboard.js"></script>
   <script src="bower_components/ngclipboard/dist/ngclipboard.js"></script>
+  <script src="bower_components/jquery-colorbox/jquery.colorbox.js"></script>
   <!-- endbower -->
   <!-- endbuild -->
   <!-- Satellizer - Modified for Dockstore -->

diff --git a/app/scripts/controllers/home.js b/app/scripts/controllers/home.js
@@ -34,6 +34,8 @@ angular.module('dockstore.ui')
     'UserService',
     'NotificationService',
     function ($scope, $rootScope, $q, $location, ContainerService, WorkflowService, UserService, NtfnService) {
+       // dockstore video
+       $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
 
       $scope.userObj = UserService.getUserObj();
       $scope.tabMode = 'Tool';

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -82,7 +82,7 @@ body {
   background-color: #2a3e6b;
   height: 100%;
   .button {
-    margin-top: 20px;
+    margin-top: 5px;
   }
   img.blue-rectangle {
     position: absolute;
@@ -1013,4 +1013,23 @@ html, body {
   height:100%;
 }
 
+/* Video Button */
+
+.youtube, .youtube:active, .youtube:focus {
+  text-transform: uppercase;
+  padding: 8px 22px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  background: none;
+  border: 2px solid #a0adcc;
+  color: #a0adcc;
+}
+
+.youtube:hover {
+  background: none;
+  border: 2px solid white;
+  color: white;
+}
+
 /* End Temporary Styles - Need to Refactor Later */
diff --git a/app/views/home.html b/app/views/home.html
@@ -47,15 +47,22 @@ <h2 class="title caption">Search Docker Tools and Workflows for the Sciences:</h
       <div class="col-md-6">
         <h4 class="title caption">Dockstore, developed by the <a class="white-link" href="https://www.cancercollaboratory.org/" target="_blank">Cancer Genome Collaboratory</a>, is an open platform for sharing Docker-based tools described with the <a class="white-link" href="http://www.commonwl.org/" target="_blank">Common Workflow Language</a> used by the <a class="white-link" href="https://genomicsandhealth.org/" target="_blank">GA4GH</a>.</h4>
       </div>
-      <div class="col-md-3 row-center"
-          ng-if="!userObj">
-        <div class="button">
-          <p><a href="/login">Sign up to Contribute &raquo;</a></p>
-        </div>
+      <div class="col-md-3 row-center">
+        <a class='btn youtube' href="https://www.youtube.com/embed/RYHUX9jGx24" role="button">
+          <span style="font-size:25px; vertical-align: middle;" class="glyphicon glyphicon-play-circle"></span>
+          <span style="vertical-align: middle;">&nbsp;Get Started</span>
+        </a>
       </div>
-      <div class="col-md-3 row-center"  ng-class="userObj ? 'col-md-offset-3' : ''">
-        <div class="button">
-          <p><a href="/docs/blog">News and Events &raquo;</a></p>
+      <div class="col-md-3 row-center">
+        <div ng-if="!userObj">
+          <div class="button">
+            <p><a href="/login">Sign up to Contribute &raquo;</a></p>
+          </div>
+        </div>
+        <div ng-class="userObj ? 'col-md-offset-3' : ''">
+          <div class="button">
+            <p><a href="/docs/blog">News and Events &raquo;</a></p>
+          </div>
         </div>
       </div>
     </div>

diff --git a/bower.json b/bower.json
@@ -25,7 +25,8 @@
     "highlightjs": "^9.7.0",
     "angular-highlightjs": "^0.6.2",
     "ngclipboard": "^1.1.1",
-    "qtip2": "^2.2.1"
+    "qtip2": "^2.2.1",
+    "jquery-colorbox": "^1.6.4"
   },
   "devDependencies": {
     "angular-mocks": "^1.5.8"

diff --git a/package.json b/package.json
@@ -47,5 +47,6 @@
   },
   "scripts": {
     "test": "grunt test"
-  }
+  },
+  "dependencies": {}
 }