Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fd3cc55

Browse files
committed
Improve demo
1 parent 48adc0f commit fd3cc55

File tree

2 files changed

+141
-3
lines changed

2 files changed

+141
-3
lines changed

‎public/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,56 @@
1515
>
1616
</noscript>
1717
<div id="demo"></div>
18+
<a
19+
href="https://github.com/RSSapp/vue-rss-feed"
20+
class="github-corner"
21+
aria-label="View source on GitHub"
22+
><svg
23+
width="80"
24+
height="80"
25+
viewBox="0 0 250 250"
26+
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
27+
aria-hidden="true"
28+
>
29+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
30+
<path
31+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
32+
fill="currentColor"
33+
style="transform-origin: 130px 106px;"
34+
class="octo-arm"
35+
></path>
36+
<path
37+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
38+
fill="currentColor"
39+
class="octo-body"
40+
></path></svg></a
41+
><style>
42+
.github-corner:hover .octo-arm {
43+
animation: octocat-wave 560ms ease-in-out;
44+
}
45+
@keyframes octocat-wave {
46+
0%,
47+
100% {
48+
transform: rotate(0);
49+
}
50+
20%,
51+
60% {
52+
transform: rotate(-25deg);
53+
}
54+
40%,
55+
80% {
56+
transform: rotate(10deg);
57+
}
58+
}
59+
@media (max-width: 500px) {
60+
.github-corner:hover .octo-arm {
61+
animation: none;
62+
}
63+
.github-corner .octo-arm {
64+
animation: octocat-wave 560ms ease-in-out;
65+
}
66+
}
67+
</style>
1868
<!-- built files will be auto injected -->
1969
</body>
2070
</html>

‎src/demo/Demo.vue

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<h1>vue-rss-feed demo</h1>
1414
</div>
1515
</el-col>
16-
<el-col :span="8"></el-col>
16+
<el-col :span="8"class="github-button"></el-col>
1717
</el-row>
1818
</el-header>
1919
<el-main>
@@ -39,6 +39,47 @@
3939
<el-button type="primary" @click="submitForm('rssFeedForm')">Submit</el-button>
4040
</el-form-item>
4141
</el-form>
42+
43+
<el-row>
44+
<div class="scroll-down">
45+
<span>Scroll down to load more</span>
46+
<i class="el-icon-arrow-down"></i>
47+
</div>
48+
</el-row>
49+
50+
<div class="examples">
51+
<h3>Examples</h3>
52+
<ul>
53+
<li>
54+
<a
55+
href="https://rss.app/feeds/hmsyAr3PyniBpmOd.xml"
56+
@click="loadExample"
57+
>CNN Politics</a>
58+
</li>
59+
<li>
60+
<a
61+
href="https://rss.app/feeds/TYNzLiPKDRnSuxr7.xml"
62+
@click="loadExample"
63+
>NPR: Arts & life</a>
64+
</li>
65+
<li>
66+
<a
67+
href="https://rss.app/feeds/feHQ6ZmAWxS0zjj6.xml"
68+
@click="loadExample"
69+
>YouTube: PewDiePie</a>
70+
</li>
71+
<li>
72+
<a
73+
href="https://rss.app/feeds/YxkSC62K6JgmWxq6.xml"
74+
@click="loadExample"
75+
>Google news: Bitcoin</a>
76+
</li>
77+
</ul>
78+
</div>
79+
<el-row class="powered-rss-app">
80+
Powered by
81+
<a href="https://rss.app">RSS.app</a>
82+
</el-row>
4283
</el-col>
4384
</el-row>
4485
</el-main>
@@ -59,7 +100,7 @@ export default {
59100
return {
60101
feedUrl: "https://rss.app/feeds/hmsyAr3PyniBpmOd.xml",
61102
name: "",
62-
limit: 5,
103+
limit: 4,
63104
rssFeedForm: {
64105
feedUrl: "https://rss.app/feeds/hmsyAr3PyniBpmOd.xml"
65106
}
@@ -90,6 +131,11 @@ export default {
90131
},
91132
increaseLimit(loadMore = 5) {
92133
this.limit += loadMore;
134+
},
135+
loadExample(evt) {
136+
evt.preventDefault();
137+
this.rssFeedForm.feedUrl = evt.toElement.href;
138+
this.feedUrl = evt.toElement.href;
93139
}
94140
},
95141
watch: {
@@ -132,6 +178,45 @@ body {
132178
border-color: #ff641b;
133179
opacity: 0.9;
134180
}
181+
.scroll-down {
182+
display: flex;
183+
text-align: center;
184+
flex-direction: column;
185+
margin-top: -10px;
186+
}
187+
188+
.el-icon-arrow-down {
189+
font-size: 35px;
190+
}
191+
192+
.examples h3 {
193+
color: #2c3e50;
194+
font-weight: normal;
195+
margin: 0;
196+
}
197+
198+
.examples ul {
199+
margin: 10px;
200+
}
201+
202+
.examples li {
203+
margin-bottom: 5px;
204+
}
205+
206+
.examples a {
207+
color: #ff641b;
208+
margin-bottom: 5px;
209+
}
210+
211+
a {
212+
color: #ff641b;
213+
}
214+
215+
.powered-rss-app {
216+
margin-top: 20px;
217+
font-size: 13px;
218+
/* color: #ff641b; */
219+
}
135220
136221
.el-header h1 {
137222
margin: 0;
@@ -162,8 +247,11 @@ body {
162247
163248
.el-form--label-top .el-form-item__label {
164249
font-size: 20px;
165-
/* font-weight: bold; */
166250
color: #2c3e50;
167251
padding-bottom: 0;
168252
}
253+
254+
.github-button {
255+
text-align: right;
256+
}
169257
</style>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /