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 -->
|
<!-- Cover image / gradient -->
|
||||||
<div
|
<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="
|
:style="
|
||||||
course.image
|
course.image
|
||||||
? { backgroundImage: `url('${encodeURI(course.image)}')` }
|
? { backgroundImage: `url('${encodeURI(course.image)}')` }
|
||||||
@@ -69,8 +69,8 @@
|
|||||||
<!-- Title (when image present): max 2 lines -->
|
<!-- Title (when image present): max 2 lines -->
|
||||||
<div
|
<div
|
||||||
v-if="course.image"
|
v-if="course.image"
|
||||||
class="font-semibold text-ink-gray-9 leading-snug mb-1 line-clamp-2 text-sm"
|
class="font-semibold text-ink-gray-9 leading-snug mb-1 text-sm"
|
||||||
style="min-height: 2.5rem"
|
style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5rem"
|
||||||
>
|
>
|
||||||
{{ course.title }}
|
{{ course.title }}
|
||||||
</div>
|
</div>
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Footer -->
|
<!-- 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 -->
|
<!-- Instructors -->
|
||||||
<div class="flex items-center gap-1.5">
|
<div class="flex items-center gap-1.5">
|
||||||
<div class="flex -space-x-1.5">
|
<div class="flex -space-x-1.5">
|
||||||
|
|||||||
@@ -92,8 +92,14 @@ const embedUrl = computed(() => {
|
|||||||
if (!props.channel) return ''
|
if (!props.channel) return ''
|
||||||
|
|
||||||
if (props.platform === 'twitch') {
|
if (props.platform === 'twitch') {
|
||||||
const parent = window.location.hostname
|
// Twitch requires parent= for every domain the embed runs on.
|
||||||
return `https://player.twitch.tv/?channel=${props.channel}&parent=${parent}&autoplay=false`
|
// 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') {
|
if (props.platform === 'youtube') {
|
||||||
|
|||||||
Reference in New Issue
Block a user