chris/pixelfed
1
0
Fork 0
forked from mirror/pixelfed
Code Pull requests Activity

Update Profile.vue component

Browse source
This commit is contained in:
Daniel Supernault 2020-01-06 23:21:04 -07:00
parent 6a6f1f802f
commit f1e279e5ef
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
resources/assets/js/components/Profile.vue
View file

@ -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'