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

fix(schedule): align form controls at consistent heights

彭峰 13 часов назад
Родитель
Сommit
8a15d96bc5

+ 0 - 1
projects/xiaoshu-admin/src/app/pages/operations-schedule.component.html

@@ -155,7 +155,6 @@
           @if(!categoryKey()){<option value="">请选择课程标准</option>}
           @for(standard of courseStandards;track standard.key){<option [value]="standard.key">{{standard.label}} · {{standard.duration}}分钟{{studentId()?' · '+standardAvailability(standard.categoryKey):''}}</option>}
         </select>
-        <small class="standard-help">先选课型与时长,再选择该学员对应的教材。</small>
       </label>
       <label class="search-field course-step">
         <span>课程教材 <small>当前课型已开 {{categoryCourses().length}} 门,可搜索名称或 ID</small></span>

+ 63 - 13
projects/xiaoshu-admin/src/app/pages/operations-schedule.component.scss

@@ -698,9 +698,61 @@ textarea:focus-visible {
 }
 
 .form-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
   gap: 17px 14px;
 }
 
+.drawer > .form-grid > label {
+  min-width: 0;
+  align-content: start;
+  gap: 8px;
+  line-height: 18px;
+}
+
+.drawer > .form-grid > label > span:first-child {
+  min-height: 18px;
+}
+
+.drawer > .form-grid input:not([type=search]),
+.drawer > .form-grid .search-control {
+  box-sizing: border-box;
+  width: 100%;
+  height: 48px;
+  min-height: 48px;
+}
+
+.drawer > .form-grid .search-control input {
+  box-sizing: border-box;
+  height: 46px;
+  min-height: 0;
+}
+
+// The dropdown directive creates its trigger outside Angular's style scope.
+:host ::ng-deep .drawer > .form-grid button.xs-dropdown-trigger,
+:host ::ng-deep .drawer > .form-grid .date-step .picker-trigger {
+  box-sizing: border-box;
+  height: 48px;
+  min-height: 48px;
+  border-radius: 12px;
+}
+
+.drawer > .form-grid .date-step {
+  align-content: start;
+  gap: 8px;
+}
+
+:host ::ng-deep .drawer > .form-grid .date-step .field-label {
+  min-height: 18px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+@media (max-width: 700px) {
+  .drawer > .form-grid { grid-template-columns: minmax(0, 1fr); }
+}
+
 .form-grid.coach-first .date-step { order: 1; }
 .form-grid.coach-first .time-step { order: 2; }
 .form-grid.coach-first .coach-step { order: 3; }
@@ -708,20 +760,20 @@ textarea:focus-visible {
 .form-grid.coach-first .course-step { order: 6; }
 .form-grid.coach-first .type-step { order: 5; }
 .form-grid.coach-first .delivery-step { order: 7; }
-.form-grid.coach-first .recurrence-step { order: 8; }
-.form-grid.coach-first .occurrences-step { order: 9; }
-.form-grid.coach-first .reason-step { order: 10; }
+.form-grid.coach-first .recurrence-step { order: 9; }
+.form-grid.coach-first .occurrences-step { order: 10; }
+.form-grid.coach-first .reason-step { order: 11; }
 
 .form-grid.time-first .member-step { order: 1; }
 .form-grid.time-first .course-step { order: 3; }
 .form-grid.time-first .type-step { order: 2; }
 .form-grid.time-first .delivery-step { order: 4; }
-.form-grid.time-first .date-step { order: 5; }
-.form-grid.time-first .time-step { order: 6; }
-.form-grid.time-first .coach-step { order: 7; }
-.form-grid.time-first .recurrence-step { order: 8; }
-.form-grid.time-first .occurrences-step { order: 9; }
-.form-grid.time-first .reason-step { order: 10; }
+.form-grid.time-first .date-step { order: 6; }
+.form-grid.time-first .time-step { order: 7; }
+.form-grid.time-first .coach-step { order: 8; }
+.form-grid.time-first .recurrence-step { order: 9; }
+.form-grid.time-first .occurrences-step { order: 10; }
+.form-grid.time-first .reason-step { order: 11; }
 
 .form-grid label > span:first-child {
   display: flex;
@@ -1285,10 +1337,8 @@ textarea:focus-visible {
   .loading-track i { animation-duration: 2.2s; }
 }
 
-.form-grid .course-guidance { order: 7; }
-.form-grid.coach-first .course-guidance { order: 7; }
-.form-grid.time-first .course-guidance { order: 4; }
-.standard-help { color: #526b60; font-size: 12px; line-height: 1.5; }
+.form-grid.coach-first .course-guidance { order: 8; }
+.form-grid.time-first .course-guidance { order: 5; }
 .course-guidance, .enrollment-return { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px; border-radius: 12px; background: #eaf5f0; }
 .course-guidance p { flex: 1 1 230px; margin: 0; color: #36584a; font-size: 13px; line-height: 1.6; }
 .course-guidance button, .enrollment-return button { min-height: 44px; padding: 8px 14px; border: 1px solid #8bbbaa; border-radius: 8px; background: white; color: #16634f; cursor: pointer; }