ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2026-03-01 12:44:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webapp): flex layout und spacing in profile und group pages (#9286)

Browse Source
This commit is contained in:
Ulf Gebhardt 2026-02-21 18:59:01 +01:00 committed by GitHub
parent 8b14759782
commit 1b2c5e68b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 624 additions and 632 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
View File

@ -950,7 +950,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
</div>
<div
class="ds-mb-large ds-space-centered"
class="ds-mt-small ds-mb-small ds-space-centered"
>
<nuxt-link-stub
aria-label="contribution.newPost"
@ -986,7 +986,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
</div>
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -1491,7 +1491,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
<!---->
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -2015,7 +2015,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
<!---->
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -2994,7 +2994,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
</div>
<div
class="ds-mb-large ds-space-centered"
class="ds-mt-small ds-mb-small ds-space-centered"
>
<nuxt-link-stub
aria-label="contribution.newPost"
@ -3030,7 +3030,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
</div>
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -4030,7 +4030,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
</div>
<div
class="ds-mb-large ds-space-centered"
class="ds-mt-small ds-mb-small ds-space-centered"
>
<nuxt-link-stub
aria-label="contribution.newPost"
@ -4066,7 +4066,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
</div>
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -4865,7 +4865,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
<!---->
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -5683,7 +5683,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
<!---->
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -6594,7 +6594,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
</div>
<div
class="ds-mb-large ds-space-centered"
class="ds-mt-small ds-mb-small ds-space-centered"
>
<nuxt-link-stub
aria-label="contribution.newPost"
@ -6630,7 +6630,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
</div>
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -7714,7 +7714,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
</div>
<div
class="ds-mb-large ds-space-centered"
class="ds-mt-small ds-mb-small ds-space-centered"
>
<nuxt-link-stub
aria-label="contribution.newPost"
@ -7750,7 +7750,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
</div>
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div
@ -8757,7 +8757,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
</div>
<div
class="ds-mb-large ds-space-centered"
class="ds-mt-small ds-mb-small ds-space-centered"
>
<nuxt-link-stub
aria-label="contribution.newPost"
@ -8793,7 +8793,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
</div>
<div
class="ds-grid"
class="ds-grid ds-mt-small"
style="grid-auto-rows: 2px; row-gap: 2px;"
>
<div

8
webapp/pages/groups/_id/_slug.vue
View File

@ -216,7 +216,7 @@
</os-button>
</os-card>
</div>
<div v-if="isGroupMemberNonePending" class="ds-mb-large ds-space-centered">
<div v-if="isGroupMemberNonePending" class="ds-mt-small ds-mb-small ds-space-centered">
<os-button
as="nuxt-link"
:to="{
@ -238,10 +238,7 @@
</template>
</os-button>
</div>
<masonry-grid>
<!-- TapNavigation -->
<!-- <tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" /> -->
<masonry-grid class="ds-mt-small">
<!-- Group post feed -->
<template v-if="posts && posts.length">
<masonry-grid-item
@ -657,6 +654,7 @@ export default {
.group-layout__main {
flex: 0 0 100%;
width: 100%;
min-width: 0;
}
@media #{$media-query-small} {
.group-layout__sidebar {

1160
webapp/pages/profile/_id/__snapshots__/_slug.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

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

@ -135,33 +135,34 @@
</div>
<div class="profile-layout__main">
<tab-navigation
:tabs="tabOptions"
:activeTab="tabActive"
class="ds-mb-large"
@switch-tab="handleTab"
/>
<div v-if="myProfile" class="profile-post-add-button-container">
<os-button
as="nuxt-link"
:to="{ name: 'post-create-type' }"
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
}"
class="profile-post-add-button"
variant="primary"
appearance="filled"
circle
:aria-label="$t('contribution.newPost')"
>
<template #icon>
<os-icon :icon="icons.plus" />
</template>
</os-button>
</div>
<masonry-grid>
<!-- TapNavigation -->
<tab-navigation :tabs="tabOptions" :activeTab="tabActive" @switch-tab="handleTab" />
<!-- feed -->
<div v-if="myProfile" style="grid-row-end: span 2; grid-column: 1 / -1">
<div class="profile-post-add-button-container">
<os-button
as="nuxt-link"
:to="{ name: 'post-create-type' }"
v-tooltip="{
content: $t('contribution.newPost'),
placement: 'left',
}"
class="profile-post-add-button"
variant="primary"
appearance="filled"
circle
:aria-label="$t('contribution.newPost')"
>
<template #icon>
<os-icon :icon="icons.plus" />
</template>
</os-button>
</div>
</div>
<template v-if="posts.length">
<masonry-grid-item
v-for="post in posts"
@ -505,6 +506,7 @@ export default {
.profile-layout__main {
flex: 0 0 100%;
width: 100%;
min-width: 0;
}
@media #{$media-query-small} {
.profile-layout__sidebar {
@ -533,7 +535,7 @@ export default {
.profile-post-add-button-container {
display: flex;
justify-content: center;
padding: $space-x-small 0;
margin: $space-small 0;
}
.profile-post-add-button {
box-shadow: $box-shadow-x-large !important;