Skip to content
This repository was archived by the owner on Aug 26, 2022. It is now read-only.

Commit f69b265

Browse files
author
Nickwasused
committed
fix css
1 parent 15e9513 commit f69b265

File tree

6 files changed

+70
-61
lines changed

6 files changed

+70
-61
lines changed

‎src/App.vue

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,16 @@ body
2727
font-size 1rem
2828
background-color lighten(#eceef1, 30%)
2929
margin 0
30-
padding-top 2.90%
3130
background-color #252525
3231
overflow-y scroll
3332
3433
a
3534
color #34495e
3635
text-decoration none
3736
37+
.headspacer
38+
height 7vh
39+
3840
.header
3941
background-color #ff6600
4042
position fixed
@@ -102,24 +104,4 @@ a
102104
margin-right 1em
103105
.github
104106
display none
105-
106-
@media (max-width 1200px)
107-
body
108-
padding-top 4%
109-
110-
@media (max-width 800px)
111-
body
112-
padding-top 6%
113-
114-
@media (max-width 600px)
115-
body
116-
padding-top 10%
117-
118-
@media (max-width 520px)
119-
body
120-
padding-top 15%
121-
122-
@media (max-width 350px)
123-
body
124-
padding-top 20%
125107
</style>

‎src/components/Comment.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@ export default {
5656
text-decoration underline
5757
.text
5858
overflow-wrap break-word
59+
a
60+
color #f60
5961
a:hover
6062
color #ff6600
6163
pre

‎src/components/Item.vue

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,34 @@
11
<template>
22
<li class="news-item">
3-
<span class="score">{{ item.score }}</span>
4-
<span class="title">
5-
<template v-if="item.url">
6-
<router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
7-
<span class="host"> ({{ item.url | host }})</span>
8-
</template>
9-
<template v-else>
10-
<router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
11-
</template>
3+
<span class="mainscore">
4+
<span class="score">{{ item.score }}</span>
125
</span>
13-
<br>
14-
<span class="meta">
15-
<span v-if="item.type !== 'job'" class="by">
16-
by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
6+
<span class="mainspacer"></span>
7+
<span class="mainitem">
8+
<span class="title">
9+
<template v-if="item.url">
10+
<router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
11+
<span class="host"> ({{ item.url | host }})</span>
12+
</template>
13+
<template v-else>
14+
<router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
15+
</template>
1716
</span>
18-
<span class="time">
19-
{{ item.time | timeAgo }} ago
20-
</span>
21-
<span v-if="item.type !== 'job'" class="comments-link">
22-
| <router-link :to="'/item/' + item.id">{{ item.descendants }} comments</router-link>
17+
<br>
18+
<span class="meta">
19+
<span v-if="item.type !== 'job'" class="by">
20+
by <router-link :to="'/user/' + item.by">{{ item.by }}</router-link>
21+
</span>
22+
<span class="time">
23+
{{ item.time | timeAgo }} ago
24+
</span>
25+
<span v-if="item.type !== 'job'" class="comments-link">
26+
| {{ item.descendants }} comments
27+
</span>
2328
</span>
29+
<span class="label" v-if="item.type !== 'story' && item.type !== 'job'">{{ item.type }}</span>
30+
<span class="label" v-if="item.type == 'job'"><span class="job">{{ item.type }}</span></span>
2431
</span>
25-
<span class="label" v-if="item.type !== 'story'">{{ item.type }}</span>
2632
</li>
2733
</template>
2834

@@ -40,24 +46,32 @@ export default {
4046
</script>
4147

4248
<style lang="stylus">
49+
.mainitem
50+
flex 96%
51+
display inline-block
52+
53+
.mainscore
54+
flex 3%
55+
display inline-block
56+
text-align right
57+
58+
.mainspacer
59+
flex 1%
60+
4361
.news-item
62+
display flex
4463
background-color #343a40
45-
padding 2% 1.5% 2% 7%
64+
padding 1.5%
4665
border-bottom 1px solid #eee
4766
position relative
48-
line-height 20px
67+
line-height 22px
4968
a
5069
color white
5170
.score
71+
width 100%
5272
color #ff6600
5373
font-size 1.1em
5474
font-weight 700
55-
position absolute
56-
top 50%
57-
left 0
58-
width 80px
59-
text-align center
60-
margin-top -10px
6175
.meta, .host
6276
font-size .85em
6377
color white
@@ -67,17 +81,25 @@ export default {
6781
&:hover
6882
color #ff6600
6983
70-
@media (max-width 1500px)
71-
.news-item
72-
padding-left 10%
84+
.job {
85+
color white
86+
background-color #f60
87+
padding 0.1%
88+
margin 0.1%
89+
}
7390
74-
@media (max-width 1100px)
75-
.news-item
76-
padding-left 15%
91+
@media (max-width 1400px)
92+
.mainitem
93+
width 93%
7794
78-
@media (max-width 400px)
79-
.score
95+
.mainscore
96+
width 7%
97+
98+
@media (max-width 600px)
99+
.mainitem
100+
width 100%
101+
102+
.mainscore
103+
width 0%
80104
visibility hidden
81-
.news-item
82-
padding-left 1%
83105
</style>

‎src/views/ItemList.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<router-link v-if="hasMore" :to="'/' + type + '/' + (page + 1)">more &gt;</router-link>
88
<a v-else class="disabled">more &gt;</a>
99
</div>
10+
<div class="headspacer"></div>
1011
<transition :name="transition">
1112
<div class="news-list" :key="displayedPage" v-if="displayedPage > 0">
1213
<transition-group tag="ul" name="item">
@@ -112,6 +113,7 @@ export default {
112113
padding 15px 30px
113114
position fixed
114115
text-align center
116+
height 2vh
115117
top 55px
116118
left 0
117119
right 0
@@ -125,7 +127,6 @@ export default {
125127
126128
.news-list
127129
position absolute
128-
margin 30px 0
129130
width 100%
130131
transition all .5s cubic-bezier(.55,0,.1,1)
131132
ul

‎src/views/ItemView.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div class="item-view" v-if="item">
3+
<div class="headspacer"></div>
34
<template v-if="item">
45
<div class="item-view-header">
56
<a :href="item.url" target="_blank" rel="noopener noreferrer">

‎src/views/UserView.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div class="user-view">
3+
<div class="headspacer"></div>
34
<template v-if="user">
45
<h1>User : {{ user.id }}</h1>
56
<ul class="meta">
@@ -8,8 +9,8 @@
89
<li v-if="user.about" v-html="user.about" class="about"></li>
910
</ul>
1011
<p class="links">
11-
<a :href="'https://news.ycombinator.com/submitted?id=' + user.id">submissions</a> |
12-
<a :href="'https://news.ycombinator.com/threads?id=' + user.id">comments</a>
12+
<a :href="'https://news.ycombinator.com/submitted?id=' + user.id" target="_blank" rel="noopener noreferrer">submissions</a> |
13+
<a :href="'https://news.ycombinator.com/threads?id=' + user.id" target="_blank" rel="noopener noreferrer">comments</a>
1314
</p>
1415
</template>
1516
<template v-else-if="user === false">

0 commit comments

Comments
 (0)