Fix admin alignment and refine UI

static/admin-v020.js

@@ -221,16 +221,40 @@
     const startMinutes = segments[0].startMinutes;
     const endMinutes = segments[segments.length - 1].endMinutes;
     const totalMinutes = Math.max(endMinutes - startMinutes, 1);
-    const height = Math.max(Math.round(totalMinutes * getEditorPixelsPerMinute()), 980);
+    const contentHeight = Math.max(Math.round(totalMinutes * getEditorPixelsPerMinute()), 980);
+    const dropzoneTop = contentHeight + 20;
+    const height = dropzoneTop + 96;
 
     scheduleEditorAxis.innerHTML = "";
     scheduleEditorTrack.innerHTML = "";
     scheduleEditorAxis.style.height = `${height}px`;
     scheduleEditorTrack.style.height = `${height}px`;
 
-    buildScheduleAxisMarks().forEach((minute, index, marks) => {
+    const marks = buildScheduleAxisMarks();
+    const visibleMarks = [];
+    marks.forEach((minute, index) => {
       const top = Math.round((minute - startMinutes) * getEditorPixelsPerMinute());
+      const line = document.createElement("div");
+      line.className = "schedule-editor-line";
+      line.style.top = `${top}px`;
+      scheduleEditorTrack.appendChild(line);
+    });
+
+    marks.forEach((minute, index) => {
+      const top = Math.round((minute - startMinutes) * getEditorPixelsPerMinute());
+      const isEdge = index === 0 || index === marks.length - 1;
+      const previous = visibleMarks[visibleMarks.length - 1];
+
+      if (isEdge && previous && top - previous.top < 30) {
+        visibleMarks.pop();
+      }
 
+      if (!previous || isEdge || top - (visibleMarks[visibleMarks.length - 1]?.top ?? -Infinity) >= 30) {
+        visibleMarks.push({ minute, top, index });
+      }
+    });
+
+    visibleMarks.forEach(({ minute, top, index }) => {
       const tick = document.createElement("div");
       tick.className = "schedule-editor-tick";
       if (index === 0) {
@@ -241,18 +265,16 @@
       tick.style.top = `${top}px`;
       tick.textContent = minutesToTime(minute);
       scheduleEditorAxis.appendChild(tick);
-
-      const line = document.createElement("div");
-      line.className = "schedule-editor-line";
-      line.style.top = `${top}px`;
-      scheduleEditorTrack.appendChild(line);
     });
 
     segments.forEach((segment, index) => {
       const block = document.createElement("article");
+      const height = Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), 36);
       block.className = `schedule-editor-segment ${segment.kind}`;
       block.style.top = `${Math.round((segment.startMinutes - startMinutes) * getEditorPixelsPerMinute())}px`;
-      block.style.height = `${Math.max(Math.round(segment.durationMinutes * getEditorPixelsPerMinute()), 36)}px`;
+      block.style.height = `${height}px`;
+      block.classList.toggle("is-compact", height < 88);
+      block.classList.toggle("is-tight", height < 56);
       block.innerHTML = `
         <div class="schedule-editor-segment-copy">
           <strong>${segment.label}</strong>
@@ -265,6 +287,8 @@
       scheduleEditorTrack.appendChild(block);
     });
 
+    scheduleEditorDropzone.style.top = `${dropzoneTop}px`;
+    scheduleEditorDropzone.style.bottom = "auto";
     scheduleEditorTrack.appendChild(scheduleEditorDropzone);
     if (scheduleSegmentCount) {
       scheduleSegmentCount.textContent = `${segments.length} 段`;

static/v020.css

@@ -978,12 +978,29 @@ body.planner-interacting .page-planner {
   width: min(1480px, calc(100% - 28px));
 }
 
+.admin-layout-v2 .admin-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 18px 24px;
+}
+
+.admin-layout-v2 .admin-hero > div:first-child {
+  max-width: 760px;
+}
+
+.admin-layout-v2 .action-group {
+  justify-self: end;
+  align-self: start;
+}
+
 .admin-page-nav {
   display: inline-flex;
   gap: 8px;
   padding: 6px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.05);
+  justify-self: end;
 }
 
 .admin-page-tab {
@@ -1057,6 +1074,7 @@ body.planner-interacting .page-planner {
 
 .course-row-head {
   align-items: start;
+  margin-bottom: 2px;
 }
 
 .course-row-actions {
@@ -1072,11 +1090,26 @@ body.planner-interacting .page-planner {
 }
 
 .course-card {
-  padding: 16px 18px;
+  padding: 10px 12px;
+  border-radius: 20px;
+}
+
+.course-card h2 {
+  font-size: 1.12rem;
 }
 
 .course-card .admin-card-copy {
-  margin: 4px 0 0;
+  margin: 1px 0 0;
+  font-size: 0.78rem;
+  line-height: 1.18;
+}
+
+.course-row-actions .secondary-button,
+.course-row-actions .danger-button,
+.course-row-actions .task-count {
+  min-height: 34px;
+  padding: 0 10px;
+  font-size: 0.82rem;
 }
 
 .admin-schedule-grid {
@@ -1218,6 +1251,50 @@ body.planner-interacting .page-planner {
   right: 14px;
 }
 
+.schedule-editor-segment.is-compact .schedule-editor-segment-copy {
+  padding: 9px 12px 15px;
+  gap: 4px;
+}
+
+.schedule-editor-segment.is-compact .schedule-editor-segment-copy strong {
+  font-size: 0.88rem;
+}
+
+.schedule-editor-segment.is-compact .schedule-editor-segment-kind {
+  font-size: 0.72rem;
+}
+
+.schedule-editor-segment.is-compact .schedule-editor-delete {
+  top: 10px;
+  bottom: auto;
+}
+
+.schedule-editor-segment.is-tight .schedule-editor-segment-copy {
+  padding: 7px 10px 12px;
+  gap: 2px;
+}
+
+.schedule-editor-segment.is-tight .schedule-editor-segment-copy strong {
+  font-size: 0.8rem;
+}
+
+.schedule-editor-segment.is-tight .schedule-editor-segment-copy span {
+  font-size: 0.7rem;
+}
+
+.schedule-editor-segment.is-tight .schedule-editor-segment-kind,
+.schedule-editor-segment.is-tight .schedule-editor-delete {
+  display: none;
+}
+
+.schedule-editor-segment.break.is-tight .schedule-editor-segment-copy span {
+  display: none;
+}
+
+.schedule-editor-segment.break.is-tight .schedule-editor-segment-copy strong {
+  display: none;
+}
+
 .schedule-editor-delete {
   position: absolute;
   right: 14px;
@@ -1313,6 +1390,15 @@ body.planner-interacting .page-planner {
     flex-wrap: wrap;
   }
 
+  .admin-layout-v2 .admin-hero {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-layout-v2 .action-group,
+  .admin-page-nav {
+    justify-self: stretch;
+  }
+
   .page-viewport,
   .page-track,
   .page-slide,