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

5
webapp/components/ShoutButton.vue
View File

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

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

@ -43,22 +43,30 @@
<ds-space margin="xx-small" />
<hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" />
</div>
<ds-flex :gutter="{ lg: 'small' }">
<ds-flex-item :width="{ lg: '75%' }">
<hc-emotions-buttons :post="post" />
</ds-flex-item>
<ds-flex-item :width="{ lg: '10%' }" />
<!-- Shout Button -->
<ds-flex-item :width="{ lg: '15%' }">
<hc-shout-button
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 margin-top="x-large">
<ds-flex :gutter="{ lg: 'small' }">
<ds-flex-item
:width="{ lg: '75%', md: '75%', sm: '75%' }"
class="emotions-buttons-mobile"
>
<hc-emotions-buttons :post="post" />
</ds-flex-item>
<ds-flex-item :width="{ lg: '10%', md: '5%', sm: '5%' }" />
<!-- Shout Button -->
<ds-flex-item
:width="{ lg: '15%', md: '20%', sm: '20%', base: '100%' }"
class="shout-button"
>
<hc-shout-button
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 -->
<ds-section slot="footer">
<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>