Skip to content

Commit 59ea1a0

Browse files
pastelmindpastelmind
committed
Merge branch 'yhkang/guide-page-merge'
2 parents 953215c + d9cbf1b commit 59ea1a0

File tree

14 files changed

+176
-12
lines changed

14 files changed

+176
-12
lines changed

‎.vs/ProjectSettings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"CurrentProjectSetting": null
3+
}

‎.vs/VSWorkspaceState.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"ExpandedNodes": [
3+
""
4+
],
5+
"PreviewInSolutionExplorer": false
6+
}

‎.vs/dp4/v16/.suo

14.5 KB
Binary file not shown.

‎.vs/slnx.sqlite

88 KB
Binary file not shown.

‎.vscode/settings.json

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,4 @@
1515
"editor.defaultFormatter": "esbenp.prettier-vscode",
1616
"editor.formatOnSave": true,
1717
},
18-
"[typescript]": {
19-
"editor.defaultFormatter": "esbenp.prettier-vscode",
20-
"editor.formatOnSave": true,
21-
},
2218
}

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,6 @@ Our project uses the following frameworks and libraries.
1414

1515
* [Vue.js](https://vuejs.org/)
1616
* [Fuse.js](https://fusejs.io/)
17+
18+
##background image
19+
http://www.win4000.com/wallpaper_big_139912.html

‎css/page-guide.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
/* Styles for the page-guide component. */
2+
3+
.page-guide {
4+
background-color: lightgoldenrodyellow;
5+
padding: 10px;
6+
padding-bottom: 1.5em;
7+
margin: 20px;
8+
opacity: 70%;
9+
border-radius: 20px;
10+
box-shadow: 1px 1px 10px black;
11+
}
12+
13+
.page-guide__author {
14+
font-style: italic;
15+
font-weight: bold;
16+
}
17+
18+
.page-guide__body {
19+
margin: 1em 0;
20+
}
21+
22+
.page-guide__stats {
23+
display: flex;
24+
}
25+
26+
.page-guide__stats-item {
27+
flex-grow: 0;
28+
background-color: rgb(224, 218, 127);
29+
border-radius: 20px;
30+
padding: 10px;
31+
text-align: center;
32+
}
33+
34+
.page-guide__section-expand-button {
35+
background-color: #a18e1f;
36+
border-color: #c98225;
37+
color: #fff;
38+
-moz-border-radius: 10px;
39+
-webkit-border-radius: 10px;
40+
border-radius: 10px;
41+
text-align: center;
42+
vertical-align: middle;
43+
border: 1px solid transparent;
44+
font-weight: 900;
45+
font-size: 60%;
46+
}
47+
48+
.page-guide__title {
49+
color: rgb(126, 117, 42);
50+
}
51+
52+
.page-guide__video {
53+
border-width: 5px;
54+
border-color: rgb(245, 222, 14);
55+
}

‎css/styles.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
body {
2+
background-image: url("../images/main1.jpg");
3+
background-repeat: no-repeat;
4+
background-size: cover;
25
font-family: "Noto Sans KR", "Roboto", sans-serif;
36
}
47

@@ -31,3 +34,10 @@ body {
3134
--tier-bgcolor-challenger: #808;
3235
--tier-text-color-challenger: #fff;
3336
}
37+
38+
.logo {
39+
text-shadow: 1px 1px 5px black;
40+
color: burlywood;
41+
font-size: 40px;
42+
padding: 20px;
43+
}

‎images/main0.jpg

28.3 KB
Loading

‎images/main1.jpg

137 KB
Loading

‎index.html

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,69 @@
1313
rel="stylesheet"
1414
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.css"
1515
/>
16+
<link rel="stylesheet" href="./css/page-guide.css" />
1617
<link rel="stylesheet" href="./css/page-search.css" />
1718
<link rel="stylesheet" href="./css/search-results.css" />
1819
<link rel="stylesheet" href="./css/styles.css" />
1920
</head>
2021
<body>
2122
<div id="app">
22-
<page-search :guides="guides" />
23+
<h1 class="logo">RiftGuide</h1>
24+
<page-guide :guide="currentGuide" />
2325
</div>
2426

27+
<template id="template-page-guide">
28+
<div class="page-guide">
29+
<h2 class="page-guide__title">{{guide.title}}</h2>
30+
<address class="page-guide__author">Author: {{guide.author}}</address>
31+
<div class="page-guide__body">
32+
<section
33+
v-for="(sentence, index) in guide.content"
34+
class="page-guide__section"
35+
>
36+
{{sentence.summary}}
37+
<button
38+
v-if="sentence.type !== 'empty'"
39+
v-on:click="toggleSection(index)"
40+
class="page-guide__section-expand-button"
41+
>
42+
{{ sentence.type === 'text' ? 'Details' : 'Video' }}
43+
</button>
44+
<div v-show="hideOrShow[index]" class="page-guide__section-details">
45+
<div v-if="sentence.type === 'text'">
46+
{{sentence.content}}
47+
</div>
48+
<div v-if="sentence.type === 'video'">
49+
<iframe
50+
class="page-guide__video"
51+
width="560"
52+
height="315"
53+
:src="sentence.videoUrl"
54+
frameborder="0"
55+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
56+
allowfullscreen
57+
></iframe>
58+
</div>
59+
</div>
60+
</section>
61+
</div>
62+
<div class="page-guide__stats">
63+
<div class="page-guide__stats-item">
64+
posted date: {{guide.createdAt}}
65+
</div>
66+
<div class="page-guide__stats-item">
67+
views: {{guide.views}}
68+
</div>
69+
<div class="page-guide__stats-item">
70+
upvotes: {{guide.upvotes}}
71+
</div>
72+
<div class="page-guide__stats-item">
73+
downvotes: {{guide.downvotes}}
74+
</div>
75+
</div>
76+
</div>
77+
</template>
78+
2579
<template id="template-page-search">
2680
<div class="page-search">
2781
<header class="search-form">
@@ -129,6 +183,7 @@
129183
<script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
130184
<script src="./js/data.js"></script>
131185
<!-- Component scripts must come before the main app script -->
186+
<script src="./js/page-guide.js"></script>
132187
<script src="./js/page-search.js"></script>
133188
<script src="./js/search-results.js"></script>
134189
<script src="./js/app.js"></script>

‎js/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
const vm = new Vue({
77
el: "#app",
88
data: {
9+
currentGuide: guides[0],
910
guides: guides,
1011
},
1112
});

‎js/data.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ const guides = [
2222
type: "text",
2323
summary: "Step 2. Use Teemo's long attack range to poke",
2424
content:
25-
"There are two ways of consuming the opponent's life.\n\n1. When your opponent wants to kill minions, attack him so that he cannot resist soon.\n Buy shoes ASAP to increase your speed, so that you can escape",
25+
"There are two ways of consuming the opponent's life.\n1. When your opponent wants to kill minions, attack him so that he cannot resist soon.\n Buy shoes ASAP to increase your speed, so that you can escape",
2626
},
2727
{
2828
type: "video",
2929
summary: "Plant mushrooms along the wall to prevent ganks",
30-
videoUrl: "https://www.youtube.com/watch?v=UVmgwL3tOAg",
30+
videoUrl: "https://www.youtube.com/embed?v=UVmgwL3tOAg",
3131
},
3232
],
3333
},
@@ -52,7 +52,7 @@ const guides = [
5252
{
5353
type: "video",
5454
summary: "Plant mushrooms along the wall to prevent ganks",
55-
videoUrl: "https://www.youtube.com/watch?v=UVmgwL3tOAg",
55+
videoUrl: "https://www.youtube.com/embed?v=UVmgwL3tOAg",
5656
},
5757
],
5858
},
@@ -69,22 +69,22 @@ const guides = [
6969
{
7070
type: "video",
7171
summary: "HOW TO READ THE MAP by Faker",
72-
videoUrl: "https://www.youtube.com/watch?v=-iD8Ab05N1s",
72+
videoUrl: "https://www.youtube.com/embed?v=-iD8Ab05N1s",
7373
},
7474
{
7575
type: "video",
7676
summary: "RYZE GUIDE by Faker",
77-
videoUrl: "https://www.youtube.com/watch?v=Pd5dp2f_yUg",
77+
videoUrl: "https://www.youtube.com/embed?v=Pd5dp2f_yUg",
7878
},
7979
{
8080
type: "video",
8181
summary: "Unique ZED GUIDE by Faker",
82-
videoUrl: "https://www.youtube.com/watch?v=mvGVELBadT8",
82+
videoUrl: "https://www.youtube.com/embed?v=mvGVELBadT8",
8383
},
8484
{
8585
type: "video",
8686
summary: "Faker's HOW TO ZOE",
87-
videoUrl: "https://www.youtube.com/watch?v=18kgAyq0Rxw",
87+
videoUrl: "https://www.youtube.com/embed?v=18kgAyq0Rxw",
8888
},
8989
],
9090
},

‎js/page-guide.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* @file Component for the Guide Page.
3+
* @author Yuan Huang
4+
* @author Yehyoung Kang
5+
*/
6+
7+
/// <reference path="./index.d.ts" />
8+
9+
Vue.component("page-guide", {
10+
template: "#template-page-guide",
11+
props: {
12+
guide: Object,
13+
},
14+
data() {
15+
return {
16+
hideOrShow: [],
17+
};
18+
},
19+
methods: {
20+
/**
21+
* Shows or hides a section.
22+
* @param {number} sectionIndex Index of the section to show/hide.
23+
*/
24+
toggleSection(sectionIndex) {
25+
Vue.set(this.hideOrShow, sectionIndex, !this.hideOrShow[sectionIndex]);
26+
},
27+
},
28+
watch: {
29+
guide(newGuide) {
30+
// Replace hideOrShow with a new array which contains the same number of
31+
// elements as the guide.content array.
32+
this.hideOrShow = new Array(newGuide.content.length);
33+
},
34+
},
35+
});

0 commit comments

Comments
 (0)