chad/awesome-cheatsheets
1
0
Fork 0
mirror of https://github.com/LeCoupa/awesome-cheatsheets.git synced 2025-11-08 22:11:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(github-buttons): stars, watch, fork and follow

Browse Source
This commit is contained in:
Julien
2018-09-10 10:14:05 +02:00
parent d9a67287b6
commit 70c39d3371
5 changed files with 431 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
components/TheGithubButtons.vue Normal file
View File

@@ -0,0 +1,112 @@
<!-- *************************************************************************
TEMPLATE
************************************************************************* -->
<template lang="pug">
.c-the-github-buttons
span.c-the-github-buttons__wrapper
iframe(
:src="'https://ghbtns.com/github-btn.html?user=' + user + '&repo=' + repo + '&type=star&count=true'"
frameborder="0"
scrolling="0"
height="20px"
class="c-the-github-buttons__button c-the-github-buttons__button--star"
)
span.c-the-github-buttons__wrapper
iframe(
:src="'https://ghbtns.com/github-btn.html?user=' + user + '&repo=' + repo + '&type=watch&count=true&v=2'"
frameborder="0"
scrolling="0"
height="20px"
class="c-the-github-buttons__button c-the-github-buttons__button--watch"
)
span.c-the-github-buttons__wrapper
iframe(
:src="'https://ghbtns.com/github-btn.html?user=' + user + '&repo=' + repo + '&type=fork&count=true'"
frameborder="0"
scrolling="0"
height="20px"
class="c-the-github-buttons__button c-the-github-buttons__button--fork"
)
span.c-the-github-buttons__wrapper
iframe(
:src="'https://ghbtns.com/github-btn.html?user=' + user + '&type=follow&count=true'"
frameborder="0"
scrolling="0"
height="20px"
class="c-the-github-buttons__button c-the-github-buttons__button--follow"
)
</template>
<!-- *************************************************************************
SCRIPT
************************************************************************* -->
<script>
export default {
props: {
repo: {
type: String,
required: true
},
user: {
type: String,
required: true
}
}
};
</script>
<!-- *************************************************************************
STYLE
************************************************************************* -->
<style lang="scss">
$c: ".c-the-github-buttons";
#{$c} {
#{$c}__wrapper {
display: inline-block;
margin-bottom: 20px;
width: 100%;
#{$c}__button {
margin: 0 auto;
&--star {
width: 110px;
}
&--watch {
width: 110px;
}
&--fork {
width: 100px;
}
&--follow {
width: 160px;
}
&:nth-last-of-type  {
margin-bottom: 0;
}
}
}
}
@include mq($from: tablet) {
#{$c} {
display: flex;
justify-content: center;
#{$c}__wrapper {
width: initial;
}
}
}
</style>