better styling for actions, especially mobile
Ted Unangst tedu@tedunangst.com
Sun, 02 Jun 2019 14:44:39 -0400
2 files changed,
8 insertions(+),
11 deletions(-)
M
views/honk.html
→
views/honk.html
@@ -46,6 +46,9 @@ </div>
{{ end }} {{ if .BonkCSRF }} <p> +<details> +<summary>Actions +</summary> <div> {{ if .Honk.Public }} <button onclick="bonk(this, '{{ .Honk.XID }}'); return false;"><a href="/bonk">bonk</a></button>@@ -56,14 +59,15 @@ <input type="hidden" name="CSRF" value="{{ .BonkCSRF }}">
<input type="hidden" name="honk" value="{{ .Honk.XID }}"> <input type="hidden" name="honker" value="{{ .Honk.Honker }}"> <input type="hidden" name="convoy" value="{{ .Honk.Convoy }}"> +<button onclick="zonkit(this); return false;"><a href="/zonkit">zonk</a></button> <select name="wherefore"> <option>this honk</option> <option>this honker</option> <option>this convoy</option> </select> -<button onclick="zonkit(this); return false;"><a href="/zonkit">zonk</a></button> </form> </div> +</details> <p> {{ end }} </article>
M
views/style.css
→
views/style.css
@@ -59,8 +59,8 @@ .info div {
margin-top 1em; margin-bottom: 1em; } -button, form input[type=submit], select { - font-size: 0.8em; +.info label, button, form input[type=submit], select { + font-size: 16px; font-family: monospace; color: #dde; background: #305;@@ -98,13 +98,6 @@ outline: 1px solid #dde;
} .info input[type=file] { display: none; -} -.info label { - border: 1px solid #dde; - font-size: 0.8em; - padding: 0.5em; - font-size: 0.8em; - background: #305; } .honk {@@ -180,7 +173,7 @@ object-fit: contain;
} @media screen and (max-width: 740px) { body { - font-size: 0.6em; + font-size: 12px; } .info textarea { width: 20em;