user_profile.vue 2.69 KB
Newer Older
lain's avatar
lain committed
1
<template>
2
<div>
3
  <div v-if="user.id" class="user-profile panel panel-default">
4 5 6 7 8 9 10 11 12 13 14 15 16 17
    <user-card-content
      :user="user"
      :switcher="true"
      :selected="timeline.viewing"
    />
    <tab-switcher :renderOnlyFocused="true">
      <Timeline
        :label="$t('user_card.statuses')"
        :embedded="true"
        :title="$t('user_profile.timeline_title')"
        :timeline="timeline"
        :timeline-name="'user'"
        :user-id="fetchBy"
      />
18 19
      <div :label="$t('user_card.followees')">
        <div v-if="friends">
20 21 22 23 24 25
          <user-card
            v-for="friend in friends"
            :key="friend.id"
            :user="friend"
            :showFollows="true"
          />
26 27 28 29 30
        </div>
        <div class="userlist-placeholder" v-else>
          <i class="icon-spin3 animate-spin"></i>
        </div>
      </div>
31 32
      <div :label="$t('user_card.followers')">
        <div v-if="followers">
33 34 35 36 37 38
          <user-card
            v-for="follower in followers"
            :key="follower.id"
            :user="follower"
            :showFollows="false"
          />
39 40 41
        </div>
        <div class="userlist-placeholder" v-else>
          <i class="icon-spin3 animate-spin"></i>
42 43
        </div>
      </div>
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58
      <Timeline
        :label="$t('user_card.media')"
        :embedded="true" :title="$t('user_card.media')"
        timeline-name="media"
        :timeline="media"
        :user-id="fetchBy"
      />
      <Timeline
        v-if="isUs"
        :label="$t('user_card.favorites')"
        :embedded="true"
        :title="$t('user_card.favorites')"
        timeline-name="favorites"
        :timeline="favorites"
      />
59 60 61 62 63 64
    </tab-switcher>
  </div>
  <div v-else class="panel user-profile-placeholder">
    <div class="panel-heading">
      <div class="title">
        {{ $t('settings.profile_tab') }}
65 66
      </div>
    </div>
67 68 69
    <div class="panel-body">
      <i class="icon-spin3 animate-spin"></i>
    </div>
lain's avatar
lain committed
70
  </div>
71
</div>
lain's avatar
lain committed
72 73 74
</template>

<script src="./user_profile.js"></script>
lain's avatar
lain committed
75 76 77

<style lang="scss">

78
.user-profile {
HJ's avatar
indents  
HJ committed
79 80
  flex: 2;
  flex-basis: 500px;
81

Shpuld Shpludson's avatar
Shpuld Shpludson committed
82
  .profile-panel-background .panel-heading {
HJ's avatar
indents  
HJ committed
83
    background: transparent;
HJ's avatar
fix  
HJ committed
84 85
    flex-direction: column;
    align-items: stretch;
HJ's avatar
indents  
HJ committed
86
  }
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
  .userlist-placeholder {
    display: flex;
    justify-content: center;
    align-items: middle;
    padding: 2em;
  }

  .timeline-heading {
    display: flex;
    justify-content: center;

    .loadmore-button, .alert {
      flex: 1;
    }

    .loadmore-button {
      height: 28px;
      margin: 10px .6em;
    }

    .title, .loadmore-text {
      display: none
    }
  }
111
}
112 113 114 115 116 117 118 119
.user-profile-placeholder {
  .panel-body {
    display: flex;
    justify-content: center;
    align-items: middle;
    padding: 7em;
  }
}
lain's avatar
lain committed
120
</style>