Finished videos
This commit is contained in:
parent
eb487dea0a
commit
9f0acf9764
|
@ -19,6 +19,7 @@ export default {
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #192236;
|
--bg-color: #192236;
|
||||||
--bg-alt-color: #151d2f;
|
--bg-alt-color: #151d2f;
|
||||||
|
--bg-alt-hover-color: #111726;
|
||||||
--fg-color: #fff;
|
--fg-color: #fff;
|
||||||
--padding: 20px;
|
--padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
BIN
src/assets/video_thumbnails/JP-Installing-Windows-Project.png
Normal file
BIN
src/assets/video_thumbnails/JP-Installing-Windows-Project.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.4 KiB |
|
@ -1,7 +1,9 @@
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
"videoName": "JP Installing Windows Project",
|
"videoName": "JP Installing Windows Project",
|
||||||
|
"videoDescription": "This is a guide in japanese where I teach you how to install windows completely. This was made because of a JP Project I had to do.",
|
||||||
"videoID": "1",
|
"videoID": "1",
|
||||||
"path": "videos/JP-Installing-Windows-Project.mp4"
|
"path": "videos/JP-Installing-Windows-Project.mp4",
|
||||||
|
"thumbnail": "video_thumbnails/JP-Installing-Windows-Project.png"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -1,16 +1,95 @@
|
||||||
<template>
|
<template>
|
||||||
<h1>This page is under construction</h1>
|
<h1>Videos</h1>
|
||||||
|
<ul>
|
||||||
|
<router-link v-for="video in videos" :key="video.videoID" :to="'/videos/' + video.videoID">
|
||||||
|
<li>
|
||||||
|
<img :src="require('@/assets/' + video.thumbnail)" alt="Video Thumbnail"/>
|
||||||
|
<div id="content">
|
||||||
|
<h2>{{ video.videoName }}</h2>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</router-link>
|
||||||
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import videoData from '../data/videos.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
videos: videoData
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Rubik', sans-serif;
|
font-family: 'Rubik', sans-serif;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 4rem;
|
font-size: 3rem;
|
||||||
margin: 60px auto;
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
max-width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
|
||||||
|
row-gap: 32px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: var(--bg-alt-color);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 370px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s background-color;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: white;
|
||||||
|
font-family: 'Rubik', sans-serif;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
background-color: var(--bg-alt-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 350px;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
pointer-events: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 779px) {
|
||||||
|
a {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,49 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<template v-if="notFound">
|
<notfound v-if="!(video)"></notfound>
|
||||||
<div class="notFound">
|
|
||||||
<h1>404 Page</h1>
|
|
||||||
<p>This page has not been found, <router-link to="/">click here</router-link> to return back home.</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<h1>{{ video.videoName }}</h1>
|
|
||||||
<video controls>
|
<video controls>
|
||||||
<source :src="require('@/assets/' + video.path)" type="video/mp4">
|
<source :src="require('@/assets/' + video.path)" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
<div id="info">
|
||||||
|
<h1>{{ video.videoName }}</h1>
|
||||||
|
<p>{{ video.videoDescription }}</p>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import videoData from '../data/videos.js'
|
import videoData from '../data/videos.js'
|
||||||
|
import notfound from '../views/404Page.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
notfound
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
video: null,
|
video: null
|
||||||
notFound: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
let videoID = this.$route.params.id;
|
let videoID = this.$route.params.id;
|
||||||
this.video = videoData.find(v => v.videoID === videoID);
|
this.video = videoData.find(v => v.videoID === videoID);
|
||||||
console.log(this.notFound);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
h1 {
|
video {
|
||||||
|
max-height: calc(100vh - 420px);
|
||||||
|
max-width: calc(100vw - 40px);
|
||||||
|
width: max-content;
|
||||||
|
aspect-ratio: 16 / 9;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: var(--bg-alt-color);
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info h1 {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: 'Rubik', sans-serif;
|
font-family: 'Rubik', sans-serif;
|
||||||
margin-top: 60px;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
video {
|
#info p {
|
||||||
max-height: calc(100vh - 40px);
|
font-family: 'Rubik', sans-serif;
|
||||||
max-width: calc(100vh - 40px);
|
font-weight: 200;
|
||||||
aspect-ratio: 16 / 9;
|
font-size: 1.3rem;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue