Skip to content

Commit

Permalink
🚧 search progress
Browse files Browse the repository at this point in the history
  • Loading branch information
moisout committed Sep 13, 2020
1 parent 41ef482 commit 0f5cc3a
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 77 deletions.
71 changes: 27 additions & 44 deletions client/components/list/ChannelEntry.vue
Original file line number Diff line number Diff line change
@@ -1,26 +1,14 @@
<template>
<div class="channel-entry">
<div class="channel-entry-background" />
<nuxt-link
class="channel-entry-thmb"
:to="{ path: '/channel/' + channel.authorId }"
>
<div
v-if="!channel.authorThumbnails"
class="fake-thmb"
>
<nuxt-link class="channel-entry-thmb" :to="{ path: '/channel/' + channel.authorId }">
<div v-if="!channel.authorThumbnails" class="fake-thmb">
<h3>{{ channelNameToImgString() }}</h3>
</div>
<div
v-if="channel.authorThumbnails"
class="thmb-image-container"
>
<div v-if="channel.authorThumbnails" class="thmb-image-container">
<img
class="channel-entry-thmb-image"
:src="
commons.proxyUrl +
channel.authorThumbnails[2].url
"
:src="commons.proxyUrl + channel.authorThumbnails[2].url"
:alt="channel.author"
/>
</div>
Expand All @@ -33,13 +21,8 @@
>{{ channel.author }}</nuxt-link
>
<div class="channel-entry-stats">
<p class="channel-entry-videocount">
{{ channel.videoCount }} videos
</p>
<p
v-if="channel.subCount"
class="channel-entry-subcount"
>
<p class="channel-entry-videocount">{{ channel.videoCount }} videos</p>
<p v-if="channel.subCount" class="channel-entry-subcount">
{{ channel.subCount.toLocaleString('en-US') }}
subscribers
</p>
Expand Down Expand Up @@ -169,26 +152,26 @@ export default {
}
}
@media screen and (max-width: $mobile-width) {
width: calc(100% - 20px);
margin: 10px;
.channel-entry-thmb {
width: 100%;
height: 53vw;
.thmb-image-container {
position: relative;
top: 0;
left: 0;
transform: translateY(0);
.channel-entry-thmb-image {
top: 0;
transform: translateY(0px);
}
}
}
}
// @media screen and (max-width: $mobile-width) {
// width: calc(100% - 20px);
// margin: 10px;
// .channel-entry-thmb {
// width: 100%;
// height: 53vw;
// .thmb-image-container {
// position: relative;
// top: 0;
// left: 0;
// transform: translateY(0);
// .channel-entry-thmb-image {
// top: 0;
// transform: translateY(0px);
// }
// }
// }
// }
}
</style>
44 changes: 35 additions & 9 deletions client/components/search/RelatedSearches.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<template>
<div class="related-searches">
<BadgeButton
v-for="(keyword, index) in data.entries"
:key="index"
class="related-search-tag"
:href="`results?search_query=${keyword.q}`"
>
<p>{{ keyword.q }}</p>
</BadgeButton>
<p>Related searches</p>
<div class="related-keywords">
<BadgeButton
v-for="(keyword, index) in data.entries"
:key="index"
class="related-search-tag"
:href="`results?search_query=${keyword.q}`"
>
<p>{{ keyword.q }}</p>
</BadgeButton>
</div>
</div>
</template>

Expand All @@ -25,4 +28,27 @@ export default {
};
</script>

<style></style>
<style lang="scss">
.related-searches {
overflow: auto hidden;
scrollbar-width: thin;
box-sizing: border-box;
width: 100%;
height: 70px;
position: relative;
.related-keywords {
display: flex;
flex-direction: row;
width: auto;
position: absolute;
height: 35px;
.related-search-tag {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
}
}
</style>
47 changes: 23 additions & 24 deletions client/pages/results.vue
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default {
watchQuery: true,
asyncData({ query }) {
query.type = 'all';
query.limit = 20;
query.limit = 10;
const searchParams = SearchParams.parseQueryJson(query, query.search_query);
return ViewtubeApi.api
.search({ params: searchParams })
Expand Down Expand Up @@ -250,32 +250,31 @@ export default {
z-index: 10;
display: grid;
box-sizing: border-box;
@include viewtube-grid;
display: grid;
grid-template-columns: 200px repeat(auto-fill, minmax(300px, 1fr));
// grid-auto-rows: minmax(300px, auto);
grid-gap: 1em 2em;
@media screen and (max-width: $mobile-width) {
grid-template-columns: 1fr;
> div {
grid-column: unset !important;
}
}
.related-searches-container {
grid-row: 1;
grid-column: 1 / -1;
overflow: auto hidden;
scrollbar-width: thin;
box-sizing: border-box;
height: 45px;
width: 100%;
position: relative;
.related-searches {
display: flex;
flex-direction: row;
width: auto;
position: absolute;
.related-search-tag {
display: inline-block;
overflow: hidden;
white-space: nowrap;
}
}
}
.channels {
height: 100%;
position: sticky;
top: 0;
.channel-entry {
// position: sticky;
// top: 0;
}
}
.vertical-shelf {
grid-column-start: 2;
Expand All @@ -289,9 +288,9 @@ export default {
.movies {
}
.videos {
}
@media screen and (max-width: $mobile-width) {
grid-column-start: 2;
grid-column-end: -1;
@include viewtube-grid;
}
}
Expand Down

0 comments on commit 0f5cc3a

Please sign in to comment.