Update SearchResults.vue

This commit is contained in:
Daniel Supernault 2019-11-24 15:55:08 -07:00
parent 841ba2ea35
commit ac5d71b27f
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7

View file

@ -11,31 +11,31 @@
<div v-if="!loading && !networkError" class="mt-5 row"> <div v-if="!loading && !networkError" class="mt-5 row">
<div class="col-12 col-md-3 mb-4"> <div class="col-12 col-md-2 mb-4">
<div v-if="results.hashtags || results.profiles || results.statuses"> <div v-if="results.hashtags || results.profiles || results.statuses">
<p class="font-weight-bold">Filters</p> <p class="font-weight-bold">Filters</p>
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="filter1" v-model="filters.hashtags"> <input type="checkbox" class="custom-control-input" id="filter1" v-model="filters.hashtags">
<label class="custom-control-label text-muted font-weight-light" for="filter1">Show Hashtags</label> <label class="custom-control-label text-muted font-weight-light" for="filter1">Hashtags</label>
</div> </div>
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="filter2" v-model="filters.profiles"> <input type="checkbox" class="custom-control-input" id="filter2" v-model="filters.profiles">
<label class="custom-control-label text-muted font-weight-light" for="filter2">Show Profiles</label> <label class="custom-control-label text-muted font-weight-light" for="filter2">Profiles</label>
</div> </div>
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="filter3" v-model="filters.statuses"> <input type="checkbox" class="custom-control-input" id="filter3" v-model="filters.statuses">
<label class="custom-control-label text-muted font-weight-light" for="filter3">Show Statuses</label> <label class="custom-control-label text-muted font-weight-light" for="filter3">Statuses</label>
</div> </div>
</div> </div>
</div> </div>
<div class="col-12 col-md-9"> <div class="col-12 col-md-10">
<p class="h5 font-weight-bold">Showing results for <i>{{query}}</i></p> <p class="h5 font-weight-bold">Showing results for <i>{{query}}</i></p>
<hr> <hr>
<div v-if="filters.hashtags && results.hashtags" class="row mb-4"> <div v-if="filters.hashtags && results.hashtags" class="row mb-4">
<p class="col-12 font-weight-bold text-muted">Hashtags</p> <p class="col-12 font-weight-bold text-muted">Hashtags</p>
<a v-for="(hashtag, index) in results.hashtags" class="col-12 col-md-3 mb-3" style="text-decoration: none;" :href="hashtag.url"> <a v-for="(hashtag, index) in results.hashtags" class="col-12 col-md-3 mb-3" style="text-decoration: none;" :href="hashtag.url">
<div class="card card-body text-center"> <div class="card card-body text-center shadow-none border">
<p class="lead mb-0 text-truncate text-dark" data-toggle="tooltip" :title="hashtag.value"> <p class="lead mb-0 text-truncate text-dark" data-toggle="tooltip" :title="hashtag.value">
#{{hashtag.value}} #{{hashtag.value}}
</p> </p>
@ -49,7 +49,7 @@
<div v-if="filters.profiles && results.profiles" class="row mb-4"> <div v-if="filters.profiles && results.profiles" class="row mb-4">
<p class="col-12 font-weight-bold text-muted">Profiles</p> <p class="col-12 font-weight-bold text-muted">Profiles</p>
<a v-for="(profile, index) in results.profiles" class="col-12 col-md-4 mb-3" style="text-decoration: none;" :href="profile.url"> <a v-for="(profile, index) in results.profiles" class="col-12 col-md-4 mb-3" style="text-decoration: none;" :href="profile.url">
<div class="card card-body text-center"> <div class="card card-body text-center shadow-none border">
<p class="text-center"> <p class="text-center">
<img :src="profile.entity.thumb" width="32px" height="32px" class="rounded-circle box-shadow"> <img :src="profile.entity.thumb" width="32px" height="32px" class="rounded-circle box-shadow">
</p> </p>