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
crypto_monitor_binance/templates/index.html
+6 -11
View File
@@ -47,21 +47,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}
@@ -244,7 +239,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style>
<link rel="stylesheet" href="/static/instance_theme.css?v=52">
<link rel="stylesheet" href="/static/instance_theme.css?v=53">
</head>
<body
@@ -693,7 +688,7 @@
<label><input type="checkbox" name="mood_issues" value="扛单">扛单</label>
<label><input type="checkbox" name="mood_issues" value="重仓违规">重仓违规</label>
</div>
<textarea name="note" rows="2" style="width:100%;margin-top:8px" placeholder="备注"></textarea>
<textarea name="note" rows="2" placeholder="备注"></textarea>
<button type="submit" style="margin-top:8px">保存复盘记录</button>
</form>
</div>
crypto_monitor_gate/templates/index.html
+6 -11
View File
@@ -46,21 +46,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}
@@ -243,7 +238,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style>
<link rel="stylesheet" href="/static/instance_theme.css?v=52">
<link rel="stylesheet" href="/static/instance_theme.css?v=53">
</head>
<body
@@ -659,7 +654,7 @@
<label><input type="checkbox" name="mood_issues" value="扛单">扛单</label>
<label><input type="checkbox" name="mood_issues" value="重仓违规">重仓违规</label>
</div>
<textarea name="note" rows="2" style="width:100%;margin-top:8px" placeholder="备注"></textarea>
<textarea name="note" rows="2" placeholder="备注"></textarea>
<button type="submit" style="margin-top:8px">保存复盘记录</button>
</form>
</div>
crypto_monitor_okx/templates/index.html
+6 -11
View File
@@ -46,21 +46,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}
@@ -243,7 +238,7 @@
.stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
.stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style>
<link rel="stylesheet" href="/static/instance_theme.css?v=52">
<link rel="stylesheet" href="/static/instance_theme.css?v=53">
</head>
<body
@@ -688,7 +683,7 @@
<label><input type="checkbox" name="mood_issues" value="扛单">扛单</label>
<label><input type="checkbox" name="mood_issues" value="重仓违规">重仓违规</label>
</div>
<textarea name="note" rows="2" style="width:100%;margin-top:8px" placeholder="备注"></textarea>
<textarea name="note" rows="2" placeholder="备注"></textarea>
<button type="submit" style="margin-top:8px">保存复盘记录</button>
</form>
</div>
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%;
lib/instance/templates/embed_page_fragment.html
+1 -1
View File
@@ -336,7 +336,7 @@
<label><input type="checkbox" name="mood_issues" value="扛单">扛单</label>
<label><input type="checkbox" name="mood_issues" value="重仓违规">重仓违规</label>
</div>
<textarea name="note" rows="2" style="width:100%;margin-top:8px" placeholder="备注"></textarea>
<textarea name="note" rows="2" placeholder="备注"></textarea>
<button type="submit" style="margin-top:8px">保存复盘记录</button>
</form>
</div>
lib/instance/templates/embed_shell.html
+2 -2
View File
@@ -6,8 +6,8 @@
<script src="/static/instance_theme.js?v=47"></script>
<link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
<link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
<link rel="stylesheet" href="/static/instance_page.css?v=2">
<link rel="stylesheet" href="/static/instance_theme.css?v=52">
<link rel="stylesheet" href="/static/instance_page.css?v=3">
<link rel="stylesheet" href="/static/instance_theme.css?v=53">
<script src="/static/account_risk_badge.js?v=4"></script>
<meta name="theme-color" content="#0b0d14">
<title>{{ exchange_display }} · 加密货币 | 交易监控复盘系统</title>
lib/strategy/templates/journal_form_fields.html
+9 -9
View File
@@ -1,16 +1,16 @@
{# 复盘表单字段两行布局 #}
{# 复盘表单：首行按字段宽度比例；开仓类型与离场触发同一行 #}
{% macro journal_form_fields(entry_reason_options) -%}
<div class="form-grid journal-form-row1">
<input type="datetime-local" name="open_datetime" required>
<input type="datetime-local" name="close_datetime" required>
<input name="coin" placeholder="BTC" required>
<input name="tf" placeholder="5m" required>
<input name="pnl" placeholder="盈亏(U)" required>
<input name="expect_rr" placeholder="预期RR">
<input name="real_rr" placeholder="实际RR">
<input type="datetime-local" name="open_datetime" class="journal-field-datetime" required>
<input type="datetime-local" name="close_datetime" class="journal-field-datetime" required>
<input name="coin" class="journal-field-coin" placeholder="BTC" required>
<input name="tf" class="journal-field-tf" placeholder="5m" required>
<input name="pnl" class="journal-field-num" placeholder="盈亏(U)" required>
<input name="expect_rr" class="journal-field-num" placeholder="预期RR">
<input name="real_rr" class="journal-field-num" placeholder="实际RR">
</div>
<div class="form-grid journal-form-row2">
<select name="entry_reason" id="journal-entry-reason" required title="大分歧A/B/小分歧或策略项">
<select name="entry_reason" id="journal-entry-reason" class="journal-field-entry-reason" required title="大分歧A/B/小分歧或策略项">
<option value="">开仓类型（必选）</option>
{% for er in entry_reason_options %}
<option value="{{ er }}">{{ er }}</option>