Parcourir la source

style(admin): rebalance store page header and filters

彭峰 il y a 1 mois
Parent
commit
23b719006f

+ 44 - 0
projects/xiaoshu-admin/src/app/pages/operations-stores.component.scss

@@ -1,5 +1,34 @@
 :host { --control-height: 42px; }
 
+.page-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 16px 24px;
+  margin-bottom: 18px;
+}
+.page-header > div:first-child { min-width: 0; }
+.page-header p { margin: 0 0 8px; }
+.page-header h1 { margin: 0 0 8px; }
+.page-header > div > span { display: block; }
+.page-header .header-actions {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 22px;
+}
+.header-actions .ui-button { min-height: 40px; padding: 9px 14px; }
+
+.toolbar {
+  display: grid;
+  grid-template-columns: minmax(320px, 2fr) minmax(180px, .55fr) minmax(96px, auto) minmax(96px, auto);
+  align-items: end;
+}
+.toolbar .grow { min-width: 0; }
+.toolbar label:not(.grow) { min-width: 180px; }
+.toolbar > .ui-button { width: 100%; }
+
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -37,7 +66,17 @@
 .read-only { color: #71817b; font-size: 12px; }
 
 @media (max-width: 1180px) { .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 1000px) {
+  .toolbar { grid-template-columns: minmax(220px, 1fr) minmax(160px, .55fr) auto auto; }
+  .toolbar .grow { min-width: 0; }
+  .toolbar label:not(.grow) { min-width: 160px; }
+}
 @media (max-width: 700px) {
+  .page-header { grid-template-columns: 1fr; gap: 12px; }
+  .page-header .header-actions { padding-top: 0; }
+  .toolbar { grid-template-columns: minmax(0, 1fr) auto auto; }
+  .toolbar .grow { grid-column: 1 / -1; }
+  .toolbar label:not(.grow) { min-width: 0; }
   .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
   .summary-grid article { padding: 15px; border-radius: 14px; }
   .summary-grid article:first-child { grid-column: 1 / -1; }
@@ -46,3 +85,8 @@
   .store-editor footer .ui-button { flex: 1 1 auto; }
   .store-editor footer .push-left { flex-basis: 100%; margin-right: 0; }
 }
+
+@media (max-width: 460px) {
+  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .toolbar label:not(.grow) { grid-column: 1 / -1; }
+}