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="buttons" id="buttons">
<input id="filename" placeholder="filename" type="text" class="filename-input"></input>
<button onclick="undo()" class="move-button" id="undo-button">Undo</button>
<button onclick="skip()" class="move-button" id="skip-button">Skip</button>
<div class="move-button-container">
<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>
</div>
<br>
<button onclick="window.location.href='config.html';" id="configure-button">Configure</button>
</div>

11
src/sass/main.sass
View File

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

13
src/style.css
View File

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