--- a/cms/app-client/app/styles/components/playlist-component.scss Fri Oct 14 18:50:43 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss Fri Oct 14 19:49:28 2016 +0200
@@ -47,9 +47,14 @@
float: right;
text-align: right;
font-size: 0px;
+ margin-left: 20px;
}
-.playlist-component ul li .tools button,
+.playlist-component ul li .tools > * {
+ clear: both;
+}
+
+.playlist-component ul li .tools .notice,
.playlist-component ul li .tools .fa {
border: 1px solid $dark-grey;
cursor: pointer;
@@ -57,56 +62,53 @@
pointer-events: all;
}
-.playlist-component ul li.playing .tools button,
+.playlist-component ul li.playing .tools .notice,
.playlist-component ul li.playing .tools .fa {
border-color: $medium-blue;
}
-.playlist-component ul li.notice .tools button,
+.playlist-component ul li.notice .tools .notice,
.playlist-component ul li.notice .tools .fa {
border-color: $dark-grey;
}
-.playlist-component ul li .tools button.active,
-.playlist-component ul li .tools button:hover,
+.playlist-component ul li .tools .notice.active,
+.playlist-component ul li .tools .notice:hover,
.playlist-component ul li .tools .fa:hover {
background-color: $dark-grey;
color: $light-white;
}
-.playlist-component ul li.playing .tools button.active,
-.playlist-component ul li.playing .tools button:hover,
+.playlist-component ul li.playing .tools .notice.active,
+.playlist-component ul li.playing .tools .notice:hover,
.playlist-component ul li.playing .tools .fa:hover {
background-color: $medium-blue;
color: $light-blue;
}
-.playlist-component ul li.playing .tools button:hover,
+.playlist-component ul li.playing .tools .notice:hover,
.playlist-component ul li.playing .tools .fa:hover {
color: $light-blue;
}
+.playlist-component ul li:not(.playing) .notice,
+.playlist-component ul li:not(.playing) .fa-share-alt,
.playlist-component ul li:not(.playing) .fa-text-height {
pointer-events: none;
cursor: default;
opacity: 0.5;
}
-.playlist-component ul li .meta {
- padding-right: 78px;
-}
-
.playlist-component ul li .meta p {
margin: 0;
}
-.playlist-component ul li .tools button {
+.playlist-component ul li .tools .notice {
font-size: 12px;
background-color: transparent;
line-height: 20px;
padding: 0 10px;
margin-top: 10px;
- display: block;
width: 68px;
}
@@ -120,7 +122,8 @@
display: inline-block;
}
-.playlist-component ul li .tools .fa-play {
+.playlist-component ul li .tools .fa-play,
+.playlist-component ul li .tools .fa-pause {
float: right;
}
--- a/cms/app-client/app/templates/application.hbs Fri Oct 14 18:50:43 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs Fri Oct 14 19:49:28 2016 +0200
@@ -2,12 +2,6 @@
<div class="corpus-window">
- {{#if notice}}
- <div class="corpus-app-modal">
- {{ notice-component class="overlay" model=noticeModel }}
- </div>
- {{/if}}
-
<div class="corpus-app-container{{if player.window ' window'}}">
{{#if player.window}}
{{#if (eq player.window 'notice')}}
--- a/cms/app-client/app/templates/components/playlist-component.hbs Fri Oct 14 18:50:43 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs Fri Oct 14 19:49:28 2016 +0200
@@ -3,15 +3,22 @@
{{#each documents as |document| }}
<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">
+ <div>
{{#if document.transcript_url}}
<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>
+ <i title="Pause" class="fa fa-pause" {{ action 'pause' }}>Pause</i>
{{else}}
- <i class="fa fa-play" {{ action 'play' document.id }}>Play</i>
+ <i title="Play" class="fa fa-play" {{ action 'play' document.id }}>Play</i>
{{/if}}
- <button{{action 'displayNotice' document.id bubbles=false}} class="{{if (ifOr (ifAnd (eq player.window 'notice') (eq player.item document.id)) (eq document.id notice)) 'active'}}">Notice</button>
+ </div>
+ <div>
+ <button title="Notice" {{action 'displayNotice' document.id bubbles=false}} class="notice{{if (ifOr (ifAnd (eq player.window 'notice') (eq player.item document.id)) (eq document.id notice)) ' active'}}">
+ Notice
+ </button>
+ <i title="Share notice" class="fa fa-share-alt">Share notice</i>
+ </div>
</div>
<div class="meta">
<p class="head">