user_card_content.vue (9731B)
1 <template>
2 <div id="heading" class="profile-panel-background" :style="headingStyle">
3 <div class="panel-heading text-center">
4 <div class='user-info'>
5 <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
6 <i class="icon-cog usersettings"></i>
7 </router-link>
8 <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
9 <i class="icon-link-ext usersettings"></i>
10 </a>
11 <div class='container'>
12 <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
13 <StillImage class="avatar" :src="user.profile_image_url_original"/>
14 </router-link>
15 <div class="name-and-screen-name">
16 <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
17 <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
18 <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
19 <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
20 <span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
21 </router-link>
22 </div>
23 </div>
24 <div class="user-meta">
25 <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
26 {{ $t('user_card.follows_you') }}
27 </div>
28 <div class="floater" v-if="switcher || isOtherUser">
29 <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
30 <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
31 <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
32 <label for="style-switcher" class='userHighlightSel select'>
33 <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
34 <option value="disabled">No highlight</option>
35 <option value="solid">Solid bg</option>
36 <option value="striped">Striped bg</option>
37 <option value="side">Side stripe</option>
38 </select>
39 <i class="icon-down-open"/>
40 </label>
41 </div>
42 </div>
43 <div v-if="isOtherUser" class="user-interactions">
44 <div class="follow" v-if="loggedIn">
45 <span v-if="user.following">
46 <!--Following them!-->
47 <button @click="unfollowUser" class="pressed">
48 {{ $t('user_card.following') }}
49 </button>
50 </span>
51 <span v-if="!user.following">
52 <button @click="followUser">
53 {{ $t('user_card.follow') }}
54 </button>
55 </span>
56 </div>
57 <div class='mute' v-if='isOtherUser'>
58 <span v-if='user.muted'>
59 <button @click="toggleMute" class="pressed">
60 {{ $t('user_card.muted') }}
61 </button>
62 </span>
63 <span v-if='!user.muted'>
64 <button @click="toggleMute">
65 {{ $t('user_card.mute') }}
66 </button>
67 </span>
68 </div>
69 <div class="remote-follow" v-if='!loggedIn && user.is_local'>
70 <form method="POST" :action='subscribeUrl'>
71 <input type="hidden" name="nickname" :value="user.screen_name">
72 <input type="hidden" name="profile" value="">
73 <button click="submit" class="remote-button">
74 {{ $t('user_card.remote_follow') }}
75 </button>
76 </form>
77 </div>
78 <div class='block' v-if='isOtherUser && loggedIn'>
79 <span v-if='user.statusnet_blocking'>
80 <button @click="unblockUser" class="pressed">
81 {{ $t('user_card.blocked') }}
82 </button>
83 </span>
84 <span v-if='!user.statusnet_blocking'>
85 <button @click="blockUser">
86 {{ $t('user_card.block') }}
87 </button>
88 </span>
89 </div>
90 </div>
91 </div>
92 </div>
93 <div class="panel-body profile-panel-body">
94 <div v-if="!hideUserStatsLocal || switcher" class="user-counts" :class="{clickable: switcher}">
95 <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
96 <h5>{{ $t('user_card.statuses') }}</h5>
97 <span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span>
98 </div>
99 <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
100 <h5>{{ $t('user_card.followees') }}</h5>
101 <span v-if="!hideUserStatsLocal">{{user.friends_count}}</span>
102 </div>
103 <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
104 <h5>{{ $t('user_card.followers') }}</h5>
105 <span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
106 </div>
107 </div>
108 <p v-if="!hideBio && user.description_html" class="profile-bio" v-html="user.description_html"></p>
109 <p v-else-if="!hideBio" class="profile-bio">{{ user.description }}</p>
110 </div>
111 </div>
112 </template>
113
114 <script src="./user_card_content.js"></script>
115
116 <style lang="scss">
117 @import '../../_variables.scss';
118
119 .profile-panel-background {
120 background-size: cover;
121 border-radius: $fallback--panelRadius;
122 border-radius: var(--panelRadius, $fallback--panelRadius);
123
124 .panel-heading {
125 padding: 0.6em 0em;
126 text-align: center;
127 }
128 }
129
130 .profile-panel-body {
131 word-wrap: break-word;
132 background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
133 background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
134
135 .profile-bio {
136 text-align: center;
137 }
138 }
139
140 .user-info {
141 color: $fallback--lightFg;
142 color: var(--lightFg, $fallback--lightFg);
143 padding: 0 16px;
144
145 .container {
146 padding: 16px 10px 6px 10px;
147 display: flex;
148 max-height: 56px;
149 overflow: hidden;
150
151 .avatar {
152 border-radius: $fallback--avatarRadius;
153 border-radius: var(--avatarRadius, $fallback--avatarRadius);
154 flex: 1 0 100%;
155 width: 56px;
156 height: 56px;
157 box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
158 object-fit: cover;
159
160 &.animated::before {
161 display: none;
162 }
163 }
164 }
165
166 &:hover .animated.avatar {
167 canvas {
168 display: none;
169 }
170 img {
171 visibility: visible;
172 }
173 }
174
175 .usersettings {
176 color: $fallback--lightFg;
177 color: var(--lightFg, $fallback--lightFg);
178 opacity: .8;
179 }
180
181 .name-and-screen-name {
182 display: block;
183 margin-left: 0.6em;
184 text-align: left;
185 text-overflow: ellipsis;
186 white-space: nowrap;
187 flex: 1 1 0;
188 }
189
190 .user-name{
191 text-overflow: ellipsis;
192 overflow: hidden;
193 }
194
195 .user-screen-name {
196 color: $fallback--lightFg;
197 color: var(--lightFg, $fallback--lightFg);
198 display: inline-block;
199 font-weight: light;
200 font-size: 15px;
201 padding-right: 0.1em;
202 }
203
204 .user-meta {
205 margin-bottom: .4em;
206
207 .following {
208 font-size: 14px;
209 flex: 0 0 100%;
210 margin: 0;
211 padding-left: 16px;
212 text-align: left;
213 float: left;
214 }
215 .floater {
216 margin: 0;
217 }
218
219 &::after {
220 display: block;
221 content: '';
222 clear: both;
223 }
224 }
225 .user-interactions {
226 display: flex;
227 flex-flow: row wrap;
228 justify-content: space-between;
229
230 div {
231 flex: 1;
232 }
233
234 .mute {
235 max-width: 220px;
236 min-height: 28px;
237 }
238
239 .remote-follow {
240 max-width: 220px;
241 min-height: 28px;
242 }
243
244 .follow {
245 max-width: 220px;
246 min-height: 28px;
247 }
248
249 button {
250 width: 92%;
251 height: 100%;
252 }
253
254 .remote-button {
255 height: 28px !important;
256 width: 92%;
257 }
258
259 .pressed {
260 border-bottom-color: rgba(255, 255, 255, 0.2);
261 border-top-color: rgba(0, 0, 0, 0.2);
262 }
263 }
264 }
265
266 .user-counts {
267 display: flex;
268 line-height:16px;
269 padding: .5em 1.5em 0em 1.5em;
270 text-align: center;
271 justify-content: space-between;
272 color: $fallback--lightFg;
273 color: var(--lightFg, $fallback--lightFg);
274
275 &.clickable {
276 .user-count {
277 cursor: pointer;
278
279 &:hover:not(.selected) {
280 transition: border-bottom 100ms;
281 border-bottom: 3px solid $fallback--link;
282 border-bottom: 3px solid var(--link, $fallback--link);
283 }
284 }
285 }
286 }
287
288 .user-count {
289 flex: 1;
290 padding: .5em 0 .5em 0;
291 margin: 0 .5em;
292
293 &.selected {
294 transition: none;
295 border-bottom: 5px solid $fallback--link;
296 border-bottom: 5px solid var(--link, $fallback--link);
297 border-radius: $fallback--btnRadius;
298 border-radius: var(--btnRadius, $fallback--btnRadius);
299 }
300
301 h5 {
302 font-size:1em;
303 font-weight: bolder;
304 margin: 0 0 0.25em;
305 }
306 a {
307 text-decoration: none;
308 }
309 }
310
311 .dailyAvg {
312 margin-left: 1em;
313 font-size: 0.7em;
314 color: #CCC;
315 }
316 .floater {
317 float: right;
318 margin-top: 16px;
319
320 .userHighlightCl {
321 padding: 2px 10px;
322 }
323 .userHighlightSel,
324 .userHighlightSel.select {
325 padding-top: 0;
326 padding-bottom: 0;
327 }
328 .userHighlightSel.select i {
329 line-height: 22px;
330 }
331
332 .userHighlightText {
333 width: 70px;
334 }
335
336 .userHighlightCl,
337 .userHighlightText,
338 .userHighlightSel,
339 .userHighlightSel.select {
340 height: 22px;
341 vertical-align: top;
342 margin-right: 0
343 }
344 }
345 </style>