Change bars to text icon for transcript
authorChloe Laisne <chloe.laisne@gmail.com>
Fri, 14 Oct 2016 18:50:43 +0200
changeset 332 7f5fd48fa6c2
parent 331 9836845ed1e8
child 333 400719e1e9a8
Change bars to text icon for transcript
cms/app-client/app/styles/components/player-component.scss
cms/app-client/app/styles/components/playlist-component.scss
cms/app-client/app/templates/components/player-component.hbs
cms/app-client/app/templates/components/playlist-component.hbs
--- a/cms/app-client/app/styles/components/player-component.scss	Tue Oct 04 23:04:06 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Fri Oct 14 18:50:43 2016 +0200
@@ -203,15 +203,18 @@
     margin: 0 auto;
 }
 
-.player-component #audio .controls.extra i.fa-bars {
+.player-component #audio .controls.extra i.fa-text-height {
     position: relative;
+    overflow: hidden;
+    display: inline-block;
+    width: 16px;
 }
 
-.player-component #audio .controls.extra i.fa-bars::before {
+.player-component #audio .controls.extra i.fa-text-height::before {
     font-size: 21px;
 }
 
-.player-component #audio .controls.extra i.fa-bars.active::before {
+.player-component #audio .controls.extra i.fa-text-height.active::before {
     color: $blue;
 }
 
--- a/cms/app-client/app/styles/components/playlist-component.scss	Tue Oct 04 23:04:06 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Fri Oct 14 18:50:43 2016 +0200
@@ -86,7 +86,7 @@
     color: $light-blue;
 }
 
-.playlist-component ul li:not(.playing) .fa-bars {
+.playlist-component ul li:not(.playing) .fa-text-height {
     pointer-events: none;
     cursor: default;
     opacity: 0.5;
@@ -120,6 +120,10 @@
     display: inline-block;
 }
 
+.playlist-component ul li .tools .fa-play {
+    float: right;
+}
+
 .playlist-component ul li .tools .fa-play::before {
     margin-left: 3px;
 }
@@ -145,12 +149,15 @@
     float: right;
 }
 
-.playlist-component ul li .title .fa-bars {
-    margin-right: 10px;
+.playlist-component ul li .fa-text-height {
+    
 }
 
-.playlist-component ul li .title .fa-bars::before {
-    font-size: 14px;
+.playlist-component ul li .fa-text-height::before {
+    font-size: 13px;
+    display: inline-block;
+    overflow: hidden;
+    width: 10px;
 }
 
 .playlist-component ul li .language a {
--- a/cms/app-client/app/templates/components/player-component.hbs	Tue Oct 04 23:04:06 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Fri Oct 14 18:50:43 2016 +0200
@@ -22,7 +22,7 @@
 		{{/if}}
 	{{/if}}
 	{{#if player.transcript}}
-		<i title="Transcript" class="fa fa-bars{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
+		<i title="Transcript" class="fa fa-text-height{{if (eq player.window 'transcript') ' active'}}" {{action 'display' 'transcript'}}>Transcript</i>
 	{{/if}}
 	</div>
 	<div class="meta">
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Tue Oct 04 23:04:06 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Fri Oct 14 18:50:43 2016 +0200
@@ -4,7 +4,7 @@
     <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}{{if (eq document.id notice) 'notice'}}" {{action 'select' document.id}}>
         <div class="tools">
             {{#if document.transcript_url}}
-                <i title="Transcript" class="fa fa-bars{{if (ifOr (eq player.window 'transcript') (eq player.item document.id)) ' active'}}"{{action 'displayTranscript'}}>Transcript</i>
+                <i title="Transcript" class="fa fa-text-height{{if (ifOr (eq player.window 'transcript') (eq player.item document.id)) ' active'}}"{{action 'displayTranscript'}}>Transcript</i>
             {{/if}}
             {{#if (ifAnd (eq player.playing true) (eq player.item document.id))}}
                 <i class="fa fa-pause" {{ action 'pause' }}>Pause</i>