Skip to content

B
Backend Server
Commit 028eaf66 authored by SpinShare's avatar SpinShare
Browse files
Options

removed old songdetail, added actions

parent 3fc0136c
Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 317 deletions
public/assets/css/songdetail.less
View file @ 028eaf66
......@@ -3,7 +3,7 @@
grid-template-columns: 500px 1fr;
grid-gap: 25px;
padding: 50px;
& .song-detail {
& .song-meta {
display: grid;
......
public/assets/css/songdetail_old.css deleted 100644 → 0
View file @ 3fc0136c
.section-song-detail .song-detail-background {
background-size: cover;
background-position: center;
}
.section-song-detail .song-detail-background .song-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #212629);
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 25px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-cover {
width: 200px;
height: 200px;
position: relative;
align-self: center;
background: #eee;
border-radius: 6px;
background-size: cover;
background-position: center;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-title {
font-weight: bold;
font-size: 48px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-subtitle {
font-size: 20px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-artist {
margin-top: 5px;
font-size: 18px;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-charter {
margin-top: 10px;
font-size: 14px;
opacity: 0.6;
word-break: break-all;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags {
margin-top: 10px;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #222;
background: #fff;
padding: 5px 20px;
border-radius: 50px;
margin-right: 10px;
margin-top: 5px;
word-break: break-all;
text-decoration: none;
transition: 0.2s ease-in-out opacity;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-tags .tag:hover {
opacity: 0.6;
cursor: pointer;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties {
margin-top: 15px;
height: 20px;
display: flex;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img {
height: 20px;
margin-right: 10px;
opacity: 0.3;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-difficulties img.active {
opacity: 1;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader {
margin-top: 15px;
display: flex;
}
.section-song-detail .song-detail-background .song-detail-dim .song-detail .song-meta-data .song-uploader .user-item {
width: auto;
color: #fff;
text-decoration: none;
padding-right: 15px;
}
.section-song-detail .song-detail-actions,
.section-song-detail .song-detail-actions-owner,
.section-song-detail .song-detail-actions-moderator {
padding: 50px;
padding-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
}
.section-song-detail .song-detail-actions.song-detail-actions-owner,
.section-song-detail .song-detail-actions-owner.song-detail-actions-owner,
.section-song-detail .song-detail-actions-moderator.song-detail-actions-owner {
grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
}
.section-song-detail .song-detail-actions.song-detail-actions-moderator,
.section-song-detail .song-detail-actions-owner.song-detail-actions-moderator,
.section-song-detail .song-detail-actions-moderator.song-detail-actions-moderator {
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
}
.section-song-detail .song-detail-actions .button,
.section-song-detail .song-detail-actions-owner .button,
.section-song-detail .song-detail-actions-moderator .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
}
.section-song-detail .song-detail-actions .button.button-primary,
.section-song-detail .song-detail-actions-owner .button.button-primary,
.section-song-detail .song-detail-actions-moderator .button.button-primary {
background: #fff;
color: #222;
}
.section-song-detail .song-detail-actions .button.button-primary:hover,
.section-song-detail .song-detail-actions-owner .button.button-primary:hover,
.section-song-detail .song-detail-actions-moderator .button.button-primary:hover {
background: #fff;
color: #222;
}
.section-song-detail .song-detail-actions .button.button-icon,
.section-song-detail .song-detail-actions-owner .button.button-icon,
.section-song-detail .song-detail-actions-moderator .button.button-icon {
padding: 11px 0px;
}
.section-song-detail .song-detail-actions .button.button-icon i,
.section-song-detail .song-detail-actions-owner .button.button-icon i,
.section-song-detail .song-detail-actions-moderator .button.button-icon i {
font-size: 20px;
}
.section-song-detail .song-detail-actions .button:hover,
.section-song-detail .song-detail-actions-owner .button:hover,
.section-song-detail .song-detail-actions-moderator .button:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
.section-song-detail .song-detail-actions .button:active,
.section-song-detail .song-detail-actions-owner .button:active,
.section-song-detail .song-detail-actions-moderator .button:active {
transform: translateY(-2px);
}
public/assets/css/songdetail_old.less deleted 100644 → 0
View file @ 3fc0136c
.section-song-detail {
& .song-detail-background {
background-size: cover;
background-position: center;
& .song-detail-dim {
backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(0,0,0,0.4), #212629);
& .song-detail {
padding: 50px;
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 25px;
& .song-cover {
width: 200px;
height: 200px;
position: relative;
align-self: center;
background: #eee;
border-radius: 6px;
background-size: cover;
background-position: center;
}
& .song-meta-data {
& .song-title {
font-weight: bold;
font-size: 48px;
word-break: break-all;
}
& .song-subtitle {
font-size: 20px;
word-break: break-all;
}
& .song-artist {
margin-top: 5px;
font-size: 18px;
word-break: break-all;
}
& .song-charter {
margin-top: 10px;
font-size: 14px;
opacity: 0.6;
word-break: break-all;
}
& .song-tags {
margin-top: 10px;
& .tag {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #222;
background: #fff;
padding: 5px 20px;
border-radius: 50px;
margin-right: 10px;
margin-top: 5px;
word-break: break-all;
text-decoration: none;
transition: 0.2s ease-in-out opacity;
&:hover {
opacity: 0.6;
cursor: pointer;
}
}
}
& .song-difficulties {
margin-top: 15px;
height: 20px;
display: flex;
& img {
height: 20px;
margin-right: 10px;
opacity: 0.3;
&.active {
opacity: 1;
}
}
}
& .song-uploader {
margin-top: 15px;
display: flex;
& .user-item {
width: auto;
color: #fff;
text-decoration: none;
padding-right: 15px;
}
}
}
}
}
}
& .song-detail-actions, & .song-detail-actions-owner, & .song-detail-actions-moderator {
padding: 50px;
padding-top: 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 25px;
&.song-detail-actions-owner {
grid-template-columns: 1fr 1fr 1fr 1fr 60px 60px;
}
&.song-detail-actions-moderator {
grid-template-columns: 1fr 1fr 1fr 1fr 60px;
}
& .button {
padding: 15px 0px;
font-size: 16px;
transition: 0.2s ease-in-out background, 0.2s ease-in-out color, 0.1s ease-in-out transform;
&.button-primary {
background: #fff;
color: #222;
&:hover {
background: #fff;
color: #222;
}
}
&.button-icon {
padding: 11px 0px;
& i {
font-size: 20px;
}
}
&:hover {
background: rgba(255,255,255,0.2);
color: #fff;
opacity: 0.6;
transform: translateY(-4px);
}
&:active {
transform: translateY(-2px);
}
}
}
}
\ No newline at end of file
templates/song/detail.html.twig
View file @ 028eaf66
......@@ -44,6 +44,24 @@
<i class="mdi mdi-flag-outline"></i>
</div>
</a>
{% if uploader.id == app.user.id %}
<a href="{{ path('song.update', {songId: song.id}) }}" class="action">
<div class="icon">
<i class="mdi mdi-pencil"></i>
</div>
</a>
<a href="{{ path('song.delete', {songId: song.id}) }}" class="action">
<div class="icon">
<i class="mdi mdi-delete"></i>
</div>
</a>
{% elseif is_granted('ROLE_MODERATOR') %}
<a href="{{ path('moderation.song.remove', {songId: song.id}) }}" onclick="return confirm('Are you sure? This action cannot be undone!')" class="action">
<div class="icon">
<i class="mdi mdi-delete"></i>
</div>
</a>
{% endif %}
</div>
<div class="song-statistics">
<div class="stat">
......@@ -329,21 +347,4 @@
currentPreviewAudio.volume = playerVolume.value / 100;
}
</script>
{% endblock %}
{% block content2 %}
{% if is_granted("ROLE_USER") %}
<div class="{{ (uploader.id == app.user.id ) ? "song-detail-actions-owner" : is_granted('ROLE_MODERATOR') ? "song-detail-actions-moderator" : "song-detail-actions" }}">
<a href="{{ path('song.download', {songId: song.id}) }}" class="button button-primary">Download</a>
<button class="button-preview button">PLAY PREVIEW</button>
<a href="spinshare-song://{{ song.id }}" class="button">Open in Client</a>
<a href="{{ path('report.song', {songId: song.id}) }}" class="button">Report</a>
{% if uploader.id == app.user.id %}
<a href="{{ path('song.update', {songId: song.id}) }}" class="button button-icon"><i class="mdi mdi-pencil"></i></a>
<a href="{{ path('song.delete', {songId: song.id}) }}" class="button button-icon"><i class="mdi mdi-delete"></i></a>
{% elseif is_granted('ROLE_MODERATOR') %}
<a href="{{ path('moderation.song.remove', {songId: song.id}) }}" onclick="return confirm('Are you sure? This action cannot be undone!')" class="button button-icon"><i class="mdi mdi-delete"></i></a>
{% endif %}
</div>
{% endif %}
{% endblock %}
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment