chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update Timeline.vue component, make carousels fixed height

Browse source
This commit is contained in:
Daniel Supernault 2018-12-09 21:02:52 -07:00
parent b7f4de8eaa
commit d32beba376
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 53 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
resources/assets/js/components/Timeline.vue
View file

@ -30,73 +30,64 @@
</div> </div>
</div> </div>
<div v-if="status.pf_type === 'photo'"> <div class="postPresenterContainer">
<div v-if="status.sensitive == true"> <div v-if="status.pf_type === 'photo'" class="w-100">
<details class="details-animated"> <div v-if="status.sensitive == true">
<summary> <details class="details-animated">
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p> <summary>
<p class="font-weight-light">(click to show)</p> <p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
</summary> <p class="font-weight-light">(click to show)</p>
<a class="max-hide-overflow" :href="status.url"> </summary>
<a class="max-hide-overflow" :href="status.url">
<img class="card-img-top" :src="status.media_attachments[0].url">
</a>
</details>
</div>
<div v-else>
<div>
<img class="card-img-top" :src="status.media_attachments[0].url"> <img class="card-img-top" :src="status.media_attachments[0].url">
</a> </div>
</details>
</div>
<div v-else>
<div>
<img class="card-img-top" :src="status.media_attachments[0].url">
</div> </div>
</div> </div>
</div>
<div v-else-if="status.pf_type === 'video'"> <div v-else-if="status.pf_type === 'video'" class="w-100">
<div v-if="status.sensitive == true"> <div v-if="status.sensitive == true">
<details class="details-animated"> <details class="details-animated">
<summary> <summary>
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p> <p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p>
<p class="font-weight-light">(click to show)</p> <p class="font-weight-light">(click to show)</p>
</summary> </summary>
<a class="max-hide-overflow" :href="status.url"> <div class="embed-responsive embed-responsive-16by9">
<img class="card-img-top" :src="status.media_attachments[0].url"> <video class="video" preload="none" controls loop>
</a> <source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
</details> </video>
<details class="details-animated"> </div>
<summary> </details>
<p class="mb-0 lead font-weight-bold">{{ status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media'}}</p> </div>
<p class="font-weight-light">(click to show)</p> <div v-else class="embed-responsive embed-responsive-16by9">
</summary>
<div class="embed-responsive embed-responsive-16by9">
<video class="video" preload="none" controls loop>
<source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
</video>
</div>
</details>
</div>
<div v-else>
<div class="embed-responsive embed-responsive-16by9">
<video class="video" preload="none" controls loop> <video class="video" preload="none" controls loop>
<source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime"> <source :src="status.media_attachments[0].url" :type="status.media_attachments[0].mime">
</video> </video>
</div> </div>
</div> </div>
</div>
<div v-else-if="status.pf_type === 'photo:album'"> <div v-else-if="status.pf_type === 'photo:album'">
<b-carousel id="carousel1" <b-carousel id="carousel1"
style="text-shadow: 1px 1px 2px #333;" style="text-shadow: 1px 1px 2px #333;"
controls controls
indicators indicators
background="#ffffff" background="#ffffff"
:interval="4000" :interval="4000"
> >
<b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id"> <b-carousel-slide v-for="(img, index) in status.media_attachments" :key="img.id">
<img slot="img" class="d-block img-fluid w-100" :src="img.url" :alt="img.description"> <img slot="img" class="d-block img-fluid w-100" :src="img.url" :alt="img.description">
</b-carousel-slide> </b-carousel-slide>
</b-carousel> </b-carousel>
</div> </div>
<div v-else> <div v-else class="w-100">
<p class="text-center p-0">No preview for this post</p> <p class="text-center p-0 font-weight-bold text-white">Error: Problem rendering preview.</p>
</div>
</div> </div>
<div class="card-body"> <div class="card-body">
@ -187,6 +178,12 @@
</template> </template>
<style type="text/css"> <style type="text/css">
.postPresenterContainer {
display: flex;
align-items: center;
background: #000;
min-height: 600px;
}
.cursor-pointer { .cursor-pointer {
cursor: pointer; cursor: pointer;
} }