Forráskód Böngészése

fix(mobile): evenly distribute schedule action buttons

彭峰 1 hete
szülő
commit
0a65bc29f3

+ 1 - 1
projects/xiaoshu-mobile/src/app/features/course-center/course-center-page.component.html

@@ -16,7 +16,7 @@
 
     <section class="schedule-band">
       <header><lucide-icon [img]="isCoach ? icons.GraduationCap : icons.CalendarDays" [size]="21" /><h2>{{ isHistory ? '销课记录' : isCoach ? '陪练排课' : '伴学列表' }}</h2><span>{{ (loading()||error())&&!schedules().length ? '—' : isHistory || hasScheduleCalendar ? visibleSchedules().length + ' / ' + schedules().length : schedules().length }} 节</span></header>
-      <nav class="range-tabs" aria-label="课表操作"><button type="button" (click)="load(true)" [disabled]="loading()">刷新课表</button><button type="button" (click)="clearScheduleFilters()">清除筛选</button>@if (nextScheduleDate() && !isHistory) { <button type="button" (click)="showNextSchedule()">最近一节 · {{nextScheduleDate()}}</button> }</nav>
+      <nav class="range-tabs schedule-actions" aria-label="课表操作"><button type="button" (click)="load(true)" [disabled]="loading()">刷新课表</button><button type="button" (click)="clearScheduleFilters()">清除筛选</button>@if (nextScheduleDate() && !isHistory) { <button type="button" (click)="showNextSchedule()">最近一节 · {{nextScheduleDate()}}</button> }</nav>
       @if (isHistory) {
         <section class="history-filter-panel" aria-label="销课记录筛选">
           <div class="history-filter-grid">

+ 2 - 0
projects/xiaoshu-mobile/src/app/features/course-center/course-center-page.component.scss

@@ -24,6 +24,8 @@ header span { color: var(--ink-soft); font-size: 12px; }
 .schedule-toolbar:has(.student-filter) { grid-template-columns: minmax(0, 1fr) minmax(150px, 190px); }
 .range-tabs { display: grid; height: 48px; grid-template-columns: repeat(4, 1fr); padding: 3px; background: rgb(255 255 255 / 82%); border: 1px solid var(--line); border-radius: 10px; gap: 3px; }
 .range-tabs button { min-height: 40px; padding: 6px 4px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 8px; font-size: 12px; }
+.range-tabs.schedule-actions { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
+.schedule-actions button { min-width: 0; text-align: center; }
 .range-tabs button.active { color: white; background: var(--brand-strong); box-shadow: 0 4px 12px rgb(20 53 45 / 16%); font-weight: 700; }
 .student-filter { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 4px; }
 .student-filter > span { color: var(--ink-soft); font-size: 11px; line-height: 13px; }