UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-12-01 18:53:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update Profile + Timeline components, simplify UI

Browse source
This commit is contained in:
Daniel Supernault 2020-08-25 19:05:11 -06:00
parent 2ec951d227
commit 38d28ab4ac
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -165,7 +165,7 @@
<a :class="this.mode == 'collections' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images"></i> <span class="d-none d-md-inline-block small pl-1">COLLECTIONS</span></a> <a :class="this.mode == 'collections' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('collections')"><i class="fas fa-images"></i> <span class="d-none d-md-inline-block small pl-1">COLLECTIONS</span></a>
</li> </li>
<li v-if="owner" class="nav-item border-top"> <li v-if="owner" class="nav-item border-top">
<a :class="this.mode == 'bookmarks' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark"></i></a> <a :class="this.mode == 'bookmarks' ? 'nav-link text-dark' : 'nav-link'" href="#" v-on:click.prevent="switchMode('bookmarks')"><i class="fas fa-bookmark"></i> <span class="d-none d-md-inline-block small pl-1">SAVED</span></a>
</li> </li>
</ul> </ul>
</div> </div>

28
resources/assets/js/components/Timeline.vue
View file

@ -7,16 +7,17 @@
</p> </p>
</div> </div>
<div class="col-12 pl-3 pl-md-0 pt-3 pl-0"> <div class="col-12 pl-3 pl-md-0 pt-3 pl-0">
<div class="d-flex justify-content-between align-items-center"> <div class="d-none d-md-flex justify-content-between align-items-center">
<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p> <p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
<p class="mb-0"> <p class="mb-0">
<a href="#" :class="[layout=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i> &nbsp; Feed</a> <span class="btn-group">
&nbsp; | &nbsp; <a href="#" :class="[layout=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i></a>
<a href="#" :class="[layout!=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i> &nbsp; Grid</a> <a href="#" :class="[layout!=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i></a>
</span>
</p> </p>
<p class="mb-0 d-none d-md-block"> <p class="mb-0 d-none d-md-block">
<a class="btn btn-block btn-primary btn-sm font-weight-bold border" href="/i/compose" data-toggle="modal" data-target="#composeModal"> <a class="btn btn-block btn-primary btn-sm font-weight-bold border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
<i class="fas fa-camera pr-3 fa-lg pt-1"></i> New Post <i class="fas fa-camera fa-lg pt-1"></i>
</a> </a>
</p> </p>
</div> </div>
@ -266,8 +267,8 @@
</div> --> </div> -->
<div class="mb-4"> <div class="mb-4">
<div v-show="!loading" class="card shadow-none border"> <div v-show="!loading" class="">
<div class="card-body pb-2"> <div class="pb-2">
<div class="media d-flex align-items-center"> <div class="media d-flex align-items-center">
<a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3"> <a :href="!userStory ? profile.url : '/stories/' + profile.acct" class="mr-3">
<!-- <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> --> <!-- <img class="mr-3 rounded-circle box-shadow" :src="profile.avatar || '/storage/avatars/default.png'" alt="avatar" width="64px" height="64px" onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=2'"> -->
@ -292,7 +293,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="card-footer bg-transparent border-top mt-2 py-1"> <!-- <div class="card-footer bg-transparent border-top mt-2 py-1">
<div class="d-flex justify-content-between text-center"> <div class="d-flex justify-content-between text-center">
<span class="cursor-pointer" @click="redirect(profile.url)"> <span class="cursor-pointer" @click="redirect(profile.url)">
<p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p> <p class="mb-0 font-weight-bold">{{formatCount(profile.statuses_count)}}</p>
@ -307,7 +308,7 @@
<p class="mb-0 small text-muted">Following</p> <p class="mb-0 small text-muted">Following</p>
</span> </span>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
@ -372,13 +373,14 @@
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p> <p class="lead text-muted mb-0"><i :class="[scope == 'home' ? 'fas fa-home':'fas fa-stream']"></i> &nbsp; {{scope == 'local' ? 'Public' : 'Home'}} Timeline</p>
<p class="mb-0"> <p class="mb-0">
<a href="#" :class="[layout=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i> &nbsp; Feed</a> <span class="btn-group">
&nbsp; | &nbsp; <a href="#" :class="[layout=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('feed')"><i class="fas fa-list"></i></a>
<a href="#" :class="[layout!=='feed'?'font-weight-bold text-dark text-decoration-none':'font-weight-light text-muted text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i> &nbsp; Grid</a> <a href="#" :class="[layout!=='feed'?'btn btn-sm btn-outline-primary font-weight-bold text-decoration-none':'btn btn-sm btn-outline-lighter font-weight-light text-decoration-none']" @click.prevent="switchFeedLayout('grid')"><i class="fas fa-th"></i></a>
</span>
</p> </p>
<p class="mb-0 d-none d-md-block"> <p class="mb-0 d-none d-md-block">
<a class="btn btn-block btn-primary btn-sm font-weight-bold border" href="/i/compose" data-toggle="modal" data-target="#composeModal"> <a class="btn btn-block btn-primary btn-sm font-weight-bold border" href="/i/compose" data-toggle="modal" data-target="#composeModal">
<i class="fas fa-camera pr-3 fa-lg pt-1"></i> New Post <i class="fas fa-camera fa-lg pt-1"></i>
</a> </a>
</p> </p>
</div> </div>