yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-10-05 15:48:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

better songtitle alignment

Browse Source
This commit is contained in:
Bui 2018-08-23 15:40:45 +01:00
parent 8e5d53f404
commit 881c403745
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/css/songselect.css
View File

@ -34,25 +34,33 @@ ul li{
height: 100%;
}
.song-title-char {
text-align: center;
width: 45px;
display: block;
}
.song-title-char:before {
content: attr(alt);
position: absolute;
-webkit-text-stroke: 0.25em #000;
z-index: -1;
}
.song-title{
float: right;
width: 0px;
padding: 12px 24px;
width: 45px;
padding: 10px 0px;
word-wrap: break-word;
font-size: 22pt;
color: white;
margin-right: 10px;
position: relative;
z-index: 1;
line-height: 28px;
}
.song-title:before {
content: attr(alt);
position: relative;
-webkit-text-stroke: 0.25em #000;
z-index: -1;
word-wrap: break-word;
.song-title-space {
line-height: 25px;
}
.song{

15
src/js/songselect.js
View File

@ -106,8 +106,13 @@ function SongSelect(){
var songTitle = songDir.substr(songID.length+1, songDir.length-(songID.length+1));
var songTitleSpace = songTitle.replace(/ /g, ' ');
_code += "<div id='song-"+songID+"' class='song'><div class='song-title stroke-sub' alt='"+songTitleSpace+"'>"+songTitleSpace+'</div>';
_code += "<ul class='difficulties'>";
_code += "<div id='song-"+songID+"' class='song'><div class='song-title'>";
for (var c=0; c<songTitle.length; c++) {
var ch = songTitle.charAt(c) == ' ' ? '&nbsp;' : songTitle.charAt(c);
var cl = ch == '&nbsp;' ? 'song-title-char song-title-space' : 'song-title-char';
_code += '<span class="' + cl + '" alt="' + ch + '">' + ch + '</span>';
};
_code += "</div><ul class='difficulties'>";
for(var j=0; j<songDifficulties.length; j++){
@ -148,12 +153,6 @@ function SongSelect(){
}
$("#song-container").html(_code);
$('.song').each(function(){
var title = $(this).find('.song-title');
var height = $(title).height();
$(title).css('margin-top', '-' + height/2 + 'px');
document.styleSheets[0].addRule('#'+$(this).attr('id')+' .song-title:before','top:'+height/2+'px;');
});
$('.difficulty').hide();
}