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
Appearance settings

Commit d4c8961

Browse filesBrowse files
yyx990803yyx990803
committed
init
0 parents  commit d4c8961
Copy full SHA for d4c8961

File tree

Expand file treeCollapse file tree

7 files changed

+448
-0
lines changed
Filter options
Expand file treeCollapse file tree

7 files changed

+448
-0
lines changed

‎.gitignore

Copy file name to clipboard
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎README.md

Copy file name to clipboard
+3Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Vue.js HackerNews clone
2+
3+
Built with [Vue.js](http://vuejs.org) and the HackerNews Firebase API. Very much a proof of concept hack at the moment - will organize the code a bit when I get time later.

‎css/style.css

Copy file name to clipboard
+132Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
html,
2+
body {
3+
font-family: Verdana;
4+
font-size: 13px;
5+
margin: 0;
6+
}
7+
ul {
8+
list-style-type: none;
9+
padding: 0;
10+
margin: 5px 0;
11+
}
12+
a {
13+
cursor: pointer;
14+
text-decoration: none;
15+
}
16+
#app {
17+
background-color: #f6f6ef;
18+
}
19+
#loading {
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
width: 100px;
24+
margin-left: -50px;
25+
margin-top: -30px;
26+
text-align: center;
27+
}
28+
#header {
29+
background-color: #f60;
30+
height: 24px;
31+
}
32+
#header h1 {
33+
font-weight: bold;
34+
font-size: 13px;
35+
display: inline-block;
36+
vertical-align: middle;
37+
margin: 0;
38+
}
39+
#header h1 a {
40+
color: #000;
41+
}
42+
#yc {
43+
border: 1px solid #fff;
44+
margin: 2px;
45+
display: inline-block;
46+
vertical-align: middle;
47+
}
48+
#yc img {
49+
vertical-align: middle;
50+
}
51+
#nav {
52+
padding: 10px 10px 10px 40px;
53+
background-color: #333;
54+
color: #fff;
55+
}
56+
#nav a {
57+
color: #fff;
58+
margin-right: 10px;
59+
}
60+
li.story {
61+
padding: 2px 0 2px 40px;
62+
position: relative;
63+
transition: background-color 0.2s ease;
64+
}
65+
li.story p {
66+
margin: 2px 0;
67+
}
68+
li.story .title {
69+
color: #000;
70+
}
71+
li.story .title:visited {
72+
color: #828282;
73+
}
74+
li.story .index {
75+
color: #828282;
76+
position: absolute;
77+
width: 30px;
78+
text-align: right;
79+
left: 0;
80+
top: 4px;
81+
}
82+
li.story .domain,
83+
li.story .subtext {
84+
font-size: 0.75em;
85+
color: #828282;
86+
}
87+
li.story .subtext a:hover {
88+
text-decoration: underline;
89+
}
90+
li.story.current {
91+
background-color: #ededdf;
92+
}
93+
.sidebar {
94+
color: #828282;
95+
transition: all 0.3s ease;
96+
position: fixed;
97+
right: 0;
98+
top: 0;
99+
height: 100%;
100+
background-color: #f6f6ef;
101+
box-shadow: 0 0 8px rgba(0,0,0,0.15);
102+
overflow-y: scroll;
103+
width: 500px;
104+
box-sizing: border-box;
105+
padding: 10px 30px;
106+
}
107+
.sidebar .close {
108+
position: absolute;
109+
top: 0;
110+
right: 0;
111+
padding: 10px;
112+
}
113+
.sidebar.v-enter,
114+
.sidebar.v-leave {
115+
-webkit-transform: translate3d(100%, 0, 0);
116+
transform: translate3d(100%, 0, 0);
117+
}
118+
.sidebar.user li {
119+
margin: 5px 0;
120+
}
121+
.sidebar.user .label {
122+
display: inline-block;
123+
min-width: 60px;
124+
}
125+
.sidebar.user .about {
126+
margin-top: 1em;
127+
}
128+
@media screen and (max-width: 500px) {
129+
.sidebar {
130+
width: 100%;
131+
}
132+
}

‎css/style.styl

Copy file name to clipboard
+115Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
$bg = #f6f6ef
2+
$gray = #828282
3+
4+
html, body
5+
font-family Verdana
6+
font-size 13px
7+
margin 0
8+
9+
ul
10+
list-style-type none
11+
padding 0
12+
margin 5px 0
13+
14+
a
15+
cursor pointer
16+
text-decoration none
17+
18+
#app
19+
background-color $bg
20+
21+
#loading
22+
position absolute
23+
top 50%
24+
left 50%
25+
width 100px
26+
margin-left -50px
27+
margin-top -30px
28+
text-align center
29+
30+
#header
31+
background-color #f60
32+
height 24px
33+
h1
34+
font-weight bold
35+
font-size 13px
36+
display inline-block
37+
vertical-align middle
38+
margin 0
39+
a
40+
color #000
41+
42+
#yc
43+
border 1px solid #fff
44+
margin 2px
45+
display inline-block
46+
vertical-align middle
47+
img
48+
vertical-align middle
49+
50+
#nav
51+
padding 10px 10px 10px 40px
52+
background-color #333
53+
color #fff
54+
a
55+
color #fff
56+
margin-right 10px
57+
58+
li.story
59+
padding 2px 0 2px 40px
60+
position relative
61+
transition background-color .2s ease
62+
p
63+
margin 2px 0
64+
.title
65+
color #000
66+
&:visited
67+
color $gray
68+
.index
69+
color $gray
70+
position absolute
71+
width 30px
72+
text-align right
73+
left 0
74+
top 4px
75+
.domain, .subtext
76+
font-size .75em
77+
color $gray
78+
.subtext a:hover
79+
text-decoration underline
80+
&.current
81+
background-color darken($bg, 5%)
82+
83+
.sidebar
84+
color $gray
85+
transition all .3s ease
86+
position fixed
87+
right 0
88+
top 0
89+
height 100%
90+
background-color $bg
91+
box-shadow 0 0 8px rgba(0,0,0,.15)
92+
overflow-y scroll
93+
width 500px
94+
box-sizing border-box
95+
padding 10px 30px
96+
.close
97+
position absolute
98+
top 0
99+
right 0
100+
padding 10px
101+
&.v-enter, &.v-leave
102+
-webkit-transform translate3d(100%,0,0)
103+
transform translate3d(100%,0,0)
104+
&.user
105+
li
106+
margin 5px 0
107+
.label
108+
display inline-block
109+
min-width 60px
110+
.about
111+
margin-top 1em
112+
113+
@media screen and (max-width:500px)
114+
.sidebar
115+
width 100%

‎index.html

Copy file name to clipboard
+74Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
6+
<title>HackerNews with Vue.js + HN API</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
<script src="https://cdn.firebase.com/js/client/1.1.0/firebase.js"></script>
9+
<script src="js/vue.min.js"></script>
10+
</head>
11+
<body>
12+
<div id="app">
13+
<!-- loading -->
14+
<div id="loading" v-show="stories.length === 0">Loading...</div>
15+
<!-- header -->
16+
<div id="header">
17+
<a id="yc" href="http://www.ycombinator.com">
18+
<img src="https://news.ycombinator.com/y18.gif">
19+
</a>
20+
<h1><a href="#1">Hacker News</a></h1>
21+
</div>
22+
<!-- main list -->
23+
<ul>
24+
<li v-repeat="stories" trackby="id" class="story" v-class="current: story.id === id">
25+
<span class="index">
26+
{{(page - 1) * 30 + $index + 1}}.
27+
</span>
28+
<p>
29+
<a class="title" href="{{url || ('http://news.ycombinator.com/item?id=' + id)}}" target="_blank">
30+
{{title}}
31+
</a>
32+
<span class="domain" v-show="type != 'job'">
33+
({{url | domain}})
34+
</span>
35+
</p>
36+
<p class="subtext">
37+
<span v-show="type != 'job'">
38+
{{score}} points by
39+
<a v-on="click:openUser(by)">{{by}}</a>
40+
</span>
41+
{{time | fromNow}} ago
42+
<span v-show="type != 'job'">
43+
| <a v-on="click:openComments($data)">comments</a>
44+
</span>
45+
</p>
46+
</li>
47+
</ul>
48+
<!-- navigation -->
49+
<div id="nav" v-show="stories.length > 0">
50+
<a v-if="page > 1" href="#{{page - 1}}">&lt; prev</a>
51+
<a v-if="page < 4" href="#{{page + 1}}">more...</a>
52+
</div>
53+
<!-- user sidebar -->
54+
<div class="sidebar user" v-if="user" v-transition>
55+
<ul>
56+
<li><span class="label">user:</span> {{user.id}}</li>
57+
<li><span class="label">created:</span> {{user.created | fromNow}} ago</li>
58+
<li><span class="label">karma:</span> {{user.karma}}</li>
59+
<li>
60+
<span class="label">about:</span>
61+
<div class="about" v-html="user.about"></div>
62+
</li>
63+
</ul>
64+
<a class="close" v-on="click:closeSidebar">&times;</a>
65+
</div>
66+
<!-- comments sidebar -->
67+
<div class="sidebar comments" v-if="story" v-transition>
68+
<ul v-repeat="story.kids">{{$value}}</ul>
69+
<a class="close" v-on="click:closeSidebar">&times;</a>
70+
</div>
71+
</div>
72+
<script src="js/app.js"></script>
73+
</body>
74+
</html>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.