dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve journal form layout for tablet with proportional field widths

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-07-06 00:59:45 +08:00
parent fa9e6be36d
commit 7fb87d6030
8 changed files with 101 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/common/static/instance_page.css
+4 -9
View File
@@ -32,21 +32,16 @@
.form-row > button,.form-row > label{flex:0 0 auto}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
/* 复盘表单：长下拉文案需可收缩，否则会撑破四列网格 */
.journal-card .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.journal-card .form-grid{gap:10px}
.journal-card .form-grid > input,
.journal-card .form-grid > select{
min-width:0;
width:100%;
max-width:100%;
box-sizing:border-box;
}
.journal-card .form-grid select[name="entry_reason"]{
grid-column:1/-1;
font-size:.8rem;
line-height:1.35;
}
.journal-card .form-grid input[name="entry_reason_custom"]{
grid-column:1/-1;
font-size:.8rem;
.journal-card #journal-form textarea[name="note"]{
display:block;width:100%;max-width:100%;box-sizing:border-box;margin-top:8px;
}
input,select,button,textarea{padding:8px 10px;border-radius:8px;border:1px solid #2e2e45;background:#1a1a29;color:#fff;font-size:.88rem;outline:none}
button{background:linear-gradient(90deg,#4285f4,#7b42ff);border:none;cursor:pointer}
lib/common/static/instance_theme.css
+67 -7
View File
@@ -79,7 +79,7 @@
padding: 12px;
}
.form-grid {
.form-grid:not(.journal-form-row1):not(.journal-form-row2) {
grid-template-columns: minmax(0, 1fr) !important;
}
@@ -269,7 +269,7 @@
grid-template-columns: minmax(0, 1fr) !important;
}
.form-grid {
.form-grid:not(.journal-form-row1):not(.journal-form-row2) {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@@ -289,7 +289,7 @@
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.form-grid {
.form-grid:not(.journal-form-row1):not(.journal-form-row2) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@@ -1659,14 +1659,40 @@ html[data-theme="light"] .symbol-live-price--ok {
border-color: #9ed4b8;
}
/* ── 复盘：四周期截图上传 / 详情四宫格 ── */
/* ── 复盘：字段按内容宽度；开仓类型与离场触发同一行 ── */
.journal-card #journal-form {
min-width: 0;
max-width: 100%;
}
.journal-card .form-grid {
gap: 10px;
}
.journal-card .form-grid > input,
.journal-card .form-grid > select {
box-sizing: border-box;
}
.journal-card .journal-form-row1 {
grid-template-columns: repeat(7, minmax(0, 1fr));
margin-bottom: 6px;
grid-template-columns:
minmax(11rem, 1.55fr)
minmax(11rem, 1.55fr)
minmax(4.2rem, 0.62fr)
minmax(3.2rem, 0.48fr)
minmax(4.8rem, 0.72fr)
minmax(4rem, 0.55fr)
minmax(4rem, 0.55fr);
margin-bottom: 10px;
}
.journal-card .journal-form-row2 {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns:
minmax(7.5rem, 1.15fr)
minmax(7rem, 1fr)
minmax(0, 1.35fr)
minmax(6.5rem, 0.75fr);
margin-bottom: 8px;
}
.journal-card .journal-form-row2 select[name="entry_reason"] {
@@ -1674,6 +1700,14 @@ html[data-theme="light"] .symbol-live-price--ok {
line-height: 1.35;
}
.journal-card #journal-form textarea[name="note"] {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin-top: 8px;
}
.journal-upload-slots {
display: flex;
flex-wrap: nowrap;
@@ -1753,10 +1787,18 @@ html[data-theme="light"] .symbol-live-price--ok {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.journal-card .journal-form-row1 .journal-field-datetime {
grid-column: span 2;
}
.journal-card .journal-form-row2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.journal-card .journal-form-row2 input[name="early_exit_note"] {
grid-column: 1 / -1;
}
.journal-upload-slots {
flex-wrap: wrap;
}
@@ -1766,6 +1808,24 @@ html[data-theme="light"] .symbol-live-price--ok {
}
}
@media (max-width: 560px) {
.journal-card .journal-form-row1 {
grid-template-columns: minmax(0, 1fr);
}
.journal-card .journal-form-row1 .journal-field-datetime {
grid-column: auto;
}
.journal-card .journal-form-row2 {
grid-template-columns: minmax(0, 1fr);
}
.journal-card .journal-form-row2 input[name="early_exit_note"] {
grid-column: auto;
}
}
@media (max-width: 560px) {
.journal-upload-row {
flex: 1 1 100%;