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

Adjust layout and spacings a bit

This commit is contained in:
Luke Hubmayer-Werner 2024-12-19 16:43:23 +10:30
parent bf59cc5ef3
commit 0b05f0ce7e
2 changed files with 46 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,10 @@ video {
width: 100%; width: 100%;
} */ } */
table {
border-spacing: 0;
}
.info { .info {
background-color: aqua; background-color: aqua;
} }
@ -20,7 +24,6 @@ video {
min-width: 400px; min-width: 400px;
} }
#word_overrides { #word_overrides {
min-width: 400px;
max-width: 800px; max-width: 800px;
} }
#lyrics_output_outer, #arrangement_output_outer { #lyrics_output_outer, #arrangement_output_outer {
@ -52,6 +55,25 @@ video {
max-width: 48px; max-width: 48px;
} }
.grid-container {
display: grid;
gap: 5px;
padding: 0px;
}
#div_lyrics_input_jp {
grid-column: 1;
}
#div_lyrics_input_tl {
grid-column: 2;
}
#lyrics_input h3 {
margin-top: 0;
margin-bottom: 0;
}
#lyrics_input textarea {
line-height: 1.2;
}
.flex-container { .flex-container {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
@ -60,10 +82,10 @@ video {
.flex-container > div { .flex-container > div {
background-color: aqua; background-color: aqua;
margin: 10px; margin: 4px;
border-radius: 10px; border-radius: 8px;
padding: 20px; padding: 12px;
padding-top: 10px; padding-top: 8px;
} }
.flex-container > div > h2 { .flex-container > div > h2 {

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

@ -58,8 +58,8 @@
<td><label for="word_replacements_post"><details><summary>Word Overrides</summary>With <i><b>Word Overrides</b></i> you can specify a list of word tokens to replace the readings of <i>after</i> the tokenizer has decided that exact sequence is a word. The format is <code>word[|old_reading]|my_reading</code>, e.g. <code>私|わたし</code> to replace any instance of 私, or <code>主|ぬし|しゅ</code> to only replace instances of 主 that have been parsed as ぬし (e.g. it would leave <ruby>主<rt>あるじ</rt></ruby> alone.)</details></label></td> <td><label for="word_replacements_post"><details><summary>Word Overrides</summary>With <i><b>Word Overrides</b></i> you can specify a list of word tokens to replace the readings of <i>after</i> the tokenizer has decided that exact sequence is a word. The format is <code>word[|old_reading]|my_reading</code>, e.g. <code>私|わたし</code> to replace any instance of 私, or <code>主|ぬし|しゅ</code> to only replace instances of 主 that have been parsed as ぬし (e.g. it would leave <ruby>主<rt>あるじ</rt></ruby> alone.)</details></label></td>
</tr> </tr>
<tr> <tr>
<td><textarea id="word_replacements_pre" name="word_replacements_pre" rows="4" cols="30" placeholder="hello|おはよう"></textarea></td> <td><textarea id="word_replacements_pre" name="word_replacements_pre" rows="4" cols="20" placeholder="hello|おはよう"></textarea></td>
<td><textarea id="word_replacements_post" name="word_replacements_post" rows="4" cols="30" placeholder="私|わたくし|わたし&#10;主|しゅ"></textarea></td> <td><textarea id="word_replacements_post" name="word_replacements_post" rows="4" cols="20" placeholder="私|わたくし|わたし&#10;主|しゅ"></textarea></td>
</tr> </tr>
</table> </table>
</div> </div>
@ -72,10 +72,16 @@
<!-- Lyrics input --> <!-- Lyrics input -->
<div id="lyrics_input"> <div id="lyrics_input">
<h2>Lyrics Input</h2> <h2>Lyrics Input</h2>
<h3>Japanese</h3> <div class="grid-container">
<textarea id="lyrics_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;おはよう世界"></textarea> <div id="div_lyrics_input_jp">
<h3>Translation</h3> <h3>Japanese</h3>
<textarea id="lyrics_tl_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;Hello world"></textarea> <textarea id="lyrics_input_textarea" rows="20" cols="40" placeholder="[v1]&#10;おはよう世界"></textarea>
</div>
<div id="div_lyrics_input_tl">
<h3>Translation</h3>
<textarea id="lyrics_tl_input_textarea" rows="20" cols="80" placeholder="[v1]&#10;Hello world"></textarea>
</div>
</div>
</div> </div>
<!-- Lyrics output --> <!-- Lyrics output -->
<div id="lyrics_output_outer"> <div id="lyrics_output_outer">
@ -101,10 +107,14 @@
<div id="syllable_timer"> <div id="syllable_timer">
<h2>Syllable Timer</h2> <h2>Syllable Timer</h2>
This will have a metronome and a button for tapping out the rhythm of a given line.<br> This will have a metronome and a button for tapping out the rhythm of a given line.<br>
<span> <div>
<input type="number" id="metronome_bpm" min="10" max="500" value="120" maxlength="4"> <input type="number" id="metronome_bpm" min="10" max="500" value="120">
<label for="metronome_bpm">BPM</label> <label for="metronome_bpm">BPM</label>
</span> </div>
<div>
<input type="number" id="beats_per_bar" min="1" max="32" value="4">
<label for="beats_per_bar">Beats per bar</label>
</div>
<button id="btn_metronome">Metronome</button> <button id="btn_metronome">Metronome</button>
<button id="btn_syllable">Syllable</button> <button id="btn_syllable">Syllable</button>
</div> </div>