From 5c29f010cf52f3ba5ee597a50df97219d8dc04a7 Mon Sep 17 00:00:00 2001 From: Santo Cariotti Date: Fri, 19 Mar 2021 20:27:26 +0100 Subject: feat: commits list --- src/components/Commit.vue | 53 ++++++++++++++++++++++++++++ src/main.js | 1 + src/sass/_commit.sass | 88 +++++++++++++++++++++++++++++++++++++++++++++++ src/sass/main.sass | 1 + src/views/Home.vue | 17 +++++++-- 5 files changed, 157 insertions(+), 3 deletions(-) create mode 100644 src/components/Commit.vue create mode 100644 src/sass/_commit.sass (limited to 'src') diff --git a/src/components/Commit.vue b/src/components/Commit.vue new file mode 100644 index 0000000..63e1764 --- /dev/null +++ b/src/components/Commit.vue @@ -0,0 +1,53 @@ + + + diff --git a/src/main.js b/src/main.js index 838c5f3..a05771b 100644 --- a/src/main.js +++ b/src/main.js @@ -7,6 +7,7 @@ import { BootstrapVue } from 'bootstrap-vue'; Vue.config.productionTip = false; Vue.use(BootstrapVue); +Vue.use(require('vue-moment')); new Vue({ router, diff --git a/src/sass/_commit.sass b/src/sass/_commit.sass new file mode 100644 index 0000000..e9e0e06 --- /dev/null +++ b/src/sass/_commit.sass @@ -0,0 +1,88 @@ +@import "_bootstrap.sass"; + +.commit + border-bottom: #ccc 1px solid + padding: 20px 10px + margin: 0 + &:hover + background-color: darken(#fbfcfc, 3%) + .head + > div + span + color: #9f9ca5 + @include breakpoint(phablet) + margin-right: 8px + h6 a + color: $secondary + font-weight: 100 + span + float: left + .author_committer + display: grid + grid-template-columns: 50% 50% + align-items: center + justify-items: center + @include breakpoint(phablet) + grid-template-columns: 100% + div + width: 100% + @include breakpoint(phablet) + &:first-child + padding-bottom: 10px + .avatar + width: 30px + float: left + margin-right: 5px + p + margin: 0 + line-height: 30px + overflow: hidden + height: 30px + text-overflow: ellipsis + white-space: nowrap + padding-right: 5px + h5, h6 + font-weight: bold + font-family: $font-family-mono + font-size: 2em + a + color: $primary + text-decoration: underline + @include breakpoint(phablet) + overflow: hidden + width: 111px + display: block + + h6 + font-size: 1em + a + line-height: 24px + margin-left: 5px + @include breakpoint(phablet) + width: 56px + + + .text + p + margin: 5px 0 0 + span.middot + margin: 0 10px + color: #ccc + span.date + color: $secondary + white-space: pre + display: inline-block + + .repo a + color: #fff + text-decoration: none !important + background: $primary + padding: 3px + float: right + max-width: 200px + overflow: hidden + text-overflow: ellipsis + white-space: nowrap + border-radius: 2px + @include breakpoint(phablet) + width: 180px diff --git a/src/sass/main.sass b/src/sass/main.sass index 18b025a..09acd39 100644 --- a/src/sass/main.sass +++ b/src/sass/main.sass @@ -1,4 +1,5 @@ @import "_header.sass"; +@import "_commit.sass"; body color: #2c3e50 diff --git a/src/views/Home.vue b/src/views/Home.vue index b5fbda0..c1d9420 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -2,26 +2,37 @@ main header-blue b-container - h2 List of commits + b-row + b-col(md="8" sm="12") + h2 List of commits + section#commits + commit-card( + v-for="i in commits" :key="i.hash" :data="i" + :author="emails[i.author_email]" + :committer="emails[i.committer_email]" + ) + b-col