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%; 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{ .song-title{
float: right; float: right;
width: 0px; width: 45px;
padding: 12px 24px; padding: 10px 0px;
word-wrap: break-word; word-wrap: break-word;
font-size: 22pt; font-size: 22pt;
color: white; color: white;
margin-right: 10px;
position: relative; position: relative;
z-index: 1; z-index: 1;
line-height: 28px; line-height: 28px;
} }
.song-title:before { .song-title-space {
content: attr(alt); line-height: 25px;
position: relative;
-webkit-text-stroke: 0.25em #000;
z-index: -1;
word-wrap: break-word;
} }
.song{ .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 songTitle = songDir.substr(songID.length+1, songDir.length-(songID.length+1));
var songTitleSpace = songTitle.replace(/ /g, ' '); var songTitleSpace = songTitle.replace(/ /g, ' ');
_code += "<div id='song-"+songID+"' class='song'><div class='song-title stroke-sub' alt='"+songTitleSpace+"'>"+songTitleSpace+'</div>'; _code += "<div id='song-"+songID+"' class='song'><div class='song-title'>";
_code += "<ul class='difficulties'>"; 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++){ for(var j=0; j<songDifficulties.length; j++){
@ -148,12 +153,6 @@ function SongSelect(){
} }
$("#song-container").html(_code); $("#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(); $('.difficulty').hide();
} }