fix: keep preview parameters on one row

This commit is contained in:
chenkailing
2026-04-11 21:12:06 +08:00
parent 9bdb18d833
commit c893dd7095
2 changed files with 18 additions and 21 deletions

View File

@@ -547,28 +547,29 @@ a:focus {
} }
.preview-options { .preview-options {
display: flex; display: grid;
align-items: center; grid-template-columns: 1fr;
align-items: stretch;
gap: 12px; gap: 12px;
margin-bottom: 14px; margin-bottom: 14px;
overflow-x: auto; overflow: visible;
padding-bottom: 4px; padding-bottom: 0;
} }
.preview-grid { .preview-grid {
display: flex; display: grid;
flex-wrap: nowrap; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px; gap: 12px;
margin-bottom: 0; margin-bottom: 0;
overflow: visible; overflow: visible;
padding-bottom: 0; padding-bottom: 0;
flex: 1 1 auto; min-width: 0;
min-width: 620px; width: 100%;
} }
.preview-grid .form-control { .preview-grid .form-control {
flex: 1 1 0; width: 100%;
min-width: 150px; min-width: 0;
} }
.preview-switches { .preview-switches {
@@ -578,7 +579,7 @@ a:focus {
margin-bottom: 0; margin-bottom: 0;
overflow: visible; overflow: visible;
padding-bottom: 0; padding-bottom: 0;
flex: 0 0 auto; width: 100%;
} }
.preview-switches label { .preview-switches label {
@@ -1264,6 +1265,10 @@ a:focus {
.archive-grid { .archive-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.preview-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@@ -1304,16 +1309,8 @@ a:focus {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.preview-grid {
flex-wrap: wrap;
min-width: 0;
overflow-x: visible;
}
.preview-options { .preview-options {
display: block; grid-template-columns: 1fr;
overflow-x: visible;
padding-bottom: 0;
} }
.preview-url { .preview-url {

View File

@@ -12,7 +12,7 @@
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/> <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
<link rel="stylesheet" href="css/theme.css"/> <link rel="stylesheet" href="css/theme.css"/>
<link rel="stylesheet" href="css/main-pages.css?v=v1-polish-20260411-3"/> <link rel="stylesheet" href="css/main-pages.css?v=v1-polish-20260411-5"/>
<script type="text/javascript" src="js/jquery-3.6.1.min.js"></script> <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.min.js"></script> <script type="text/javascript" src="js/jquery.form.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>