birdulon
/
KaraokeTestudaiBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace visible checkboxes with font size spinboxes

This commit is contained in:
Luke Hubmayer-Werner 2024-12-18 22:41:26 +10:30
parent 31895e2d42
commit fccc3ae235
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lyrics/static/lyrics/input.js
View File

@ -1,4 +1,5 @@
const update_lyrics_keys = new Set(['Enter', 'ArrowDown', 'ArrowUp']); const update_lyrics_keys = new Set(['Enter', 'ArrowDown', 'ArrowUp']);
const css_font_sizes = ['0%', 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'];
const string_replacements_element = document.querySelector('#word_replacements_pre'); const string_replacements_element = document.querySelector('#word_replacements_pre');
const word_overrides_element = document.querySelector('#word_replacements_post'); const word_overrides_element = document.querySelector('#word_replacements_post');
const lyrics_input_element = document.querySelector('#lyrics_input_textarea'); const lyrics_input_element = document.querySelector('#lyrics_input_textarea');
@ -74,8 +75,10 @@ function lyrics_input_updated() {
lyrics_input_element.addEventListener('change', lyrics_input_updated); lyrics_input_element.addEventListener('change', lyrics_input_updated);
function update_output_styles() { function update_output_styles() {
style_lyrics_kanji.style.display = lyrics_output_show_kanji_element.checked ? "inline" : "none"; style_lyrics_kanji.style.display = lyrics_output_show_kanji_element.value > 0 ? "inline" : "none";
style_lyrics_romaji.style.display = lyrics_output_show_romaji_element.checked ? "inline" : "none"; style_lyrics_romaji.style.display = lyrics_output_show_romaji_element.value > 0 ? "inline" : "none";
style_lyrics_kanji.style.fontSize = css_font_sizes[lyrics_output_show_kanji_element.value];
style_lyrics_romaji.style.fontSize = css_font_sizes[lyrics_output_show_romaji_element.value];
} }
const stylesheet = document.styleSheets[0]; const stylesheet = document.styleSheets[0];

5
lyrics/static/lyrics/style.css
View File

@ -33,6 +33,10 @@ input {
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
border-style: solid; border-style: solid;
min-height: 40px;
}
#lyrics_output_outer input {
max-width: 32px;
} }
#arrangement_input { #arrangement_input {
max-width: 260px; max-width: 260px;
@ -64,6 +68,5 @@ input {
} }
.lyrics-kanji { .lyrics-kanji {
font-size: xx-large;
font-family: Droid Sans Japanese; font-family: Droid Sans Japanese;
} }

4
lyrics/templates/lyrics/index.html
View File

@ -64,9 +64,9 @@
<div id="lyrics_output_outer"> <div id="lyrics_output_outer">
<table><tr> <table><tr>
<td><h2>Lyrics Output</h2></td> <td><h2>Lyrics Output</h2></td>
<td><input type="checkbox" id="lyrics_output_show_romaji" checked="true"></td> <td><input type="number" min="0" max="7" id="lyrics_output_show_romaji" value="4"></td>
<td><label for="lyrics_output_show_romaji">Romaji</label></td> <td><label for="lyrics_output_show_romaji">Romaji</label></td>
<td><input type="checkbox" id="lyrics_output_show_kanji" checked="true"></td> <td><input type="number" min="0" max="7" id="lyrics_output_show_kanji" value="6"></td>
<td><label for="lyrics_output_show_kanji">Kanji</label></td> <td><label for="lyrics_output_show_kanji">Kanji</label></td>
</table></tr> </table></tr>
<div id="lyrics_output"> <div id="lyrics_output">