mirror of
https://github.com/fergalmoran/dss.git
synced 2025-12-26 11:37:33 +00:00
Nicer share icons
This commit is contained in:
Fergal Moran
@@ -777,4 +777,7 @@ img.mix-listing-image {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
}
|
||||||
|
.share-button{
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-2 mix-profile-container">
|
<div class="col-md-2 mix-profile-container">
|
||||||
<div class="mix-image-container">
|
<div class="mix-image-container">
|
||||||
<img alt="mix-logo" class="mix-image-image img-rounded img-polaroid" src="<%= mix_image %>"/>
|
<img alt="mix-logo" class="mix-image-image img-rounded img-polaroid" src="<%= mix_image %>"/>
|
||||||
</div>
|
</div>
|
||||||
<span class="msg-body">
|
<span class="msg-body">
|
||||||
<span class="mix-title">
|
<span class="mix-title">
|
||||||
<a href="/<%= user_profile_url %>" id="<%= id %>">
|
<a href="/<%= user_profile_url %>" id="<%= id %>">
|
||||||
@@ -14,163 +14,156 @@
|
|||||||
<span><%= humanise(upload_date) %></span>
|
<span><%= humanise(upload_date) %></span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
<div class="col-md-10 mix-container" id="mix-container-<%= id %>">
|
|
||||||
<div class="row orange">
|
|
||||||
<div class="pull-left title-bar-item">
|
|
||||||
<a class="mix-link"
|
|
||||||
id="mix-link-<%= id %>"
|
|
||||||
href="<%= item_url %>"
|
|
||||||
title="<%= title %>"><%= title %>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pull-right title-bar-item">
|
<div class="col-md-10 mix-container" id="mix-container-<%= id %>">
|
||||||
<div id="genre-list" class="pull-right">
|
<div class="row orange">
|
||||||
<% _.each(genres, function(i) { %>
|
<div class="pull-left title-bar-item">
|
||||||
<a href="/mixes/genre/<%= i.slug %>" class="label label-info arrowed-right arrowed-in"><%=
|
<a class="mix-link"
|
||||||
i.description %></a>
|
id="mix-link-<%= id %>"
|
||||||
<% }); %>
|
href="<%= item_url %>"
|
||||||
</div>
|
title="<%= title %>"><%= title %>
|
||||||
</div>
|
</a>
|
||||||
</div>
|
|
||||||
<div class="row dss-player-wrapper">
|
|
||||||
<!-- TODO: refactor the player into a template -->
|
|
||||||
<div class="pnp-instance">
|
|
||||||
<div class="pnp-wrapper">
|
|
||||||
<img class="pnp-waveform img-responsive" alt="mix waveform"
|
|
||||||
src="<%= waveform_url %>">
|
|
||||||
|
|
||||||
<div class="pnp-time-display-label pnp-time-display-label-elapsed"></div>
|
|
||||||
<div class="pnp-time-display-label pnp-time-display-label-duration"><%= secondsToHms(duration) %>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="pnp-download-overlay"></div>
|
<div class="pull-right title-bar-item">
|
||||||
<div class="pnp-played-overlay"></div>
|
<div id="genre-list" class="pull-right">
|
||||||
<div class="pnp-seekhead"></div>
|
<% _.each(genres, function(i) { %>
|
||||||
</div>
|
<a href="/mixes/genre/<%= i.slug %>" class="label label-info arrowed-right arrowed-in"><%=
|
||||||
</div>
|
i.description %></a>
|
||||||
</div>
|
<% }); %>
|
||||||
<div class="row">
|
|
||||||
<div class="player-footer">
|
|
||||||
<div class="play-button footer-button">
|
|
||||||
<a id="play-button-<%= id %>" class="mix-state-toggle play blue" data-bypass="true" style="">
|
|
||||||
<i id="play-state-fa fa-<%= id %>" class="ace-icon fa fa-play bigger-180"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="footer-button">
|
|
||||||
<div class="btn-group">
|
|
||||||
<button class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown">
|
|
||||||
<i class="ace-icon fa fa-share"></i>Share
|
|
||||||
<span class="ace-icon fa fa-caret-down fa fa-on-right"></span>
|
|
||||||
</button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li>
|
|
||||||
<a data-mode="facebook"
|
|
||||||
class="share-button share-button-facebook">
|
|
||||||
Facebook
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a data-mode="twitter"
|
|
||||||
class="share-button share-button-twitter">
|
|
||||||
Twitter
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a data-mode="embed"
|
|
||||||
class="share-button share-button-embed">
|
|
||||||
Embed
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<% if (utils.isAuth()) { %>
|
|
||||||
<div class="footer-button">
|
|
||||||
<button class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"
|
|
||||||
id="playlist-dropdown">
|
|
||||||
<i id="notification-icon" class="fa fa-list-ul"></i>
|
|
||||||
Playlist
|
|
||||||
<span class="ace-icon fa fa-caret-down fa fa-on-right"></span>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-navbar dropdown-menu dropdown-caret playlist-add-dropdown" style="margin-top: 8px">
|
|
||||||
<div id="playlist-layout">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="like-button footer-button">
|
<div class="row dss-player-wrapper">
|
||||||
<a class="btn <% if (liked) { %>btn-pink<% } else { %>btn-light<% } %> btn-xs"
|
<!-- TODO: refactor the player into a template -->
|
||||||
id="like-<%= id %>"
|
<div class="pnp-instance">
|
||||||
data-id="<%= id %>">
|
<div class="pnp-wrapper">
|
||||||
<i class="ace-icon fa fa-heart"></i> Like<% if (liked) { %>d<% } %>
|
<img class="pnp-waveform img-responsive" alt="mix waveform"
|
||||||
</a>
|
src="<%= waveform_url %>">
|
||||||
|
|
||||||
|
<div class="pnp-time-display-label pnp-time-display-label-elapsed"></div>
|
||||||
|
<div class="pnp-time-display-label pnp-time-display-label-duration"><%= secondsToHms(duration) %>
|
||||||
|
</div>
|
||||||
|
<div class="pnp-download-overlay"></div>
|
||||||
|
<div class="pnp-played-overlay"></div>
|
||||||
|
<div class="pnp-seekhead"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="favourite-button footer-button">
|
<div class="row">
|
||||||
<a class="btn <% if (favourited) { %>btn-pink<% } else { %>btn-light<% } %> btn-xs"
|
<div class="player-footer">
|
||||||
id="favourite-<%= id %>"
|
<div class="play-button footer-button">
|
||||||
data-id="<%= id %>"><i class="ace-icon fa fa-star-empty"></i> Favourite
|
<a id="play-button-<%= id %>" class="mix-state-toggle play blue" data-bypass="true" style="">
|
||||||
<% if (favourited) { %>
|
<i id="play-state-fa fa-<%= id %>" class="ace-icon fa fa-play bigger-180"></i>
|
||||||
d
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-button">
|
||||||
|
<div class="btn-group">
|
||||||
|
<a data-mode="facebook"
|
||||||
|
class="share-button share-button-facebook">
|
||||||
|
<i class="ace-icon fa fa-facebook-square text-primary bigger-190"></i>
|
||||||
|
</a>
|
||||||
|
<a data-mode="twitter"
|
||||||
|
class="share-button share-button-twitter">
|
||||||
|
<i class="ace-icon fa fa-twitter-square light-blue bigger-190"></i>
|
||||||
|
</a>
|
||||||
|
<a data-mode="embed"
|
||||||
|
class="share-button share-button-embed">
|
||||||
|
<i class="ace-icon fa fa-sign-in light-orange bigger-190"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<% if (utils.isAuth()) { %>
|
||||||
|
<div class="footer-button">
|
||||||
|
<button class="btn btn-info btn-xs dropdown-toggle" data-toggle="dropdown"
|
||||||
|
id="playlist-dropdown">
|
||||||
|
<i id="notification-icon" class="fa fa-list-ul"></i>
|
||||||
|
Playlist
|
||||||
|
<span class="ace-icon fa fa-caret-down fa fa-on-right"></span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-navbar dropdown-menu dropdown-caret playlist-add-dropdown"
|
||||||
|
style="margin-top: 8px">
|
||||||
|
<div id="playlist-layout">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="like-button footer-button">
|
||||||
|
<a class="btn <% if (liked) { %>btn-pink<% } else { %>btn-light<% } %> btn-xs"
|
||||||
|
id="like-<%= id %>"
|
||||||
|
data-id="<%= id %>">
|
||||||
|
<i class="ace-icon fa fa-heart"></i> Like
|
||||||
|
<% if (liked) { %>
|
||||||
|
d
|
||||||
|
<% } %>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="favourite-button footer-button">
|
||||||
|
<a class="btn <% if (favourited) { %>btn-pink<% } else { %>btn-light<% } %> btn-xs"
|
||||||
|
id="favourite-<%= id %>"
|
||||||
|
data-id="<%= id %>"><i class="ace-icon fa fa-star-empty"></i> Favourite
|
||||||
|
<% if (favourited) { %>
|
||||||
|
d
|
||||||
|
<% } %>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
</a>
|
<div class="footer-button">
|
||||||
</div>
|
<ul class="list-nostyle list-horiz">
|
||||||
<% } %>
|
<li title="<%= play_count %> Plays" class="stats-item bordered-right">
|
||||||
<div class="footer-button">
|
|
||||||
<ul class="list-nostyle list-horiz">
|
|
||||||
<li title="<%= play_count %> Plays" class="stats-item bordered-right">
|
|
||||||
<span class="ace-icon fa fa-play-circle tooltip-success" data-rel="tooltip"
|
<span class="ace-icon fa fa-play-circle tooltip-success" data-rel="tooltip"
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
title="" data-original-title="<%= play_count %> Plays">
|
title="" data-original-title="<%= play_count %> Plays">
|
||||||
<%= play_count %>
|
<%= play_count %>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li title="<%= download_count %> Downloads" class="stats-item bordered-right">
|
<li title="<%= download_count %> Downloads" class="stats-item bordered-right">
|
||||||
<span class="ace-icon fa fa-download tooltip-success" data-rel="tooltip"
|
<span class="ace-icon fa fa-download tooltip-success" data-rel="tooltip"
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
title="" data-original-title="<%= download_count %> Downloads">
|
title="" data-original-title="<%= download_count %> Downloads">
|
||||||
<%= download_count %>
|
<%= download_count %>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li title="<%= comment_count %> Comments" class="stats-item bordered-right">
|
<li title="<%= comment_count %> Comments" class="stats-item bordered-right">
|
||||||
<span class="ace-icon fa fa-comment tooltip-success" data-rel="tooltip"
|
<span class="ace-icon fa fa-comment tooltip-success" data-rel="tooltip"
|
||||||
data-placement="right"
|
data-placement="right"
|
||||||
title="" data-original-title="<%= comment_count %> Comments">
|
title="" data-original-title="<%= comment_count %> Comments">
|
||||||
<%= comment_count %>
|
<%= comment_count %>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<li title="<%= like_count %> Likes" class="stats-item bordered-right">
|
<li title="<%= like_count %> Likes" class="stats-item bordered-right">
|
||||||
<span class="ace-icon fa fa-heart tooltip-success" data-rel="tooltip" data-placement="right"
|
<span class="ace-icon fa fa-heart tooltip-success" data-rel="tooltip" data-placement="right"
|
||||||
title=""
|
title=""
|
||||||
data-original-title="<%= like_count %> Likes">
|
data-original-title="<%= like_count %> Likes">
|
||||||
<%= like_count %>
|
<%= like_count %>
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
|
<% if(can_edit) { %>
|
||||||
|
<div class="edit-button footer-button-right">
|
||||||
|
<a href="/mix/edit/<%= slug %>" class="btn btn-xs"
|
||||||
|
data-id="<%= id %>"><i class="ace-icon fa fa-edit"></i>Edit</a>
|
||||||
|
</div>
|
||||||
|
<div class="delete-button footer-button-right">
|
||||||
|
<a data-bypass="true" class="btn btn-xs btn-danger"
|
||||||
|
data-id="<%= id %>"><i class="ace-icon fa fa-trash"></i>Delete</a>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<% if (download_allowed) { %>
|
||||||
|
<% if (utils.isAuth()) { %>
|
||||||
|
<div class="download-button footer-button-right">
|
||||||
|
<a class="btn btn-xs btn-success" data-id="<%= id %>">
|
||||||
|
<i class="ace-icon fa fa-download"></i> Download</a>
|
||||||
|
</div>
|
||||||
|
<% }else { %>
|
||||||
|
<div class="login-download-button footer-button-right">
|
||||||
|
<a class="btn btn-xs btn-warning" data-id="<%= id %>">
|
||||||
|
<i class="ace-icon fa fa-download"></i> Login to download</a>
|
||||||
|
</div>
|
||||||
|
<% } %>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% if(can_edit) { %>
|
|
||||||
<div class="edit-button footer-button-right">
|
|
||||||
<a href="/mix/edit/<%= slug %>" class="btn btn-xs"
|
|
||||||
data-id="<%= id %>"><i class="ace-icon fa fa-edit"></i>Edit</a>
|
|
||||||
</div>
|
|
||||||
<div class="delete-button footer-button-right">
|
|
||||||
<a data-bypass="true" class="btn btn-xs btn-danger"
|
|
||||||
data-id="<%= id %>"><i class="ace-icon fa fa-trash"></i>Delete</a>
|
|
||||||
</div>
|
|
||||||
<% } %>
|
|
||||||
<% if (download_allowed) { %>
|
|
||||||
<% if (utils.isAuth()) { %>
|
|
||||||
<div class="download-button footer-button-right">
|
|
||||||
<a class="btn btn-xs btn-success" data-id="<%= id %>">
|
|
||||||
<i class="ace-icon fa fa-download"></i> Download</a>
|
|
||||||
</div>
|
|
||||||
<% }else { %>
|
|
||||||
<div class="login-download-button footer-button-right">
|
|
||||||
<a class="btn btn-xs btn-warning" data-id="<%= id %>">
|
|
||||||
<i class="ace-icon fa fa-download"></i> Login to download</a>
|
|
||||||
</div>
|
|
||||||
<% } %>
|
|
||||||
<% } %>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr/>
|
<hr/>
|
||||||
Reference in New Issue
Block a user