mirror of
https://github.com/Luzifer/mediatimeline.git
synced 2024-09-19 16:02:57 +00:00
116 lines
5.0 KiB
HTML
116 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
<title>MediaTimeline</title>
|
|
|
|
<!-- Bootstrap -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.3.1/dist/darkly/bootstrap.min.css"
|
|
integrity="sha256-6W1mxPaAt4a6pkJVW5x5Xmq/LvxuQpR9dlzgy77SeZs=" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.19/dist/bootstrap-vue.min.css"
|
|
integrity="sha256-OnoDycdaaImljNTTBlX6Ki09xe93BWXN5T+Iqh4788s=" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
|
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
|
|
|
|
<link rel="stylesheet" href="app.css">
|
|
|
|
<link rel="manifest" href="manifest.json">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<b-navbar toggleable="lg" type="light" variant="light" class="mb-5">
|
|
<b-navbar-brand href="#">MediaTimeline Viewer</b-navbar-brand>
|
|
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
|
|
|
<b-collapse id="nav-collapse" is-nav>
|
|
<b-navbar-nav class="ml-auto">
|
|
<b-nav-item href="#" @click="triggerForceFetch"><i class="fas fa-sync"></i> Force reload</b-nav-item>
|
|
</b-navbar-nav>
|
|
</b-collapse>
|
|
</b-navbar>
|
|
|
|
<b-container>
|
|
|
|
<b-row>
|
|
|
|
<b-col lg="3" md="4" xs="12" v-for="tweet in tweets" :key="tweet.id" v-if="tweet.images">
|
|
<b-card class="mb-3" no-body>
|
|
<div :style="`background-image: url('${tweet.images[0].image}')`" class="card-img-top"></div>
|
|
|
|
<b-card-body>
|
|
<b-media>
|
|
<b-img slot="aside" class="user-image" :src="tweet.user.image"></b-img>
|
|
|
|
<h6 class="mt-0 mb-0">{{ tweet.user.screen_name }}</h6>
|
|
<small>{{ moment(tweet.posted).format('lll') }}</small>
|
|
</b-media>
|
|
</b-card-body>
|
|
|
|
<b-card-footer class="text-right">
|
|
<b-button size="sm" variant="secondary" :href="`https://twitter.com/${tweet.user.screen_name}/status/${tweet.id}`">
|
|
<i class="fas fa-link"></i>
|
|
</b-button>
|
|
<b-button size="sm" variant="secondary" @click="refetch(tweet)">
|
|
<i class="fas fa-sync"></i>
|
|
</b-button>
|
|
<b-button size="sm" variant="secondary" :class="{ 'faved': tweet.favorited }" @click="favourite(tweet)">
|
|
<i class="fas fa-star"></i>
|
|
</b-button>
|
|
<b-button size="sm" variant="secondary" @click="callModal(tweet)">
|
|
<i class="fas fa-search-plus"></i>
|
|
<b-badge pill variant="light" v-if="tweet.images.length > 1">{{ tweet.images.length }}</b-badge>
|
|
</b-button>
|
|
</b-card-footer>
|
|
|
|
</b-card>
|
|
</b-col>
|
|
|
|
</b-row>
|
|
|
|
<b-modal
|
|
centered
|
|
@hidden="modalTweet = null"
|
|
hide-footer
|
|
:title="modalTweet.user.screen_name"
|
|
v-if="modalTweet"
|
|
:visible="true"
|
|
>
|
|
<b-carousel :controls="modalTweet.images.length > 1">
|
|
<b-carousel-slide
|
|
:img-src="image.image"
|
|
:key="image.id"
|
|
v-for="(image, idx) in modalTweet.images"
|
|
></b-carousel-slide>
|
|
</b-carousel>
|
|
</b-modal>
|
|
|
|
</b-container>
|
|
</div> <!-- /#app -->
|
|
|
|
|
|
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.0/dist/jquery.min.js"
|
|
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
|
|
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
|
|
integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"
|
|
integrity="sha256-chlNFSVx3TdcQ2Xlw7SvnbLAavAQLO0Y/LBiWX04viY=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-vue@2.0.0-rc.19/dist/bootstrap-vue.min.js"
|
|
integrity="sha256-7SSbIENEPA/7lL18+muIwRP381WW9QrjcnC9C9mS9So=" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"
|
|
integrity="sha256-mpnrJ5DpEZZkwkE1ZgkEQQJW/46CSEh/STrZKOB/qoM=" crossorigin="anonymous"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"
|
|
integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|
|
|