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
Show 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 @@ ...@@ -10,11 +10,11 @@
<div class="song-title">{{ title }}</div> <div class="song-title">{{ title }}</div>
<div class="song-artist">{{ artist }}</div> <div class="song-artist">{{ artist }}</div>
<div class="song-difficulties"> <div class="song-difficulties">
<img src="@/assets/img/difficultyEasy.svg" :class="hasEasyDifficulty ? 'active' : ''" /> <div :class="hasEasyDifficulty ? 'difficulty active' : 'difficulty'"><span>E</span></div>
<img src="@/assets/img/difficultyNormal.svg" :class="hasNormalDifficulty ? 'active' : ''" /> <div :class="hasNormalDifficulty ? 'difficulty active' : 'difficulty'"><span>N</span></div>
<img src="@/assets/img/difficultyHard.svg" :class="hasHardDifficulty ? 'active' : ''" /> <div :class="hasHardDifficulty ? 'difficulty active' : 'difficulty'"><span>H</span></div>
<img src="@/assets/img/difficultyExtreme.svg" :class="hasExtremeDifficulty ? 'active' : ''" /> <div :class="hasExtremeDifficulty ? 'difficulty active' : 'difficulty'"><span>EX</span></div>
<img src="@/assets/img/difficultyXD.svg" :class="hasXDDifficulty ? 'active' : ''" /> <div :class="hasXDDifficulty ? 'difficulty active' : 'difficulty'"><span>XD</span></div>
</div> </div>
</div> </div>
</router-link> </router-link>
...@@ -155,11 +155,20 @@ ...@@ -155,11 +155,20 @@
height: 20px; height: 20px;
display: flex; display: flex;
& img { & .difficulty {
height: 18px; background: #fff;
margin-right: 10px; color: #000;
border-radius: 4px;
padding: 3px 8px;
margin-right: 4px;
font-size: 10px;
opacity: 0.3; opacity: 0.3;
& span {
// padding-right: 3px;
font-weight: bold;
}
&.active { &.active {
opacity: 1; 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