filifa
/
mcalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

display label for expression

This commit is contained in:
filifa 2025-12-11 23:49:34 -05:00
parent c67f6a95f4
commit d427a83279
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -9,8 +9,10 @@
<body> <body>
<div id="calculator"> <div id="calculator">
<div id="input-row"> <div id="input-row">
<label for="expr">Expression</label> <div id="expr-box">
<label id="expr-label" for="expr">Expression</label>
<input id="expr" required type="text" inputmode="none" /> <input id="expr" required type="text" inputmode="none" />
</div>
<div id="modulus-box"> <div id="modulus-box">
<label id="modulus-label" for="modulus">mod</label> <label id="modulus-label" for="modulus">mod</label>

21
styles.css
View File

@ -4,19 +4,26 @@
gap: 0.3rem; gap: 0.3rem;
} }
label[for="expr"] {
display: none;
}
#input-row { #input-row {
grid-column: 1 / 5; grid-column: 1 / 5;
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
} }
#expr { #expr-box {
flex: 4 auto; flex: 4 auto;
display: flex;
flex-flow: column;
min-width: 0; min-width: 0;
}
#expr-label {
flex: initial;
font-size: medium;
}
#expr {
flex: auto;
font-size: xx-large; font-size: xx-large;
} }
@ -25,13 +32,15 @@ label[for="expr"] {
display: flex; display: flex;
flex-flow: wrap; flex-flow: wrap;
justify-content: end; justify-content: end;
align-items: end;
min-width: 0; min-width: 0;
} }
#modulus-label { #modulus-label {
flex: initial; flex: initial;
font-size: xx-large; font-size: xx-large;
margin: auto 0.3rem; margin-left: 0.3rem;
margin-right: 0.3rem;
} }
#modulus { #modulus {