diff --git a/app/components/user/skills-list.js b/app/components/user/skills-list.js new file mode 100644 index 000000000..72c467a9c --- /dev/null +++ b/app/components/user/skills-list.js @@ -0,0 +1,7 @@ +import Component from '@ember/component'; + +export default Component.extend({ + classNames: ['user__skills-list'], + + user: null +}); diff --git a/app/styles/app.scss b/app/styles/app.scss index cda482d4f..208911ba6 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -199,6 +199,7 @@ @import "components/settings-menu"; @import "components/signup-form"; @import "components/user-details"; +@import "components/user/skills-list"; @import "components/user-menu"; // dropdown-menu has to come after user-menu for styles to work correctly diff --git a/app/styles/components/user-details.scss b/app/styles/components/user-details.scss index eec2f636c..74995ee01 100644 --- a/app/styles/components/user-details.scss +++ b/app/styles/components/user-details.scss @@ -4,22 +4,6 @@ &__main { @include span-columns(9); } - - &__skills-list { - ul { - margin-top: 10px; - - li { - background: #E8EBED; - border-radius: 2px; - color: #333; - display: inline-flex; - font-weight: 600; - margin: 0 2px 5px 0; - padding: 4px 7px; - } - } - } } .empty-state { diff --git a/app/styles/components/user-list-item.scss b/app/styles/components/user-list-item.scss index 8a19f3365..fcdf59670 100644 --- a/app/styles/components/user-list-item.scss +++ b/app/styles/components/user-list-item.scss @@ -28,27 +28,8 @@ } } &__skills { - color: $text--lightest; - font-size: $body-font-size-small; @include span-columns(6); - ul { - margin-top: 6px; - } - li { - display: inline-block; - &:after { - content: ", "; - } - &:last-child { - // confused by the selector below - &:not(:first-child):before { - content: "and "; - } - &:after { - content: "."; - } - } - } + font-size: $body-font-size-small; } } diff --git a/app/styles/components/user/skills-list.scss b/app/styles/components/user/skills-list.scss new file mode 100644 index 000000000..ec0ec69c8 --- /dev/null +++ b/app/styles/components/user/skills-list.scss @@ -0,0 +1,16 @@ +.user__skills-list { + ul { + align-items: flex-start; + display: flex; + margin-top: 10px; + + li { + background: #E8EBED; + border-radius: 2px; + color: #333; + font-weight: 600; + margin-right: 5px; + padding: 4px 7px; + } + } +} diff --git a/app/templates/components/user-details.hbs b/app/templates/components/user-details.hbs index f856fe614..d75e5c002 100644 --- a/app/templates/components/user-details.hbs +++ b/app/templates/components/user-details.hbs @@ -6,11 +6,7 @@
{{user.username}} hasn't added any skills yet. diff --git a/app/templates/components/user-list-item.hbs b/app/templates/components/user-list-item.hbs index 4cc75b265..fbc8d27cc 100644 --- a/app/templates/components/user-list-item.hbs +++ b/app/templates/components/user-list-item.hbs @@ -20,11 +20,7 @@