|
|
@@ -1,129 +1,987 @@
|
|
|
<template>
|
|
|
-<div class="container">
|
|
|
- <div v-if="loading" class="row">
|
|
|
- <div class="col-12 mt-5 pt-5">
|
|
|
- <div class="text-center">
|
|
|
- <div class="spinner-border" role="status">
|
|
|
- <span class="sr-only">Loading...</span>
|
|
|
+<div
|
|
|
+ class="story-viewer-component container mt-0 mt-md-5 bg-black">
|
|
|
+ <button type="button" class="d-none d-md-block btn btn-link fixed-top" style="left: auto;right:0;" @click="backToFeed">
|
|
|
+ <i class="fal fa-times-circle fa-2x text-lighter"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <div v-if="!viewWarning" class="row d-flex justify-content-center align-items-center">
|
|
|
+ <div class="d-none d-md-block col-md-1 cursor-pointer text-center" @click="prev">
|
|
|
+ <div v-if="storyIndex > 0">
|
|
|
+ <i class="fas fa-chevron-circle-left text-muted fa-2x"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!loading" class="col-12 col-md-6 rounded-lg">
|
|
|
+
|
|
|
+ <div v-if="activeReactionEmoji" style="position: absolute;z-index: 999;" class="w-100 h-100 d-flex justify-content-center align-items-center">
|
|
|
+ <div class="d-flex justify-content-center align-items-center rounded-pill shadow-lg" style="width: 120px;height: 30px;font-size:13px;background-color: rgba(0, 0, 0, 0.6);">
|
|
|
+ <span class="text-lighter">Reaction sent</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="activeReply" style="position: absolute;z-index: 999;" class="w-100 h-100 d-flex justify-content-center align-items-center">
|
|
|
+ <div class="d-flex justify-content-center align-items-center rounded-pill shadow-lg" style="width: 120px;height: 30px;font-size:13px;background-color: rgba(0, 0, 0, 0.6);">
|
|
|
+ <span class="text-lighter">Reply sent</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <transition name="fade">
|
|
|
+ <div v-if="stories[storyIndex].type == 'photo'" class="media-slot rounded-lg" :key="'msl:'+storyIndex" :style="{ background: 'url(' + stories[storyIndex].url + ')' }"></div>
|
|
|
+
|
|
|
+ <div v-else-if="stories[storyIndex].type == 'poll'" class="media-slot rounded-lg" :key="'msl:'+storyIndex" :style="{ background: 'linear-gradient(to right, #F27121, #E94057, #8A2387)' }"></div>
|
|
|
+
|
|
|
+ <video
|
|
|
+ v-else-if="stories[storyIndex].type == 'video'"
|
|
|
+ :key="'plyr'+stories[storyIndex].id"
|
|
|
+ id="playr"
|
|
|
+ class="media-slot rounded-lg"
|
|
|
+ style="object-fit: contain;"
|
|
|
+ :muted="muted"
|
|
|
+ loop
|
|
|
+ autoplay
|
|
|
+ no-controls>
|
|
|
+ <source :src="stories[storyIndex].url" type="video/mp4">
|
|
|
+ </video>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <div class="story-viewer-component-card card bg-transparent border-0 shadow-none d-flex justify-content-center">
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="px-0 top-overlay">
|
|
|
+ <div class="pt-4 pt-md-3 px-4 d-flex">
|
|
|
+ <div style="width: 100%;height:5px;" class="d-none bg-muted"></div>
|
|
|
+ <div
|
|
|
+ v-for="(story, index) in stories"
|
|
|
+ :key="'sp:s'+index"
|
|
|
+ v-on:click="gotoSlide(index)"
|
|
|
+ class="w-100 cursor-pointer"
|
|
|
+ :class="{ 'mr-2': index != stories.length - 1 }">
|
|
|
+ <div
|
|
|
+ class="progress w-100"
|
|
|
+ style="z-index:3;height: 4px;"
|
|
|
+ :style="{opacity: story.progress == 0 ? 0.7 : 0.8}">
|
|
|
+ <div
|
|
|
+ :key="'sp:si'+index"
|
|
|
+ class="progress-bar bg-light"
|
|
|
+ role="progressbar"
|
|
|
+ :aria-valuenow="story.progress"
|
|
|
+ aria-valuemin="0"
|
|
|
+ aria-valuemax="100"
|
|
|
+ :style="{
|
|
|
+ width: story.progress +'%',
|
|
|
+ transition: 'none !important'
|
|
|
+ }">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pt-4 px-4 media align-items-center">
|
|
|
+ <img :src="avatar" width="32" height="32" class="rounded-circle mr-2" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'">
|
|
|
+ <div class="media-body d-flex justify-content-between align-items-center">
|
|
|
+ <div class="user-select-none d-flex align-items-center">
|
|
|
+ <span v-if="account.local" class="text-white font-weight-bold mr-2">
|
|
|
+ {{username}}
|
|
|
+ </span>
|
|
|
+ <span v-else class="text-white font-weight-bold mr-3 text-truncate" style="max-width:200px;">
|
|
|
+ <span class="d-block mb-n2">{{account.username}}</span>
|
|
|
+ <span class="small">{{account.domain}}</span>
|
|
|
+ </span>
|
|
|
+ <span class="text-white font-weight-light" style="font-size: 14px;">{{timeago(stories[storyIndex].created_at)}}</span>
|
|
|
+ <span v-if="stories[storyIndex].type == 'poll'">
|
|
|
+ <span class="btn btn-outline-light font-weight-light btn-sm px-1 rounded py-0 ml-2">POLL</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button class="btn btn-link btn-sm text-white mr-0 px-1" @click.prevent="pause">
|
|
|
+ <i :class="[ paused ? 'fa-play' : 'fa-pause' ]" class="fas fa-lg"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button v-if="stories[storyIndex].type == 'video'" class="btn btn-link text-white px-2" @click="toggleMute">
|
|
|
+ <i :class="[ muted ? 'fa-volume-mute' : 'fa-volume-up' ]" class="fas fa-lg"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button @click="showMenu" class="btn btn-link text-white px-1">
|
|
|
+ <i class="fas fa-ellipsis-h fa-lg"></i>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button class="d-inline-block d-md-none btn btn-link text-white pl-1 pr-0" @click="backToFeed">
|
|
|
+ <i class="far fa-times-circle fa-lg"></i>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div @click="pause" style="height: 70vh;">
|
|
|
+ <div v-if="stories[storyIndex].type == 'poll'" class="w-100 h-100 d-flex justify-content-center align-items-center">
|
|
|
+ <div>
|
|
|
+ <p
|
|
|
+ class="text-white pb-5 text-break font-weight-lighter"
|
|
|
+ :class="[stories[storyIndex].question.length < 60 ? 'h1' : 'h3']">
|
|
|
+ {{stories[storyIndex].question}}
|
|
|
+ </p>
|
|
|
+ <div class="text-center mt-3">
|
|
|
+ <div v-for="(option, index) in stories[storyIndex].options" class="mb-3">
|
|
|
+ <button
|
|
|
+ class="btn border px-4 py-3 text-uppercase btn-block"
|
|
|
+ :class="[
|
|
|
+ option.length < 14 ? 'btn-lg': '',
|
|
|
+ index == stories[storyIndex].voted_index ? 'btn-light' : 'btn-outline-light'
|
|
|
+ ]"
|
|
|
+ style="min-width: 300px;"
|
|
|
+ :disabled="stories[storyIndex].voted || owner"
|
|
|
+ @click="selectPollOption(index)">
|
|
|
+ <span
|
|
|
+ class="text-break"
|
|
|
+ :class="[
|
|
|
+ index == stories[storyIndex].voted_index ? 'option-red' : ''
|
|
|
+ ]">
|
|
|
+ {{ option }}
|
|
|
+ </span>
|
|
|
+ </button>
|
|
|
+ <p
|
|
|
+ v-if="owner && pollResults.length"
|
|
|
+ class="small text-left mt-1 text-light">
|
|
|
+ {{ pollPercent(index) }}% - {{ pollResults[index] }} {{ pollResults[index] == 1 ? 'vote' : 'votes' }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="owner && !showingPollResults && pollResults.length == 0" class="mt-3 text-center">
|
|
|
+ <button class="btn btn-light font-weight-bold" @click="showPollResults" :disabled="loadingPollResults">
|
|
|
+ {{ loadingPollResults ? 'Loading...' : 'View Results' }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!owner && stories[storyIndex] && stories[storyIndex].can_reply" class="card-footer bg-transparent border-0">
|
|
|
+ <div class="px-0 bottom-overlay">
|
|
|
+ <div class="px-3 form-group d-flex">
|
|
|
+ <input class="form-control bg-transparent border border-white rounded-pill text-white" :placeholder="'Reply to ' + username + '...'" v-model="composeText">
|
|
|
+ <button class="btn btn-outline-light rounded-pill ml-2" @click="comment">
|
|
|
+ SEND
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="d-none d-md-block col-md-1 cursor-pointer text-center">
|
|
|
+ <div v-if="(storyIndex + 1) < stories.length" @click="next">
|
|
|
+ <i class="fas fa-chevron-circle-right text-muted fa-2x"></i>
|
|
|
+ </div>
|
|
|
+ <div v-if="(storyIndex + 1) == stories.length && owner" @click="addToStory">
|
|
|
+ <i class="fal fa-plus-circle text-muted fa-2x"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="loading" class="col-12 col-md-6 rounded-lg">
|
|
|
+ <div class="card border-0 shadow-none d-flex justify-content-center" style="background: #000;height: 90vh;">
|
|
|
+ <div class="card-body d-flex justify-content-center align-items-center">
|
|
|
+ <div class="spinner-border text-lighter" role="status">
|
|
|
+ <span class="sr-only">Loading...</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="stories.length != 0">
|
|
|
- <div id="storyContainer" class="d-none m-3"></div>
|
|
|
+
|
|
|
+ <div v-else class="row d-flex justify-content-center align-items-center">
|
|
|
+ <div v-if="!loading" class="col-12 col-md-6 rounded-lg p-0">
|
|
|
+ <div v-if="stories[storyIndex].type == 'photo'" class="media-slot rounded-lg" :key="'msl:'+storyIndex" :style="{ backgroundImage: 'url(' + stories[storyIndex].url + ')' }"></div>
|
|
|
+ <div class="story-viewer-component-card card bg-transparent border-0 shadow-none d-flex justify-content-center" style="backdrop-filter: blur(40px) brightness(0.3); -webkit-backdrop-filter: blur(10px);">
|
|
|
+ <div class="card-body">
|
|
|
+ <div class="w-100 h-100 d-flex justify-content-center align-items-center">
|
|
|
+ <div class="text-center">
|
|
|
+ <img :src="profile.avatar" width="120" height="120" class="rounded-circle border mb-3 shadow">
|
|
|
+ <p class="lead text-lighter mb-1">View as <span class="text-white">{{profile.username}}</span></p>
|
|
|
+ <p class="text-lighter font-weight-lighter px-md-5 py-3">
|
|
|
+ <span class="text-white font-weight-bold">{{account.acct}}</span> will be able to see that you viewed their story.
|
|
|
+ </p>
|
|
|
+ <button class="btn btn-outline-lighter rounded-pill py-1 font-weight-bold" @click="confirmViewStory">View Story</button>
|
|
|
+ <button class="btn btn-outline-lighter rounded-pill py-1 font-weight-bold" @click="cancelViewStory">Cancel</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modal-stack">
|
|
|
+ <b-modal ref="ctxMenu"
|
|
|
+ id="ctx-modal"
|
|
|
+ hide-header
|
|
|
+ hide-footer
|
|
|
+ centered
|
|
|
+ rounded
|
|
|
+ size="sm"
|
|
|
+ body-class="list-group-flush p-0 rounded">
|
|
|
+ <div class="list-group text-center">
|
|
|
+ <div v-if="owner" class="list-group-item rounded py-3">
|
|
|
+ <div class="d-flex justify-content-between align-items-center font-weight-light">
|
|
|
+ <span>Expires in {{timeahead(stories[storyIndex].expires_at)}}</span>
|
|
|
+ <span>
|
|
|
+ <span class="btn btn-light btn-sm font-weight-bold">
|
|
|
+ <i class="fas fa-eye"></i>
|
|
|
+ {{ stories[storyIndex].view_count }}
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!owner && stories[storyIndex] && stories[storyIndex].can_react" class="list-group-item rounded d-flex justify-content-between">
|
|
|
+ <button
|
|
|
+ v-for="e in reactionEmoji"
|
|
|
+ class="btn btn-light rounded-pill py-1 px-2"
|
|
|
+ style="font-size: 20px;"
|
|
|
+ @click="react(e)">
|
|
|
+ {{ e }}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div v-if="owner" class="list-group-item rounded cursor-pointer" @click="fetchViewers">Viewers</div>
|
|
|
+ <div v-if="!owner" class="list-group-item rounded cursor-pointer" @click="ctxMenuReport">Report</div>
|
|
|
+ <div v-if="owner" class="list-group-item rounded cursor-pointer" @click="deleteStory">Delete</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer text-muted" @click="closeCtxMenu">Close</div>
|
|
|
+ </div>
|
|
|
+ </b-modal>
|
|
|
+
|
|
|
+ <b-modal ref="viewersModal"
|
|
|
+ id="viewers"
|
|
|
+ title="Viewers"
|
|
|
+ header-class="border-0"
|
|
|
+ hide-footer
|
|
|
+ centered
|
|
|
+ rounded
|
|
|
+ scrollable
|
|
|
+ lazy
|
|
|
+ size="sm"
|
|
|
+ body-class="list-group-flush p-0 rounded">
|
|
|
+ <div class="list-group" style="max-height: 40vh;">
|
|
|
+ <div v-for="(profile, index) in viewers" class="list-group-item">
|
|
|
+ <div class="media align-items-center">
|
|
|
+ <img :src="profile.avatar" width="32" height="32" class="rounded-circle border mr-2">
|
|
|
+ <div v-if="profile.local" class="media-body user-select-none">
|
|
|
+ <p class="font-weight-bold mb-0">{{profile.username}}</p>
|
|
|
+ </div>
|
|
|
+ <div v-else class="media-body user-select-none">
|
|
|
+ <p class="font-weight-bold mb-0">{{profile.username}}</p>
|
|
|
+ <p class="mb-0 small mt-n1 text-muted">{{profile.acct.split('@')[1]}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="viewers.length == 0" class="list-group-item text-center text-dark font-weight-light py-5">
|
|
|
+ No viewers yet
|
|
|
+ </div>
|
|
|
+ <div v-if="viewersHasMore" class="list-group-item text-center border-bottom-0">
|
|
|
+ <button class="btn btn-light font-weight-bold border rounded-pill" @click="viewersLoadMore">Load More</button>
|
|
|
+ </div>
|
|
|
+ <div class="list-group-item text-center rounded cursor-pointer text-muted" @click="closeViewersModal">Close</div>
|
|
|
+ </div>
|
|
|
+ </b-modal>
|
|
|
+
|
|
|
+ <b-modal ref="ctxReport"
|
|
|
+ id="ctx-report"
|
|
|
+ hide-header
|
|
|
+ hide-footer
|
|
|
+ centered
|
|
|
+ rounded
|
|
|
+ size="sm"
|
|
|
+ body-class="list-group-flush p-0 rounded">
|
|
|
+ <p class="py-2 px-3 mb-0">
|
|
|
+ <div class="text-center font-weight-bold text-danger">Report</div>
|
|
|
+ <div class="small text-center text-muted">Select one of the following options</div>
|
|
|
+ </p>
|
|
|
+ <div class="list-group text-center">
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('spam')">Spam</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('sensitive')">Sensitive Content</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('abusive')">Abusive or Harmful</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="openCtxReportOtherMenu()">Other</div>
|
|
|
+ <!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportMenuGoBack()">Go Back</div> -->
|
|
|
+ <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportMenuGoBack()">Cancel</div>
|
|
|
+ </div>
|
|
|
+ </b-modal>
|
|
|
+
|
|
|
+ <b-modal ref="ctxReportOther"
|
|
|
+ id="ctx-report-other"
|
|
|
+ hide-header
|
|
|
+ hide-footer
|
|
|
+ centered
|
|
|
+ rounded
|
|
|
+ size="sm"
|
|
|
+ body-class="list-group-flush p-0 rounded">
|
|
|
+ <p class="py-2 px-3 mb-0">
|
|
|
+ <div class="text-center font-weight-bold text-danger">Report</div>
|
|
|
+ <div class="small text-center text-muted">Select one of the following options</div>
|
|
|
+ </p>
|
|
|
+ <div class="list-group text-center">
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('underage')">Underage Account</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('copyright')">Copyright Infringement</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('impersonation')">Impersonation</div>
|
|
|
+ <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('scam')">Scam or Fraud</div>
|
|
|
+ <!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('terrorism')">Terrorism Related</div> -->
|
|
|
+ <!-- <div class="list-group-item rounded cursor-pointer font-weight-bold" @click="sendReport('other')">Other or Not listed</div> -->
|
|
|
+ <!-- <div class="list-group-item rounded cursor-pointer" @click="ctxReportOtherMenuGoBack()">Go Back</div> -->
|
|
|
+ <div class="list-group-item rounded cursor-pointer text-lighter" @click="ctxReportOtherMenuGoBack()">Cancel</div>
|
|
|
+ </div>
|
|
|
+ </b-modal>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
- import 'zuck.js/dist/zuck.css';
|
|
|
- import 'zuck.js/dist/skins/snapgram.css';
|
|
|
- window.Zuck = require('zuck.js');
|
|
|
-
|
|
|
export default {
|
|
|
- props: ['pid'],
|
|
|
+ props: {
|
|
|
+ pid: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+
|
|
|
+ selfProfile: {
|
|
|
+ type: Object
|
|
|
+ },
|
|
|
+
|
|
|
+ redirectUrl: {
|
|
|
+ type: String,
|
|
|
+ default: '/'
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
loading: true,
|
|
|
- stories: {},
|
|
|
- preloadIndex: null
|
|
|
+ profile: null,
|
|
|
+ account: {
|
|
|
+ local: false
|
|
|
+ },
|
|
|
+ owner: false,
|
|
|
+ stories: [],
|
|
|
+ username: 'loading...',
|
|
|
+ avatar: '/storage/avatars/default.jpg',
|
|
|
+ storyIndex: 0,
|
|
|
+ progress: 0,
|
|
|
+ constInterval: 383,
|
|
|
+ progressInterval: undefined,
|
|
|
+ composeText: null,
|
|
|
+ paused: false,
|
|
|
+ muted: true,
|
|
|
+ reactionEmoji: [ "❤️", "🔥", "💯", "😂", "😎", "👀" ],
|
|
|
+ activeReactionEmoji: false,
|
|
|
+ activeReply: false,
|
|
|
+ showProgress: false,
|
|
|
+ redirectOnEnd: '/',
|
|
|
+ viewerSid: false,
|
|
|
+ viewerPage: 1,
|
|
|
+ loadingViewers: false,
|
|
|
+ viewersHasMore: true,
|
|
|
+ viewers: [],
|
|
|
+ viewWarning: false,
|
|
|
+ showingPollResults: false,
|
|
|
+ loadingPollResults: false,
|
|
|
+ pollResults: [],
|
|
|
+ pollTotalVotes: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ composeText: function(val) {
|
|
|
+ if(val.length == 0) {
|
|
|
+ if(this.paused) {
|
|
|
+ this.pause();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if(!this.paused) {
|
|
|
+ this.pause();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ event.currentTarget.focus();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
beforeMount() {
|
|
|
- this.fetchStories();
|
|
|
+ this.redirectOnEnd = this.redirectUrl;
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ let u = new URLSearchParams(window.location.search);
|
|
|
+ if(u.has('t')) {
|
|
|
+ switch(u.get('t')) {
|
|
|
+ case '1':
|
|
|
+ this.redirectOnEnd = '/';
|
|
|
+ break;
|
|
|
+
|
|
|
+ case '2':
|
|
|
+ this.redirectOnEnd = '/timeline/public';
|
|
|
+ break;
|
|
|
+
|
|
|
+ case '3':
|
|
|
+ this.redirectOnEnd = '/timeline/network';
|
|
|
+ break;
|
|
|
+
|
|
|
+ case '4':
|
|
|
+ this.redirectOnEnd = '/' + window.location.pathname.split('/').slice(-1).pop();
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.viewWarning = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!this.selfProfile || !this.selfProfile.hasOwnProperty('avatar')) {
|
|
|
+ axios.get('/api/pixelfed/v1/accounts/verify_credentials')
|
|
|
+ .then(res => {
|
|
|
+ this.profile = res.data;
|
|
|
+ this.fetchStories();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.profile = this.selfProfile;
|
|
|
+ }
|
|
|
+ let el = document.querySelector('body');
|
|
|
+ el.style.width = '100%';
|
|
|
+ el.style.height = '100vh !important';
|
|
|
+ el.style.overflow = 'hidden';
|
|
|
+ el.style.backgroundColor = '#262626';
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ init() {
|
|
|
+ clearInterval(this.progressInterval);
|
|
|
+ this.loading = false;
|
|
|
+ this.constInterval = Math.ceil(this.stories[this.storyIndex].duration * 38.3);
|
|
|
+ this.progressInterval = setInterval(() => {
|
|
|
+ this.do();
|
|
|
+ }, this.constInterval);
|
|
|
+ },
|
|
|
+
|
|
|
+ do() {
|
|
|
+ this.loading = false;
|
|
|
+ if(this.stories[this.storyIndex].progress != 100) {
|
|
|
+ this.stories[this.storyIndex].progress = this.stories[this.storyIndex].progress + 4;
|
|
|
+ } else {
|
|
|
+ clearInterval(this.progressInterval);
|
|
|
+ this.next();
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ prev() {
|
|
|
+ if(this.storyIndex == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pollResults = [];
|
|
|
+ this.progress = 0;
|
|
|
+ this.gotoSlide(this.storyIndex - 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ next() {
|
|
|
+ axios.post('/api/web/stories/v1/viewed', {
|
|
|
+ id: this.stories[this.storyIndex].id
|
|
|
+ });
|
|
|
+ this.stories[this.storyIndex].progress = 100;
|
|
|
+ if(this.storyIndex == this.stories.length - 1) {
|
|
|
+ if(this.composeText && this.composeText.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ window.location.href = this.redirectOnEnd;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.pollResults = [];
|
|
|
+ this.progress = 0;
|
|
|
+ this.muted = true;
|
|
|
+ this.storyIndex = this.storyIndex + 1;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+
|
|
|
+ pause() {
|
|
|
+ if(event) {
|
|
|
+ event.currentTarget.blur();
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.paused) {
|
|
|
+ this.paused = false;
|
|
|
+ if(this.stories[this.storyIndex].type == 'video') {
|
|
|
+ let el = document.getElementById('playr');
|
|
|
+ el.play();
|
|
|
+ }
|
|
|
+ this.init();
|
|
|
+ } else {
|
|
|
+ clearInterval(this.progressInterval);
|
|
|
+ if(this.stories[this.storyIndex].type == 'video') {
|
|
|
+ let el = document.getElementById('playr');
|
|
|
+ el.pause();
|
|
|
+ }
|
|
|
+ this.paused = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ toggleMute() {
|
|
|
+ if(event) {
|
|
|
+ event.currentTarget.blur();
|
|
|
+ }
|
|
|
+ if(this.stories[this.storyIndex].type == 'video') {
|
|
|
+ this.muted = !this.muted;
|
|
|
+ let el = document.getElementById('playr');
|
|
|
+ el.muted = this.muted;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ gotoSlide(index) {
|
|
|
+ this.paused = false;
|
|
|
+ clearInterval(this.progressInterval);
|
|
|
+ this.progressInterval = null;
|
|
|
+ this.stories = this.stories.map(function(s,k) {
|
|
|
+ if(k < index) {
|
|
|
+ s.progress = 100;
|
|
|
+ } else {
|
|
|
+ s.progress = 0;
|
|
|
+ }
|
|
|
+ return s;
|
|
|
+ });
|
|
|
+ this.storyIndex = index;
|
|
|
+ this.stories[index].progress = 0;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+
|
|
|
+ showMenu() {
|
|
|
+ if(!this.paused) {
|
|
|
+ this.pause();
|
|
|
+ }
|
|
|
+ event.currentTarget.blur();
|
|
|
+ this.$refs.ctxMenu.show();
|
|
|
+ },
|
|
|
+
|
|
|
+ react(emoji) {
|
|
|
+ this.$refs.ctxMenu.hide();
|
|
|
+ this.activeReactionEmoji = true;
|
|
|
+
|
|
|
+ axios.post('/api/web/stories/v1/react', {
|
|
|
+ sid: this.stories[this.storyIndex].id,
|
|
|
+ reaction: emoji
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.activeReactionEmoji = false;
|
|
|
+ this.pause();
|
|
|
+ }, 2000);
|
|
|
+ }).catch(err => {
|
|
|
+ this.activeReactionEmoji = false;
|
|
|
+ swal('Error', 'An error occured when attempting to react to this story. Please try again later.', 'error');
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ comment() {
|
|
|
+ if(this.composeText.length < 2) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(!this.paused) {
|
|
|
+ this.pause();
|
|
|
+ }
|
|
|
+ this.activeReply = true;
|
|
|
+ axios.post('/api/web/stories/v1/comment', {
|
|
|
+ sid: this.stories[this.storyIndex].id,
|
|
|
+ caption: this.composeText
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.composeText = null;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.activeReply = false;
|
|
|
+ this.pause();
|
|
|
+ }, 2000);
|
|
|
+ }).catch(err => {
|
|
|
+ this.activeReply = false;
|
|
|
+ swal('Error', 'An error occured when attempting to reply to this story. Please try again later.', 'error');
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ closeCtxMenu() {
|
|
|
+ this.$refs.ctxMenu.hide();
|
|
|
+ },
|
|
|
+
|
|
|
+ backToFeed() {
|
|
|
+ if(this.composeText) {
|
|
|
+ swal('Are you sure you want to leave without sending this reply?')
|
|
|
+ .then(confirm => {
|
|
|
+ if(confirm) {
|
|
|
+ window.location.href = this.redirectOnEnd;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ window.location.href = this.redirectOnEnd;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ timeago(ts) {
|
|
|
+ return App.util.format.timeAgo(ts);
|
|
|
+ },
|
|
|
+
|
|
|
+ timeahead(ts) {
|
|
|
+ let d = new Date(ts);
|
|
|
+ return App.util.format.timeAhead(d.toUTCString());
|
|
|
+ },
|
|
|
+
|
|
|
fetchStories() {
|
|
|
let self = this;
|
|
|
- axios.get('/api/stories/v0/profile/' + this.pid)
|
|
|
+ axios.get('/api/web/stories/v1/profile/' + this.pid)
|
|
|
.then(res => {
|
|
|
- self.stories = res.data;
|
|
|
if(res.data.length == 0) {
|
|
|
- window.location.href = '/';
|
|
|
+ window.location.href = this.redirectOnEnd;
|
|
|
+ }
|
|
|
+ self.account = res.data[0].account;
|
|
|
+ if(self.account.local == false) {
|
|
|
+ self.account.domain = self.account.acct.split('@')[1]
|
|
|
+ }
|
|
|
+ self.stories = res.data[0].nodes.map(function(i, k) {
|
|
|
+ let r = {
|
|
|
+ id: i.id,
|
|
|
+ created_at: i.created_at,
|
|
|
+ expires_at: i.expires_at,
|
|
|
+ progress: i.progress == 100 && k == res.data[0].nodes.length - 1 ? 0 : i.progress,
|
|
|
+ view_count: i.view_count,
|
|
|
+ url: i.src,
|
|
|
+ type: i.type,
|
|
|
+ duration: i.duration,
|
|
|
+ can_reply: i.can_reply,
|
|
|
+ can_react: i.can_react,
|
|
|
+ }
|
|
|
+
|
|
|
+ if(r.type == 'poll') {
|
|
|
+ r.question = i.question;
|
|
|
+ r.options = i.options;
|
|
|
+ r.voted = i.voted;
|
|
|
+ r.voted_index = i.voted_index;
|
|
|
+ }
|
|
|
+
|
|
|
+ return r;
|
|
|
+ });
|
|
|
+ self.username = res.data[0].account.username;
|
|
|
+ self.avatar = res.data[0].account.avatar;
|
|
|
+ if(self.profile.id == res.data[0].account.id) {
|
|
|
+ this.viewWarning = false;
|
|
|
+ }
|
|
|
+ if(this.viewWarning) {
|
|
|
+ this.loading = false;
|
|
|
return;
|
|
|
}
|
|
|
- self.preloadImages();
|
|
|
+ let seen = res.data[0].nodes.filter(function(i, k) {
|
|
|
+ return i.seen == true;
|
|
|
+ }).map(function(i, k) {
|
|
|
+ return k;
|
|
|
+ });
|
|
|
+ if(seen.length && this.pid != this.profile.id) {
|
|
|
+ let n = (seen[seen.length - 1] + 1) == self.stories.length ? seen[seen.length - 1] : (seen[seen.length - 1] + 1);
|
|
|
+ self.gotoSlide(n);
|
|
|
+ }
|
|
|
+ if(this.pid == this.profile.id) {
|
|
|
+ self.gotoSlide(self.stories.length - 1);
|
|
|
+ }
|
|
|
+ self.showProgress = true;
|
|
|
+ if(self.profile.id == self.account.id) {
|
|
|
+ self.owner = true;
|
|
|
+ }
|
|
|
+ if(res.data.length == 0) {
|
|
|
+ window.location.href = this.redirectOnEnd;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.init();
|
|
|
})
|
|
|
.catch(err => {
|
|
|
- console.log(err);
|
|
|
- // window.location.href = '/';
|
|
|
return;
|
|
|
});
|
|
|
},
|
|
|
|
|
|
- preloadImages() {
|
|
|
+ fetchViewers() {
|
|
|
+ this.closeCtxMenu();
|
|
|
+ this.$refs.viewersModal.show();
|
|
|
+
|
|
|
+ if(this.stories[this.storyIndex].id == this.viewerSid) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.loadingViewers = true;
|
|
|
+
|
|
|
+ axios.get('/api/web/stories/v1/viewers', {
|
|
|
+ params: {
|
|
|
+ sid: this.stories[this.storyIndex].id
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.viewerSid = this.stories[this.storyIndex].id;
|
|
|
+ this.viewers = res.data;
|
|
|
+ this.loadingViewers = false;
|
|
|
+ this.viewerPage = 2;
|
|
|
+ if(this.viewers.length == 10) {
|
|
|
+ this.viewersHasMore = true;
|
|
|
+ } else {
|
|
|
+ this.viewersHasMore = false;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ swal('Cannot load viewers', 'Cannot load viewers of this story, please try again later.', 'error');
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ viewersLoadMore() {
|
|
|
+ axios.get('/api/web/stories/v1/viewers', {
|
|
|
+ params: {
|
|
|
+ sid: this.stories[this.storyIndex].id,
|
|
|
+ page: this.viewerPage
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if(!res.data || res.data.length == 0) {
|
|
|
+ this.viewersHasMore = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(res.data.length != 10) {
|
|
|
+ this.viewersHasMore = false;
|
|
|
+ }
|
|
|
+ this.viewers.push(...res.data);
|
|
|
+ this.viewerPage++;
|
|
|
+ }).catch(err => {
|
|
|
+ swal('Cannot load viewers', 'Cannot load viewers of this story, please try again later.', 'error');
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ closeViewersModal() {
|
|
|
+ this.$refs.viewersModal.hide();
|
|
|
+ },
|
|
|
+
|
|
|
+ deleteStory() {
|
|
|
+ this.closeCtxMenu();
|
|
|
+ if(!window.confirm('Are you sure you want to delete this story?')) {
|
|
|
+ this.pause();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ axios.delete('/api/web/stories/v1/delete/' + this.stories[this.storyIndex].id)
|
|
|
+ .then(res => {
|
|
|
+ let i = this.storyIndex;
|
|
|
+ let c = this.stories.length;
|
|
|
+
|
|
|
+ if(c == 1) {
|
|
|
+ window.location.href = '/';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ window.location.reload();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ selectPollOption(index) {
|
|
|
+ if(!this.paused) {
|
|
|
+ this.pause();
|
|
|
+ }
|
|
|
+ axios.post('/i/stories/viewed', {
|
|
|
+ id: this.stories[this.storyIndex].id
|
|
|
+ });
|
|
|
+ axios.post('/api/web/stories/v1/poll/vote', {
|
|
|
+ sid: this.stories[this.storyIndex].id,
|
|
|
+ ci: index
|
|
|
+ }).then(res => {
|
|
|
+ this.stories[this.storyIndex].voted = true;
|
|
|
+ this.stories[this.storyIndex].voted_index = index;
|
|
|
+ this.next();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ ctxMenuReport() {
|
|
|
+ this.$refs.ctxMenu.hide();
|
|
|
+ this.$refs.ctxReport.show();
|
|
|
+ },
|
|
|
+
|
|
|
+ openCtxReportOtherMenu() {
|
|
|
+ this.closeCtxMenu();
|
|
|
+ this.$refs.ctxReport.hide();
|
|
|
+ this.$refs.ctxReportOther.show();
|
|
|
+ },
|
|
|
+
|
|
|
+ ctxReportMenuGoBack() {
|
|
|
+ this.closeMenus();
|
|
|
+ },
|
|
|
+
|
|
|
+ ctxReportOtherMenuGoBack() {
|
|
|
+ this.closeMenus();
|
|
|
+ },
|
|
|
+
|
|
|
+ closeMenus() {
|
|
|
+ this.$refs.ctxReportOther.hide();
|
|
|
+ this.$refs.ctxReport.hide();
|
|
|
+ this.$refs.ctxMenu.hide();
|
|
|
+ },
|
|
|
+
|
|
|
+ sendReport(type) {
|
|
|
+ let id = this.stories[this.storyIndex].id;
|
|
|
+
|
|
|
+ swal({
|
|
|
+ 'title': 'Confirm Report',
|
|
|
+ 'text': 'Are you sure you want to report this post?',
|
|
|
+ 'icon': 'warning',
|
|
|
+ 'buttons': true,
|
|
|
+ 'dangerMode': true
|
|
|
+ }).then((res) => {
|
|
|
+ if(res) {
|
|
|
+ axios.post('/api/web/stories/v1/report', {
|
|
|
+ 'type': type,
|
|
|
+ 'id': id,
|
|
|
+ }).then(res => {
|
|
|
+ this.closeMenus();
|
|
|
+ swal('Report Sent!', 'We have successfully received your report', 'success');
|
|
|
+ }).catch(err => {
|
|
|
+ if(err.response.status === 409) {
|
|
|
+ swal('Already reported', 'You have already reported this story', 'info');
|
|
|
+ } else {
|
|
|
+ swal('Oops!', 'There was an issue reporting this story', 'error');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.closeMenus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ cancelViewStory() {
|
|
|
+ event.currentTarget.blur();
|
|
|
+ location.href = '/i/web';
|
|
|
+ },
|
|
|
+
|
|
|
+ confirmViewStory() {
|
|
|
let self = this;
|
|
|
- for (var i = 0; i < this.stories[0].items.length; i++) {
|
|
|
- var preload = new Image();
|
|
|
- $(preload).on('load', function() {
|
|
|
-
|
|
|
- self.preloadIndex = i;
|
|
|
- if(i == self.stories[0].items.length) {
|
|
|
- self.loadViewer();
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
- preload.src = self.stories[0].items[i].src;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- loadViewer() {
|
|
|
- let data = this.stories;
|
|
|
-
|
|
|
- if(!window.stories) {
|
|
|
- window.stories = new Zuck('storyContainer', {
|
|
|
- stories: data,
|
|
|
- localStorage: false,
|
|
|
- callbacks: {
|
|
|
- onOpen (storyId, callback) {
|
|
|
- document.body.style.overflow = "hidden";
|
|
|
- callback()
|
|
|
- },
|
|
|
-
|
|
|
- onEnd (storyId, callback) {
|
|
|
- axios.post('/i/stories/viewed', {
|
|
|
- id: storyId
|
|
|
- });
|
|
|
- callback();
|
|
|
- },
|
|
|
-
|
|
|
- onClose (storyId, callback) {
|
|
|
- document.body.style.overflow = "auto";
|
|
|
- callback();
|
|
|
- window.location.href = '/';
|
|
|
- },
|
|
|
- }
|
|
|
- });
|
|
|
+ let seen = this.stories.filter(function(i, k) {
|
|
|
+ return i.seen == true;
|
|
|
+ }).map(function(i, k) {
|
|
|
+ return k;
|
|
|
+ });
|
|
|
+ if(seen.length && this.pid != this.profile.id) {
|
|
|
+ let n = (seen[seen.length - 1] + 1) == self.stories.length ? seen[seen.length - 1] : (seen[seen.length - 1] + 1);
|
|
|
+ self.gotoSlide(n);
|
|
|
+ }
|
|
|
+ if(this.pid == this.profile.id) {
|
|
|
+ self.gotoSlide(self.stories.length - 1);
|
|
|
+ }
|
|
|
+ self.showProgress = true;
|
|
|
+ if(self.profile.username == self.username) {
|
|
|
+ self.owner = true;
|
|
|
+ }
|
|
|
+ this.viewWarning = false;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
|
|
|
- this.loading = false;
|
|
|
- // todo: refactor this mess
|
|
|
- document.querySelectorAll('#storyContainer .story')[0].click();
|
|
|
+ showPollResults() {
|
|
|
+ this.loadingPollResults = true;
|
|
|
+ if(!this.paused) {
|
|
|
+ this.pause();
|
|
|
}
|
|
|
- return;
|
|
|
+
|
|
|
+ axios.get('/api/web/stories/v1/poll/results', {
|
|
|
+ params: {
|
|
|
+ sid: this.stories[this.storyIndex].id
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.loadingPollResults = false;
|
|
|
+ this.pollResults = res.data;
|
|
|
+ const sum = (a, b) => a + b;
|
|
|
+ this.pollTotalVotes = this.pollResults.reduce(sum);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ addToStory() {
|
|
|
+ window.location.href = '/i/stories/new';
|
|
|
+ },
|
|
|
+
|
|
|
+ pollPercent(index) {
|
|
|
+ return this.pollTotalVotes == 0 ? 0 : Math.round((this.pollResults[index] / this.pollTotalVotes) * 100)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style type="text/css">
|
|
|
- #storyContainer .story {
|
|
|
- margin-right: 2rem;
|
|
|
+<style lang="scss" scoped>
|
|
|
+ #content {
|
|
|
width: 100%;
|
|
|
- max-width: 64px;
|
|
|
+ height: 100vh !important;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #262626;
|
|
|
}
|
|
|
- .stories.carousel .story > .item-link > .item-preview {
|
|
|
- height: 64px;
|
|
|
- }
|
|
|
- #zuck-modal.with-effects {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .stories.carousel .story > .item-link > .info .name {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .stories.carousel .story > .item-link > .info {
|
|
|
+
|
|
|
+ .story-viewer-component {
|
|
|
+
|
|
|
+ &-card {
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ @media (min-width: 768px) {
|
|
|
+ height: 90vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.bg-black {
|
|
|
+ background-color: #262626;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-green {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ background: #11998e; /* fallback for old browsers */
|
|
|
+ background: -webkit-linear-gradient(180deg, #38ef7d, #11998e);
|
|
|
+ background: linear-gradient(180deg, #38ef7d, #11998e);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .option-red {
|
|
|
+ font-weight: 600;
|
|
|
+ background: linear-gradient(to right, #F27121, #E94057, #8A2387);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-black {
|
|
|
+ background-color: #262626;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter-active, .fade-leave-active {
|
|
|
+ transition: opacity .5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fade-enter, .fade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ background-color: #979a9a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .media-slot {
|
|
|
+ border-radius: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: #000;
|
|
|
+ background-size: cover !important;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-body {
|
|
|
+ .top-overlay {
|
|
|
+ height:100px;
|
|
|
+ margin-left: -35px;
|
|
|
+ margin-right: -35px;
|
|
|
+ margin-top: -20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: linear-gradient(180deg, rgba(38,38,38, 0.8) 0%, rgba(38,38,38,0) 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-footer {
|
|
|
+ ::placeholder {
|
|
|
+ color: #fff;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-overlay {
|
|
|
+ margin-left: -35px;
|
|
|
+ margin-right: -35px;
|
|
|
+ margin-bottom: -20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ background: linear-gradient(0deg, rgba(38,38,38, 0.8) 0%, rgba(38,38,38,0) 100%);
|
|
|
+
|
|
|
+ .form-group {
|
|
|
+ padding-top: 40px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
Daniel Supernault