ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix emotions buttons markup

Browse Source
This commit is contained in:
Alina Beck 2019-12-19 01:03:35 +05:30
parent da9403794d
commit 99a8efa8df
3 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/components/Emotions/Emotions.vue
View File

@ -1,15 +1,17 @@
<template> <template>
<ds-flex :gutter="{ lg: 'large' }" class="emotions-flex"> <ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
<div v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)" :key="emotion"> <ds-flex-item
<ds-flex-item :width="{ lg: '100%' }"> v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)"
<hc-emotions-button :key="emotion"
@toggleEmotion="toggleEmotion" :width="{ lg: '100%' }"
:PostsEmotionsCountByEmotion="PostsEmotionsCountByEmotion" >
:iconPath="iconPath(emotion)" <hc-emotions-button
:emotion="emotion" @toggleEmotion="toggleEmotion"
/> :PostsEmotionsCountByEmotion="PostsEmotionsCountByEmotion"
</ds-flex-item> :iconPath="iconPath(emotion)"
</div> :emotion="emotion"
/>
</ds-flex-item>
</ds-flex> </ds-flex>
</template> </template>
<script> <script>

24
webapp/components/EmotionsButton/EmotionsButton.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div class="emotions-button">
<ds-button size="large" ghost @click="toggleEmotion(emotion)" class="emotions-buttons"> <base-button circle ghost @click="toggleEmotion(emotion)">
<img :src="iconPath" width="40" /> <img :src="iconPath" />
</ds-button> </base-button>
<ds-space margin-bottom="xx-small" /> <ds-space margin-bottom="xx-small" />
<div class="emotions-mobile-space"> <div class="emotions-mobile-space">
<p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p> <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
@ -27,7 +27,18 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.emotions-button {
> .base-button {
padding: 0;
&:hover {
padding: 2px;
}
}
}
.emotions-flex { .emotions-flex {
width: 100%;
justify-content: space-evenly; justify-content: space-evenly;
text-align: center; text-align: center;
} }
@ -36,11 +47,6 @@ export default {
font-size: $font-size-small; font-size: $font-size-small;
} }
.emotions-buttons {
&:hover {
background-color: $background-color-base;
}
}
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.emotions-mobile-space { .emotions-mobile-space {
margin-bottom: 32px; margin-bottom: 32px;

2
webapp/pages/post/_id/_slug/index.vue
View File

@ -48,7 +48,7 @@
<ds-space margin-top="x-large"> <ds-space margin-top="x-large">
<ds-flex :gutter="{ lg: 'small' }"> <ds-flex :gutter="{ lg: 'small' }">
<ds-flex-item <ds-flex-item
:width="{ lg: '75%', md: '75%', sm: '75%' }" :width="{ lg: '75%', md: '75%', sm: '75%', base: '100%' }"
class="emotions-buttons-mobile" class="emotions-buttons-mobile"
> >
<hc-emotions :post="post" /> <hc-emotions :post="post" />