Skip to content

Commit

Permalink
fix: InputBox align issue
Browse files Browse the repository at this point in the history 
Description:
e.g. Input an integral symbol into the InputBox component, and you'll find it is not aligned with the right bracket.
  • Loading branch information
@NriotHrreion
NriotHrreion committed Aug 12, 2024
1 parent f38ec6e commit c83f1d0
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 29 deletions.
16 changes: 5 additions & 11 deletions src/style/calculator/calculator.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,12 +84,9 @@
padding-right: 50px;
z-index: 100;
.display {
justify-content: flex-end;
font-size: 30px;
min-height: 100px;
& > span {
display: inline-flex;
align-items: center;
}
height: 100px;
& > .tag-var {
color: var(--ca-tag-var);
}
Expand All @@ -103,10 +100,10 @@
}
}
.cursor {
max-height: 40px;
height: 40px;
}
*[data-testid=react-katex] {
height: 100%;
height: fit-content;
}
}
}
Expand All @@ -118,15 +115,12 @@
padding-right: 50px;
.display {
display: flex;
// justify-content: flex-end;
justify-content: flex-end;
color: var(--ca-gray-light);
font-size: 45px;
min-height: 156px;
overflow-x: auto;
.scrollbar-style();
& > div:first-child {
margin-left: auto;
}
span.mfrac {
font-size: .82em;
}
Expand Down
4 changes: 2 additions & 2 deletions src/style/calculator/graphing.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@
overflow-x: auto;
.display {
font-size: 12px;
min-height: 40px;
max-height: 40px;
height: 40px;
.cursor {
height: 16px;
margin-left: 0;
margin-right: -1px;
}
Expand Down
14 changes: 6 additions & 8 deletions src/style/calculator/mixin.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,20 @@
.input-box-style(@ltr: true) {
.display {
display: flex;
// justify-content: flex-end;
align-items: center;
color: var(--ca-gray-light);
overflow-x: auto;
overflow-y: hidden;
cursor: text;
.scrollbar-style();
& > span {
display: inline;
}
& > *:first-child when (@ltr = false) {
// see https://www.zhangxinxu.com/wordpress/2021/12/flex-end-overflow/
margin-left: auto !important;
display: inline-flex;
align-items: center;
.katex-display {
margin: 0;
}
}
.cursor {
margin: 1em 0; // keep the cursor fixed on the middle

// make the symbols fixed when the cursor moves
margin-left: if(@ltr = true, 0, -1px);
margin-right: if(@ltr = true, -1px, 0);
Expand Down
8 changes: 2 additions & 6 deletions src/style/dialogs/function-editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,9 @@ dialog.function-editor-dialog .main-container {
overflow-x: auto;
.display {
font-size: 16px;
min-height: 40px;
max-height: 40px;
.katex-display {
margin: .6em 0;
}
height: 40px;
.cursor {
margin: .7em 0;
height: 16px;
margin-left: 0;
margin-right: -1px;
}
Expand Down
4 changes: 2 additions & 2 deletions src/style/sidebar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,9 +261,9 @@
overflow-x: auto;
.display {
font-size: 12px;
min-height: 40px;
max-height: 40px;
height: 40px;
.cursor {
height: 16px;
margin-left: 0;
margin-right: -1px;
}
Expand Down

1 comment on commit c83f1d0

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://calcium.js.org as production
🚀 Deployed on https://66b9ecdaf205a46b144fe38b--courageous-bublanina-6857c1.netlify.app

Please sign in to comment.