MatthiasQuintern/imgsort2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use flex for buttons

Browse Source
This commit is contained in:
matth@ultra 2024-09-04 11:39:27 +02:00
parent 1d1c2d7f1a
commit aa9fb1cdb1
3 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/index.html
View File

@ -24,9 +24,11 @@
<div class="second-box"> <div class="second-box">
<div class="buttons" id="buttons"> <div class="buttons" id="buttons">
<input id="filename" placeholder="filename" type="text" class="filename-input"></input> <input id="filename" placeholder="filename" type="text" class="filename-input"></input>
<button onclick="undo()" class="move-button" id="undo-button">Undo</button> <div class="move-button-container">
<button onclick="skip()" class="move-button" id="skip-button">Skip</button> <button onclick="undo()" class="move-button" id="undo-button"><span class="key">u</span> Undo</button>
<button onclick="skip()" class="move-button" id="skip-button"><span class="key">s</span> Skip</button>
<span class="move-buttons" id="move-buttons"></span> <span class="move-buttons" id="move-buttons"></span>
</div>
<br> <br>
<button onclick="window.location.href='config.html';" id="configure-button">Configure</button> <button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
</div> </div>

11
src/sass/main.sass
View File

@ -152,12 +152,17 @@ button, input
filter: drop-shadow(0.1rem 0.1rem 0 $accent) filter: drop-shadow(0.1rem 0.1rem 0 $accent)
font-family: $monofont font-family: $monofont
margin: 0.2rem margin: 0.2rem
.move-button-container
margin-top: 0.2rem
display: flex
flex-wrap: wrap
.move-buttons .move-buttons
margin: 0 display: contents
.move-button .move-button
font-size: $move-button-font-size font-size: $move-button-font-size
padding: $move-button-padding padding: $move-button-padding
flex-grow: 1
button:hover button:hover
color: $button-fg-hl color: $button-fg-hl
@ -168,9 +173,9 @@ button:hover
#configure-button #configure-button
filter: drop-shadow(0.1rem 0.1rem 0 $light-blue) filter: drop-shadow(0.1rem 0.1rem 0 $light-blue)
#undo-button #undo-button
filter: drop-shadow(0.1rem 0.1rem 0 $light-gray) filter: drop-shadow(0.1rem 0.1rem 0 $light-aqua)
#skip-button #skip-button
filter: drop-shadow(0.1rem 0.1rem 0 $light-gray) filter: drop-shadow(0.1rem 0.1rem 0 $light-aqua)
#key #key
width: 20px width: 20px
text-align: center text-align: center

13
src/style.css
View File

@ -137,13 +137,20 @@ button, input {
margin: 0.2rem; margin: 0.2rem;
} }
.move-button-container {
margin-top: 0.2rem;
display: flex;
flex-wrap: wrap;
}
.move-buttons { .move-buttons {
margin: 0; display: contents;
} }
.move-button { .move-button {
font-size: 14px; font-size: 14px;
padding: 6px; padding: 6px;
flex-grow: 1;
} }
button:hover { button:hover {
@ -160,11 +167,11 @@ button:hover {
} }
#undo-button { #undo-button {
filter: drop-shadow(0.1rem 0.1rem 0 #7c6f64); filter: drop-shadow(0.1rem 0.1rem 0 #427b58);
} }
#skip-button { #skip-button {
filter: drop-shadow(0.1rem 0.1rem 0 #7c6f64); filter: drop-shadow(0.1rem 0.1rem 0 #427b58);
} }
#key { #key {