Add mobile-responsive layout
Browse filesMerges feature/mobile-responsive into main
dashboard/templates/index.html
CHANGED
|
@@ -2,6 +2,7 @@
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8"/>
|
|
|
|
| 5 |
<title>Trading Dashboard</title>
|
| 6 |
<style>
|
| 7 |
body { font-family: Arial, sans-serif; margin: 20px; background: #f7f7f7; }
|
|
@@ -154,6 +155,34 @@
|
|
| 154 |
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| 155 |
margin-top: 20px;
|
| 156 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 157 |
</style>
|
| 158 |
</head>
|
| 159 |
<body>
|
|
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8"/>
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 |
<title>Trading Dashboard</title>
|
| 7 |
<style>
|
| 8 |
body { font-family: Arial, sans-serif; margin: 20px; background: #f7f7f7; }
|
|
|
|
| 155 |
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
| 156 |
margin-top: 20px;
|
| 157 |
}
|
| 158 |
+
|
| 159 |
+
/* ── Mobile responsive ───────────────────────────────────────────────────── */
|
| 160 |
+
@media (max-width: 768px) {
|
| 161 |
+
body { margin: 10px; }
|
| 162 |
+
h1 { font-size: 18px; flex-wrap: wrap; gap: 8px; }
|
| 163 |
+
/* FIX UI link: don't push to far right, wrap naturally */
|
| 164 |
+
h1 a { margin-left: 0 !important; }
|
| 165 |
+
.container { grid-template-columns: 1fr; }
|
| 166 |
+
.panel { height: 300px; }
|
| 167 |
+
/* Allow tables to scroll horizontally inside panels */
|
| 168 |
+
.panel > div { overflow-x: auto; }
|
| 169 |
+
.ticker-item { font-size: 11px; padding: 0 10px; }
|
| 170 |
+
#history-chart { height: 220px !important; }
|
| 171 |
+
/* Modal: full width on small screens */
|
| 172 |
+
#order-modal > div {
|
| 173 |
+
width: 90% !important;
|
| 174 |
+
min-width: unset !important;
|
| 175 |
+
}
|
| 176 |
+
}
|
| 177 |
+
|
| 178 |
+
@media (max-width: 480px) {
|
| 179 |
+
body { margin: 6px; }
|
| 180 |
+
h1 { font-size: 14px; }
|
| 181 |
+
table { font-size: 11px; }
|
| 182 |
+
th, td { padding: 3px 2px; }
|
| 183 |
+
.btn-day { font-size: 10px; padding: 3px 8px; }
|
| 184 |
+
.status { font-size: 10px; padding: 3px 8px; }
|
| 185 |
+
}
|
| 186 |
</style>
|
| 187 |
</head>
|
| 188 |
<body>
|
fix-ui-client/templates/index.html
CHANGED
|
@@ -2,6 +2,7 @@
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8">
|
|
|
|
| 5 |
<title>FIX UI Client</title>
|
| 6 |
<style>
|
| 7 |
body { font-family: Arial, sans-serif; margin: 20px; background: #f7f7f7; }
|
|
@@ -86,6 +87,20 @@
|
|
| 86 |
}
|
| 87 |
.btn-send:hover { background: #1976D2; }
|
| 88 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 89 |
/* Messages box */
|
| 90 |
.messages-box {
|
| 91 |
flex-grow: 1;
|
|
|
|
| 2 |
<html>
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 |
<title>FIX UI Client</title>
|
| 7 |
<style>
|
| 8 |
body { font-family: Arial, sans-serif; margin: 20px; background: #f7f7f7; }
|
|
|
|
| 87 |
}
|
| 88 |
.btn-send:hover { background: #1976D2; }
|
| 89 |
|
| 90 |
+
/* ── Mobile responsive ───────────────────────────────────────────────────── */
|
| 91 |
+
@media (max-width: 768px) {
|
| 92 |
+
body { margin: 10px; }
|
| 93 |
+
h1 { font-size: 18px; flex-wrap: wrap; gap: 8px; }
|
| 94 |
+
.container { grid-template-columns: 1fr; }
|
| 95 |
+
.panel { min-height: unset; }
|
| 96 |
+
}
|
| 97 |
+
|
| 98 |
+
@media (max-width: 480px) {
|
| 99 |
+
body { margin: 6px; }
|
| 100 |
+
h1 { font-size: 14px; }
|
| 101 |
+
.btn { font-size: 12px; padding: 6px 12px; }
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
/* Messages box */
|
| 105 |
.messages-box {
|
| 106 |
flex-grow: 1;
|