Explorar o código

fix(admin): widen desktop schedule controls

彭峰 hai 2 meses
pai
achega
4cb81a55f0

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

@@ -13,7 +13,7 @@
     <button type="button" [class.active]="view()==='list'" (click)="view.set('list');load()">列表</button>
   </div>
   <button type="button" aria-label="上一时间段" (click)="move(view()==='week'?-7:-1)"><lucide-icon [img]="icons.ChevronLeft" [size]="17" /></button>
-  <label><span>日期</span><input type="date" [ngModel]="date()" (ngModelChange)="date.set($event);load()" /></label>
+  <label class="date-filter"><span>日期</span><input type="date" [ngModel]="date()" (ngModelChange)="date.set($event);load()" /></label>
   <button type="button" aria-label="下一时间段" (click)="move(view()==='week'?7:1)"><lucide-icon [img]="icons.ChevronRight" [size]="17" /></button>
   <label class="coach-filter"><span>陪练筛选</span><select [ngModel]="coachFilter()" (ngModelChange)="coachFilter.set(+$event);load()"><option [ngValue]="0">全部陪练</option>@for(coach of data()?.coaches||[];track coach.userId){<option [ngValue]="coach.userId">{{coach.displayName}}</option>}</select></label>
   @if(data()?.dataDateTo){<button class="latest-data" type="button" (click)="showLatest()">最近有数据:{{data()?.dataDateTo}}</button>}

+ 21 - 0
src/app/admin/pages/operations-schedule.component.scss

@@ -96,6 +96,27 @@ textarea:focus-visible {
   white-space: nowrap;
 }
 
+@media (min-width: 1001px) {
+  .toolbar > .segmented {
+    width: 210px;
+  }
+
+  .toolbar > .segmented button {
+    flex: 1 1 0;
+    padding-inline: 14px;
+    white-space: nowrap;
+  }
+
+  .toolbar .date-filter {
+    flex: 0 0 220px;
+    width: 220px;
+  }
+
+  .toolbar .date-filter input {
+    width: 100%;
+  }
+}
+
 .toolbar .segmented,
 .drawer > .segmented {
   border-radius: 13px;