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

Make mobile responsive

Browse Source
This commit is contained in:
Matt Rider 2019-08-02 16:10:19 +02:00
parent 3da986518e
commit 751bbbf889
3 changed files with 59 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
webapp/components/EmotionsButtons/EmotionsButtons.vue
View File

@ -1,27 +1,21 @@
<template> <template>
<ds-space margin="large" style="text-align: center"> <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">
<div v-for="emotion in Object.keys(postsEmotionsCountByEmotion)" :key="emotion"> <ds-flex-item :width="{ lg: '100%' }">
<ds-flex-item :width="{ lg: '100%' }"> <ds-button size="large" ghost @click="toggleEmotion(emotion)" class="emotions-buttons">
<ds-button size="large" ghost @click="toggleEmotion(emotion)" class="emotions-buttons"> <img :src="iconPath(emotion)" width="53" />
<img :src="iconPath(emotion)" width="53" /> </ds-button>
</ds-button> <ds-space margin-bottom="xx-small" />
<ds-space margin-bottom="xx-small" /> <div class="emotions-mobile-space">
<div> <p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p>
<p class="emotions-label">{{ $t(`contribution.emotions-label.${emotion}`) }}</p> <ds-heading style="display: inline" tag="h3" :key="postsEmotionsCountByEmotion[emotion]">
<ds-heading {{ postsEmotionsCountByEmotion[emotion] }}x
style="display: inline" </ds-heading>
tag="h3" {{ $t('contribution.emotions-label.emoted') }}
:key="postsEmotionsCountByEmotion[emotion]" </div>
> </ds-flex-item>
{{ postsEmotionsCountByEmotion[emotion] }}x </div>
</ds-heading> </ds-flex>
{{ $t('contribution.emotions-label.emoted') }}
</div>
</ds-flex-item>
</div>
</ds-flex>
</ds-space>
</template> </template>
<script> <script>
import gql from 'graphql-tag' import gql from 'graphql-tag'
@ -122,6 +116,7 @@ export default {
<style lang="scss"> <style lang="scss">
.emotions-flex { .emotions-flex {
justify-content: space-evenly; justify-content: space-evenly;
text-align: center;
} }
.emotions-label { .emotions-label {
@ -133,4 +128,9 @@ export default {
background-color: $background-color-base; background-color: $background-color-base;
} }
} }
@media only screen and (max-width: 960px) {
.emotions-mobile-space {
margin-bottom: 32px;
}
}
</style> </style>

5
webapp/components/ShoutButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<ds-space margin="large" style="text-align: center"> <ds-space margin="xx-small" class="text-align-center">
<ds-button <ds-button
:loading="loading" :loading="loading"
:disabled="disabled" :disabled="disabled"
@ -88,4 +88,7 @@ export default {
.shout-button-text { .shout-button-text {
user-select: none; user-select: none;
} }
.text-align-center {
text-align: center;
}
</style> </style>

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

@ -43,22 +43,30 @@
<ds-space margin="xx-small" /> <ds-space margin="xx-small" />
<hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" /> <hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" />
</div> </div>
<ds-flex :gutter="{ lg: 'small' }"> <ds-space margin-top="x-large">
<ds-flex-item :width="{ lg: '75%' }"> <ds-flex :gutter="{ lg: 'small' }">
<hc-emotions-buttons :post="post" /> <ds-flex-item
</ds-flex-item> :width="{ lg: '75%', md: '75%', sm: '75%' }"
<ds-flex-item :width="{ lg: '10%' }" /> class="emotions-buttons-mobile"
<!-- Shout Button --> >
<ds-flex-item :width="{ lg: '15%' }"> <hc-emotions-buttons :post="post" />
<hc-shout-button </ds-flex-item>
v-if="post.author" <ds-flex-item :width="{ lg: '10%', md: '5%', sm: '5%' }" />
:disabled="isAuthor(post.author.id)" <!-- Shout Button -->
:count="post.shoutedCount" <ds-flex-item
:is-shouted="post.shoutedByCurrentUser" :width="{ lg: '15%', md: '20%', sm: '20%', base: '100%' }"
:post-id="post.id" class="shout-button"
/> >
</ds-flex-item> <hc-shout-button
</ds-flex> v-if="post.author"
:disabled="isAuthor(post.author.id)"
:count="post.shoutedCount"
:is-shouted="post.shoutedByCurrentUser"
:post-id="post.id"
/>
</ds-flex-item>
</ds-flex>
</ds-space>
<!-- Comments --> <!-- Comments -->
<ds-section slot="footer"> <ds-section slot="footer">
<hc-comment-list :post="post" /> <hc-comment-list :post="post" />
@ -209,4 +217,12 @@ export default {
} }
} }
} }
@media only screen and (max-width: 960px) {
.shout-button {
float: left;
}
// .emotions-buttons-mobile {
// margin-top: -80px;
// }
}
</style> </style>