fix: increase card image height, fix title overflow, fix Twitch error 2000
- CourseCard: raise image from h-40 to h-52 (less cropping) - CourseCard: use -webkit-line-clamp inline style to hard-clip title overflow - CourseCard: reduce footer bottom padding (pb-1) - StreamEmbed: pass both current hostname and localhost as Twitch parent params to fix error 2000 in local/dev environments Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
>
|
||||
<!-- Cover image / gradient -->
|
||||
<div
|
||||
class="relative w-full h-40 bg-cover bg-center bg-no-repeat flex-shrink-0"
|
||||
class="relative w-full h-52 bg-cover bg-center bg-no-repeat flex-shrink-0"
|
||||
:style="
|
||||
course.image
|
||||
? { backgroundImage: `url('${encodeURI(course.image)}')` }
|
||||
@@ -69,8 +69,8 @@
|
||||
<!-- Title (when image present): max 2 lines -->
|
||||
<div
|
||||
v-if="course.image"
|
||||
class="font-semibold text-ink-gray-9 leading-snug mb-1 line-clamp-2 text-sm"
|
||||
style="min-height: 2.5rem"
|
||||
class="font-semibold text-ink-gray-9 leading-snug mb-1 text-sm"
|
||||
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5rem"
|
||||
>
|
||||
{{ course.title }}
|
||||
</div>
|
||||
@@ -100,7 +100,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex items-center justify-between pt-3 border-t border-outline-gray-1">
|
||||
<div class="flex items-center justify-between pt-2 pb-1 border-t border-outline-gray-1">
|
||||
<!-- Instructors -->
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="flex -space-x-1.5">
|
||||
|
||||
@@ -92,8 +92,14 @@ const embedUrl = computed(() => {
|
||||
if (!props.channel) return ''
|
||||
|
||||
if (props.platform === 'twitch') {
|
||||
const parent = window.location.hostname
|
||||
return `https://player.twitch.tv/?channel=${props.channel}&parent=${parent}&autoplay=false`
|
||||
// Twitch requires parent= for every domain the embed runs on.
|
||||
// Collect unique hostnames: current + localhost fallback
|
||||
const hosts = new Set<string>()
|
||||
hosts.add(window.location.hostname || 'localhost')
|
||||
// Always include localhost so dev server works too
|
||||
hosts.add('localhost')
|
||||
const parentParams = [...hosts].map(h => `parent=${h}`).join('&')
|
||||
return `https://player.twitch.tv/?channel=${props.channel}&${parentParams}&autoplay=false`
|
||||
}
|
||||
|
||||
if (props.platform === 'youtube') {
|
||||
|
||||
Reference in New Issue
Block a user