studio - page headers: added in view live links to course dashboard

cms/static/sass/_base.scss

@@ -651,7 +651,6 @@ hr.divide {
 .view-button {
   @include blue-button;
   @include font-size(13);
-  padding: 8px 20px 10px;
   text-align: center;
 
   &.big {

cms/static/sass/_dashboard.scss

@@ -6,19 +6,27 @@
 	@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
 
 	li {
+		position: relative;
 		border-bottom: 1px solid $mediumGrey;
 
 		&:last-child {
 			border-bottom: none;
 		}
-	}
 
-	a {
-		padding: 20px 25px;
-		line-height: 1.3;
-		
-		&:hover {
-			background: $paleYellow;
+		.class-link {
+			z-index: 100;
+			display: block;
+			padding: 20px 25px;
+			line-height: 1.3;
+			
+			&:hover {
+				background: $paleYellow;
+
+				+ .view-live-button {
+					opacity: 1.0;
+					pointer-events: auto;
+				}
+			}
 		}
 	}
 
@@ -34,6 +42,21 @@
 		margin-right: 20px;
 		color: #3c3c3c;
 	}
+
+	.view-live-button {
+		z-index: 10000;
+		position: absolute;
+		top: 15px;
+		right: $baseline;		
+		padding: ($baseline/4) ($baseline/2);
+		opacity: 0;
+		pointer-events: none;
+
+		&:hover {
+			opacity: 1.0;
+			pointer-events: auto;
+		}
+	}
 }
 
 .new-course {

cms/templates/index.html

@@ -61,9 +61,10 @@
         <ul class="class-list">
           %for course, url in courses:
           <li>
-            <a href="${url}" class="class-name">
+            <a class="class-link" href="${url}" class="class-name">
               <span class="class-name">${course}</span>
             </a>
+            <a href="#" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
           </li>
             %endfor
         </ul>

cms/templates/overview.html

@@ -137,7 +137,7 @@
             <a href="#" class="button new-button new-courseware-section-button"><i class="ss-icon ss-symbolicons-standard icon icon-create">&#x002B;</i> New Section</a>
           </li>
           <li class="nav-item">
-            <a href="#" class="button view-button view-course-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Course</a>
+            <a href="#" class="button view-button view-live-button"><i class="ss-icon ss-symbolicons-block icon icon-view">&#xE010;</i>View Live</a>
           </li>
         </ul>
       </nav>