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

use base-card on user profile

Browse Source
This commit is contained in:
Alina Beck 2020-02-11 18:31:14 +01:00
parent 408b77a3e7
commit 278868133f
2 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webapp/assets/styles/main.scss
View File

@ -141,10 +141,9 @@ hr {
} }
} }
.ds-card .ds-section { .base-card > .ds-section {
padding: 0; padding: 0;
margin-left: -$space-base; margin: -$space-base;
margin-right: -$space-base;
.ds-container { .ds-container {
padding: $space-base; padding: $space-base;

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

@ -1,14 +1,11 @@
<template> <template>
<div> <div>
<ds-card v-if="user && user.image">
<p>PROFILE IMAGE</p>
</ds-card>
<ds-space /> <ds-space />
<ds-flex v-if="user" :width="{ base: '100%' }" gutter="base"> <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
<ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }"> <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
<ds-card <base-card
:class="{ 'disabled-content': user.disabled }" :class="{ 'disabled-content': user.disabled }"
style="position: relative; height: auto;" style="position: relative; height: auto; overflow: visible;"
> >
<hc-upload v-if="myProfile" :user="user"> <hc-upload v-if="myProfile" :user="user">
<user-avatar :user="user" class="profile-avatar" size="large"></user-avatar> <user-avatar :user="user" class="profile-avatar" size="large"></user-avatar>
@ -87,12 +84,12 @@
<ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text> <ds-text color="soft" size="small" class="hyphenate-text">{{ user.about }}</ds-text>
</ds-space> </ds-space>
</template> </template>
</ds-card> </base-card>
<ds-space /> <ds-space />
<ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;"> <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">
{{ $t('profile.network.title') }} {{ $t('profile.network.title') }}
</ds-heading> </ds-heading>
<ds-card style="position: relative; height: auto;"> <base-card style="position: relative; height: auto;">
<ds-space v-if="user.following && user.following.length" margin="x-small"> <ds-space v-if="user.following && user.following.length" margin="x-small">
<ds-text tag="h5" color="soft"> <ds-text tag="h5" color="soft">
{{ userName | truncate(15) }} {{ $t('profile.network.following') }} {{ userName | truncate(15) }} {{ $t('profile.network.following') }}
@ -120,9 +117,9 @@
{{ userName }} {{ $t('profile.network.followingNobody') }} {{ userName }} {{ $t('profile.network.followingNobody') }}
</p> </p>
</template> </template>
</ds-card> </base-card>
<ds-space /> <ds-space />
<ds-card style="position: relative; height: auto;"> <base-card style="position: relative; height: auto;">
<ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small"> <ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
<ds-text tag="h5" color="soft"> <ds-text tag="h5" color="soft">
{{ userName | truncate(15) }} {{ $t('profile.network.followedBy') }} {{ userName | truncate(15) }} {{ $t('profile.network.followedBy') }}
@ -150,9 +147,9 @@
{{ userName }} {{ $t('profile.network.followedByNobody') }} {{ userName }} {{ $t('profile.network.followedByNobody') }}
</p> </p>
</template> </template>
</ds-card> </base-card>
<ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large"> <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
<ds-card style="position: relative; height: auto;"> <base-card style="position: relative; height: auto;">
<ds-space margin="x-small"> <ds-space margin="x-small">
<ds-text tag="h5" color="soft"> <ds-text tag="h5" color="soft">
{{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}? {{ $t('profile.socialMedia') }} {{ userName | truncate(15) }}?
@ -166,14 +163,14 @@
</ds-space> </ds-space>
</template> </template>
</ds-space> </ds-space>
</ds-card> </base-card>
</ds-space> </ds-space>
</ds-flex-item> </ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }"> <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
<masonry-grid> <masonry-grid>
<ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth"> <ds-grid-item class="profile-top-navigation" :row-span="3" column-span="fullWidth">
<ds-card class="ds-tab-nav"> <base-card class="ds-tab-nav">
<ul class="Tabs"> <ul class="Tabs">
<li class="Tabs__tab pointer" :class="{ active: tabActive === 'post' }"> <li class="Tabs__tab pointer" :class="{ active: tabActive === 'post' }">
<a @click="handleTab('post')"> <a @click="handleTab('post')">
@ -213,7 +210,7 @@
</a> </a>
</li> </li>
</ul> </ul>
</ds-card> </base-card>
</ds-grid-item> </ds-grid-item>
<ds-grid-item :row-span="2" column-span="fullWidth"> <ds-grid-item :row-span="2" column-span="fullWidth">
@ -562,18 +559,17 @@ export default {
top: 53px; top: 53px;
z-index: 2; z-index: 2;
} }
.ds-tab-nav { .ds-tab-nav.base-card {
.ds-card-content { padding: 0;
padding: 0 !important;
.ds-tab-nav-item { .ds-tab-nav-item {
&.ds-tab-nav-item-active { &.ds-tab-nav-item-active {
border-bottom: 3px solid #17b53f; border-bottom: 3px solid #17b53f;
&:first-child { &:first-child {
border-bottom-left-radius: $border-radius-x-large; border-bottom-left-radius: $border-radius-x-large;
} }
&:last-child { &:last-child {
border-bottom-right-radius: $border-radius-x-large; border-bottom-right-radius: $border-radius-x-large;
}
} }
} }
} }