Move bottom right buttons to vertical display

This commit is contained in:
Jacob Strieb 2020-07-12 13:26:04 -04:00
parent f67f721833
commit bcfc270344
3 changed files with 16 additions and 12 deletions

View File

@ -88,7 +88,7 @@ function hideButtons(box) {
if (box.checked) { if (box.checked) {
buttons.forEach((button) => button.style.display = "none"); buttons.forEach((button) => button.style.display = "none");
} else { } else {
buttons.forEach((button) => button.style.display = "inline"); buttons.forEach((button) => button.style.display = "block");
} }
} }

View File

@ -16,8 +16,9 @@
</div> </div>
<div id="bottomleft-buttons"> <div id="bottomleft-buttons">
<label for="hide">Hide Buttons</label> <label for="hide">Hide Buttons
<input type="checkbox" id="hide" onclick="hideButtons(this)" /><br /> <input type="checkbox" id="hide" onclick="hideButtons(this)" />
</label>
<!-- Seemingly random attributes necessary for TinyUrl to accept the request --> <!-- Seemingly random attributes necessary for TinyUrl to accept the request -->
<form action="http://tinyurl.com/create.php" method="get" target="_blank"> <form action="http://tinyurl.com/create.php" method="get" target="_blank">
<input type="hidden" id="source" name="source" value="indexpage"> <input type="hidden" id="source" name="source" value="indexpage">

View File

@ -41,6 +41,16 @@ a, button {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
display: flex;
flex-direction: column;
align-items: stretch;
}
#bottomleft-buttons button {
display: block;
margin: 0;
width: 100%;
border-top: 1px solid limegreen;
} }
#topright-buttons { #topright-buttons {
@ -54,13 +64,6 @@ form {
} }
label, input[type="checkbox"] { label, input[type="checkbox"] {
vertical-align: middle; vertical-align: baseline;
} text-align: center;
label {
padding: 5px;
padding-bottom: 0;
padding-top: 0;
background: white;
color: black;
} }