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;
margin-left: -$space-base;
margin-right: -$space-base;
margin: -$space-base;
.ds-container {
padding: $space-base;

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

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