Просмотр исходного кода

style(admin): align vocabulary actions at top right

彭峰 1 месяц назад
Родитель
Сommit
c0e1df2f2b
1 измененных файлов с 3 добавлено и 2 удалено
  1. 3 2
      projects/xiaoshu-admin/src/app/pages/operations-vocabulary.component.scss

+ 3 - 2
projects/xiaoshu-admin/src/app/pages/operations-vocabulary.component.scss

@@ -1,4 +1,4 @@
-:host{display:block}.page-header{gap:20px}.file-button{position:relative;cursor:pointer}.file-button input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
+:host{display:block}.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 13px;white-space:nowrap}.file-button{position:relative;cursor:pointer}.file-button input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
 .vocabulary-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px}.vocabulary-main{min-width:0}
 .vocabulary-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:18px}.vocabulary-main{min-width:0}
 .tree-card{overflow:hidden;max-height:calc(100vh - 190px);border:1px solid #e2e9e6;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(29,62,51,.05)}
 .tree-card{overflow:hidden;max-height:calc(100vh - 190px);border:1px solid #e2e9e6;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(29,62,51,.05)}
 .tree-card>header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid #edf1ef}.tree-card>header div{display:flex;align-items:center;gap:8px}
 .tree-card>header{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid #edf1ef}.tree-card>header div{display:flex;align-items:center;gap:8px}
@@ -12,4 +12,5 @@
 .import-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.import-summary article{display:grid;gap:4px;padding:13px;border-radius:13px;background:#f3f6f5}.import-summary article.green{background:#eaf6f1}.import-summary article.blue{background:#edf4fb}.import-summary article.red{background:#fff0ed}.import-summary span{color:#76857f;font-size:11px}.import-summary strong{font-size:23px}
 .import-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.import-summary article{display:grid;gap:4px;padding:13px;border-radius:13px;background:#f3f6f5}.import-summary article.green{background:#eaf6f1}.import-summary article.blue{background:#edf4fb}.import-summary article.red{background:#fff0ed}.import-summary span{color:#76857f;font-size:11px}.import-summary strong{font-size:23px}
 .preview-table{overflow:auto;max-height:430px;border:1px solid #e2e9e6;border-radius:13px}.preview-table>div{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:10px 12px;border-bottom:1px solid #edf1ef}.preview-table b{color:#29715b;font-size:11px}.preview-table small{grid-column:1/-1;color:#a33c2c}.error-text{color:#b94136!important}.import-guide{display:grid;place-items:center;gap:8px;min-height:260px;color:#6d7c77;text-align:center}.muted-text{color:#81908b;font-size:12px}
 .preview-table{overflow:auto;max-height:430px;border:1px solid #e2e9e6;border-radius:13px}.preview-table>div{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:10px 12px;border-bottom:1px solid #edf1ef}.preview-table b{color:#29715b;font-size:11px}.preview-table small{grid-column:1/-1;color:#a33c2c}.error-text{color:#b94136!important}.import-guide{display:grid;place-items:center;gap:8px;min-height:260px;color:#6d7c77;text-align:center}.muted-text{color:#81908b;font-size:12px}
 @media(max-width:1050px){.vocabulary-layout{grid-template-columns:250px minmax(0,1fr)}}
 @media(max-width:1050px){.vocabulary-layout{grid-template-columns:250px minmax(0,1fr)}}
-@media(max-width:760px){.header-actions{width:100%}.vocabulary-layout{grid-template-columns:1fr}.tree-card{max-height:400px}.tree-list{max-height:220px}.selection-summary{padding:13px 15px}.toolbar>*{flex:1 1 145px}.toolbar .grow{flex-basis:100%}.pagination{flex-wrap:wrap;gap:10px}.pagination label{order:3;width:100%}.import-summary{grid-template-columns:repeat(2,1fr)}.media-input{align-items:stretch;flex-direction:column}}
+@media(max-width:900px){.page-header{grid-template-columns:1fr}.page-header .header-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;padding-top:0}.header-actions .ui-button{width:100%}}
+@media(max-width:760px){.vocabulary-layout{grid-template-columns:1fr}.tree-card{max-height:400px}.tree-list{max-height:220px}.selection-summary{padding:13px 15px}.toolbar>*{flex:1 1 145px}.toolbar .grow{flex-basis:100%}.pagination{flex-wrap:wrap;gap:10px}.pagination label{order:3;width:100%}.import-summary{grid-template-columns:repeat(2,1fr)}.media-input{align-items:stretch;flex-direction:column}}