fix(提交列表): 流程图右栏窄时题目名被「查看大图」「重新评分」挤成一个字
右栏不到 760 宽时这两个按钮只留图标,字放进悬停提示。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
5c997b6276
commit
0f75fd1bd0
1 file changed
+25
-1
@@ -192,15 +192,25 @@ const canRetry = computed(
|
|||||||
</button>
|
</button>
|
||||||
</span>
|
</span>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
|
<!-- 右栏窄时这两个只剩图标(字在 title 里),把宽度让给题目名 -->
|
||||||
<n-button
|
<n-button
|
||||||
v-if="shown && !renderError && shown.mermaidCode"
|
v-if="shown && !renderError && shown.mermaidCode"
|
||||||
|
class="head-btn"
|
||||||
size="small"
|
size="small"
|
||||||
|
title="查看大图"
|
||||||
@click="bigOpen = true"
|
@click="bigOpen = true"
|
||||||
>
|
>
|
||||||
<template #icon><Icon icon="ph:corners-out" /></template>
|
<template #icon><Icon icon="ph:corners-out" /></template>
|
||||||
查看大图
|
查看大图
|
||||||
</n-button>
|
</n-button>
|
||||||
<n-button v-if="teacher" size="small" :disabled="!canRetry" @click="emit('retry', row.id)">
|
<n-button
|
||||||
|
v-if="teacher"
|
||||||
|
class="head-btn"
|
||||||
|
size="small"
|
||||||
|
title="重新评分"
|
||||||
|
:disabled="!canRetry"
|
||||||
|
@click="emit('retry', row.id)"
|
||||||
|
>
|
||||||
<template #icon><Icon icon="ph:arrow-clockwise" /></template>
|
<template #icon><Icon icon="ph:arrow-clockwise" /></template>
|
||||||
重新评分
|
重新评分
|
||||||
</n-button>
|
</n-button>
|
||||||
@@ -616,6 +626,20 @@ kbd {
|
|||||||
|
|
||||||
/* 桌面右栏窄了(屏窄、浏览器放大、列表没收窄):顶行一行排不下就固定拆成两行 ——
|
/* 桌面右栏窄了(屏窄、浏览器放大、列表没收窄):顶行一行排不下就固定拆成两行 ——
|
||||||
名字和按钮一行、题目一行。按宽度定、不按内容定,翻条时高度照样不变 */
|
名字和按钮一行、题目一行。按宽度定、不按内容定,翻条时高度照样不变 */
|
||||||
|
@container pane (max-width: 760px) {
|
||||||
|
.pane:not(.narrow) .head-btn {
|
||||||
|
padding: 0 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pane:not(.narrow) .head-btn :deep(.n-button__content) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pane:not(.narrow) .head-btn :deep(.n-button__icon) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@container pane (max-width: 600px) {
|
@container pane (max-width: 600px) {
|
||||||
.pane:not(.narrow) .head {
|
.pane:not(.narrow) .head {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|||||||
Reference in new issue
Block a user