Skip to content

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

swapped difficulty icons with tags

parent 26014008
Hide whitespace changes
Inline Side-by-side
Showing with 19 additions and 10 deletions
src/components/Song/SongItem.vue
View file @ efe9e1e9
......@@ -10,11 +10,11 @@
<div class="song-title">{{ title }}</div>
<div class="song-artist">{{ artist }}</div>
<div class="song-difficulties">
<img src="@/assets/img/difficultyEasy.svg" :class="hasEasyDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyNormal.svg" :class="hasNormalDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyHard.svg" :class="hasHardDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyExtreme.svg" :class="hasExtremeDifficulty ? 'active' : ''" />
<img src="@/assets/img/difficultyXD.svg" :class="hasXDDifficulty ? 'active' : ''" />
<div :class="hasEasyDifficulty ? 'difficulty active' : 'difficulty'"><span>E</span></div>
<div :class="hasNormalDifficulty ? 'difficulty active' : 'difficulty'"><span>N</span></div>
<div :class="hasHardDifficulty ? 'difficulty active' : 'difficulty'"><span>H</span></div>
<div :class="hasExtremeDifficulty ? 'difficulty active' : 'difficulty'"><span>EX</span></div>
<div :class="hasXDDifficulty ? 'difficulty active' : 'difficulty'"><span>XD</span></div>
</div>
</div>
</router-link>
......@@ -154,12 +154,21 @@
margin-top: 10px;
height: 20px;
display: flex;
& img {
height: 18px;
margin-right: 10px;
& .difficulty {
background: #fff;
color: #000;
border-radius: 4px;
padding: 3px 8px;
margin-right: 4px;
font-size: 10px;
opacity: 0.3;
& span {
// padding-right: 3px;
font-weight: bold;
}
&.active {
opacity: 1;
}
......
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