mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-29 09:43:16 +00:00
Merge pull request #1267 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
4596967af9
3 changed files with 140 additions and 111 deletions
BIN
public/js/timeline.js
vendored
BIN
public/js/timeline.js
vendored
Binary file not shown.
Binary file not shown.
|
@ -8,8 +8,38 @@
|
||||||
<span class="sr-only">Loading...</span>
|
<span class="sr-only">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card mb-sm-4 status-card card-md-rounded-0" :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
|
<div :data-status-id="status.id" v-for="(status, index) in feed" :key="`${index}-${status.id}`">
|
||||||
|
<div v-if="index == 2 && showSuggestions == true" class="card mb-sm-4 status-card card-md-rounded-0">
|
||||||
|
<div class="card-header d-flex align-items-center justify-content-between bg-white border-0 pb-0">
|
||||||
|
<h6 class="text-muted font-weight-bold mb-0">Suggestions For You</h6>
|
||||||
|
<span class="cursor-pointer text-muted" v-on:click="hideSuggestions"><i class="fas fa-times"></i></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-body row">
|
||||||
|
<div class="col-12 col-md-4 mb-3" v-for="(rec, index) in suggestions">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body text-center pt-3">
|
||||||
|
<p class="mb-0">
|
||||||
|
<a :href="'/'+rec.username">
|
||||||
|
<img :src="rec.avatar" class="img-fluid rounded-circle cursor-pointer" width="45px" height="45px">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<div class="py-3">
|
||||||
|
<p class="font-weight-bold text-dark cursor-pointer mb-0">
|
||||||
|
<a :href="'/'+rec.username" class="text-decoration-none text-dark">
|
||||||
|
{{rec.username}}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p class="small text-muted mb-0">{{rec.message}}</p>
|
||||||
|
</div>
|
||||||
|
<p class="mb-0">
|
||||||
|
<a class="btn btn-primary btn-block font-weight-bold py-0" href="#" @click.prevent="expRecFollow(rec.id, index)">Follow</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="card mb-sm-4 status-card card-md-rounded-0">
|
||||||
<div class="card-header d-inline-flex align-items-center bg-white">
|
<div class="card-header d-inline-flex align-items-center bg-white">
|
||||||
<img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
|
<img v-bind:src="status.account.avatar" width="32px" height="32px" style="border-radius: 32px;">
|
||||||
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="status.account.url">
|
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="status.account.url">
|
||||||
|
@ -129,6 +159,7 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div v-if="modes.infinite == true && !loading && feed.length > 0">
|
<div v-if="modes.infinite == true && !loading && feed.length > 0">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
@ -480,9 +511,7 @@
|
||||||
this.max_id = Math.min(...ids);
|
this.max_id = Math.min(...ids);
|
||||||
$('.timeline .pagination').removeClass('d-none');
|
$('.timeline .pagination').removeClass('d-none');
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
if(window.outerWidth > 767) {
|
|
||||||
this.expRec();
|
this.expRec();
|
||||||
}
|
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue