mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 00:34:50 +00:00
Update Profile.vue component
This commit is contained in:
parent
6a6f1f802f
commit
f1e279e5ef
1 changed files with 22 additions and 8 deletions
|
@ -78,7 +78,7 @@
|
||||||
<!-- DESKTOP PROFILE PICTURE -->
|
<!-- DESKTOP PROFILE PICTURE -->
|
||||||
<div class="d-none d-md-block pb-5">
|
<div class="d-none d-md-block pb-5">
|
||||||
<div v-if="hasStory" class="has-story-lg cursor-pointer shadow-sm" @click="storyRedirect()">
|
<div v-if="hasStory" class="has-story-lg cursor-pointer shadow-sm" @click="storyRedirect()">
|
||||||
<img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow" :src="profile.avatar" width="150px" height="150px">
|
<img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow cursor-pointer" :src="profile.avatar" width="150px" height="150px">
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow" :src="profile.avatar" width="150px" height="150px">
|
<img :alt="profileUsername + '\'s profile picture'" class="rounded-circle box-shadow" :src="profile.avatar" width="150px" height="150px">
|
||||||
|
@ -534,19 +534,33 @@
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
.has-story {
|
.has-story {
|
||||||
width: 83px;
|
width: 84px;
|
||||||
height: 83px;
|
height: 84px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 3px;
|
padding: 4px;
|
||||||
background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
|
background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
|
||||||
}
|
}
|
||||||
.has-story-lg {
|
.has-story img {
|
||||||
width: 156px;
|
width: 76px;
|
||||||
height: 156px;
|
height: 76px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
padding: 3px;
|
padding: 6px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
.has-story-lg {
|
||||||
|
width: 159px;
|
||||||
|
height: 159px;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 4px;
|
||||||
background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
|
background: radial-gradient(ellipse at 70% 70%, #ee583f 8%, #d92d77 42%, #bd3381 58%);
|
||||||
}
|
}
|
||||||
|
.has-story-lg img {
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 6px;
|
||||||
|
background:#fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
import VueMasonry from 'vue-masonry-css'
|
import VueMasonry from 'vue-masonry-css'
|
||||||
|
|
Loading…
Reference in a new issue