LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Closes #48

Browse source
This commit is contained in:
ポール ウェッブ 2018-05-18 00:39:36 -05:00
parent 6aeaf0e334
commit 0a2201c408
4 changed files with 268 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

289
.vuepress/components/GithubFeed.vue
View file

@ -1,52 +1,63 @@
<template>
<div id="github-feed" class="github-feed">
<h3>GitHub</h3>
<h5 class="last-updated" v-on:click="updateFeed">Last updated: {{ formatDate(lastUpdated) }}</h5>
<div id="github-feed">
<div class="last-updated" v-on:click="updateFeed">Last updated: {{ formatDate(lastUpdated) }}</div>
<div v-for="event in events" class="event">
<div v-for="event in events" class="github-feed__event">
<a v-bind:href="generateGithubUrl('actor',event)" target="_blank">
<img v-bind:src="event.actor.avatar_url" class="avatar"> {{ event.actor.display_login }}
<img v-bind:src="event.actor.avatar_url" class="github-feed__event__avatar">
</a>
<template v-if="event.type == 'CommitCommentEvent'">
commented on <a v-bind:href="generateGithubUrl('comment', event)">commit</a>
</template>
<template v-else-if="event.type == 'CreateEvent'">
created {{ event.payload.ref_type }} '{{ event.payload.ref }}'
</template>
<template v-else-if="event.type == 'DeleteEvent'">
deleted {{ event.payload.ref_type }} '{{ event.payload.ref }}'
</template>
<template v-else-if="event.type == 'ForkEvent'">
forked <a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a> to <a v-bind:href="generateGithubUrl('forkee', event)" target="_blank">{{ event.payload.forkee.name }}</a>
</template>
<template v-else-if="event.type == 'IssueCommentEvent'">
commented on <template v-if="event.payload.issue.pull_request">pull request</template><template v-else>issue</template>&nbsp;<a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
</template>
<template v-else-if="event.type == 'IssuesEvent'">
{{ event.payload.action }} issue <a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
</template>
<template v-else-if="event.type == 'PullRequestEvent'">
{{ event.payload.action }} pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
</template>
<template v-else-if="event.type == 'PullRequestReviewCommentEvent'">
commented on pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
</template>
<template v-else-if="event.type == 'PushEvent'">
pushed to <a v-bind:href="generateGithubUrl('push', event)" target="_blank">{{ refToBranch(event.payload.ref) }}</a>
</template>
<template v-else-if="event.type == 'ReleaseEvent'">
released <a v-bind:href="generateGithubUrl('release', event)" target="_blank">{{ event.payload.release.tag_name }}</a>
</template>
<template v-else-if="event.type == 'WatchEvent'">
starred the repo
</template>
in <a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a>
<div class="time-ago">{{ event.created_at | moment('from') }}</div>
<p>
<template v-if="event.type == 'CommitCommentEvent'">
<strong>{{ event.actor.display_login }}</strong> commented on <a v-bind:href="generateGithubUrl('comment', event)">commit</a>
</template>
<template v-else-if="event.type == 'CreateEvent'">
<strong>{{ event.actor.display_login }}</strong> created {{ event.payload.ref_type }} '{{ event.payload.ref }}'
</template>
<template v-else-if="event.type == 'DeleteEvent'">
<strong>{{ event.actor.display_login }}</strong> deleted {{ event.payload.ref_type }} '{{ event.payload.ref }}'
</template>
<template v-else-if="event.type == 'ForkEvent'">
<strong>{{ event.actor.display_login }}</strong> forked <a v-bind:href="generateGithubUrl('repo', event)" target="_blank">{{ event.repo.name }}</a> to <a v-bind:href="generateGithubUrl('forkee', event)" target="_blank">{{ event.payload.forkee.name }}</a>
</template>
<template v-else-if="event.type == 'IssueCommentEvent'">
<strong>{{ event.actor.display_login }}</strong> commented on <template v-if="event.payload.issue.pull_request">pull request</template><template v-else>issue</template>&nbsp;<a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
</template>
<template v-else-if="event.type == 'IssuesEvent'">
<strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} issue <a v-bind:href="generateGithubUrl('issue', event)" target="_blank">{{ event.payload.issue.title }}</a>
</template>
<template v-else-if="event.type == 'PullRequestEvent'">
<strong>{{ event.actor.display_login }}</strong> {{ event.payload.action }} pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
</template>
<template v-else-if="event.type == 'PullRequestReviewCommentEvent'">
<strong>{{ event.actor.display_login }}</strong> commented on pull request <a v-bind:href="generateGithubUrl('pull_request', event)" target="_blank">{{ event.payload.pull_request.title }}</a>
</template>
<template v-else-if="event.type == 'PushEvent'">
<strong>{{ event.actor.display_login }}</strong> pushed to <a v-bind:href="generateGithubUrl('push', event)" target="_blank">{{ refToBranch(event.payload.ref) }}</a>
</template>
<template v-else-if="event.type == 'ReleaseEvent'">
<strong>{{ event.actor.display_login }}</strong> released <a v-bind:href="generateGithubUrl('release', event)" target="_blank">{{ event.payload.release.tag_name }}</a>
</template>
<template v-else-if="event.type == 'WatchEvent'">
<strong>{{ event.actor.display_login }}</strong> starred the repo
</template>
in <a v-bind:href="generateGithubUrl('repo', event)" target="_blank"><strong>{{ event.repo.name }}</strong></a>
<em class="github-feed__event__time">{{ event.created_at | moment('from') }}</em>
</p>
</div>
</div>
</template>
<script>
@ -68,7 +79,7 @@ export default {
},
methods: {
updateFeed () {
var component = this;
component.$http.get('//beta.lbry.tech/github-feed').then(function(response) {
@ -79,9 +90,9 @@ export default {
},
refToBranch (ref) {
return ref.replace('refs/heads/','');
},
formatDate (date) {
@ -124,31 +135,165 @@ export default {
</script>
<style lang="scss">
@import "../scss/init/colors";
#github-feed {
.last-updated {
text-align: right;
color: #777;
font-style: italic;
}
.event {
padding: 0.5rem 0;
border-bottom: 1px solid #ccc;
}
.avatar {
width: 2rem;
height: 2rem;
border-radius: 1rem;
vertical-align: middle;
margin-right: 0.5rem;
}
.time-ago {
color: #777;
font-style: italic;
font-size: 0.7rem;
float: right;
padding: 0.7rem 0 0 0;
}
}
.github-feed {
border-bottom: 1px solid rgba($black, 0.05);
border-left: 1px solid rgba($black, 0.05);
font-size: 0.8rem;
grid-area: github;
position: relative;
</style>
@media (min-width: 1301px) {
padding-top: 3.7rem;
}
@media (min-width: 1001px) and (max-width: 1300px) {
padding-top: 2.95rem;
}
@media (min-width: 1001px) {
padding-bottom: 2rem;
padding-right: 10%;
padding-left: 2rem;
}
@media (max-width: 1000px) {
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (min-width: 901px) {
padding-right: 1rem;
padding-left: 1rem;
}
@media (max-width: 900px) {
padding-right: 2rem;
padding-left: 2rem;
}
@media (max-width: 700px) {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
h3, h5 {
@media (min-width: 1001px) {
text-align: center;
}
}
h3 {
letter-spacing: 0.1rem;
line-height: 1;
text-transform: uppercase;
width: 100%;
@media (min-width: 1301px) {
top: 2.15rem; left: 0;
color: rgba($black, 0.045);
font-size: 4rem;
position: absolute;
}
@media (max-width: 1300px) {
color: $black;
}
@media (min-width: 901px) and (max-width: 1300px) {
font-size: 3rem;
}
@media (max-width: 900px) {
font-size: 2rem;
margin-bottom: 1rem;
}
}
h5 {
font-style: italic;
font-weight: normal;
@media (min-width: 1001px) {
margin-bottom: 3rem;
}
@media (min-width: 901px) and (max-width: 1000px) {
margin-bottom: 2rem;
}
@media (max-width: 900px) {
margin-bottom: 0.5rem;
position: relative;
top: -1rem;
}
}
}
.github-feed__event {
line-height: 1.33;
@media (max-width: 700px) {
display: inline-block;
margin-right: 1.25rem;
vertical-align: top;
width: 200px;
}
&:not(:last-of-type) {
@media (min-width: 701px) {
margin-bottom: 1.25rem;
}
}
> a:first-of-type {
display: inline-block;
font-weight: 700;
margin-bottom: 0.5rem;
}
> p:first-of-type {
@media (min-width: 701px) {
display: inline-block;
margin-left: 0.5rem;
vertical-align: top;
width: calc(100% - 4.5rem);
}
@media (max-width: 700px) {
top: -3.5rem; left: 5%;
background-color: $white;
border: 1px solid rgba($gray, 0.1);
border-radius: 3px;
padding: 1rem;
position: relative;
white-space: normal;
width: 90%;
}
}
}
.github-feed__event__avatar {
border: 1px solid rgba($gray, 0.1);
border-radius: 3px;
object-position: center;
object-fit: cover;
@media (min-width: 701px) {
width: 2.5rem; height: 2.5rem;
}
@media (max-width: 700px) {
width: 100%; height: 100%;
}
}
.github-feed__event__time {
color: $gray;
display: block;
}
</style>

23
.vuepress/scss/_layout.scss
View file

@ -23,8 +23,27 @@ main {
min-height: 100vh;
padding-top: 4rem;
> div:first-of-type {
flex: 1;
&:not(.home) {
> div:first-of-type {
flex: 1;
}
}
&.home {
@media (min-width: 1001px) {
> div:first-of-type {
display: grid;
grid-gap: 0;
grid-template-areas:
"header header header"
"features features features"
"intro intro github"
"docs docs github"
"contribute contribute contribute"
"develop develop develop"
"community community community";
}
}
}
}

26
.vuepress/scss/pages/_home.scss
View file

@ -40,6 +40,7 @@
background-position: center;
background-repeat: no-repeat;
display: flex;
grid-area: header;
height: calc(50vh - 4rem); min-height: 300px;
justify-content: center;
@ -78,6 +79,8 @@
}
&.features {
grid-area: features;
.home__features {
align-content: center;
border-bottom: 1px solid rgba($black, 0.05);
@ -204,6 +207,21 @@
border-bottom: 1px solid rgba($black, 0.05);
}
&.intro,
&.docs {
@media (min-width: 1301px) {
padding-left: 10%;
}
}
&.intro {
grid-area: intro;
}
&.docs {
grid-area: docs;
}
&.community,
&.contribute {
p {
@ -273,6 +291,8 @@
}
&.contribute {
grid-area: contribute;
ul {
li {
@media (min-width: 701px) {
@ -318,7 +338,13 @@
}
}
&.develop {
grid-area: develop;
}
&.community {
grid-area: community;
ul {
li {
@media (min-width: 701px) {

6
.vuepress/theme/Layout.vue
View file

@ -1,5 +1,5 @@
<template>
<main>
<main v-bind:class="{'home': $page.frontmatter.home}">
<nav class="navigation">
<div class="inner-wrap">
<router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@ -59,6 +59,8 @@
</div>
</section>
<GithubFeed></GithubFeed>
<section class="home contribute">
<div class="inner-wrap">
<h3>Contribute</h3>
@ -103,7 +105,7 @@
</template>
<template v-else-if="$page.path == '/whitepaper.html'">
<Content custom></Content>
<Content></Content>
</template>
<template v-else>