Skip to content

D
Desktop Client
Commit 4c95c393 authored by Andreas Heimann's avatar Andreas Heimann
Browse files
Options

added difficulty and verified

parent 79e0693d
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 9 deletions
src/app.htm
View file @ 4c95c393
......@@ -280,6 +280,13 @@
<div class="song-charter"></div>
<div class="song-tags">
</div>
<div class="song-difficulties">
<img src="assets/img/difficultyEasy.svg" class="difficulty-easy" alt="Easy Difficulty" />
<img src="assets/img/difficultyNormal.svg" class="difficulty-normal" alt="Normal Difficulty" />
<img src="assets/img/difficultyHard.svg" class="difficulty-hard" alt="Hard Difficulty" />
<img src="assets/img/difficultyExtreme.svg" class="difficulty-extreme" alt="Extreme Difficulty" />
<img src="assets/img/difficultyXD.svg" class="difficulty-xd" alt="XD Difficulty" />
</div>
<div class="song-uploader">
</div>
</div>
......@@ -300,6 +307,9 @@
<div class="user-avatar"></div>
<div class="user-meta-data">
<div class="user-name"></div>
<div class="user-badge">
<i class="mdi mdi-check-decagram"></i>
</div>
</div>
</div>
</div>
......
src/assets/css/main.css
View file @ 4c95c393
......@@ -203,6 +203,19 @@ button:focus,
overflow: hidden;
white-space: nowrap;
}
.song-row .song-list .song-item .song-metadata .song-difficulties {
margin-top: 10px;
height: 20px;
display: flex;
}
.song-row .song-list .song-item .song-metadata .song-difficulties img {
height: 18px;
margin-right: 10px;
opacity: 0.3;
}
.song-row .song-list .song-item .song-metadata .song-difficulties img.active {
opacity: 1;
}
.song-row .song-list .song-item:not(.song-item-loading):not(.song-item-local):hover {
transform: scale(1.1);
cursor: pointer;
......@@ -281,13 +294,18 @@ button:focus,
border-radius: 32px;
}
.user-item .user-metadata {
align-self: center;
display: flex;
align-items: center;
}
.user-item .user-metadata .user-name {
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
.user-item .user-metadata .user-badge {
font-size: 18px;
margin-left: 10px;
}
.user-item:hover {
transform: scale(1.1);
cursor: pointer;
......
src/assets/css/main.less
View file @ 4c95c393
......@@ -216,6 +216,21 @@ button, .button {
overflow: hidden;
white-space: nowrap;
}
& .song-difficulties {
margin-top: 10px;
height: 20px;
display: flex;
& img {
height: 18px;
margin-right: 10px;
opacity: 0.3;
&.active {
opacity: 1;
}
}
}
}
&:not(.song-item-loading):not(.song-item-local):hover {
......@@ -313,13 +328,18 @@ button, .button {
}
& .user-metadata {
align-self: center;
display: flex;
align-items: center;
& .user-name {
font-weight: bold;
overflow: hidden;
white-space: nowrap;
}
& .user-badge {
font-size: 18px;
margin-left: 10px;
}
}
&:hover {
......
src/assets/css/songdetail.css
View file @ 4c95c393
......@@ -60,6 +60,19 @@
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;
......
src/assets/css/songdetail.less
View file @ 4c95c393
......@@ -65,6 +65,22 @@
}
}
& .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;
......
src/assets/css/userdetail.css
View file @ 4c95c393
......@@ -21,10 +21,25 @@
background-size: cover;
background-position: center;
}
.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data {
display: flex;
height: 48px;
align-items: center;
}
.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data .user-name {
font-weight: bold;
font-size: 48px;
}
.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data .user-badge {
display: none;
align-items: center;
justify-content: center;
font-size: 32px;
margin-left: 20px;
}
.section-user-detail .user-detail-background .user-detail-dim .user-detail .user-meta-data .user-badge.active {
display: flex;
}
.section-user-detail .user-detail-background .user-detail-dim .user-detail.active {
display: grid;
}
......
src/assets/css/userdetail.less
View file @ 4c95c393
......@@ -23,10 +23,25 @@
background-position: center;
}
& .user-meta-data {
display: flex;
height: 48px;
align-items: center;
& .user-name {
font-weight: bold;
font-size: 48px;
}
& .user-badge {
display: none;
align-items: center;
justify-content: center;
font-size: 32px;
margin-left: 20px;
&.active {
display: flex;
}
}
}
&.active {
......
src/assets/img/difficultyEasy.svg 0 → 100644
View file @ 4c95c393
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M122.89,100l-48.5-84c-4.62-8-16.17-8-20.78,0l-48.5,84c-4.62,8,1.15,18,10.39,18h96.99
C121.74,118,127.51,108,122.89,100z M77.62,59.2H58.48v9.96H75.7v7.68H58.48v9.96h19.14v7.68H50.38V51.52h27.24V59.2z"/>
</g>
</svg>
src/assets/img/difficultyExtreme.svg 0 → 100644
View file @ 4c95c393
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M120.95,43.09L71.05,6.84c-4.21-3.06-9.9-3.06-14.11,0L7.05,43.09c-4.21,3.06-5.97,8.47-4.36,13.42
l19.06,58.65c1.61,4.94,6.21,8.29,11.41,8.29h61.67c5.2,0,9.81-3.35,11.41-8.29l19.06-58.65
C126.91,51.56,125.15,46.15,120.95,43.09z M56.9,56.51H37.76v9.96h17.22v7.68H37.76v9.96H56.9v7.68H29.66V48.83H56.9V56.51z
M90.26,91.79L80.9,76.31h-0.48l-9.36,15.48H60.98l14.1-22.44L62.06,48.83h10.02l8.34,14.04h0.48l8.34-14.04h10.02L86.24,69.35
l14.1,22.44H90.26z"/>
</g>
</svg>
src/assets/img/difficultyHard.svg 0 → 100644
View file @ 4c95c393
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M120.95,43.09L71.05,6.84c-4.21-3.06-9.9-3.06-14.11,0L7.05,43.09c-4.21,3.06-5.97,8.47-4.36,13.42
l19.06,58.65c1.61,4.94,6.21,8.29,11.41,8.29h61.67c5.2,0,9.81-3.35,11.41-8.29l19.06-58.65
C126.91,51.56,125.15,46.15,120.95,43.09z M81.13,92.48h-8.1V74.36H54.97v18.12h-8.1V49.52h8.1v17.16h18.06V49.52h8.1V92.48z"/>
</g>
</svg>
src/assets/img/difficultyNormal.svg 0 → 100644
View file @ 4c95c393
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M119.51,55.51L72.49,8.49C67.8,3.8,60.2,3.8,55.51,8.49L8.49,55.51C3.8,60.2,3.8,67.8,8.49,72.49l47.03,47.03
c4.69,4.69,12.28,4.69,16.97,0l47.03-47.03C124.2,67.8,124.2,60.2,119.51,55.51z M81.37,85.48h-8.52L54.61,55.06h-0.48l0.48,8.28
v22.14h-7.98V42.52h9.42l17.28,28.8h0.48l-0.48-8.28V42.52h8.04V85.48z"/>
</g>
</svg>
src/assets/img/difficultyXD.svg 0 → 100644
View file @ 4c95c393
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<g>
<path class="st0" d="M113.43,28.35L70,3.27c-3.71-2.14-8.29-2.14-12,0L14.57,28.35c-3.71,2.14-6,6.11-6,10.39v50.14
c0,4.29,2.29,8.25,6,10.39L58,124.35c3.71,2.14,8.29,2.14,12,0l43.43-25.07c3.71-2.14,6-6.11,6-10.39V38.74
C119.43,34.45,117.14,30.49,113.43,28.35z M52.66,85.29L43.3,69.81h-0.48l-9.36,15.48H23.38l14.1-22.44L24.46,42.33h10.02
l8.34,14.04h0.48l8.34-14.04h10.02L48.64,62.85l14.1,22.44H52.66z M103.09,72.57c-1.02,2.64-2.49,4.9-4.41,6.78
c-1.92,1.88-4.24,3.34-6.96,4.38s-5.78,1.56-9.18,1.56H68.02V42.33h14.52c3.4,0,6.46,0.52,9.18,1.56s5.04,2.51,6.96,4.41
s3.39,4.17,4.41,6.81c1.02,2.64,1.53,5.54,1.53,8.7C104.62,67.01,104.11,69.93,103.09,72.57z"/>
</g>
<g>
<path class="st0" d="M92.92,53.79c-1.2-1.2-2.7-2.13-4.5-2.79s-3.88-0.99-6.24-0.99h-6.06v27.6h6.06c2.36,0,4.44-0.33,6.24-0.99
s3.3-1.59,4.5-2.79s2.1-2.65,2.7-4.35s0.9-3.59,0.9-5.67s-0.3-3.97-0.9-5.67S94.12,54.99,92.92,53.79z"/>
</g>
</g>
</svg>
src/assets/js/section.search.js
View file @ 4c95c393
......@@ -63,6 +63,13 @@ function BuildUserDOM(userItem) {
userName.innerText = userItem.username;
userMetaData.appendChild(userName);
if(userItem.isVerified) {
let userBadge = document.createElement("div");
userBadge.classList.add("user-badge");
userBadge.innerHTML = "<i class=\"mdi mdi-check-decagram\"></i>";
userMetaData.appendChild(userBadge);
}
userContainer.appendChild(userMetaData);
userContainer.addEventListener('click', function() {
......
src/assets/js/section.songdetail.js
View file @ 4c95c393
......@@ -12,6 +12,11 @@ const DOMSongSubtitle = DOMSongDetail.querySelector(".song-subtitle");
const DOMSongArtist = DOMSongDetail.querySelector(".song-artist");
const DOMSongCharter = DOMSongDetail.querySelector(".song-charter");
const DOMSongTags = DOMSongDetail.querySelector(".song-tags");
const DOMDifficultyEasy = DOMSongDetail.querySelector(".song-difficulties .difficulty-easy");
const DOMDifficultyNormal = DOMSongDetail.querySelector(".song-difficulties .difficulty-normal");
const DOMDifficultyHard = DOMSongDetail.querySelector(".song-difficulties .difficulty-hard");
const DOMDifficultyExtreme = DOMSongDetail.querySelector(".song-difficulties .difficulty-extreme");
const DOMDifficultyXD = DOMSongDetail.querySelector(".song-difficulties .difficulty-xd");
const DOMSongUploader = DOMSongDetail.querySelector(".song-uploader");
function SongDetailLoad(songId) {
......@@ -21,6 +26,12 @@ function SongDetailLoad(songId) {
DOMSongDetail.classList.remove("active");
DOMSongDetailActions.classList.remove("active");
DOMDifficultyEasy.classList.remove("active");
DOMDifficultyNormal.classList.remove("active");
DOMDifficultyHard.classList.remove("active");
DOMDifficultyExtreme.classList.remove("active");
DOMDifficultyXD.classList.remove("active");
api.getSongDetail(songId).then(function(apiResponse) {
let songData = apiResponse.data;
......@@ -36,10 +47,10 @@ function SongDetailLoad(songId) {
DOMSongDetailBackground.style.backgroundImage = "url('" + songData.paths.cover + "')";
DOMSongDetailCover.style.backgroundImage = "url('" + songData.paths.cover + "')";
DOMSongTitle.innerText = songData.title;
DOMSongSubtitle.innerText = songData.subtitle;
DOMSongArtist.innerText = songData.artist;
DOMSongCharter.innerText = locale.get('songdetail.createdBy') + " " + songData.charter;
DOMSongTitle.innerText = songData.title ? songData.title : "Untitled";
DOMSongSubtitle.innerText = songData.subtitle ? songData.subtitle : "";
DOMSongArtist.innerText = songData.artist ? songData.artist : "Unknown";
DOMSongCharter.innerText = locale.get('songdetail.createdBy') + " " + (songData.charter ? songData.charter : "Unknown");
DOMSongUploader.innerHTML = "";
DOMSongUploader.appendChild(BuildUserDOM(uploaderData));
......@@ -61,6 +72,22 @@ function SongDetailLoad(songId) {
DOMSongTags.appendChild(newTag);
}
});
if(songData.hasEasyDifficulty) {
DOMDifficultyEasy.classList.add("active");
}
if(songData.hasNormalDifficulty) {
DOMDifficultyNormal.classList.add("active");
}
if(songData.hasHardDifficulty) {
DOMDifficultyHard.classList.add("active");
}
if(songData.hasExtremeDifficulty) {
DOMDifficultyExtreme.classList.add("active");
}
if(songData.hasXDDifficulty) {
DOMDifficultyXD.classList.add("active");
}
});
}
......
src/assets/js/section.startup.js
View file @ 4c95c393
......@@ -169,7 +169,7 @@ function BuildSongDOM(songItem) {
let songCharter = document.createElement("div");
songCharter.classList.add("song-charter");
songCharter.innerHTML = "<i class=\"mdi mdi-account-circle\"></i><span>" + songItem.charter + "</span>";
songCharter.innerHTML = "<i class=\"mdi mdi-account-circle\"></i><span>" + (songItem.charter ? songItem.charter : "Unknown") + "</span>";
songCharterInfo.appendChild(songCharter);
songCover.appendChild(songCharterInfo);
......@@ -180,13 +180,43 @@ function BuildSongDOM(songItem) {
let songTitle = document.createElement("div");
songTitle.classList.add("song-title");
songTitle.innerText = songItem.title;
songTitle.innerText = songItem.title ? songItem.title : "Untitled";
songMetaData.appendChild(songTitle);
let songArtist = document.createElement("div");
songArtist.classList.add("song-artist");
songArtist.innerText = songItem.artist;
songArtist.innerText = songItem.artist ? songItem.artist : "Unknown";
songMetaData.appendChild(songArtist);
let songDifficulties = document.createElement("div");
songDifficulties.classList.add("song-difficulties");
songDifficultiesEasy = document.createElement("img");
songDifficultiesEasy.src = path.join(__dirname, "assets", "img", "difficultyEasy.svg");
if(songItem.hasEasyDifficulty) { songDifficultiesEasy.classList.add("active"); }
songDifficulties.appendChild(songDifficultiesEasy);
songDifficultiesNormal = document.createElement("img");
songDifficultiesNormal.src = path.join(__dirname, "assets", "img", "difficultyNormal.svg");
if(songItem.hasNormalDifficulty) { songDifficultiesNormal.classList.add("active"); }
songDifficulties.appendChild(songDifficultiesNormal);
songDifficultiesHard = document.createElement("img");
songDifficultiesHard.src = path.join(__dirname, "assets", "img", "difficultyHard.svg");
if(songItem.hasHardDifficulty) { songDifficultiesHard.classList.add("active"); }
songDifficulties.appendChild(songDifficultiesHard);
songDifficultiesExtreme = document.createElement("img");
songDifficultiesExtreme.src = path.join(__dirname, "assets", "img", "difficultyExtreme.svg");
if(songItem.hasExtremeDifficulty) { songDifficultiesExtreme.classList.add("active"); }
songDifficulties.appendChild(songDifficultiesExtreme);
songDifficultiesXD = document.createElement("img");
songDifficultiesXD.src = path.join(__dirname, "assets", "img", "difficultyXD.svg");
if(songItem.hasXDDifficulty) { songDifficultiesXD.classList.add("active"); }
songDifficulties.appendChild(songDifficultiesXD);
songMetaData.appendChild(songDifficulties);
songContainer.appendChild(songMetaData);
......
src/assets/js/section.userdetail.js
View file @ 4c95c393
......@@ -7,6 +7,7 @@ const DOMUserSongRow = document.querySelector(".song-row-user");
let currentUserId = 0;
const DOMUserName = DOMUserDetail.querySelector(".user-name");
const DOMUserBadge = DOMUserDetail.querySelector(".user-badge");
const DOMUserSongsList = document.querySelector(".song-row-user .song-list");
const DOMUserSongsNoResults = document.querySelector(".song-row-user .song-list-noresults");
......@@ -34,6 +35,13 @@ function UserDetailLoad(userId) {
DOMUserDetailAvatar.style.backgroundImage = "url('" + userData.avatar + "')";
DOMUserName.innerText = userData.username;
if(userData.isVerified) {
DOMUserBadge.classList.add("active");
} else {
DOMUserBadge.classList.remove("active");
}
if(userData.songs.length > 0) {
userData.songs.forEach(function(song) {
DOMUserSongsList.appendChild(BuildSongDOM(song));
......
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