Make soundboard more mobile friendly

This commit is contained in:
Martin Müller 2018-05-23 20:47:39 +02:00
parent 1c287342b0
commit 1c24c0dc1a
2 changed files with 22 additions and 5 deletions

View File

@ -90,6 +90,7 @@ button:active {
.tags li { .tags li {
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
margin: 5px;
} }
.tags li a { .tags li a {
@ -98,7 +99,6 @@ button:active {
border-radius: 2px; border-radius: 2px;
color: #999; color: #999;
font-size: 0.9em; font-size: 0.9em;
margin: 5px;
padding: 2px 5px 2px 5px; padding: 2px 5px 2px 5px;
} }
@ -161,7 +161,14 @@ nav .extra {
right: 1em; right: 1em;
} }
nav .extra>a { @media only screen and (max-device-width: 500px) {
nav .extra {
position: static;
padding-top: 1em;
}
}
nav .extra > a {
background-color: #2ecc40; background-color: #2ecc40;
border: 1px solid #000; border: 1px solid #000;
border-radius: 5px; border-radius: 5px;
@ -235,4 +242,12 @@ nav .extra>a {
#local-mode-button .local { #local-mode-button .local {
color: red; color: red;
} }
#streams input, #voice label, #voice input {
display: block;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
}

View File

@ -67,8 +67,10 @@
</section> </section>
<section id="voice" style="display:none;"> <section id="voice" style="display:none;">
<form action="/say/" method="POST"> <form action="/say/" method="POST">
<input type="text" name="text" /> <label for="text">Text</label>
<input type="text" name="voice" placeholder="DE" /> <input type="text" name="text" id="text" />
<label for="voice">Language/Voice</label>
<input type="text" name="voice" id="voice" placeholder="DE" />
<label for="speed">Speed</label> <label for="speed">Speed</label>
<input type="range" name="speed" min="80" max="450" step="10" value="160" id="speed" /> <input type="range" name="speed" min="80" max="450" step="10" value="160" id="speed" />
<label for="pitch">Pitch</label> <label for="pitch">Pitch</label>