Skip to content

Commit

Permalink
✨ 新增 Developers Trending
Browse files Browse the repository at this point in the history
  • Loading branch information
zhuowenli committed Sep 14, 2019
1 parent 68c09b9 commit e499831
Show file tree
Hide file tree
Showing 11 changed files with 231 additions and 86 deletions.
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
@@ -1,6 +1,6 @@
{
"name": "githuber",
"version": "1.5.0",
"version": "1.6.0",
"main": "index.js",
"repository": "git@github.com:zhuowenli/githuber.git",
"author": "卓文理 <531840344@qq.com>",
Expand All @@ -26,7 +26,7 @@
"bluebird": "^3.5.1",
"cheerio": "^1.0.0-rc.2",
"csshake": "^1.5.3",
"element-ui": "^2.0.11",
"element-ui": "^2.12.0",
"file-saver": "^1.3.8",
"iscroll": "^5.2.0",
"jquery": "^3.4.0",
Expand Down
Binary file modified src/assets/network-error.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/services/config.js
Expand Up @@ -10,6 +10,7 @@ export default {
engineNavName: 'Images',
engineName: 'google',
since: 'monthly',
type: 'repositories',
lang: [],
locale: 'en',
showBookmark: true,
Expand Down
11 changes: 6 additions & 5 deletions src/stylesheet/index.sass
Expand Up @@ -41,7 +41,6 @@ body
&__body
padding: 10px 20px


.el-input__inner
background-color: var(--background)
background: var(--background)
Expand All @@ -52,16 +51,20 @@ body
&:focus
border-color: var(--borderColor)

.el-radio-button__inner
background: var(--background)
border: 1px solid var(--borderColor)
.el-radio-button:first-child .el-radio-button__inner
border-left-color: var(--borderColor)

.el-input.is-active .el-input__inner,
border-color: var(--borderColor)


.el-select
&:hover .el-input__inner,
.el-input.is-focus .el-input__inner,
.el-input__inner:focus
border-color: var(--backgroundLightest)

.el-tag
background-color: var(--backgroundLighter)
&__close.el-icon-close
Expand Down Expand Up @@ -90,7 +93,6 @@ body
&::after
border-bottom-color: var(--background)


.el-select-dropdown
border: 1px solid var(--borderColor)
background-color: var(--background)
Expand All @@ -105,7 +107,6 @@ body
background-color: var(--backgroundLighter)
color: var(--blue)


.el-select-dropdown.is-multiple
.el-select-dropdown__item.selected,
.el-select-dropdown__item.selected.hover
Expand Down
117 changes: 109 additions & 8 deletions src/views/components/github-trending.sass
Expand Up @@ -13,7 +13,20 @@

&__title
display: flex
flex-direction: row
align-items: center
flex-wrap: wrap
padding-left: 5px
padding-right: 10px
.el-radio-group
margin-left: 5px
white-space: nowrap

.select
flex: 1
display: flex
align-items: center

.el-select
margin: 5px
&.language
Expand All @@ -24,6 +37,8 @@
max-width: none !important
padding: 5px 30px 5px 2px
min-width: 195px
transform: none
top: 0
& > span
display: flex
& > .el-select__input
Expand All @@ -40,9 +55,8 @@
.scroller
padding: 10px

.vue-waterfall
&-slot
padding: 10px
.vue-waterfall-slot
padding: 10px

&__content
display: flex
Expand Down Expand Up @@ -83,13 +97,9 @@

.trending
display: block
cursor: pointer
box-shadow: none
padding: 10px
width: 100%
.el-card__body
position: relative
padding: 16px 20px

.octicon
width: 14px
Expand All @@ -99,19 +109,35 @@
&-repo-forked
width: 10px

$colors: #f5222d #fa541c #ffa940 #ACD925 #52D925 #25D952 #25D9AC #25ACD9 #2552D9 #5225D9 #AC25D9 #ff5a93
$length: length($colors)

@each $color in $colors
$i: index($colors, $color);
&:nth-child(#{$length}n + #{$i}) .developers
border-bottom-color: $color

.repositories
position: relative
.el-card__body
padding: 16px 20px
cursor: pointer

&__title
color: var(--darkBlue)
font-size: 20px
line-height: 30px
margin-bottom: 8px
@include ellipsis

&__desc
height: 72px
font-size: 14px
line-height: 24px
color: var(--fontColor)
word-break: break-all
@include max-text(3)

&__meta
display: flex
height: 24px
Expand Down Expand Up @@ -139,6 +165,7 @@
color: var(--red)
opacity: 0
transition: all 0.2s ease

&__built
display: flex
height: 24px
Expand All @@ -152,11 +179,85 @@
border-radius: 3px
margin-left: 4px

&:hover .trending__meta
&:hover .repositories__meta
.added
opacity: 1
transform: translateY(-15px)

.developers
border-bottom: 2px solid transparent
.el-card__body
padding: 24px 30px 20px

&__author
position: relative
display: flex
cursor: pointer
.avatar
width: 60px
height: 60px
border-radius: 30px
overflow: hidden

.author
display: flex
flex-direction: column
justify-content: center
flex: 1
padding-left: 16px
h2
margin: 0
color: var(--darkBlue)
font-size: 20px
line-height: 30px
font-weight: normal
white-space: nowrap
p
margin: 0
font-size: 14px
line-height: 24px
color: var(--fontColor)

&__content
position: relative
display: flex
flex-direction: column
padding-top: 40px
&:before
content: ''
position: absolute
top: 20px
left: 0
width: 16px
height: 1px
background: var(--backgroundLightest)

h3
display: flex
flex-direction: row
justify-content: center
margin: 0
height: 20px
+max-text(1)
cursor: pointer
font-weight: normal
margin-bottom: 12px
white-space: nowrap
span
font-size: 16px
vertical-align: top
.octicon
margin-top: 2px

p
height: 40px
font-size: 12px
line-height: 20px
+max-text(2)
color: var(--fontColor)
margin: 0
word-break: break-word


@media only screen and (min-width: 960px)
.github-trending .trending
Expand Down

0 comments on commit e499831

Please sign in to comment.