Commit abf630c0 authored by Dan Hawkes's avatar Dan Hawkes Committed by Pooya Parsa

fix: Remove duplicated files

Commit bd183e00 seems to have created duplicate files when changing the filename case, probably because it was on case-sensitive file system.
parent f25d3606
<template>
<li v-if="comment" class="comment">
<div class="by">
<router-link :to="'/user/' + comment.user">{{ comment.user }}</router-link>
{{ comment.time | timeAgo }} ago
</div>
<div class="text" v-html="comment.content" />
<div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
<a @click="open = !open">{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}
</a>
</div>
<ul v-show="open" class="comment-children">
<comment v-for="childComment in comment.comments" :key="childComment.id" :comment="childComment" />
</ul>
</li>
</template>
<script>
export default {
name: "Comment",
props: {
comment: {
type: Object,
required: true
}
},
data() {
return {
open: true
}
},
methods: {
pluralize: n => n + (n === 1 ? " reply" : " replies")
}
}
</script>
<style lang="stylus">
.comment-children {
.comment-children {
margin-left: 1.5em;
}
}
.comment {
border-top: 1px solid #eee;
position: relative;
.by, .text, .toggle {
font-size: 0.9em;
margin: 1em 0;
}
.by {
color: #828282;
a {
color: #828282;
text-decoration: underline;
}
}
.text {
overflow-wrap: break-word;
a:hover {
color: #ff6600;
}
pre {
white-space: pre-wrap;
}
}
.toggle {
background-color: #fffbf2;
padding: 0.3em 0.5em;
border-radius: 4px;
a {
color: #828282;
cursor: pointer;
}
&.open {
padding: 0;
background-color: transparent;
margin-bottom: -0.5em;
}
}
}
</style>
<template>
<li class="news-item">
<span class="score">{{ item.points }}</span>
<span class="title">
<template v-if="item.url">
<a :href="item.url" target="_blank" rel="noopener">{{ item.title }}</a>
<span class="host"> ({{ item.url | host }})</span>
</template>
<template v-else>
<router-link :to="'/item/' + item.id">{{ item.title }}</router-link>
</template>
</span>
<br>
<span class="meta">
<span v-if="item.type !== 'job'" class="by">
by
<router-link :to="'/user/' + item.user">{{ item.user }}</router-link>
</span>
<span class="time">
{{ item.time | timeAgo }} ago
</span>
<span v-if="item.type !== 'job'" class="comments-link">
|
<router-link :to="'/item/' + item.id">{{ item.descendants }} comments</router-link>
</span>
</span>
<span v-if="item.type !== 'story'" class="label" >{{ item.type }}</span>
</li>
</template>
<script>
import { timeAgo } from "~/plugins/filters"
export default {
name: "NewsItem",
props: {
item: {
type: Object,
required: true
}
},
// http://ssr.vuejs.org/en/caching.html#component-level-caching
serverCacheKey: ({ item: { id, __lastUpdated, time } }) => {
return `${id}::${__lastUpdated}::${timeAgo(time)}`
}
}
</script>
<style lang="stylus">
.news-item {
background-color: #fff;
padding: 20px 30px 20px 80px;
border-bottom: 1px solid #eee;
position: relative;
line-height: 20px;
.score {
color: #C75000;
font-size: 1.1em;
font-weight: 700;
position: absolute;
top: 50%;
left: 0;
width: 80px;
text-align: center;
margin-top: -10px;
}
.meta, .host {
font-size: 0.85em;
color: #595959;
a {
color: #595959;
text-decoration: underline;
&:hover {
color: #C75000;
}
}
}
}
</style>
<template>
<transition>
<svg v-show="show" :class="{ show: show }" class="spinner" width="44px" height="44px" viewBox="0 0 44 44">
<circle class="path" fill="none" stroke-width="4" stroke-linecap="round" cx="22" cy="22" r="20"/>
</svg>
</transition>
</template>
<script>
export default {
name: "Spinner",
props: {
show: {
type: Boolean,
required: true
}
},
serverCacheKey: props => props.show
}
</script>
<style lang="stylus">
$offset = 126;
$duration = 1.4s;
.spinner {
transition: opacity 0.15s ease;
animation: rotator $duration linear infinite;
animation-play-state: paused;
&.show {
animation-play-state: running;
}
&.v-enter, &.v-leave-active {
opacity: 0;
}
&.v-enter-active, &.v-leave {
opacity: 1;
}
}
@keyframes rotator {
0% {
transform: scale(0.5) rotate(0deg);
}
100% {
transform: scale(0.5) rotate(270deg);
}
}
.spinner .path {
stroke: #ff6600;
stroke-dasharray: $offset;
stroke-dashoffset: 0;
transform-origin: center;
animation: dash $duration ease-in-out infinite;
}
@keyframes dash {
0% {
stroke-dashoffset: $offset;
}
50% {
stroke-dashoffset: ($offset / 2);
transform: rotate(135deg);
}
100% {
stroke-dashoffset: $offset;
transform: rotate(450deg);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment