fix:Adjust media layout, sizing, and mobile sheet
Render media container only when media exists and remove the no-media placeholder. Constrain images and videos with a max-height of 600px (height:auto) and set images to display:block. In preview, use object-fit: contain for media images and reduce mobile sheet height from 80vh to 50vh.
This commit is contained in:
@@ -101,8 +101,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Media -->
|
<!-- Media -->
|
||||||
<div class="post-media">
|
{#if media && media.length > 0}
|
||||||
{#if media && media.length > 0}
|
<div class="post-media">
|
||||||
{#if media[0].type === 'photo'}
|
{#if media[0].type === 'photo'}
|
||||||
<img
|
<img
|
||||||
src={media[0].thumbnailUrl || media[0].url}
|
src={media[0].thumbnailUrl || media[0].url}
|
||||||
@@ -120,21 +120,8 @@
|
|||||||
class="media-video"
|
class="media-video"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
</div>
|
||||||
<div class="no-media">
|
{/if}
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
|
||||||
<path
|
|
||||||
d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="2"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
/>
|
|
||||||
<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Post Actions -->
|
<!-- Post Actions -->
|
||||||
<div class="post-actions">
|
<div class="post-actions">
|
||||||
@@ -258,33 +245,23 @@
|
|||||||
/* Media */
|
/* Media */
|
||||||
.post-media {
|
.post-media {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
aspect-ratio: 16/10;
|
max-height: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: hsl(var(--muted));
|
background: hsl(var(--muted));
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-image {
|
.media-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: auto;
|
||||||
|
max-height: 600px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.media-video) {
|
:global(.media-video) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: auto;
|
||||||
}
|
max-height: 600px;
|
||||||
|
|
||||||
.no-media {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: hsl(var(--muted-foreground));
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Post Actions */
|
/* Post Actions */
|
||||||
|
|||||||
@@ -278,7 +278,7 @@
|
|||||||
/* Mobile styles (bottom sheet) */
|
/* Mobile styles (bottom sheet) */
|
||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
:global(.sheet-content) {
|
:global(.sheet-content) {
|
||||||
height: 80vh !important;
|
height: 50vh !important;
|
||||||
border-radius: 16px 16px 0 0 !important;
|
border-radius: 16px 16px 0 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -414,7 +414,7 @@
|
|||||||
.media-image {
|
.media-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.media-video) {
|
:global(.media-video) {
|
||||||
|
|||||||
Reference in New Issue
Block a user