IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix styling, renaming classes

Browse Source
This commit is contained in:
mattwr18 2020-01-08 11:56:32 +01:00
parent b090b1177f
commit 068e2b4417
4 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/integration/common/post.js
View File

@ -24,7 +24,7 @@ Then("my comment should be successfully created", () => {
Then("I should see my comment", () => { Then("I should see my comment", () => {
cy.get("div.comment p") cy.get("div.comment p")
.should("contain", "Human Connection rocks") .should("contain", "Human Connection rocks")
.get(".ds-avatar img") .get(".user-avatar img")
.should("have.attr", "src") .should("have.attr", "src")
.and("contain", narratorAvatar) .and("contain", narratorAvatar)
.get("div p.ds-text span") .get("div p.ds-text span")

4
webapp/components/AvatarMenu/AvatarMenu.spec.js
View File

@ -42,9 +42,9 @@ describe('AvatarMenu.vue', () => {
wrapper = Wrapper() wrapper = Wrapper()
}) })
it('renders the HcAvatar component', () => { it('renders the UserAvatar component', () => {
wrapper.find('.avatar-menu-trigger').trigger('click') wrapper.find('.avatar-menu-trigger').trigger('click')
expect(wrapper.find('.ds-avatar').exists()).toBe(true) expect(wrapper.find('.user-avatar').exists()).toBe(true)
}) })
describe('given a userName', () => { describe('given a userName', () => {

41
webapp/components/UserAvatar/UserAvatar.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="ds-avatar avatar" :class="[`ds-size-${this.size}`, online && 'is-online']"> <div :class="[`size-${this.size}`, 'user-avatar']">
<ds-flex v-if="!hasImage || error" style="height: 100%"> <ds-flex v-if="!hasImage || error" style="height: 100%">
<ds-flex-item centered> <ds-flex-item centered>
<template v-if="isAnonymus"> <template v-if="isAnonymus">
<ds-icon name="eye-slash" /> <base-icon name="eye-slash" />
</template> </template>
<template v-else> <template v-else>
{{ userInitials }} {{ userInitials }}
</template> </template>
</ds-flex-item> </ds-flex-item>
</ds-flex> </ds-flex>
<img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" :size="size" /> <img v-if="image && !error" :src="image | proxyApiUrl" @error="onError" />
</div> </div>
</template> </template>
@ -31,7 +31,6 @@ export default {
}, },
}, },
image: { type: String, default: null }, image: { type: String, default: null },
online: { type: Boolean, default: false },
}, },
data() { data() {
return { return {
@ -53,3 +52,37 @@ export default {
}, },
} }
</script> </script>
<style lang="scss">
.user-avatar {
img {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
object-fit: cover;
object-position: center;
}
.base-icon {
margin-top: -0.1em;
}
&.size-small {
width: $size-avatar-small;
height: $size-avatar-small;
}
&.size-base {
border-width: 1px;
width: $size-avatar-base;
height: $size-avatar-base;
}
&.size-large {
width: $size-avatar-large;
height: $size-avatar-large;
}
&.size-x-large {
width: $size-avatar-x-large;
height: $size-avatar-x-large;
}
}
</style>

3
webapp/pages/profile/_id/_slug.vue
View File

@ -519,11 +519,10 @@ export default {
} }
} }
} }
.profile-avatar.ds-avatar { .profile-avatar.user-avatar {
display: block; display: block;
margin: auto; margin: auto;
margin-top: -60px; margin-top: -60px;
border: #fff 5px solid;
} }
.page-name-profile-id-slug { .page-name-profile-id-slug {
.ds-flex-item:first-child .content-menu { .ds-flex-item:first-child .content-menu {