|
@@ -4,9 +4,12 @@ import {
|
|
|
fetchVideoDiscoveryDemand,
|
|
fetchVideoDiscoveryDemand,
|
|
|
fetchVideoDiscoveryDemands,
|
|
fetchVideoDiscoveryDemands,
|
|
|
} from '../api/videoDiscovery'
|
|
} from '../api/videoDiscovery'
|
|
|
|
|
+import DemandFeedbackDrawer from '../components/DemandFeedbackDrawer.vue'
|
|
|
import { formatPosteriorDiff } from '../types/category'
|
|
import { formatPosteriorDiff } from '../types/category'
|
|
|
import { pickDecodeUrl, videoDetailUrl } from '../utils/videoLinks'
|
|
import { pickDecodeUrl, videoDetailUrl } from '../utils/videoLinks'
|
|
|
import type {
|
|
import type {
|
|
|
|
|
+ DemandFeedbackTarget,
|
|
|
|
|
+ FeedbackSummary,
|
|
|
VideoDiscoveryDemand,
|
|
VideoDiscoveryDemand,
|
|
|
VideoDiscoveryDemandDetail,
|
|
VideoDiscoveryDemandDetail,
|
|
|
VideoDiscoveryPoint,
|
|
VideoDiscoveryPoint,
|
|
@@ -39,6 +42,7 @@ const videoSearch = ref('')
|
|
|
const pointFilter = ref<PointFilter>('all')
|
|
const pointFilter = ref<PointFilter>('all')
|
|
|
const selectedVid = ref<string | null>(null)
|
|
const selectedVid = ref<string | null>(null)
|
|
|
const copiedKey = ref<string | null>(null)
|
|
const copiedKey = ref<string | null>(null)
|
|
|
|
|
+const feedbackTarget = ref<DemandFeedbackTarget | null>(null)
|
|
|
const visibleDemandLimit = ref(80)
|
|
const visibleDemandLimit = ref(80)
|
|
|
let detailRequest = 0
|
|
let detailRequest = 0
|
|
|
let copiedTimer = 0
|
|
let copiedTimer = 0
|
|
@@ -287,6 +291,80 @@ function videoPointCount(video: VideoDiscoveryVideo, type: string): number {
|
|
|
return video.points.filter((point) => point.point_type === type).length
|
|
return video.points.filter((point) => point.point_type === type).length
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+function openDemandFeedback() {
|
|
|
|
|
+ if (!selectedDemand.value) return
|
|
|
|
|
+ feedbackTarget.value = {
|
|
|
|
|
+ target_type: 'demand',
|
|
|
|
|
+ demand_grade_id: selectedDemand.value.id,
|
|
|
|
|
+ title: selectedDemand.value.demand_name,
|
|
|
|
|
+ context: [
|
|
|
|
|
+ { label: '需求', value: selectedDemand.value.demand_name },
|
|
|
|
|
+ { label: '业务日', value: formatDate(selectedDemand.value.biz_dt) },
|
|
|
|
|
+ { label: '等级', value: selectedDemand.value.grade },
|
|
|
|
|
+ ],
|
|
|
|
|
+ feedback_summary: selectedDemand.value.feedback_summary,
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function openVideoFeedback(video: VideoDiscoveryVideo) {
|
|
|
|
|
+ if (!selectedDemand.value) return
|
|
|
|
|
+ feedbackTarget.value = {
|
|
|
|
|
+ target_type: 'video',
|
|
|
|
|
+ demand_grade_id: selectedDemand.value.id,
|
|
|
|
|
+ video_id: video.vid,
|
|
|
|
|
+ title: video.title || `视频 ${video.vid}`,
|
|
|
|
|
+ context: [
|
|
|
|
|
+ { label: '需求', value: selectedDemand.value.demand_name },
|
|
|
|
|
+ { label: '视频', value: video.title || `视频 ${video.vid}` },
|
|
|
|
|
+ { label: '视频 ID', value: video.vid },
|
|
|
|
|
+ ],
|
|
|
|
|
+ feedback_summary: video.feedback_summary,
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function openPointFeedback(point: VideoDiscoveryPoint) {
|
|
|
|
|
+ if (!selectedDemand.value || !selectedVideo.value) return
|
|
|
|
|
+ feedbackTarget.value = {
|
|
|
|
|
+ target_type: 'hit_content',
|
|
|
|
|
+ demand_grade_id: selectedDemand.value.id,
|
|
|
|
|
+ video_id: selectedVideo.value.vid,
|
|
|
|
|
+ demand_video_expansion_id: point.id,
|
|
|
|
|
+ title: point.expanded_text,
|
|
|
|
|
+ context: [
|
|
|
|
|
+ { label: '需求', value: selectedDemand.value.demand_name },
|
|
|
|
|
+ {
|
|
|
|
|
+ label: '视频',
|
|
|
|
|
+ value: selectedVideo.value.title || `视频 ${selectedVideo.value.vid}`,
|
|
|
|
|
+ },
|
|
|
|
|
+ { label: pointMeta(point.point_type).label, value: point.expanded_text },
|
|
|
|
|
+ ],
|
|
|
|
|
+ feedback_summary: point.feedback_summary,
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function applyFeedbackSummary(summary: FeedbackSummary) {
|
|
|
|
|
+ const target = feedbackTarget.value
|
|
|
|
|
+ if (!target) return
|
|
|
|
|
+ if (target.target_type === 'demand') {
|
|
|
|
|
+ const demand = demands.value.find((item) => item.id === target.demand_grade_id)
|
|
|
|
|
+ if (demand) demand.feedback_summary = summary
|
|
|
|
|
+ if (detail.value?.id === target.demand_grade_id) {
|
|
|
|
|
+ detail.value.feedback_summary = summary
|
|
|
|
|
+ }
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ const video = detail.value?.videos.find((item) => item.vid === target.video_id)
|
|
|
|
|
+ if (!video) return
|
|
|
|
|
+ if (target.target_type === 'video') {
|
|
|
|
|
+ video.feedback_summary = summary
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ const point = video.points.find(
|
|
|
|
|
+ (item) => item.id === target.demand_video_expansion_id,
|
|
|
|
|
+ )
|
|
|
|
|
+ if (point) point.feedback_summary = summary
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
async function copyText(text: string, key: string) {
|
|
async function copyText(text: string, key: string) {
|
|
|
try {
|
|
try {
|
|
|
await navigator.clipboard.writeText(text)
|
|
await navigator.clipboard.writeText(text)
|
|
@@ -480,13 +558,20 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
<span class="brief-label">当前寻找需求</span>
|
|
<span class="brief-label">当前寻找需求</span>
|
|
|
<h3>{{ selectedDemand.demand_name }}</h3>
|
|
<h3>{{ selectedDemand.demand_name }}</h3>
|
|
|
</div>
|
|
</div>
|
|
|
- <button
|
|
|
|
|
- type="button"
|
|
|
|
|
- class="copy-button"
|
|
|
|
|
- @click="copyText(selectedDemand.demand_name, 'demand')"
|
|
|
|
|
- >
|
|
|
|
|
- {{ copiedKey === 'demand' ? '已复制' : '复制需求' }}
|
|
|
|
|
- </button>
|
|
|
|
|
|
|
+ <div class="brief-actions">
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="copy-button"
|
|
|
|
|
+ @click="copyText(selectedDemand.demand_name, 'demand')"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ copiedKey === 'demand' ? '已复制' : '复制需求' }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button type="button" class="feedback-trigger" @click="openDemandFeedback">
|
|
|
|
|
+ 反馈<span v-if="selectedDemand.feedback_summary.count">
|
|
|
|
|
+ {{ selectedDemand.feedback_summary.count }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p v-if="selectedDemand.reason" class="brief-reason">
|
|
<p v-if="selectedDemand.reason" class="brief-reason">
|
|
@@ -559,59 +644,72 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="filteredVideos.length" class="video-list">
|
|
<div v-if="filteredVideos.length" class="video-list">
|
|
|
- <button
|
|
|
|
|
|
|
+ <article
|
|
|
v-for="(video, index) in filteredVideos"
|
|
v-for="(video, index) in filteredVideos"
|
|
|
:key="video.vid"
|
|
:key="video.vid"
|
|
|
- type="button"
|
|
|
|
|
class="video-card"
|
|
class="video-card"
|
|
|
:class="{ selected: video.vid === selectedVid }"
|
|
:class="{ selected: video.vid === selectedVid }"
|
|
|
- @click="selectedVid = video.vid"
|
|
|
|
|
>
|
|
>
|
|
|
- <span class="video-index">{{ String(index + 1).padStart(2, '0') }}</span>
|
|
|
|
|
- <div class="video-main">
|
|
|
|
|
- <div class="video-title-row">
|
|
|
|
|
- <strong>{{ video.title || `视频 ${video.vid}` }}</strong>
|
|
|
|
|
- <span v-if="!isSourceOnlyGrade">{{ video.point_count }} 个内容点</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- <code>{{ video.vid }}</code>
|
|
|
|
|
- <div class="video-link-row">
|
|
|
|
|
- <a
|
|
|
|
|
- v-if="decodeUrlFor(video)"
|
|
|
|
|
- :href="decodeUrlFor(video)!"
|
|
|
|
|
- class="video-link"
|
|
|
|
|
- target="_blank"
|
|
|
|
|
- rel="noopener noreferrer"
|
|
|
|
|
- @click.stop
|
|
|
|
|
- >
|
|
|
|
|
- 解构结果
|
|
|
|
|
- </a>
|
|
|
|
|
- <a
|
|
|
|
|
- :href="detailUrlFor(video)"
|
|
|
|
|
- class="video-link"
|
|
|
|
|
- target="_blank"
|
|
|
|
|
- rel="noopener noreferrer"
|
|
|
|
|
- @click.stop
|
|
|
|
|
- >
|
|
|
|
|
- 视频详情
|
|
|
|
|
- </a>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div v-if="!isSourceOnlyGrade" class="video-point-badges">
|
|
|
|
|
- <span v-if="videoPointCount(video, 'purpose')" class="point-badge purpose">
|
|
|
|
|
- ◎ 目的 {{ videoPointCount(video, 'purpose') }}
|
|
|
|
|
- </span>
|
|
|
|
|
- <span v-if="videoPointCount(video, 'key')" class="point-badge key">
|
|
|
|
|
- ◆ 关键 {{ videoPointCount(video, 'key') }}
|
|
|
|
|
- </span>
|
|
|
|
|
- <span
|
|
|
|
|
- v-if="videoPointCount(video, 'inspiration')"
|
|
|
|
|
- class="point-badge inspiration"
|
|
|
|
|
- >
|
|
|
|
|
- ✦ 灵感 {{ videoPointCount(video, 'inspiration') }}
|
|
|
|
|
- </span>
|
|
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="video-select"
|
|
|
|
|
+ @click="selectedVid = video.vid"
|
|
|
|
|
+ >
|
|
|
|
|
+ <span class="video-index">{{ String(index + 1).padStart(2, '0') }}</span>
|
|
|
|
|
+ <div class="video-main">
|
|
|
|
|
+ <div class="video-title-row">
|
|
|
|
|
+ <strong>{{ video.title || `视频 ${video.vid}` }}</strong>
|
|
|
|
|
+ <span v-if="!isSourceOnlyGrade">{{ video.point_count }} 个内容点</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <code>{{ video.vid }}</code>
|
|
|
|
|
+ <div class="video-link-row">
|
|
|
|
|
+ <a
|
|
|
|
|
+ v-if="decodeUrlFor(video)"
|
|
|
|
|
+ :href="decodeUrlFor(video)!"
|
|
|
|
|
+ class="video-link"
|
|
|
|
|
+ target="_blank"
|
|
|
|
|
+ rel="noopener noreferrer"
|
|
|
|
|
+ @click.stop
|
|
|
|
|
+ >
|
|
|
|
|
+ 解构结果
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <a
|
|
|
|
|
+ :href="detailUrlFor(video)"
|
|
|
|
|
+ class="video-link"
|
|
|
|
|
+ target="_blank"
|
|
|
|
|
+ rel="noopener noreferrer"
|
|
|
|
|
+ @click.stop
|
|
|
|
|
+ >
|
|
|
|
|
+ 视频详情
|
|
|
|
|
+ </a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-if="!isSourceOnlyGrade" class="video-point-badges">
|
|
|
|
|
+ <span v-if="videoPointCount(video, 'purpose')" class="point-badge purpose">
|
|
|
|
|
+ ◎ 目的 {{ videoPointCount(video, 'purpose') }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span v-if="videoPointCount(video, 'key')" class="point-badge key">
|
|
|
|
|
+ ◆ 关键 {{ videoPointCount(video, 'key') }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ <span
|
|
|
|
|
+ v-if="videoPointCount(video, 'inspiration')"
|
|
|
|
|
+ class="point-badge inspiration"
|
|
|
|
|
+ >
|
|
|
|
|
+ ✦ 灵感 {{ videoPointCount(video, 'inspiration') }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
- <span class="video-arrow">›</span>
|
|
|
|
|
- </button>
|
|
|
|
|
|
|
+ <span class="video-arrow">›</span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="feedback-trigger video-feedback"
|
|
|
|
|
+ @click="openVideoFeedback(video)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 反馈<span v-if="video.feedback_summary.count">
|
|
|
|
|
+ {{ video.feedback_summary.count }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </article>
|
|
|
</div>
|
|
</div>
|
|
|
<div v-else class="empty-state">
|
|
<div v-else class="empty-state">
|
|
|
<span class="empty-mark">○</span>
|
|
<span class="empty-mark">○</span>
|
|
@@ -701,7 +799,7 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
<span class="point-count">{{ group.points.length }}</span>
|
|
<span class="point-count">{{ group.points.length }}</span>
|
|
|
</header>
|
|
</header>
|
|
|
|
|
|
|
|
- <article v-for="(point, index) in group.points" :key="index" class="point-card">
|
|
|
|
|
|
|
+ <article v-for="(point, index) in group.points" :key="point.id" class="point-card">
|
|
|
<div class="point-number">{{ index + 1 }}</div>
|
|
<div class="point-number">{{ index + 1 }}</div>
|
|
|
<div>
|
|
<div>
|
|
|
<strong>{{ point.expanded_text }}</strong>
|
|
<strong>{{ point.expanded_text }}</strong>
|
|
@@ -710,19 +808,31 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
<span>命中原因</span>{{ point.reason }}
|
|
<span>命中原因</span>{{ point.reason }}
|
|
|
</p>
|
|
</p>
|
|
|
</div>
|
|
</div>
|
|
|
- <button
|
|
|
|
|
- type="button"
|
|
|
|
|
- title="复制内容点"
|
|
|
|
|
- :aria-label="`复制内容点:${point.expanded_text}`"
|
|
|
|
|
- @click="
|
|
|
|
|
- copyText(
|
|
|
|
|
- point.expanded_text,
|
|
|
|
|
- `${group.type}-${index}`,
|
|
|
|
|
- )
|
|
|
|
|
- "
|
|
|
|
|
- >
|
|
|
|
|
- {{ copiedKey === `${group.type}-${index}` ? '✓' : '+' }}
|
|
|
|
|
- </button>
|
|
|
|
|
|
|
+ <div class="point-actions">
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="point-copy"
|
|
|
|
|
+ title="复制内容点"
|
|
|
|
|
+ :aria-label="`复制内容点:${point.expanded_text}`"
|
|
|
|
|
+ @click="
|
|
|
|
|
+ copyText(
|
|
|
|
|
+ point.expanded_text,
|
|
|
|
|
+ `${group.type}-${point.id}`,
|
|
|
|
|
+ )
|
|
|
|
|
+ "
|
|
|
|
|
+ >
|
|
|
|
|
+ {{ copiedKey === `${group.type}-${point.id}` ? '✓' : '+' }}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ <button
|
|
|
|
|
+ type="button"
|
|
|
|
|
+ class="feedback-trigger point-feedback"
|
|
|
|
|
+ @click="openPointFeedback(point)"
|
|
|
|
|
+ >
|
|
|
|
|
+ 反馈<span v-if="point.feedback_summary.count">
|
|
|
|
|
+ {{ point.feedback_summary.count }}
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </div>
|
|
|
</article>
|
|
</article>
|
|
|
</section>
|
|
</section>
|
|
|
</div>
|
|
</div>
|
|
@@ -744,6 +854,13 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
</div>
|
|
</div>
|
|
|
</aside>
|
|
</aside>
|
|
|
</main>
|
|
</main>
|
|
|
|
|
+
|
|
|
|
|
+ <DemandFeedbackDrawer
|
|
|
|
|
+ :open="feedbackTarget !== null"
|
|
|
|
|
+ :target="feedbackTarget"
|
|
|
|
|
+ @close="feedbackTarget = null"
|
|
|
|
|
+ @submitted="applyFeedbackSummary"
|
|
|
|
|
+ />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -1264,7 +1381,6 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
|
|
|
|
|
.copy-button {
|
|
.copy-button {
|
|
|
height: 29px;
|
|
height: 29px;
|
|
|
- margin-left: auto;
|
|
|
|
|
padding: 0 9px;
|
|
padding: 0 9px;
|
|
|
flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
|
border: 1px solid #cbd6cd;
|
|
border: 1px solid #cbd6cd;
|
|
@@ -1276,6 +1392,48 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.brief-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 6px;
|
|
|
|
|
+ margin-left: auto;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.feedback-trigger {
|
|
|
|
|
+ min-height: 29px;
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ gap: 4px;
|
|
|
|
|
+ padding: 0 9px;
|
|
|
|
|
+ border: 1px solid #b9cbbd;
|
|
|
|
|
+ border-radius: 7px;
|
|
|
|
|
+ background: #edf4ef;
|
|
|
|
|
+ color: #315f47;
|
|
|
|
|
+ font-size: 10px;
|
|
|
|
|
+ font-weight: 800;
|
|
|
|
|
+ white-space: nowrap;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.feedback-trigger:hover {
|
|
|
|
|
+ border-color: #6d977d;
|
|
|
|
|
+ background: #e3eee6;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.feedback-trigger span {
|
|
|
|
|
+ min-width: 15px;
|
|
|
|
|
+ height: 15px;
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ padding: 0 4px;
|
|
|
|
|
+ border-radius: 999px;
|
|
|
|
|
+ background: #315f47;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.brief-reason {
|
|
.brief-reason {
|
|
|
display: -webkit-box;
|
|
display: -webkit-box;
|
|
|
margin: 10px 0;
|
|
margin: 10px 0;
|
|
@@ -1370,21 +1528,40 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
|
|
|
|
|
.video-card {
|
|
.video-card {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- display: grid;
|
|
|
|
|
- grid-template-columns: 28px minmax(0, 1fr) 16px;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
- gap: 10px;
|
|
|
|
|
- padding: 11px 10px;
|
|
|
|
|
|
|
+ gap: 4px;
|
|
|
|
|
+ padding: 3px 5px 3px 3px;
|
|
|
border: 1px solid transparent;
|
|
border: 1px solid transparent;
|
|
|
border-bottom-color: #ebefeb;
|
|
border-bottom-color: #ebefeb;
|
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
|
background: transparent;
|
|
background: transparent;
|
|
|
color: inherit;
|
|
color: inherit;
|
|
|
text-align: left;
|
|
text-align: left;
|
|
|
- cursor: pointer;
|
|
|
|
|
transition: 0.15s ease;
|
|
transition: 0.15s ease;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.video-select {
|
|
|
|
|
+ min-width: 0;
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 28px minmax(0, 1fr) 16px;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ gap: 10px;
|
|
|
|
|
+ padding: 8px 5px 8px 7px;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ color: inherit;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.video-feedback {
|
|
|
|
|
+ min-height: 28px;
|
|
|
|
|
+ flex: 0 0 auto;
|
|
|
|
|
+ padding: 0 7px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.video-card:hover {
|
|
.video-card:hover {
|
|
|
border-color: #dfe7e0;
|
|
border-color: #dfe7e0;
|
|
|
background: #fafbfa;
|
|
background: #fafbfa;
|
|
@@ -1676,7 +1853,7 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
|
|
|
|
|
.point-card {
|
|
.point-card {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
- grid-template-columns: 20px minmax(0, 1fr) 23px;
|
|
|
|
|
|
|
+ grid-template-columns: 20px minmax(0, 1fr) auto;
|
|
|
align-items: start;
|
|
align-items: start;
|
|
|
gap: 8px;
|
|
gap: 8px;
|
|
|
padding: 9px 7px;
|
|
padding: 9px 7px;
|
|
@@ -1719,7 +1896,14 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.point-card button {
|
|
|
|
|
|
|
+.point-actions {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: stretch;
|
|
|
|
|
+ gap: 5px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.point-card .point-copy {
|
|
|
width: 22px;
|
|
width: 22px;
|
|
|
height: 22px;
|
|
height: 22px;
|
|
|
display: grid;
|
|
display: grid;
|
|
@@ -1732,6 +1916,19 @@ function detailUrlFor(video: VideoDiscoveryVideo): string {
|
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.point-card .point-feedback {
|
|
|
|
|
+ min-height: 23px;
|
|
|
|
|
+ padding: 0 6px;
|
|
|
|
|
+ font-size: 9px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.point-card .point-feedback span {
|
|
|
|
|
+ min-width: 13px;
|
|
|
|
|
+ height: 13px;
|
|
|
|
|
+ padding: 0 3px;
|
|
|
|
|
+ font-size: 7px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.page-state,
|
|
.page-state,
|
|
|
.inline-state,
|
|
.inline-state,
|
|
|
.empty-state {
|
|
.empty-state {
|