Skip to content

Commit

Permalink
Merge branch 'v2' into create-search-component
Browse files Browse the repository at this point in the history
  • Loading branch information
Douglas Paz committed Sep 20, 2018
2 parents db4580b + 7f523e7 commit 7a5b8c4
Show file tree
Hide file tree
Showing 6 changed files with 167 additions and 3 deletions.
5 changes: 5 additions & 0 deletions src/bh/assets/icons/flag-variant.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions src/bh/assets/scss/bh.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,25 @@ strong {
}
}
}

.bh {
&-title-1 {
margin-bottom: 2rem;
font-size: 2rem;
}

&-title-2 {
margin-bottom: 2rem;
font-size: 1.5rem;
}

&-title-3 {
margin-bottom: 2rem;
font-size: 1.25rem;
}

&-title-4 {
margin-bottom: 2rem;
font-size: .75rem;
}
}
15 changes: 14 additions & 1 deletion src/bh/components/BhBadge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
:class="{
'bh-badge': true,
[`bh-badge--${size}`]: !!size,
[`bh-badge--color-${color}`]: !!color
}"
@click="$emit('click', $event)">
<slot />
Expand All @@ -17,6 +18,10 @@ export default {
type: String,
default: null,
},
color: {
type: String,
default: null,
},
},
};
</script>
Expand All @@ -33,7 +38,6 @@ export default {
padding: 0 1rem;
font-size: 1rem;
line-height: $size-normal;
background-color: $color-lighter-grey;
border-radius: ($size-normal / 2);
&--small {
Expand All @@ -60,6 +64,15 @@ export default {
border-radius: ($size-large / 2);
}
@each $color in $colors {
$color-name: nth($color, 1);
$color-value: nth($color, 2);
&--#{$color-name} {
background-color: $color-value;
}
}
> * {
margin-right: 8px;
Expand Down
2 changes: 2 additions & 0 deletions src/bh/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import Account from 'bh/assets/icons/account.svg';
import Botinho from 'bh/assets/icons/botinho.svg';
import DotsVertical from 'bh/assets/icons/dots-vertical.svg';
import Magnify from 'bh/assets/icons/magnify.svg';
import FlagVariant from 'bh/assets/icons/flag-variant.svg';
import Home from 'bh/assets/icons/home.svg';
import FlagBr from 'bh/assets/icons/flag-br.svg';
import FlagDe from 'bh/assets/icons/flag-de.svg';
Expand All @@ -34,6 +35,7 @@ export const icons = {
botinho: Botinho,
'dots-vertical': DotsVertical,
magnify: Magnify,
'flag-variant': FlagVariant,
home: Home,
'flag-br': FlagBr,
'flag-de': FlagDe,
Expand Down
2 changes: 1 addition & 1 deletion src/components/repository/RepositoryViewBase/RepositoryNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default {
a {
position: relative;
display: inline-flex;
padding: 0 1rem 1.25rem;
padding: 0 1.5rem 1.25rem;
color: $color-grey;
font-weight: $font-weight-medium;
text-align: center;
Expand Down
124 changes: 123 additions & 1 deletion src/views/repository/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,66 @@
:repository="repository"
:loading="loading"
:error-code="errorCode">
<h1>hey</h1>
<div
v-if="repository"
class="repository-home">
<div class="repository-home__permissions">
<img
src="@/assets/imgs/mascot.svg"
alt="mascot"
class="repository-home__permissions__mascot">
<div class="repository-home__permissions__message">
<p>You can’t contribute</p>
<p>and you can’t write.</p>
</div>
</div>
<div class="repository-home__info">
<div class="repository-home__info__header">
<span>
<bh-icon value="flag-variant" />
{{ repository.available_languages.length }} language
</span>
<span>
<bh-icon value="botinho" />
{{ repository.examples__count }} Examples, created a
{{ repository.created_at | moment('from') }}
</span>
</div>
<div class="repository-home__info__description">
<p v-if="repository.description">{{ repository.description }}</p>
<p v-else>There is no description for this repository</p>
</div>
<h1 class="bh-title-1">Can identify</h1>
<div class="bh-grid">
<div class="repository-home__info__attribute bh-grid__item">
<h1 class="bh-title-2">Intenties</h1>
<div class="repository-home__info__attribute__card">
<bh-badge
v-for="(intent, index) in repository.intents"
:key="index"
size="small"
color="grey"
class="repository-home__info__attribute__card__badge">
<span v-if="intent">{{ intent.value }}</span>
</bh-badge>
</div>
</div>
<div class="repository-home__info__attribute bh-grid__item">
<h1 class="bh-title-2">Categories</h1>
<div class="repository-home__info__attribute__card">
<bh-badge
v-for="(category, index) in repository.categories_list"
:key="index"
size="small"
color="grey"
class="repository-home__info__attribute__card__badge">
<span>{{ category }}</span>
</bh-badge>
</div>
</div>
</div>
</div>
</div>
</repository-view-base>
</template>

Expand All @@ -22,3 +81,66 @@ export default {
extends: RepositoryBase,
};
</script>

<style lang="scss">
@import '~bh/assets/scss/colors.scss';
@import '~bh/assets/scss/variables.scss';
.repository-home {
&__permissions {
background-color: $color-lighter-grey;
padding: 3rem;
display: flex;
justify-content: center;
align-items: center;
&__mascot {
width: 4rem;
height: 4rem;
}
&__message {
margin-left: 1rem;
}
}
&__info {
padding: 3rem;
&__header {
margin-bottom: 4rem;
color: $color-grey;
> span {
margin-right: 4rem;
}
}
&__description {
margin-bottom: 4rem;
color: $color-grey;
}
&__attribute {
flex-basis: 50%;
&__card {
background-color: $color-lighter-grey;
border-radius: 6px;
padding: .75rem;
margin: -.25rem;
&__badge {
margin: .25rem;
> span {
color: $color-primary-inverted
}
}
}
}
}
}
</style>

0 comments on commit 7a5b8c4

Please sign in to comment.