updated some of the design / architecture / styling

app/components/header/header.html

@@ -1,26 +1,31 @@
-<div>
-  <!--
+<div class="header-wrap">
+  <div class="header-bg" ng-style="bottomHeaderStyle"></div>
   <div class="top-header">
     <div class="content">
       <div class="logo">
         <img ng-src="{{domain_logo}}"/>
+        <p class="logo-text">{{transcript.organization.legal_name}}</p>
       </div>
       <div class="user">
         <h1>{{transcript.user.givenName}} {{transcript.user.familyName}}</h1>
+        <div class="user-id">Student Id: {{transcript.user.sourcedId}}</div>
+        <div class="rop-time">Status as of: {{transcript.created_at}}</div>
+        <div class="btn-dash">
+          <button class="btn btn-white btn-outline">
+            <span>&laquo;</span>
+            Dashboard
+          </button>
+        </div>
       </div>
     </div>
   </div>
--->
-  <div class="bottom-header" ng-style="bottomHeaderStyle">
-    <div class="overlay">
-      <div class="content">
-        <div class="">
-          <button class="btn btn-default">Dashboard</button>
-        </div>
-        <div class="right">
-          <button class="btn btn-default">Send</button>
-        </div>
+  <div class="middle-header">
+    <div class="transcript-label content">
+      <span>Official Transcript</span>
+      <div class="right">
+        <div>This is an official transcript from the All American University Office of the Registrar.</div>
+        <div>Student information is guaranteed unaltered from the source.</div>
       </div>
     </div>
   </div>
-</div>
+</div>

app/components/transcript/competency/competency.scss

@@ -4,6 +4,7 @@
 
   .competency-content {
     margin-left: 40px;
+    margin-bottom: 0.25em;
     padding-top: 0.5em;
 
     * {

app/components/transcript/outcome/outcome.html

@@ -9,11 +9,15 @@
     </div>
   </div>
   <button
-       ng-show="showDetails"
-       ng-click="unitsVisible = !unitsVisible"
-       class="secondary"
-       ng-class="{'expanded':unitsVisible}">detail</button>
-  <div ng-if="unitsVisible">
+    ng-show="showDetails"
+    ng-click="unitsVisible = !unitsVisible"
+    class="secondary"
+    ng-class="{'expanded': unitsVisible}">
+    <span ng-show="unitsVisible">-</span>
+    <span ng-hide="unitsVisible">+</span>
+    detail
+  </button>
+  <div class="outcome-progress-detail" ng-class="{'expanded': unitsVisible}">
     <competency ng-repeat="competency in outcome.competencies" progress="competency"></competency>
   </div>
 </div>

app/components/transcript/outcome/outcome.scss

@@ -1,33 +1,49 @@
 
 $width-percentage: 60px;
 
-.outcome {
-  margin-bottom: 1em;
-}
-
 .outcome-progress {
 
   > * {
       display:inline-block;
       vertical-align:middle;
   }
   .prog-bar {
-    width: $width-body - $width-percentage;
+    width: calc(100% - #{$width-percentage} - 0.5em);
+    margin-right: 0.5em;
   }
   .percentage {
     color: $color-primary;
     font-weight: 700;
-    font-size:1.5em;
+    font-size: 1.5em;
     width: $width-percentage;
     text-align: right;
   }
 
   + button {
     margin-bottom: 1em;
+    font-size: 0.85em;
+
+    > span {
+      position: relative;
+      top: -0.075em;
+      margin-right: 0.25em;
+    }
   }
 }
 
 .outcome-title {
   font-size: 1.25em;
   color: $color-primary;
 }
+
+.outcome-progress-detail {
+  max-height: 0;
+  margin: 0;
+  display: block;
+  overflow: hidden;
+
+  &.expanded {
+    max-height: 250em;
+    margin-bottom: 1.5em;
+  }
+}

app/components/transcript/transcript.html

@@ -1,38 +1,35 @@
-<div>
-  <div>
+<div class="content-wrap">
+  <header></header>
+  <div class="content transcript-input-form">
+    <input type="text"
+         ng-change="updateTranscript(transcriptUrl)"
+         ng-model="transcriptUrl"
+         placeholder="url">
+    Url to transcript
     <i ng-if="transcriptLoading" class="fa fa-circle-o-notch fa-spin"></i>
   </div>
   <div class="content transcript" ng-if="!transcriptLoading">
-    <div class="transcript-label">
-      <span>Official Transcript</span>
-      <div class="right">
-        <div>This is an official transcript from the All American University Office of the Registrar.</div>
-        <div>Student information is guaranteed unaltered from the source.</div>
-      </div>
-    </div>
+    <div class="transcript-body">
+      <div class="program">
+        <h2 class="level">
+          {{transcript.program.degree_level}}
+          <div class="right">
+            <button class="btn btn-secondary">
+              Share
+              <span>&raquo;</span>
+            </button>
+          </div>
+        </h2>
+        <div class="program-label">{{transcript.program.label}}</div>
+        <program ng-repeat="program in transcript.programs" program="program"> </program>
+        <outcome ng-repeat="outcome in transcript.hierarchy" outcome="outcome"></outcome>
 
-    <div class="transcript-header">
-      <img ng-src="{{domain_logo_secondary}}"
-           class="logo"
-           ng-if="!!domain_logo_secondary" />
-      <div class="right">
-        <div class="user-name">{{transcript.user.givenName}} {{transcript.user.familyName}}</div>
-        <div class="rop-time">Status as of: {{transcript.created_at}}</div>
       </div>
-    </div>
-
-    <div class="transcript-body">
-      <program ng-repeat="program in transcript.programs" program="program"> </program>
-      <!--<progress ng-repeat="progress in transcript.progress" progress="progress"/>-->
-      <!--<competency ng-repeat="progress in transcript.progress" progress="progress"> </competency> -->
-      <outcome ng-repeat="outcome in transcript.hierarchy" outcome="outcome"></outcome>
-      <!--
       <div class="unit-list">
         <div ng-repeat="outcome in outcomes">
           <outcome outcome="outcome" transcript="transcript"></outcome>
         </div>
       </div>
-    -->
     </div>
   </div>
 </div>

app/index.html

@@ -7,12 +7,6 @@
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
         <link rel="stylesheet" href="/assets/styles/index.css"/>
-        <style>
-            body {
-                background: #FFF;
-                margin: 0;
-            }
-        </style>
         <script>
           window.lo_api_config = {
             root: $ROOT_URL$,
@@ -26,7 +20,6 @@
         <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
         <![endif]-->
         <div id="content">
-          <header></header>
           <div ui-view=""></div>
         </div>
         <script type="text/javascript" src="/assets/main.js"></script>

app/styles/index.sass

@@ -1,12 +1,13 @@
 
 @import 'default-variables'
-
 @import 'custom-umuc-variables'
 
 @import 'main'
 @import '../components/transcript/competency/competency'
 @import '../components/transcript/outcome/outcome'
 @import '../components/transcript/unit/unit'
 @import '../components/transcript/transcript'
+@import 'print'
+
 // UMUC-specific
 @import 'custom-umuc'