# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1476948247 -19800
# Node ID e952c8a31a2bdc1e01abc98ece62dee9b455f52e
# Parent  eac9e4eb75c7cb39a9caaac4f7e1154588865c87
Transcript design + Fix video display and filter component font

diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/components/toolbar-component.js
--- a/cms/app-client/app/components/toolbar-component.js	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/components/toolbar-component.js	Thu Oct 20 12:54:07 2016 +0530
@@ -9,6 +9,7 @@
 	actions: {
 
 		display: function(el) {
+			console.log('toolbar display func');
 			this.get('player').displayAdditionalInformation(el);
 		}
 
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/services/player.js
--- a/cms/app-client/app/services/player.js	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/services/player.js	Thu Oct 20 12:54:07 2016 +0530
@@ -18,6 +18,7 @@
 
     displayAdditionalInformation: function(el) {
         if(el === 'video') {
+            console.log('toggleVideoscreen');
             this.toggleVideoscreen();
         } else {
             if(this.get('window') !== el) {
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/app.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -86,8 +86,8 @@
 }
 
 body.videoscreen .corpus-app-container {
-    margin-top: 308px;
-    height: 292px;
+    margin-top: 260px;
+    height: 240px;
 }
 
 h2 {
@@ -143,7 +143,7 @@
 
 .corpus-app-container.window {
     overflow: scroll;
-    height: 560px;
+    height: 500px;
 }
 
 .corpus-app-modal {
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/filter-component.scss
--- a/cms/app-client/app/styles/components/filter-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/filter-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -48,6 +48,10 @@
 .filter-component ul li .label {
     margin: 0;
     padding: 0;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-weight: inherit;
 }
 
 .filter-component ul li .label,
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/notice-component.scss
--- a/cms/app-client/app/styles/components/notice-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/notice-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -1,15 +1,20 @@
 .corpus-app-container.window {
-    background-color: $light-blue;
+    background-color: $corpus-white;
 }
 
 .notice-component {
-    padding: 20px 40px;
-    color: $dark-grey;
+    padding: 40px;
+    color: $corpus-grey;
+}
+
+body.videoscreen .notice-component {
+    padding-top: 20px;
+    padding-bottom: 20px;
 }
 
 .notice-component a.fa {
     text-decoration: none;
-    color: inherit;
+    color: $corpus-black;
     font-size: 0px;
     margin-left: 5px;
 }
@@ -25,7 +30,7 @@
 .notice-component a.doc-link-bnf, 
 .notice-component a.doc-link-lexvo {
     cursor: pointer;
-    color: $dark-grey;
+    color: $corpus-black;
     text-decoration: none;
     pointer-events: none;
 }
@@ -47,18 +52,21 @@
 }
 
 .notice-component h2 {
-    color: $light-white;
+    color: $corpus-black;
     text-align: left;
-    font-size: 14px;
+    font-weight: bold;
+    font-size: 20px;
     text-transform: uppercase;
+    line-height: normal;
     padding: 0px;
 }
 
 .notice-component h3 {
-    color: $light-white;
+    color: $corpus-blue;
     line-height: 18px;
     font-size: 14px;
     padding: 5px 0px;
+    font-weight: bold;
 }
 
 .notice-component.overlay h2,
@@ -70,11 +78,11 @@
     line-height: 18px;
     border-collapse: collapse;
     width: 100%;
-    margin-top: 15px;
+    margin-top: 5px;
 }
 
 .notice-component table tr {
-    border-bottom: solid 1px $dark-blue;
+    border-bottom: solid 1px $corpus-black;
 }
 
 .notice-component table tr td {
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/player-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -9,6 +9,10 @@
     position: relative;
 }
 
+.player-component.video {
+    overflow: visible;
+}
+
 .player-component #audio {
     height: 100%;
 }
@@ -195,7 +199,7 @@
     z-index: 1;
     left: 0px;
     position: absolute;
-    width: 554px;
+    width: 50%;
 }
 
 body.videoscreen .player-component.video #video {
@@ -204,7 +208,7 @@
 
 .player-component #video #popcorn-audio {
     width: 100%;
-    height: 308px;
+    height: 260px;
     display: block;
     margin: 0 auto;
 }
@@ -220,10 +224,6 @@
     font-size: 21px;
 }
 
-.player-component #audio .controls.extra i.fa-text-height.active::before {
-    color: $blue;
-}
-
 .player-component #audio .controls.extra i.fa-expand::before,
 .player-component #audio .controls.extra i.fa-compress::before {
     font-size: 19px;
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/playlist-component.scss
--- a/cms/app-client/app/styles/components/playlist-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -198,7 +198,7 @@
 
 .playlist-component ul li .title,
 .playlist-component ul li .author,
-.playlist-component ul li .language {
+.playlist-component ul li .languages {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/sorting-component.scss
--- a/cms/app-client/app/styles/components/sorting-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -75,7 +75,7 @@
 }
 
 .sorting-component div.tags ul li.selected {
-    color: $corpus-black;
+    color: $corpus-blue;
     font-size: 20px
 }
 
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/toolbar-component.scss
--- a/cms/app-client/app/styles/components/toolbar-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/toolbar-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -7,7 +7,7 @@
     text-align: left;
     color: $light-white;
     font-size: 13px;
-    background-color: $dark-blue;
+    background-color: $corpus-black;
     box-sizing: border-box;
     position: absolute;
     bottom: 0px;
@@ -30,8 +30,11 @@
 }
 
 .toolbar-component ul li.active {
-    border-left-color: $dark-blue;
-    background-color: $light-white;
+    border-left-color: $corpus-black;
+    background-color: $corpus-white;
+    color: $corpus-black;
+}
+
+.toolbar-component ul li.active:not(.video) {
     pointer-events: none;
-    color: $dark-blue;
 }
\ No newline at end of file
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/styles/components/transcript-component.scss
--- a/cms/app-client/app/styles/components/transcript-component.scss	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Thu Oct 20 12:54:07 2016 +0530
@@ -1,5 +1,5 @@
 .transcript-component {
-    background-color: $light-blue;
+    background-color: $corpus-light-grey;
     padding: 0px;
     width: 554px;
     box-sizing: border-box;
@@ -13,16 +13,18 @@
     position: absolute;
     z-index: 1;
     width: inherit;
-    background: linear-gradient($light-blue, $light-blue 50%, transparent);
+    background: linear-gradient($corpus-light-grey, $corpus-light-grey 50%, transparent);
     padding-top: 12px;
     padding-bottom: 66px;
     line-height: 30px;
     margin: 0px!important;
+    color: $corpus-blue;
+    font-weight: bold;
 }
 
-.transcript-component h2 span{
+.transcript-component h2 .translation{
     display: block;
-    color: $medium-grey;
+    font-weight: normal;
 }
 
 body.videoscreen .transcript-component h2 {
@@ -42,7 +44,7 @@
 .transcript-component .transcript h3 {
     padding: 20px 20px 20px 64px;
     font-weight: bold;
-    color: $medium-blue;
+    color: $corpus-blue;
     font-size: 12px;
     line-height: 24px;
 }
@@ -55,7 +57,7 @@
 
 .transcript-component .transcript .annotations .sentence {
     padding: 20px 20px 20px 64px;
-    color: $dark-grey;
+    color: $corpus-black;
     position: relative;
     background-color: transparent;
     transition: background-color .15s, color .15s;
@@ -64,83 +66,94 @@
 
 .transcript-component .transcript .annotations .sentence:not(.active):hover {
     cursor: pointer;
-    background-color: $medium-grey-5;
+    background-color: $corpus-grey;
+    color: $corpus-white;
 }
 
 .transcript-component .transcript .annotations .sentence.active {
-    background-color: $grey-blue;
-    color: $light-white;
+    background-color: $corpus-blue;
+    color: $corpus-white;
     pointer-events: none;
 }
 
+
+.transcript-component .transcript .annotations .sentence.active .translation {
+    color: $corpus-white;
+    font-weight: normal;
+}
+
 .transcript-component .transcript .annotations .sentence .words {
     font-size: 0px;
-    margin: 20px 0px;
+    margin: 10px 0px;
 }
 
 .transcript-component .transcript .annotations .sentence .words .word {
     display: inline-block;
 }
 
+.transcript-component .transcript .annotations .sentence .original {
+    font-weight: bold;
+}
+
 .transcript-component .transcript .annotations .sentence .words .word .original,
 .transcript-component .transcript .annotations .sentence .words .word .translation {
-    background-color: $medium-grey;
+    background-color: $corpus-black;
     padding: 0px 4px;
     margin-right: 2px;
-    margin-bottom: 2px;
+    margin-bottom: 1px;
     font-size: 12px;
 }
 
+.transcript-component .transcript .annotations .sentence:hover .words .word .original,
+.transcript-component .transcript .annotations .sentence:hover .words .word .translation {
+    background-color: $corpus-white;
+    color: $corpus-grey;
+}
+
 .transcript-component .transcript .annotations .sentence.active .words .word .original,
 .transcript-component .transcript .annotations .sentence.active .words .word .translation {
-    background-color: $light-white;
+    background-color: $corpus-white;
 }
 
 .transcript-component .transcript .annotations .sentence .words .word {
-    color: $light-blue;
+    color: $corpus-white;
 }
 
-.transcript-component .transcript .annotations .sentence.active .words .word .original {
-    color: $grey-blue;
+.transcript-component .transcript .annotations .sentence .words .word p {
+    line-height: 20px;
+}
+
+.transcript-component .transcript .annotations .sentence.active .words .word .original,
+.transcript-component .transcript .annotations .sentence.active .words .word .translation {
+    color: $corpus-blue;
 }
 
 .transcript-component .transcript .annotations .sentence .words .word .translation {
-    margin-bottom: 4px;
-}
-
-
-.transcript-component .transcript .annotations .sentence.active .translation {
-    color: $light-blue;
+    margin-bottom: 2px;
 }
 
 .transcript-component .transcript .annotations .sentence .fa-play {
     position: absolute;
-    border: solid 2px $medium-grey;
+    border-style: solid;
+    border-width: 2px;
+    border-color: $corpus-black;
     border-radius: 100%;
     width: 24px;
     height: 24px;
     line-height: 20px;
     left: 20px;
     cursor: pointer;
-    opacity: 0;
-    border-color: $light-blue;
-    color: $light-blue;
-    transition: opacity .15s;
+    opacity: 1;
+    color: $corpus-black;
 }
 
 .transcript-component .transcript .annotations .sentence .fa-play::before {
     margin-left: 3px;
 }
 
-.transcript-component .transcript .annotations .sentence.active .fa-play {
-    pointer-events: all;
-    border-color: $light-blue;
-    color: $light-blue;
-    opacity: 1;
-}
-
 .transcript-component .transcript .annotations .sentence:not(.active):hover .fa-play {
-    opacity: 1;
+    border-color: $corpus-white;
+    color: $corpus-white;
 }
 
 .transcript-component .transcript .annotations .sentence p {
@@ -156,10 +169,14 @@
     float: right;
     line-height: 24px;
     padding-left: 20px;
-    color: $grey-blue;
+    color: $corpus-grey;
     font-weight: bold;
 }
 
 .transcript-component .transcript .annotations .sentence.active .title {
-    color: $light-white;
+    color: $corpus-white;
+}
+
+.transcript-component .transcript .annotations .sentence:not(.active):hover .title {
+    color: $corpus-white;
 }
\ No newline at end of file
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/templates/components/toolbar-component.hbs
--- a/cms/app-client/app/templates/components/toolbar-component.hbs	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/templates/components/toolbar-component.hbs	Thu Oct 20 12:54:07 2016 +0530
@@ -4,6 +4,6 @@
 	<li {{ action 'display' 'transcript'}} class="{{if (eq player.window 'transcript') 'active'}}">Transcript</li>
 {{/if}}
 {{#if player.model.video}}
-	<li {{ action 'display' 'video'}} class="{{if player.videoscreen 'active'}}">Video</li>
+	<li {{ action 'display' 'video'}} class="video {{if player.videoscreen 'active'}}">Video</li>
 {{/if}}
 </ul>
\ No newline at end of file
diff -r eac9e4eb75c7 -r e952c8a31a2b cms/app-client/app/templates/components/transcript-component.hbs
--- a/cms/app-client/app/templates/components/transcript-component.hbs	Tue Oct 18 20:39:34 2016 +0530
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Thu Oct 20 12:54:07 2016 +0530
@@ -1,7 +1,7 @@
 <h2>
-    {{player.transcript.title.original}}
+    <span class="original">{{player.transcript.title.original}}</span>
 {{#if player.transcript.title.translation}}
-    <span>{{player.transcript.title.translation}}</span>
+    <span class="translation">{{player.transcript.title.translation}}</span>
 {{/if}}
 </h2>